PDA

View Full Version : AFGGHHH! Menu second link droping


Creative Insanity
09-16-2006, 09:56 AM
Ok this is causing me a headache and I need a fix please people.

Ok here is the CSS for the menu system.
/* menu section */
.menu{
list-style-type: none;
margin: 0;
padding: 0;
width: 131px;
}

.menu li a{
background-image:url(../images/but_off.gif);
background-repeat:no-repeat;
margin-left:190px;
width:131px;
height:31px;
font:90% Tahoma bold;
color:#FFF;
display:block;
text-decoration:none;
text-align:center;
padding-top:6px;

}
.menu li a:hover, .menu li a:focus{
background-image:url(../images/but_on.gif);
background-repeat:no-repeat;
color:#000;
}
/*menu section end */
and the html
<div id="nav">
<ul class="menu"> Home (#)[/list]
<ul class="menu2"> News (#)[/list]
</div>
Now what is happening is showing in the image below, they are ment to be in a line.
Any ideas??

chriskq
09-16-2006, 03:30 PM
float the li left.

then remember to clear after the last floating element

eg: .cDiv { clear: left; } = <div class="cDiv"></div>

and i guess the margin-left shouldnt be on the li, instead it should be on the ol or ul class (whatever one ur using)

give that a go.

Creative Insanity
09-16-2006, 09:30 PM
The clear makes sence.. I have a nice clear that works a treat. Let you know what happens chris.

Creative Insanity
09-16-2006, 09:53 PM
Naa chris suggestions done nothing at all. Damn hunting time.. Oh the pain.

domedia
09-16-2006, 10:43 PM
For sure keep them to one UL. It's one menu list, so it's several LI's and one UL. Actually, all my nav system the last couple of years have been made using a ul/li list, horizontally and vertically. Absolutely love it :-)

*tons* of really good examples of horizontal lists doen with CSS here:
http://css.maxdesign.com.au/listamatic/

Creative Insanity
09-16-2006, 10:47 PM
Cheers Dom.. yeah this site is for a mates wife and nothing but a headache.. but he is a good mate so worth the effort in my books.

Ta for that list dom.. gunna BM that!

Let you all know how I go. Maybe it is the HORRID template he made for her that is putting me off LOL.

Creative Insanity
09-17-2006, 01:20 AM
Now I am going mental and blowing bubbles LOL

Ok I got them to line up with info from Dom's link.. but as you can see the bg images are not full size. No idea.. I tried some padding which worked, however if the text is more than 4 chars.. yeah you guessed.. stuffs up.

The new css
/* menu1 section */
#nav{
width:900px;
height:31px;
background-image:url(../images/nav.gif);
background-repeat:no-repeat;
padding-left:166px;

}
#navlist ul
{
white-space: nowrap;
padding: 0;
}
#navlist li{
display: inline;
list-style-type: none;
}
#navlist a{
background-image: url(../images/but_off.gif);
background-repeat:no-repeat;
width:131px;
height:31px;
color:#FFF;
text-align:center;
font: 80% Tahoma bold;
text-decoration:none;

}
#navlist a:hover, #navlist a:focus{
background-image: url(../images/but_on.gif);
color: #000;
}

and html
<div id="nav">
<ul id="navlist">
Home (#)
News (#)
[/list]
</div>
and the images is what I am getting and cannot see why I am not getting the full image size.. I can only see it get it when the display method is block, but then they drop down under each other.

Creative Insanity
09-17-2006, 02:49 AM
Well I was working away trying to get the graphics to work and thought I better look at what links he wants for this sucker.

LIFE SAVER!
To many links for my idea and would of gone over the nav edge. WHEW!
All that work for nothing, but what the.. so have settled for this.

davidj
09-17-2006, 10:47 AM
ok CI

here is a simple work-around for your menu headaches...

just replace the with a button image!!
<table width="82%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Ta-Da..

Creative Insanity
09-17-2006, 07:29 PM
but but but.. DJ.. that is a HORRID table? Didn't you know that I have changed colours now. Tables are not me now.

chriskq
09-18-2006, 12:32 AM
opps i didnt realise in my first reply that u coded the menu this way.
<ul class="menu"> Home (#)[/list]
<ul class="menu2"> News (#)[/list]
closing of 2 [/list] tags.

so teh easy fix (with sticking to my first reply)
<ul class="">


<div class="cDiv"></div>
[/list]


that will work fOO sure!.... get the menu working, then worry about the links

Creative Insanity
09-18-2006, 03:33 AM
display: inline;
This is the problem. If I want the full image then I have to use block as the display type and they drop. But with inline they are side by side but the full image does not show.

Didin't work either chris.. the still drop and no image shows at all.
No matter as I have settle for simple text menu.

domedia
09-18-2006, 01:56 PM
CI you settled for the nav above right?

Creative Insanity
09-18-2006, 07:22 PM
Yeah I did. Looks ok and besides the one I was trying to get going would of been over the edge with the links there anyway.