Learn VBA & Macros in 1 Week!

CSS - Css/div Layout Table Style, Wont Work, Ever?

Full Excel VBA Course - Beginner to Expert

Css/div Layout Table Style, Wont Work, Ever?	View Content

I am trying to get a Table Style layout using only DIVs and CSS and every combination I could find doesn't seem to work when it involves being dynamic. Statically, it works fine.

In the image I attached, "1" is the final result I am trying to get.

The Red and Blue boxes at the top and bottom will always have a static height of about 25px, but I want the Green in the center to be dynamic, to take up the rest of the space not occupied by the Red and Blue boxes.

In example "2", if I set the green to 100% height, it will just flow outside the parent container. And if I don't set a height, as seen in example 3, it will just be a small bar and the bottom Blue box will just move on up with it.

Using a table would be easy since I can easily create that basic structure that would always work, but I'm trying to make something in all DIV and CSS and the past many months, I found no solution!

Anyone got any ideas that isn't Javascript based? Thanks!

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Div Tag Wont Work In Nvu Can Anyone Help Me Please?

Where Do I Begin Why Wont Anything I Do Work?

Pull Up Menu Wont Work In Ie7

Buttons, Background Wont Work

School Project - Side Bar Just Wont Work, Please Help

Image Links - Styleing Wont Work

Iframe Background-color Just Wont Work!

Link Styles In Seperate File Wont Work

Why Does My Css Style Not Work With Ie But Works With Firefox?

Css Style Print In Landscape Dosen't Work

Body Doesn't Work In My External Style Sheet

Background Image Doesn't Work From External Style Sheet

Help: Blog Wont Format Inside Table (ie Browser)

Links Wont Format Inside Table Class:onscroll

Cant Work Out Why Layout Is Wonky

Trying To Get Three Column Layout To Work...but With Certain Specs.

Using Css For Table Style?

Can A Sticky Footer Work With The Rest Of This Css Layout

Style Table Cell

Add Style To A Lable Within Html Table

Learn VBA & Macros for Excel in 1 Week!

Div Tag Wont Work In Nvu Can Anyone Help Me Please?

Similar Tutorials

I have the following coding

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>CSS Sample Page</title></head>

<body>

<table style="width: 765px; height: 426px;">

</table><div style="text-align: center;"></div><table style="width: 765px; height: 426px;">
<tbody>

<tr>

<td style="text-align: center;" width="50%"><font size="7">Web News</font></td>


<td>                         </td>

<td style="font-weight: bold; text-align: left;">"The latest in up-to-the-minute Web news,discussion, techniques, and <br>trends"</td>

</tr>


<tr>

<td colspan="3">
<h1 align="center"><br></h1><h1 align="center">Web Developers Embrace CSS</h1>

</td>

</tr>


<tr style="font-family: Helvetica,Arial,sans-serif;">

<td colspan="3"><h2 style="text-align: center;">Simple syntax, powerful design
tool</h2>

</td>

</tr>


<tr valign="top">

<td>
<p class="copy"><span style="font-variant: small-caps;">    Cascading Style Sheets (CSS)</span> is a style language for the
web. It uses common printing and display terminology to allow HTML and
XML authors control over the way web pages look.</p>

<p>Although designed in 1996, CSS is just now becoming a
useable style language because of a lack of support from the major
browsers. IE 5.5 for the Macintosh, released in 1999, is the first
browser to completely support the CSS1 specification. Support varies
across browsers, but both Netscape 6 and IE 5 for the Windows platforms
offer more complete (but still not perfect) CSS support.</p>

</td>

<td>    </td>

<td>
<p>    Style sheets accomplish the separation of content and
style that is integral to the open nature of data on the web.
Currently, web page code mixes both document structure information and
browser-based display properties, limiting the cross-platform
compatibility of the content.</p>

<p>With style sheets, the display properties are separate
from the content. This accommodates the diverse variety of devices that
are becoming available to browse the web. Whether you come to a web
site with a Palm Pilot, PCS phone, or Windows CE device, the server can
supply a style sheet that matches your display device. CSS2 supports a
variety of media devices, including print, that allows content
providers to single-source their data.</p>

</td>

</tr>

</tbody>
</table>

</body></html>

all works so far but the problem I am having is adding specific div tags to the H2 elements.
DIV class="subhead"> Simple syntax,powerful @Code in Nl 2nd:design tool</DIV>

if i try to add this style rule i get the above text show up in the browser and it wont align centrally.

also the cascading style sheets wont show up as small caps.

can anyone help me Im sorry to ask here but know of nowhere else to ask,

can someone please advice me or forward me to somewhere that can help please?

thanks

Where Do I Begin Why Wont Anything I Do Work?

Similar Tutorials

I am regreting taking this course so bad...Thanks alot for your help in my last problem, Im onto assignment 2 now and dont have the slightest clue what to do. The instructions are so unclear, and nowhere anywhere on the internet does it give a straight forward example of how to do a CSS.
I am starting with a blank page, using text pad link to a strict html. I dont know where to start and what to type. I am trying all the codes such as <h1> to put in my title and it wont work!
I got it to change color with the body color property but thats as much as I can do.
Can anyone give me some pointers on how to put heading and writing in my page, why wont it work? Is there a difference between this and when I put my markup in WYSIWYG? All I need to start is to put in my title Christinas cat page...
What does a stndard layout look like that will be easy for me to understand?
tyvm

Pull Up Menu Wont Work In Ie7

Similar Tutorials

Hello everybody!

Im am now designing a webpage with a pull-upmenu.

The menu can be seen he
http://www.fidelin.se/ucon/index.php

The problem in IE7 is that the dropup-items will disappear when you move the mouse over them. Any suggestions on how to solve this?

See the code in the post below.

I have not constructed the menu myself, as you might see.

Thanks in advance
Johan

Buttons, Background Wont Work

Similar Tutorials

School Project - Side Bar Just Wont Work, Please Help

Similar Tutorials

hi, i have a small website i need to make for a school project.

Ever since i added the CSS MENU

the sidebar just appears half in the middle of the site and no matter what i do, i cannot get it to the right edge.

I have tried margin-right but it does nothing, even if i put it at 5. Its 5 closer away from some strange margin almost in the center of the screen

HTML:::::::::::::::::::::::::::::::::::::::::::::::::::

</head>

<body class="about">

<div id="page-container">

<! header--------------------------------------------------------------->
<div id="header">
<h1><img src="images/headings/heading.gif"

width="700" height="76" alt="Enlighten Designs" border="0" /></h1>
<ul id="navigation">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Services</span></a></li>
<li><a href="#"><span>Take a tour</span></a></li>
<li><a href="#"><span>About us</span></a></li>
<li><a href="#"><span>Contact us</span></a></li>
</ul>
<p><h1><br>Thermal IR - What is it? </h1></p>

</div>
<! SIDEBAR A--------------------------------------------------------------->
<div id="sidebar">

<p>Sidebar, work please, Please work!</p>

</div>

<! CONTENT--------------------------------------------------------------->
<div id="content">
<div class="padding">

</div>
</div>

<! COPY RIGHT--------------------------------------------------------------->
<div id="copyright">

</div>

</div>

</body>
</html>

CSS:::::::::::::::::::::::::::::::::::::::::

MENU START/////////////////////////////////

#navigation a
{
color: #000;
background: ##00E5EE url(left-tab.gif) left top no-repeat;
text-decoration: none;
padding-left: 10px
}

#navigation a span
{
background: url(right-tab.gif) right top no-repeat;
padding-right: 10px
}

#navigation a, #navigation a span
{
display: block;
float: left
}
/* Hide from IE5-Mac \*/
#navigation a, #navigation a span
{
float: none
}
/* End hide */

#navigation a:hover
{
color: #fff;
background: #781351 url(left-tab-hover.gif) left top no-repeat;
padding-left: 10px
}
#navigation a:hover span
{
background: url(right-tab-hover.gif) right top no-repeat;
padding-right: 10px
}
#navigation ul
{
list-style: none;
padding: 0;
margin: 0;
}
#navigation li
{
float: left;
margin: 0 1em;
}

//////////////////////////////////////////MENU END

#page-container {
width: 760px;
margin: auto;
background: #c9c9d9;
}

body { font-family: Verdana; }

html, body {
margin: 0;
padding: 0;
color: black;
}
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
background: #ffffff;
}

.hidden {
display: none;
}

#header {
margin: left;
height: 250px;
background: #c9c9d9;
border-top: 1px solid #efefef;
}

#sidebar {
top: 200px;
float: right;
width: 170px;
padding: 5px;
line-height: 18px;
background: #AAAAAA;
border: solid 2px black;
}
#sidebar .padding {
padding: 25px;
}

#content {
margin-right: 240px;
line-height: 18px;
background: #c9c9d9;
}
#content .padding {
padding: 25px;
}

#copyright {
margin-left: 25px;
background: #c9c9d9;
}

h1 {
margin: 0;
padding: 0;
float: right;
margin-top: 57px;
padding-right: 31px;
}

#content h2 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}

#content p {
margin: 0;
padding: 0;
padding-bottom: 15px;
}

Image Links - Styleing Wont Work

Similar Tutorials

edit: the sites @ www.tomaustin.dsl.pipex.com/webdev

Ive been doing some googling and cant find out how it works

how do i apply attributes like a:link, a: hover to an image

I had some like

Code:

image a:hover, a:link, a:active, a:visited {
     border: etc..
}

this does not work..it comes up with the horrid blue and purple backgrounds

how do i do it?

tom:

)

Iframe Background-color Just Wont Work!

Similar Tutorials

Hi all,

I am trying to do something that I think is trivial, but just cannot seem to get this to work in IE!

I am trying to draw an IFRAME that contains a gray background that contains a document that has a white background. The result is supposed to make the scrolling document in the IFRAME look like a white piece of paper with a gray border of 8 pixels.

This works perfectly in Safari and Firefox, but no matter what I try, I cannot figure out how to get this to work in IE (IE8 specifically).

Here is the code: PHP Code:
<iframe name='monkey' src='poopy.html' scrolling='auto' frameborder='0'
style='background-color:gray;width:500px;height:150px;'></iframe>

And the document in the IFRAME is trivial PHP Code:
<div style='padding:8px;border:1px solid black;background-color:white;'>
This is a bunch of txt THis is a bunch of txt ... (repeat this
text a bunch so you have a scrollbar)
</div>

As far as I can tell, IE implements the background-color attribute for IFRAMES, but it seems to ignore the color - either that or its whacked-out box model requires some kinda bizarre workaround that I cannot find.

Thanks in advance for the help.

-- Jon

Link Styles In Seperate File Wont Work

Similar Tutorials

Hey all,

So i have two files my html file:
Code:

 
<html>
<head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>

<a href="#">this is a test</a>

</body>
</html>

And my css file:
Code:

a:link {color:#000000;text-decoration:none;}
a:visited {color:#000000;text-decoration:none;}
a:hover {color:#CC0000;text-decoration:underline;}
a:active {color:#000000;text-decoration:none;}

except that the styles don't work on the links. If i put the styles in <style> tags in the html head it works, but in a seperate file they don't, can someone help me?

thanks!
- legit

Edit, whoops sorry, I had the wrong name for my css file

Why Does My Css Style Not Work With Ie But Works With Firefox?

Similar Tutorials

Hi

I have a style made in CSS. It is a menu where if you hover over some of the menu a drop down box will appear. This works in Firefox but does not work in IE.

Here is the link: Look first in Firefox at my menu then look at it in IE.

http://www.bcit.gimppro.co.uk/index.php

Also is their some way to test my CSS code to make sure it works in all browser.

PHP Code:
#menu {
top:5px;
width: 8.87em; /* set width of menu */
background: #eee;
width: 100%;
}

#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: relative;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}

/* style, color and size links and headings to suit */
#menu a, #menu h2 {
font: bold 11px/16px arial;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu li {
/* make the list elements a containing block for the nested lists */
position: relative;
}

div#menu ul ul ul,
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 8.87em;
float: left;
}

div.container{
    position:relative;
    top:0px;
    left:0px;
    width:995px;
    height:auto;
}

#login{
    position:absolute;
    top:300px;
    left:745px;
    height: auto;
    width:240px;
    font: bold 11px/16px arial;
}

#content{
    position:absolute;
    top:300px;
    left:0px;
    height: auto;
    width:695px;
    margin:0 .25em;
    padding: 5px 15px;
    font: bold 11px/16px arial;
    border: 1px solid black;
}
#content h1, h2 {
    font-weight: bolder;
}

