I have made a CSS menu, based on a tutorial on A List Apart. It displays properly except that I would like the background color to fill the entire width of the screen. you can see what i have so far here (<!-- m --><a class="postlink" href="http://www.thebaseballwanderer.com/testing/cssmenu.php">http://www.thebaseballwanderer.com/testing/cssmenu.php</a><!-- m -->) . does anyone know how to make the entire width of the screen appear in that blue color?change your width property in the div#menu li from 10em to 20% (100% divided by number of main menu items...
div#menu li {
background-color:#006;
color:red;
float:left;
position:relative;
width:20%;
}that works I guess. I was hoping for something that would be a bit more dynamic (i.e. not have to change the width if I add more menu items).
thankstry this:
div#menu li {
position:absolute;
background-color:#006;
color:red;
top:0px;
left:0px;
width:100%;
}ah yes, I was looking for the same thing and was told it cant be done...but if anyone has any ideas, Im all ears too!!!
tested the above solution in my psuedo-page and it doesnt seem to work--am I wrong?That is what I use for all my pages when I make something that needs to be across the top of the page, and it works fine for me.
When I made mine, it woked fine I used this, and it does basically the same thing:
#head{
position:absolute;
width:100%;
height:100px;
background-color:#0183C0;
top:0px;
left:0px;
background-image:url('logo.jpg');
background-repeat: no-repeat;
}
Here is a previewwell the difference between your screen shot and what he wants is that yours i a "banner" type thing and his is a horizontal css drop-down menu....
he has his menu items on one line, and they are floated next to each other. with your implementation, it makes all the menu items stack vertically, one on top of another--which as far as I know is not the ultimate outcome...?So, I made it exactally the same, I just gave it a background. If i removed that image, and replaced it with text, then It would look exactly the samewell then it must be a coding/copy paste error on my part cuz i cant get it to work.the annoying thing I found is that it looks how I want it to in IE, which confirms that it is wrong.
div#menu li {
background-color:#006;
color:red;
float:left;
position:relative;
width:20%;
}that works I guess. I was hoping for something that would be a bit more dynamic (i.e. not have to change the width if I add more menu items).
thankstry this:
div#menu li {
position:absolute;
background-color:#006;
color:red;
top:0px;
left:0px;
width:100%;
}ah yes, I was looking for the same thing and was told it cant be done...but if anyone has any ideas, Im all ears too!!!
tested the above solution in my psuedo-page and it doesnt seem to work--am I wrong?That is what I use for all my pages when I make something that needs to be across the top of the page, and it works fine for me.
When I made mine, it woked fine I used this, and it does basically the same thing:
#head{
position:absolute;
width:100%;
height:100px;
background-color:#0183C0;
top:0px;
left:0px;
background-image:url('logo.jpg');
background-repeat: no-repeat;
}
Here is a previewwell the difference between your screen shot and what he wants is that yours i a "banner" type thing and his is a horizontal css drop-down menu....
he has his menu items on one line, and they are floated next to each other. with your implementation, it makes all the menu items stack vertically, one on top of another--which as far as I know is not the ultimate outcome...?So, I made it exactally the same, I just gave it a background. If i removed that image, and replaced it with text, then It would look exactly the samewell then it must be a coding/copy paste error on my part cuz i cant get it to work.the annoying thing I found is that it looks how I want it to in IE, which confirms that it is wrong.