Floatint to inline lists to the right but on seperate lines

HTML & CSS
1

Hi,

I’ve done a design that im implementing, but I’m having difficulty with the header navigation.

Im trying to create two horizontal navigation lists that sit on two seperate lines in the header like this My Design.

In the header you’l notice that the two lists are on seperate lines. How do I go about doing this. Currently my code for the header is as follows:

<div id="headerinset" class="container_12">
	
	<a href="front_page.php" title="icom works ltd">
	
	<div id="logo">
		<h1><a href="front_page.php">icom printmanagement</a></h1>
	</div><!-- End of logo Div -->
	
	</a>
			
			
			<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 -->

My Css is


#header{
	width:100%;
	height:115px;
	background-image:url(images/header_background_02.png);
	
}

#header #headerinset {
	margin: 0 auto;
	height:115px;	
}	


#logo {

	width:244px;
	height:115px;
	background: url(images/logo.png);

}

#logo h1 {
	text-indent:-9999px;
}




#headerinset ul#navtop a {

	color:#585858;
	text-transform:uppercase;
	font-size:12px;
	text-decoration:none;
	font-weight:bold;

}

#headerinset ul#navbottom a {

	color:#fff;
	text-transform:uppercase;
	font-size:13px;
	text-decoration:none;

}


#headerinset ul {
	
	float:right;
	display:inline;
	

}

#headerinset li {

	float:left;
	padding-left:25px;
	

}

I know that If i created a div around the two lists and set the width to the width of the widest navigation list, it would force the other one below it, but I dont want to over do the Div’s, and was hoping there’d be a solution without it…

Any help would be great.

Thanks

2

Hi,

If you set the ul to clear:right it will appear on a new line if that’s what you meant.


#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.


[COLOR=#cc00cc]#header[/COLOR] [COLOR=#cc00cc]#headerinset[/COLOR] [COLOR=#66cc66]{[/COLOR] 
    [COLOR=#000066]margin[/COLOR]: [COLOR=#993333]0[/COLOR] [COLOR=#993333]auto[/COLOR]; 
    height[COLOR=#3333ff]:[COLOR=#993333]115px[/COLOR][/COLOR];    
[COLOR=#66cc66]}[/COLOR]

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) :slight_smile:


<!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&#37;;
    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.

3

Hi,

Apologies for the poorly worded title of this post, I type way to fast for my brain…

Thanks very much, that’s a great help. I’ve made the changes and taken all of that on board. It all worked out as expected.

My only issue now is the two lists are actually placed outside of the header boundaries…

I’ve used firebug and it shows the distinct header div and when I inspect the nav lists, they are outside of the header div. Do you why this might be the case?

The mark up is exactly as stated on my previous post?

Thanks for your help…

4

Hi,

I can’t see the html for the #header element but I’m guessing that you haven’t cleared the floats or that the height on your header is too small to contain the elements

Do you have a working example or revised full code that I can look at?

5

Cheers Paul,

This is the whole Header div and it’s contents:

<div id="header">

	<div id="headerinset" class="container_12">
		
	
	
		<a href="front_page.php" title="icom works ltd"><h1>icom Print Management</h1></a>
	
	
			
			
			<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" class="navHighlight">BLOG</a></li>
				<li class="navHightlight"><a href="" title="Visit Our Twitter Page">TWITTER</a></li>
				<li><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>
			
			
		<br clear="both" />	
		
		
	</div><!-- End of Header Inset Div -->
	
	
	
</div><!-- End of Header Div -->

I’ve put in a clear line break… But it still fails to work…

6

That’s because there is no attribute called clear :). Place it in style tags and replace your <br> with this

<br style="clear:both;height:0;font-size:0;" />

Move it to a class though and remove the inline styling (done above to show)

7

I have the clear style already assigned… so its not that, my one should work fine…

I tried placing it in several locations after the different ul’s and the div’s but no luck…

:-S

8

Huh? This is not a valid claer

<br clear=“both” />

There is no attribute called “clear” in HTML. Your “clear” is wrong :).

9

Sorry I meant, I have put a clear class in correctly but still no joy…

Am I missing something?

10

I’ve set the background of the header to black, to show you the boundaries of the header area, you can see the two lists are outside

here is the image

11

Have you floated the h1 to the left as well? The floated menus on the right will start on a new line as they will not rise up above static content that comes before them (the h1) in the html. Floats must come first on the html if you want block content to rise alongside.

Note also that you can’t wrap an h1 in an anchor as it is invalid. The anchor needs to be inside the h1.


[COLOR=#009900][COLOR=#000066][B][/B][/COLOR][/COLOR][COLOR=#009900][COLOR=#000066][B]<h1>[/B][/COLOR][/COLOR] [COLOR=#009900][COLOR=#000066][B]<a[/B][/COLOR] [COLOR=#005500]href[/COLOR]=[COLOR=#CC0000]"front_page.php"[/COLOR] [COLOR=#005500]title[/COLOR]=[COLOR=#CC0000]"icom works ltd"[/COLOR][COLOR=#000066][B]>[/B][/COLOR][/COLOR]
icom Print Management[COLOR=#009900][COLOR=#000066][B]</a></h1>[/B][/COLOR][/COLOR][COLOR=#009900][COLOR=#000066][B][/B][/COLOR][/COLOR]

You can set the anchor to display:block and give it a width and height to match your image etc.

12

Thats correct Paul,

Just re arranged it and it works,

thanks alot, that’s very interesting. So if I have floated items in a div alongside block level items then I should always place the floated elements before the block level elements in my code?

13

Yes that’s right and it’s quite logical if you think about it.:slight_smile:

If a float rose up alongside the html above it then it would just keep rising up and up until it disappeared out of the top of the monitor.

A float will float from the position that it occupies in the normal flow and will then float left or right as required. It will not rise upwards but will allow following elements to wrap as required assuming there is room.

A float will only rise upwards if it follows another float and there is room for them both to fit in the space above.