#banner{
    position:absolute;
    top:0px;
    left:0px;
    height: auto;
    width:1000px;
}

Css Style Print In Landscape Dosen't Work

Similar Tutorials

Hello

I would like to print my html page in landscape.
The page source is :
----
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="print" href="style/print.css" />
</head>
<body>
<table width="75%" border="1">
<tr>
<td>one</td>
<td>2</td>
</tr>
</table>
</body>
</html>
----
the style sheet is :
----
@page
{
size:landscape;
margin:3cm;
}
----

Why the page never print in landscape ???
The margin don't work too !
I have try why IE 6.0 and Netscape 7.1.

Thanks for your help

Anouk

Body Doesn't Work In My External Style Sheet

Similar Tutorials

Hi.

In my external style sheet i have this:

Code:

body
    {
	margin-left: 100;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
    }

I am completely new at CSS and am only doing it because supposedly my tables are out of fashon!

Thanks
Matt

Background Image Doesn't Work From External Style Sheet

Similar Tutorials

I hardly ever use css for thimgs like backgrounds, but I have a freelance client that has alot of interesting ideas about how a good website should look so I'm trying to make him happy.

When I have:
body {
background: url('resources/assets/background.jpg') no-repeat bottom left;
}

in the extranal css it doesn't work. If I put it into the page it works fine. None of the online css resources I've looked at mention why this should be. I've even tried using the complete http://www.server.com/blah/blah/ address and I get the same results.

Does this just not work from an external css, or am I missing something?

Thanks y'all.

Help: Blog Wont Format Inside Table (ie Browser)

Similar Tutorials

Hiya, im trying to place a blog inside a table and also have a picture above the table and some links.

In Mac Firefox and Camino it works perfectly. but in IE or Safari it just doesn't want to work.

Please help

Thanks guys

Links Wont Format Inside Table Class:onscroll

Similar Tutorials

Im using this to make an onscroll effect
Code:

table.left {border-collapse:collapse;
                float:left;
		  margin-left:10px;
		  margin-right:10px;
		  background:#8f8f8f;
		  padding:5px;
	          color:#000000;
                 font-family:Verdana;
		  text-decoration:none;
	
     }

td {padding-right:10px;
padding-left:10px;
padding-top:8px;
padding-bottom:8px;}

td.bg:hover {
background:url(images/yellow.png);
padding-right:10px;
padding-left:10px;
padding-top:8px;
padding-bottom:8px;



}

And the links don't format with the typical css markup
Code:

a:active {color:#000000;
         font-family:Verdana;
		 text-decoration:none;}
a:link {color:#000000;
         font-family:Verdana;
		 text-decoration:none;}
a:hover {color:#000000;
         font-family:Verdana;
		 text-decoration:none;}

Ive tried a couple different things like making td.bg:link, td.bg:active with the specifications->no luck
Note:this is in IE

Nevermind...I just figured it out..used a link class and set the visited attribute

Cant Work Out Why Layout Is Wonky

Similar Tutorials

Hi, on this page http://www.southampton-property.com/about/news/ the left hand property search doesn't align correct like it does on all other pages and I cant work out why, any ideas?

edit: fixed

Thanks!

Trying To Get Three Column Layout To Work...but With Certain Specs.

Similar Tutorials

Hello,

