PDA

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.