Announcement

**Asher01** · Sep 5, 2011, 07:38 AM

I think you will find that most people will suggest that you entirely use div's instead of tables for a page layout. With div's, you'll have more control over what goes where. Especially when it comes to editing.

It may seem like a lot of work now, but really, if you switch to div's, things will be easier later... well, once you get a hang on how to use the positioning systems, (fixed, relative, absolute). I'm only just coming to full terms with them myself however once you play around with them a little and understand how they work, it makes life easier.

Also, although I haven't gone through your code in any detail... I can tell you that if used div's you would be able to get the effect you want with the menu.
You could break them up into separate pictures however with the divs, it would also be possible to keep them part of the picture and still have a clickable menu. That would mean overlaying a few div's ontop of each other though and kinda complicates things a lot more than if you just had the menu images separate from the top picture.

**czhou5** · Sep 6, 2011, 04:25 AM

Thanks a ton! Working on the divs now (http://sustainability.stanford.edu/cgi-bin/divtest.php). Do you have any tips for centering everything? I'm slowly playing with different parts of the code, but I'm wondering if there is something I am missing.

**Asher01** · Sep 8, 2011, 06:21 AM

You can center images vertically within a paragraph via using vertical-align:center

However I assume it's actually the div's you want centered?

One way I occasionally use to center div's within other divs is something like this:

Code:

.centered
{
width:90%;
margin-left:auto;
margin-right:auto;
}

Basically, that will make the div 90% the width of the div it is inside and automatically divide the remaining area between the two margins.
This is good for liquid layouts.... however I seem to come across problems every now and then with percentages.

The other way would be to manually define a padding and/or margin.

Consider this example:

Code:

.container
{
width:100px;
min-height:100px;
margin:0;
border:0;
padding-top:50px;
padding-right:50px;
padding-bottom:50px;
padding-left:50px;
background-color:#000000;
}

.content
{
width:100px;
height:100px;
border:none;
padding:0;
background-color:#FFFFFF;
}

Just remember, whatever padding or margin you allocate an element to have will add to it's total size in width or height. So #container is actually 200px X 200px.

If you are having trouble with a particular situation you need centering, feel free to post back and ask with your code and what you need done.

You can also read how positioning using padding and margins work here:

http://www.w3schools.com/css/css_margin.asp
http://www.w3schools.com/css/css_padding.asp

This also may be helpful:

http://www.w3schools.com/css/css_positioning.asp

Announcement

Navigation bar issues - image map? tables? divs?

Navigation bar issues - image map? tables? divs?

Comment

Comment

Comment