PDA

View Full Version : Need help with header layout in CSS

AgentRiot
08-23-2007, 10:27 AM
I've been trying to layout a header section of a website, trying to duplicate the original look, but in CSS rather than tables.

I want to have a logo image in the left hand corner (spanning the height of the header), and to the right of the image (horizontally centred in the remaining width of the header) a bar of links that remains at the bottom of the header and the title of the site centred vertically in what remains above the link bar.

Here's what I've come up with so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Header Test</title>
<link rel="stylesheet" type="text/css" href="css/HeaderStyle.css" />
</head>
<body>

<div id="header">
<img class="logo" src="images/logo.jpg" alt="logo" />
<h2>Website Title Goes Here</h2>
<ul id="topNav">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
<li>link 5</li>
</ul>
</div>

</body>
</html>



html, body
{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}

#header
{
height: 84px;
margin: 0 10%;
background-color: #BFA17F;
}

#header h2
{
padding: 0;
margin: 0;
text-align: center;
}

img.logo
{
float: left;
}

#topNav
{
background-color: yellow;
text-align: center;
padding: 0;
}

#topNav li
{
list-style: none;
display: inline;
}


The image's dimensions are 159px X 84px.

Attached below is a screenshot of what it looks like to me now in Firefox. So, basically, I would like to move that yellow link section down to the bottom of the header and have the "Website title goes here" section to be vertically centred in the brown area above the links.

I've tried playing around with this, but can't quite pull off the desired effect (at least not without using code which feels sloppy to me). I'm not sure if I need more divs or less divs. Can anyone suggest what I should do, or suggest a better way to go about this?
Arbitrator
08-23-2007, 11:56 AM
Perhaps this [1] is what you want? Note that I assumed that the logo was presentational rather than content, so it’s displayed as a CSS background.


http://www.jsgp.us/demos/cf122079.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-Latn">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo for CodingForums.com Thread 122079</title>
<meta name="Author" content="Patrick Garies">
<meta name="Created" content="2007-08-23">
<meta name="Revised" content="2007-08-23">
<style type="text/css" media="all">
* { margin: 0; padding: 0; }
html { background: white; color: black; font: 16px sans-serif; }
#header { height: 84px; padding: 0 0 0 159px; background: url(article_a.png) 4px -29px; text-align: center; }
#header h1 { background: #ddd; line-height: 64px; font-size: 2em; }
#header ul { background: #eee; line-height: 20px; }
#header li { display: inline; }
</style>

</head>
<body>

<div id="header">
<h1>title goes here</h1>
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
<li>link 5</li>
</ul>
</div>

</body>
</html>
AgentRiot
08-23-2007, 08:40 PM
Yes, that's what I was looking for. Thank you.

One little thing though. I notice if you change the font size in the browser the layout breaks. Is there anything that prevent this?
Arbitrator
08-24-2007, 03:12 AM
One little thing though. I notice if you change the font size in the browser the layout breaks. Is there anything that prevent this?Yes, you can use the height property to prevent the box heights from changing. You would use the overflow property to define how the text overflows when it no longer fits in the constrained box.

I’ve slightly adjusted the code in the live demo [1]; I used overflow: auto since it still allows the text to be accessed when it overflows. Since the lower box has a small height, I notice that Firefox 2 doesn’t provide the scroll bars for it and Safari 3 (beta) shows only a partial scrollbar; in both cases, you can still access the text via mouse wheel scrolling though, so it’s fine, I guess.


http://www.jsgp.us/demos/cf122079.html