Do away with tables via CSS - Positioning Problems 1

Muppsy007 · May 20, 2004

Hi, I just up and decided that I'd have a go at completely doing my next project in CSS rather than use any tables at all.

I'm having trouble getting my head around the positioning sytstem.

What I want is roughly this:
----------------------------------------
|orange box | blue box |
|180px wide | covers rest of window |
|75px high | 75px high |
----------------------------------------
| blue | orange (both 22px high) |
----------------------------------------
| | |
| | |
| | |
| Menu | Content |
| 180 wide | covers rest of window |
| 100% high | 100%high |
| | |
| | |
| | |
----------------------------------------

Now I have managed to do this using absolute positioning, by positioning each component exactly where it should be. But after reading a bit more, I think I might be on the wrong track with this and I wanted to check it before I go further.

CSS:
.top_container {
width: 100%;
height: 75px;
}

.top_left_box {
background-color: #FFCC33;
padding: 0px;
float: left;
position: absolute;
left: 0px;
top: 0px;
height: 75px;
width: 180px;
text-align: center;
vertical-align: middle;
}
.top_banner {
background-color: #CCFFFF;
padding: 0px;
float: left;
position: absolute;
left: 180px;
top: 0px;
height: 75px;
width: 100%;
}
.top_rule_left {
background-color: #000099;
position: absolute;
left: 0px;
top: 75px;
height: 22px;
width: 180px;
}
.top_rule_right {
background-color: #FFCC33;
position: absolute;
height: 22px;
width: 100%;
left: 180px;
top: 75px;
}
.left_menu_container {
background-color: #000099;
height: 470px;
width: 180px;
position: absolute;
left: 0px;
top: 97px;
}

HTML:
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="styles/ldc_main_styles.css" rel="stylesheet" type="text/css">

</head>

<body>
<div class="top_left_box"> </div>
<div class="top_banner"> </div>
<p> </p>
<p> </p>
<p class="top_rule_left"> </p>
<p> </p>
<p class="top_rule_right"> </p>
<p class="left_menu_container"> </p>
</body>
</html>

The exact problem i'm having is I want to put a logo in the top left container. It needs to be centered (done that) and also in the middle of the cell vertically.

I can't for the life work out how to do this using vertical-align or padding so I am starting to feel I'm digging myself into a hole and could be in trouble when it comes to insert more content.

Is absolute positioning definately the way I should be attacking this?

Thanks in advance.

peacecodotnet · May 20, 2004

I'm sorry that this posting isn't really helpful, but I think you should stick with tables. Apply CSS clases to the table cells so that they look the way you want them to, and just use the table for layout. Seems less complicated to me.

Peace out,
Peace Co.

petey · May 20, 2004

Hi. You can set the logo as a background image with CSS and then you can center it so that it always hangs in the exact middle of the box, even if the box or logo itself are resized.

Code:

/* example */
div.top_left_box { 
background:url(logo.gif); 
background-repeat:no-repeat; 
background-position: 50% 50%;
}

http://www.drpeterjones.com/

News and views of some obscure guy

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Do away with tables via CSS - Positioning Problems 1

Muppsy007

Programmer

peacecodotnet

Programmer

petey

Programmer

Similar threads

Part and Inventory Search

Sponsor