I have a div that is 500px wide, inside that div I need to have a footer that includes three columns placed at the bottom. The middle column will hold a graphic and under the graphic will be the 10 numbers (generated by a database). Then on the left and right side of that I need to have a div that will hold a graphic and text under the graphic. The left and right divs will be a fixed size, though the middle div will grow if the numbers are double digits (as opposed to having 1-10).

I also need to have the left and right placed right next to the middle div, so if the middle div gets larger, then the left will move to the left and the right will move to the right.

Does this make any sense???

So far everything I have tried as failed...I am going to include my latest code, which is very minimal.

CSS STYLES
Code:

#footer_wrap  { clear: left; width: 500px; height: 60px; }
.left   { float: left; width: 50px; height: 60px; }
.middle { clear: none; width: auto; height: 60px; margin: 0 auto; }
.right { float: right; width: 50px; height: 60px;

HTML CODE
Code:

                <div id="footer_wrap">
               		<div class="left">left</div>
                	<div class="middle">test</div>
                       <div class="right">right</div>
                </div>

Using Css For Table Style?

Similar Tutorials

Hi all i am currently in the process of playing with "display: table-cell" and such instead of tables and i am wondering how you can get a table-row to span across the table cells below it instead of just the first one?

Can A Sticky Footer Work With The Rest Of This Css Layout

Similar Tutorials

I am working on this layout. I have a header contained in an ap div that stretches the whole screen, A body with 2 sections, the upper portion scales all the way across, and the lower portion is centered in the middle, and I need to add a sticky footer that stretches across the whole page on the bottom. I can't figure it out and have tried a few options but none seem to work. Does anyone have any ideas on how to accomplish this. I know I can absolute position a footer at the bottom but I do not want a floating bar running across the screen incase someone with a super high resolution one day decides to view the page. Here is my code. If anyone can help I'd really appreciate it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>

<div id="headerDiv">
<div id="leftcontentDiv">
<div id="headermenuDiv">Home | About us | FAQ | Help | Reach us here</div>
<div id="logosearch_containerDiv">
<div id="logoDiv"></div>
<div id="searchDiv"></div>
</div>
</div>

<div id="rightcontentDiv">
<div id="signupDiv">New User? Signup | New Artist? Sign up</div>
<div id="loginDiv"></div>
</div>
</div>

<div id="bodytopDiv">
<div id="photoDiv"><img src="images/girlcap.jpg" width="589" height="349" /></div>
<div id="titlecontainerDiv"><img src="images/logo.png" width="519" height="118" /></div>
<div id="bodytopbottomDiv">
<table width="777" border="0" align="center" cellspacing="10">
<tr>
<td width="145">text goes here</td>
<td width="150">text goes here</td>
<td width="126">text goes here</td>
<td width="161">text goes here</td>
<td width="125">text goes here</td>
</tr>
</table>
</div>
</div>
<div id="lowerbodycontainer">
<div id="newalbumsDiv"></div>
<div id="topalbumsDiv"></div>
<div id="videosDiv"></div>
</div>

</body>
</html>

Style Table Cell

Similar Tutorials

Hello,

I have a table and I am styling its cells:

table.Grid td {background-color: red;}

Inside this table I will have some other tables but I don't want their cells to have the styles changed.

I see two options: give a class to Grid table cells:
table.Grid td.Grid {background-color: red;}

Reset the changes in child tables:
table.Child1 td, table.Child2 td, table.Child3 td {background-color: white;}

But can I apply the following style:
table.Grid td {background-color: red;}

And make it only for the cells inside that table but not inside the child tables in this code line?
... without needing to reset the styles on child table cells or give main cells a class ...

Thanks,
Miguel

Add Style To A Lable Within Html Table

Similar Tutorials

Hi. First of all i am new to CSS styling .

I am using asp.net and i have created an html table in wich i added some treeviews, labels and stuff.

I aslo created a StyleSheet where i wanna add style to a specific label within the table.

Maybe it's very simple but i don't know what else to do, i am trying to do that by ours.

For instance,

#Label1
{
color:Orange;
}

it's not working, if has no effect. Label1 is the name of the label.
I think i'm not refering correct the Label.

Should i add a reference to the table too? i tried something but it were wrong