Welcome to WebmasterWorld Guest from 174.129.151.95

Forum Moderators: not2easy

Message Too Old, No Replies

css header with image AND text links

   
3:11 am on Aug 8, 2007 (gmt 0)

5+ Year Member



Hey everyone, I'm new (to this forum and CSS), so please excuse my incredibly n00b-ish question. I've looked online for this, but could not find the answer anywhere and it's killing me.

Basically, I'm trying to figure out how to best code my header for all the pages on my site. It's not live yet (yes, that's how new I am), so I'll try to explain the problem I'm having the best I can.

I have an image in my header. I've set the image as my background on my CSS. But I also want to have (horizontal) text links at the bottom right of my header to use as my navigation menu. I'm using a UL list, and have it inline, but can't get it to get to the bottom right of my header (it now sits at the top right). It's annoying, and I don't know what I'm supposed to do. I tried vertical-align, but that doesn't seem to work. (The best example I could find online of what I'm trying to achieve is at huntercross.com/ -- he has an image and then the text-links to the right of it and at the "bottom" of the header). The relevant code is below. I have already tried using a top margin to push the list down in the header, but it ends up pushing the image down with it. Also, absolute positioning is not ideal as I'd like the text links to stay put and not move around when the browser resizes. Any and all help would be VERY much appreciated. Thanks!


#header {
background: url(../images/image1.jpg) no-repeat;
height: 81px;
border-bottom: 1px solid #ccc;
}

#navlist {
font-family: garamond, times, verdana, arial;
font-weight:bold;
text-align:right;
}

#navlist li {
display: inline;
padding: .9em;
}

#navlist a {
color: #009;
text-decoration: none;
}

#navlist a:hover {
color: #39F;
text-decoration: underline;
}

and the relevant XHTML:

<body>

<div id="container">

<div id="header">
<ul id="navlist">
<li id="about"><a href="#">About</a></li>
<li id="photos"><a href="#">Photos</a></li>
<li id="portfolio"><a href="#">Portfolio</a></li>
<li id="contact"><a href="#">Contact</a></li>
</ul>
</div>

4:04 am on Aug 8, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Try putting the <ul> in a <div>:

<!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-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#header {
background: url(../images/image1.jpg) no-repeat;
height: 81px;
border-bottom: 1px solid #ccc;
}

#navlist {
margin: 60px 0 0 0;
height: 20px;
float:right;
font: bold bold garamond,times,verdana arial;
text-align:right;
}
#navlist li {
padding: .9em;
display: inline;
}

#navlist a {
color: #009;
text-decoration: none;
}

#navlist a:hover {
color: #39F;
text-decoration: underline;
}
</style>
</head>

<body>
<div id="container">

<div id="header">
<div id="navlist">
<ul>
<li id="about"><a href="#">About</a></li>
<li id="photos"><a href="#">Photos</a></li>
<li id="portfolio"><a href="#">Portfolio</a></li>
<li id="contact"><a href="#">Contact</a></li>
</ul>
</div>
</div>

</body>

</html>

Marshall