Hi,
If you set the ul to clear:right it will appear on a new line if that's what you meant.
Code:
#headerinset ul {
float:right;
display:inline;
clear:right;
}
You can't wrap an anchor around a div as it is invalid and the anchor would need ot be iside the block element. If you want the anchor the size of your h1 then set the size of the h1 and set the inner anchor to display:block width appropriate dimensions.
I notice that you are using double id's to target some elements.
e.g.
Code:
#header #headerinset {
margin: 0 auto;
height:115px;
}
As #headerinset is unique there is no need to use a full path name unless you need it to have more weight. Keep it simple and it will be easier to manage, less weight and faster.
With classes you do often need full pathnames as you can change their meaning depending on context but id's are unique to the document and there can only be one on the page. Although you could use a pathname if you wanted the same id on another page to behave differently but I don't think that's required here.
I would reduce it to something like this (of course I can't see your image so I may have missed something) 
Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#header {
width:100%;
height:115px;
background-image:url(images/header_background_02.png);
}
#headerinset {
margin: 0 auto;
height:115px;
}
#logo {
width:244px;
height:115px;
background: url(images/logo.png);
}
#logo h1 {
text-indent:-9999px;
width:244px;
height:115px;
}
#logo h1 a{
width:244px;
height:115px;
display:block;
}
ul#navtop a {
color:#585858;
text-transform:uppercase;
font-size:12px;
text-decoration:none;
font-weight:bold;
}
ul#navbottom a {
color:#fff;
text-transform:uppercase;
font-size:13px;
text-decoration:none;
}
#headerinset ul {
float:right;
display:inline;
clear:right;
}
#headerinset li {
float:left;
padding-left:25px;
}
</style>
</head>
<body>
<div id="headerinset" class="container_12">
<div id="logo">
<h1><a href="front_page.php">icom printmanagement</a></h1>
</div>
<!-- End of logo Div -->
<ul id="navtop">
<li><a href="index.php" title="icom Print Management">HOME</a></li>
<li><a href="" title="icom Print Team">TEAM</a></li>
<li><a href="" title="Key Brands">KEY BRANDS</a></li>
<li><a href="" title="The Blog">BLOG</a></li>
<li class="navHightlight"><a href="" title="Visit Our Twitter Page">TWITTER</a></li>
<li class="navHighlight"><a href="" title="Administrators Log in Here">LOGIN</a></li>
</ul>
<ul id="navbottom">
<li><a href="index.php" title="Healthcare">HEALTHCARE</a></li>
<li><a href="" title="Direct Mail">DIRECT MAIL</a></li>
<li><a href="" title="Local Government">LOCAL GOVERNMENT</a></li>
<li><a href="" title="Membership">MEMBERSHIP</a></li>
</ul>
</div>
<!-- End of Header Inset Div -->
</body>
</html>
I'm also thinking that the div around the h1 is unnecessary from the code shown above and the image could be applied direct to the h1 and the surrounding div removed completely.
Hope it helps anyway.
Floatint to inline lists to the right but on seperate lines
Originally Posted by Owz2004
Bookmarks