CSS: Tableless layout

Dev Shed Forums Sponsor:

February 16th, 2004, 10:55 PM

Taro

Registered User

Join Date: Feb 2004

Posts: 29

Time spent in forums: 8 h 29 m 42 sec
Reputation Power: 0

CSS: Tableless layout

Hi,

Learning CSS and trying to convert a table layout to DIVs.

Example.....

PHP Code:


		
			
 x---------------------------------------------------------x

|                                                         |

|                          Banner                         |

|                                                         |

x---------------------------------------------------------x

| Nav 1 | Nav 2 | Nav 3 | Nav 4 | [Nav graphic] | Nav 5   |

x--------------x------------------------------------------x

|              |                                          |

|     Menu     |                                          |

|    (Fixed    |             Introduction                 |

|    Height)   |            (Fixed Height)                | 

|              |                                          |

x--------------x------------------------------------------x

|                                                         |

|                                                         |

|                                                         |

|                       Main Text                         |

|            (Auto Height - So it can expand)             |

|                                                         |

|                                                         |

|                                                         |

x-----------------------------------------x---------------x

|              Closing Text               |    Photo      |

|             (Fixed Height)              |   (Fixed      |

|                                         |   (Height)    |

|                                         |               |

|                                         |               |

x---------x-------------------------------x-----x---------x

|         |      Graphic Footer Bar       |               |    

x---------x---------x-----------------x---------x---------x

|         |         |    Stats Bar    |         |         |

|         |         |                 |         |         |

x---------x---------x-----------------x---------x---------x

|         |         |   Text Nav Bar  |         |         |

x---------------------------------------------------------x

Problem:

How do I align the vertical columns (nav buttons especially)? I don't know enough about DIVs to know how to align them flush against each other.

That's 6 columns of graphic images.

Could someone post a code example to learn from?

Heads up welcome.

February 17th, 2004, 12:15 AM

jharnois

mod_dev_shed

Dev Shed God 20th Plane (14500 - 14999 posts)

Join Date: Sep 2002

Location: Atlanta, GA

Posts: 14,569

Time spent in forums: 1 Month 1 Week 2 Days 22 h 42 m 51 sec
Reputation Power: 835

Code:

<style type="text/css">
#banner
  {
  float: left;
  width: 100%;
  }
#nav1
  {
  clear: left;
  }
.nav
  {
  float: left;
  width: 20%;
  }
#menu
  {
  clear: left;
  float: left;
  width: 20%;
  }
#intro
  {
  float: left;
  width: 80%;
  }
#main
  {
  clear: left;
  width: 100%;
  }

Code:

<div id="banner">Banner</div>
<div id="nav1" class="nav">Nav 1</div>
<div id="nav2" class="nav">Nav 2</div>
<div id="nav3" class="nav">Nav 3</div>
<div id="nav4" class="nav">Nav 4</div>
<div id="nav4" class="nav">Nav 5</div>
<div id="menu">Menu</div>
<div id="intro">Intro</div>
<div id="main">Main</div>

There are other options. You could use absolute positioning depending on your implementation. I recommend reading sections 8-16 of the w3c's CSS recommendation to learn more about the posibilities. Another good place to start is http://glish.com/css.

__________________
# Jeremy

Explain your problem instead of asking how to do what you decided was the solution.

February 17th, 2004, 02:36 AM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,674

Time spent in forums: 1 Month 3 Days 15 h 15 m 50 sec
Reputation Power: 687

Here's another approach. It combines float and static positioning. http://garyblue.port5.com/webdev/layouttrial.html

I also highly recommend Big John's site, /*Position Is Everything*/. Every article is worthy of study.

cheers,

gary

__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.

February 17th, 2004, 04:08 AM

Taro

Registered User

Join Date: Feb 2004

Posts: 29

Time spent in forums: 8 h 29 m 42 sec
Reputation Power: 0

Thank you, guys!

Did the trick! Been experimenting this morning and figured out the DIVs needed a "wrapper". Was doing it without one, with quite unpredictable results. :/

Have to get into the mindset of treating DIVs just like nesting tables.

Trying to code this page as XHTML with an external CSS. It sure does look more organized than trying to nest 10 tables!

Thanks again,
Taro

February 17th, 2004, 01:23 PM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,674

Time spent in forums: 1 Month 3 Days 15 h 15 m 50 sec
Reputation Power: 687

Quote:

Have to get into the mindset of treating DIVs just like nesting tables.

No! You must get entirely away from the nested table paradigm. CSS positioning is entirely different. Nesting is only one tool among many. Again, I suggest Big John's site, especially this article for starters.

Notice that in my example, except for the unnecessary wrapper, there is no nesting. Everything is positioned by floating or using the normal flow.

The wrapper div is a convenience only. It allows for easy sizing and, in this case, centering. The size was set as a percentage of the viewport. It could just as easily been made fixed, or proportional to the user's font size.

cheers,

gary

February 19th, 2004, 11:28 AM

Taro

Registered User

Join Date: Feb 2004

Posts: 29

Time spent in forums: 8 h 29 m 42 sec
Reputation Power: 0

Quote:

Originally Posted by kk5st

The wrapper div is a convenience only. It allows for easy sizing and, in this case, centering. The size was set as a percentage of the viewport. It could just as easily been made fixed, or proportional to the user's font size.

How about vertical aligning?

Experimenting with the positioning between browsers (IE 6; Opera; Mozilla Firefox; Netscape 7) and can't seem to get Firefox or Netscape to be flush with the top (no top margin).

Is there a way around that besides two seperate stylesheets?

February 19th, 2004, 02:16 PM

jharnois

mod_dev_shed

Join Date: Sep 2002

Location: Atlanta, GA

Posts: 14,569

Time spent in forums: 1 Month 1 Week 2 Days 22 h 42 m 51 sec
Reputation Power: 835

Try no top padding either:

Code:

body
  {
  margin: 0;
  padding: 0;
  }

February 19th, 2004, 03:19 PM

brianellisrules

Contributing User

Join Date: Feb 2004

Posts: 36

Time spent in forums: 4 h 46 m 38 sec
Reputation Power: 5

Quote:

Originally Posted by jharnois

Code:

.nav
  {
  float: left;
  width: 20%;
  }

I've been playing around with a similar layout scheme and have had some interesting results when using a percentage to state the width of the .nav div. IE and Mozilla each interpreted it differently (based on padding, margin and border size) and in one browser it would wrap, while in the other it would be perfectly sized. (I had an overall div to center the content, which was a fixed width and that caused it to wrap). Weird stuff.

February 19th, 2004, 03:31 PM

jharnois

mod_dev_shed

Join Date: Sep 2002

Location: Atlanta, GA

Posts: 14,569

Time spent in forums: 1 Month 1 Week 2 Days 22 h 42 m 51 sec
Reputation Power: 835

Not wierd at all ... very common and well documented. In short: Microsoft can't read. Basically, they didn't read the w3c recommendation correctly and screwed everything up. IE5.X includes the padding, margin, and borders in the width, while Mozilla does it right and adds the padding, margin, borders to the width.

http://glish.com/css is a good place to read more on the problem and get solutions.

#10

February 19th, 2004, 03:35 PM

Taro

Registered User

Join Date: Feb 2004

Posts: 29

Time spent in forums: 8 h 29 m 42 sec
Reputation Power: 0

This is the code I'm experimenting with......

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>How do you vertical align elements in Mozilla?</title>
<style type="text/css">
<!--/*--><![CDATA[/*><!--*/
body {
margin : 0; 
padding : 0; 
background-color : #000; 
} 
#wrapper {
width : 98%; 
margin-top : 0; 
margin-bottom : 0; 
margin-left : 10px; 
margin-right : 0; 
background-color : #000; 
} 
#text {
float : left; 
width : auto; 
height : auto; 
background-color : #000; 
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : 14px; 
font-weight : bold; 
color : #969696; 
text-align : justify; 
} 
.photo1 {
float : left; 
margin-top : 1em; 
margin-left : 0; 
margin-right : 1em; 
margin-bottom : 2em; 
} 
.photo2 {
float : right; 
margin-top : 1em; 
margin-left : 1em; 
margin-right : 0; 
margin-bottom : 2em; 
} 
/*]]>*/--></style>
</head>
<body>
<div id="wrapper">
	<div id="text">
	<p><span class="photo1"><img src="/images/xhtml/whatthe.png" width="200" height="220" longdesc="/i_am/a/designer/not_a/programmer/index.htm" alt="What the heck is this?" /></span>Some sample text that has no other other reason but to show the alignment of text on this page. Interesting that it will break only at certain points.
	<span class="photo2"><img src="/images/xhtml/onestandardplease.png" width="200" height="220" longdesc="/too_many/browsers/index.htm" alt="How many browsers now must we design for?" /></span>Some sample text that has no other other example of example but to show the alignment of text on this page. Interesting that it will break only at certain points. Mozilla Firefox and Netscape 7 are claimed to be swell browsers, yet are a b*tch to wrap a design around.</p>
</div>
</div>
</body>
</html>

Perhaps someone can spot where the problem is, as the code is W3C validated.

Taro

#11

February 19th, 2004, 03:51 PM

jharnois

mod_dev_shed

Join Date: Sep 2002

Location: Atlanta, GA

Posts: 14,569

Time spent in forums: 1 Month 1 Week 2 Days 22 h 42 m 51 sec
Reputation Power: 835

What exactly are you trying to align vertically? Tell me what you expect this to look like.