...

View Full Version : Menu positioning - A horizontal UL with images either side, the image drops down desp



jwhittlestone
09-17-2007, 10:44 AM
Hi All.

I have a problem with the horizontal main nav. I want to include images either side of the UL. I have managed the left image, but the right image drops down to the next line, despite using display:inline for the container div and the ul.

To see what i mean: http://magazine.foxybingo.com/layout_test/help/

Here is the HTML code
<code>
<div id="nav"><img src="images/fmb_nav_left.gif" align="middle" style="float:left">
<ul>
<li><a href="#">home</a> | </li>
<li><a href="#">life</a> | </li>
<li><a href="#">love</a> | </li>
<li><a href="#">looks</a> | </li>
<li><a href="#">gossip</a> | </li>
<li><a href="#">nice nosh</a> | </li>
<li><a href="#">destiny</a></li>
</ul>
<img src="images/fbm_nav_right.gif" align="middle"></div>
</code>

And here is the relavent css code
<code>
#nav img {display:inline}
#nav ul { padding:0px; width:745px; background-color:#feae04; height:20px}
#nav ul li{display:inline; list-style-type:none}
/* fonts */
#nav ul li a {text-transform:capitalize; color:#000000; text-decoration:none; font-weight:bold; font-size:0.8em}
#nav ul li a:hover {text-decoration:underline}
</code>

Any ideas on why it's dropping down to the next line rather than appearing next to the ul?

any help greatly appreciated :)
thanks

jon

jlhaslip
09-17-2007, 10:48 AM
Float:right the second Image.

http://jlhaslip.com/mlafever/index.html

*edit*

just reviewed that link, looks like the owner modified some stuff. I'll post the original code as soon as i find a copy around here... :)

*another edit*

well, anyways, can't find the original validated page, but float the second image to the right and you might be okay with what you have there.

And check this out: http://w3schools.com/css/pr_pos_vertical-align.asp or maybe this one: http://w3schools.com/css/css_reference.asp#positioning

I can't find align= on either of them. I think it is deprecated... YUP!, sure is: http://www.w3schools.com/tags/tag_img.asp

effpeetee
09-17-2007, 11:31 AM
This is from my PC.
IE7 - 1024x728

Frank

jlhaslip
09-17-2007, 12:19 PM
Couple of other things:

set the width of the nav ul to 100%
change the order of the html so that the second image is above the ul id=nav


#nav ul { padding:0px; width:100%; background-color:#feae04; height:20px}

<div id="nav">

<img src="Your%20Page%20Title_files/fmb_nav_left.gif" style="float: left;" align="middle" />
<img src="Your%20Page%20Title_files/fbm_nav_right.gif" align="middle" style="float:right;" />
<ul>
<li><a href="#">home</a> | </li>
<li><a href="#">life</a> | </li>
<li><a href="#">love</a> | </li>
<li><a href="#">looks</a> | </li>
<li><a href="#">gossip</a> | </li>
<li><a href="#">nice nosh</a> | </li>
<li><a href="#">destiny</a></li>
</ul>
<div id="main">
The ul is a block level element, so there is a "newline" that comes with it. Having the right-hand image follow it, of course, forces it to be below the block level element. Float it into position first and the ul will fit between them.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum