Another Kind Of Css Background Float Trouble now with a ul

[Tyssen 0]

How'd you manage to post a topic with no real content?

[Lozbo 0]

i dont know what happened, i did posted my content, anyway if a mod sees this can it be fixed? heres what i wanted to post:

-->

Hope you guys dont mind hehe, i now have another problem (as i did happen to solve the last one about floating)...

This one is about a horizontal menu (based on sucker fish menu from ala (a list apart), inside a containing div... the html is like this:

<div id="main_menu">
<ul>
 <li>Menu Item
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
 </li>
</ul>

Basically, (of course, with aditional items) this is my menu... and the css:

div#main_menu ul li {float:left;position:relative;width:10em;}

And other stuff that sets the menu, but what i want is to add a consistent color for all the menu and of course, as some one told me in the last tread about the floating trouble, the floats are not in the normal flow of the document, so they dont have a reference of where to show its background...

So unless i add a background to each li (becouse even the ul wont show a background), i cant have a color... And what i need is that the containing div (in this case, div#main_menu) shows a background for all the horizontal block where it displays the menu, so that it fits the wide window where its laid...

Aditionally, i notice that by resizing the browser, this particular structure of menu, stops showing the content of the submenu if the window gets too small (horizontally), and the content is fit to the window, so its always showing all of the first menu items, dont know if you understand me, but i dont want the content to stay within the visual part of the browser, i want it to overflow vertically so that it can always show the submenu, if some one has done this tutorial or read it on the above link from a list apart i would apreciate...

Thanks a lot!

[nelimitat 0]

I have used this piece of code in this topic and I like it. You could impove it more but for the beginning it's enough good.More people should start posting tutorials becaise they are very interesting.

[Lozbo 0]

hehe... this is not a tutorial but good that it works for you, ill post all the css as Tyssen sugested me for you guys to know what im doing...

CSS:

div#main_menu    	{border-bottom:1px solid white;margin:0;font-size:1.1em;background:#2C4554;width:100%;padding:0 20px;}div#main_menu ul    {padding:0;margin:0;list-style:none;}div#main_menu li    {background:#2C4554;}div#main_menu ul a    {width:100%;display:block;}div#main_menu ul a:link  	{color:white;text-decoration:none;padding:5px 0;}div#main_menu ul a:hover  {background:#296081;}div#main_menu ul li    {float:left;position:relative;width:10em;}div#main_menu li ul    {display:none;position:absolute;top:1em;left:0;color:white;text-align:left;margin:0;font-size:.9em;}div#main_menu li ul	a  	{color:white;width:100%}div#main_menu li ul	a:link  {padding:0;}div#main_menu li>ul    {top:auto;left:auto;}div#main_menu li:hover ul  {display:block;}

The html is just a ul with several sub lists, but i know its good becouse its xhtml valid, besides i made it up with dreamweaver so the markup is good, the problem is that i want a background in this color behind ul... and the css is also good, i checked it with the validator...

Thanks!

[Tyssen 0]

In cases like these, a link to an actual page is much better than just your code because it's hard to tell which bit you actually want colour applied to. Presumably, you've got two levels of menus, but you don't say which one has the problem with the colour or in which browser you're getting the problem.

[Lozbo 0]

Alright then... im trying it here:

http://forums.xisto.com/no_longer_exists/

Thanks... here's the whole deal..

-10730

[Tyssen 0]

Sorry for not getting back sooner, but try this:

#main_menu ul {   padding: 0px;   height: 25px;   margin: 0;   background-color: #2C4554;   color: #FFF;   font-family: arial, helvetica, sans-serif;   clear: left;   list-style: none;}#main_menu li, li li { float: left; }#main_menu ul li a {   display: block;   height: 18px;   width: 8.5em;   padding: 0.2em 1em;   background-color: #2C4554;   color: #FFF;   text-decoration: none;   border-right: 1px solid #fff;}#main_menu ul li a:hover {   background-color: #547CA8;   color: #fff;}#main_menu li ul {   position: absolute;   width: 8.5em;   left: -999em;}#main_menu li li {   position: relative;   width: 8.5em;   left: 0;   border-top: 1px solid #FFF;}#main_menu li li a {   width: 8.5em;   height: auto;   font-size: 85%;   color: #FFF;}#main_menu li li a:hover {   color: #FFF;   background: #547CA8;}/* lists nested under hovered list items */ #main_menu li:hover ul, #main_menu li.sfhover ul { left: auto; }

(I've changed some of the colours cos I cut & pasted from somewhere else.)
Also, to get it to work in IE, you need this in the <head> section:

<script type="text/javascript">sfHover = function() {  var sfEls = document.getElementById("main_menu").getElementsByTagName("LI");	for (var i=0; i<sfEls.length; i++) {  sfEls[i].onmouseover=function() {  	this.className+=" sfhover";  }  sfEls[i].onmouseout=function() {  	this.className=this.className.replace(new RegExp(" sfhover\\b"), "");  }	}}if (window.attachEvent) window.attachEvent("onload", sfHover);</script>

[henwolf 0]

i dont know what happened, i did posted my content, anyway if a mod sees this can it be fixed? heres what i wanted to post:
-->

Hope you guys dont mind hehe, i now have another problem (as i did happen to solve the last one about floating)...

This one is about a horizontal menu (based on sucker fish menu from ala (a list apart), inside a containing div... the html is like this:

<div id="main_menu">
<ul>
 <li>Menu Item
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
 </li>
</ul>

Basically, (of course, with aditional items) this is my menu... and the css:

div#main_menu ul li {float:left;position:relative;width:10em;}

And other stuff that sets the menu, but what i want is to add a consistent color for all the menu and of course, as some one told me in the last tread about the floating trouble, the floats are not in the normal flow of the document, so they dont have a reference of where to show its background...

So unless i add a background to each li (becouse even the ul wont show a background), i cant have a color... And what i need is that the containing div (in this case, div#main_menu) shows a background for all the horizontal block where it displays the menu, so that it fits the wide window where its laid...

Aditionally, i notice that by resizing the browser, this particular structure of menu, stops showing the content of the submenu if the window gets too small (horizontally), and the content is fit to the window, so its always showing all of the first menu items, dont know if you understand me, but i dont want the content to stay within the visual part of the browser, i want it to overflow vertically so that it can always show the submenu, if some one has done this tutorial or read it on the above link from a list apart i would apreciate...

Thanks a lot!

Hi Lozbo

I have this problem with div & ul. Seems like its the one which you encountered and solved before.

This is my html code.

<ul>
<li>
<div>like a float to be displayed once user hover over the li</div>
</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>

The problem is that the div is blocked by the other li when displayed.

I hope you can help me.

[Lozbo 0]

Wait, I now remember, henwolf i havent figured it out, I sent you the wrong link on that message, Im sorry the problem you refer to ... i havent seen it in a while...I dropped this project a long time ago, actually I dont really remember if i solved it or not, but good you remind me of it because i need it again these days and I need to find an answer.As of now I dont recall what was I doing, but let me dive into the code once more and Ill be posting my progress here (or I'll gladly accept suggestions from you or anybody else who finds a way around this)...Greetings