homepage Welcome to WebmasterWorld Guest from 174.129.76.87
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
css header with image AND text links
phpwart

5+ Year Member



 
Msg#: 3416401 posted 3:11 am on Aug 8, 2007 (gmt 0)

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>

 

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3416401 posted 4:04 am on Aug 8, 2007 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved