Another Kind Of Css Background Float Trouble

Tyssen

Oct 26 2005, 01:51 AM

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

Lozbo

Oct 26 2005, 01:53 AM

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:

HTML

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

CODE

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!

Reply

nelimitat

Oct 26 2005, 11:01 AM

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.

Reply

Lozbo

Oct 26 2005, 06:29 PM

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:

CODE

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!

Reply

Tyssen

Oct 26 2005, 11:50 PM

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.

Reply

Lozbo

Oct 27 2005, 10:06 PM

Alright then... im trying it here:

http://www.avoid.trap17.com/right.php

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

-10730

Reply

Tyssen

Nov 1 2005, 05:24 AM

Sorry for not getting back sooner, but try this:

CODE

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

CODE

Reply

henwolf

Mar 13 2006, 11:23 AM

QUOTE(Lozbo @ Oct 26 2005, 01:53 AM)

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:

HTML

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

CODE

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.

Reply

Lozbo

Mar 13 2006, 04:43 PM

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

Reply

ADD REPLY / Got an Opinion!	a humble request :-)	RAPID SEARCH!	Free Hosting	[X]
Express your Opinions, Thoughts or Contribute your information that might help someone here. Ask your Doubts & Queries to get answers.. "Together, We enlight each other!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE

Another Kind Of Css Background Float Trouble - now with a <ul>

Another Kind Of Css Background Float Trouble - now with a <ul>