Welcome Guest ( Log In | Register)



 
 Reply to this topicStart new topic
> Another Kind Of Css Background Float Trouble, now with a <ul>
Tyssen
post Oct 26 2005, 01:51 AM
Post #1



***********

Group: Members
Posts: 1,161
Joined: 9-May 05
From: Brisbane, QLD
Member No.: 6,818
How'd you manage to post a topic with no real content? blink.gif

(list)

Go to the top of the page
 
+Quote Post
Lozbo
post Oct 26 2005, 01:53 AM
Post #2


Super Member
*********

Group: Members
Posts: 282
Joined: 1-September 05
From: Wanatos
Member No.: 11,382
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
<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:

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!

(list)

Go to the top of the page
 
+Quote Post
nelimitat
post Oct 26 2005, 11:01 AM
Post #3


Advanced Member
*******

Group: Members
Posts: 120
Joined: 28-August 05
Member No.: 11,224
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.

(list)

Go to the top of the page
 
+Quote Post
Lozbo
post Oct 26 2005, 06:29 PM
Post #4


Super Member
*********

Group: Members
Posts: 282
Joined: 1-September 05
From: Wanatos
Member No.: 11,382
hehe... this is not a tutorial tongue.gif 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!

(list)

Go to the top of the page
 
+Quote Post
Tyssen
post Oct 26 2005, 11:50 PM
Post #5



***********

Group: Members
Posts: 1,161
Joined: 9-May 05
From: Brisbane, QLD
Member No.: 6,818
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.

(list)

Go to the top of the page
 
+Quote Post
Lozbo
post Oct 27 2005, 10:06 PM
Post #6


Super Member
*********

Group: Members
Posts: 282
Joined: 1-September 05
From: Wanatos
Member No.: 11,382
Alright then... im trying it here:

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

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

-10730

(list)

Go to the top of the page
 
+Quote Post
Tyssen
post Nov 1 2005, 05:24 AM
Post #7



***********

Group: Members
Posts: 1,161
Joined: 9-May 05
From: Brisbane, QLD
Member No.: 6,818
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
<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>

(list)

Go to the top of the page
 
+Quote Post
henwolf
post Mar 13 2006, 11:23 AM
Post #8


Newbie
*

Group: Members
Posts: 1
Joined: 13-March 06
Member No.: 19,991
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
<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:

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.


(list)

Go to the top of the page
 
+Quote Post
Lozbo