PDA

View Full Version : Need help with menu


blimp
03-31-2010, 11:38 AM
Having some difficulty creating the following.

I'm creating a vertical menu in my right_box div and have added an image as a backdrop.

#right_box {
float: right;
height: 450px;
width: 155px;
position: relative;
background-image: url(menu_box.jpg);
display: table;
<div id="right_box">


</div><!--end of right box div -->

Previewing this in my browser works just fine. If I now try adding another div to hold my menu text, my background-image: url(menu_box.jpg); disappears!

#menu {
vertical-align: middle;
display: table-cell;
position: relative;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #666;
}
#right_box {
float: right;
height: 450px;
width: 155px;
position: relative;
background-image: url(menu_box.jpg);
display: table;
}

<div id="right_box">
<div id="menu">PLACE MENU TEXT HERE</div><!--end of menu div -->
</div><!--end of right box div -->


Any idea why?

blimp
03-31-2010, 12:19 PM
I sort of found a workaround, not sure it's right though!

I ended up placing the background-image: url(menu_box.jpg); as a background in my menu div rather than the right_box div.


<div id="right_box">
<div id="menu">
<ul>
<li>about us</li>
<li>gallery</li>
<li>pricing</li>
<li>blog</li>
<li>links</li>
<li>contact</li>
</ul>
</div><!--end of menu div -->
</div><!--end of right box div -->


#right_box {
float: right;
height: 450px;
width: 155px;
position: relative;
display: table;
}
#menu {
vertical-align: middle;
display: table-cell;
position: relative;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #666;
background-image: url(menu_box.jpg);
list-style-type: none;
padding-left: 20px;
}

blimp
03-31-2010, 12:24 PM
How do I get rid of the white underneath the text?

http://img221.imageshack.us/img221/2607/picture4l.png

<div id="right_box">
<div id="menu">
<ul>
<li>about us</li>
<li>gallery</li>
<li>pricing</li>
<li> blog</li>
<li>links</li>
<li>contact</li>
</ul>
</div><!--end of menu box div -->
</div><!--end of right box div -->

#right_box {
float: right;
height: 450px;
width: 155px;
position: relative;
display: table;
}
#menu {
vertical-align: middle;
display: table-cell;
position: relative;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #666;
background-image: url(menu_box.jpg);
list-style-type: none;
padding-left: 20px;
}
#menu ul li {
list-style-type: none;
margin-bottom: 10px;
}

domedia
03-31-2010, 03:36 PM
The white is not coming from any of the code you pasted.

blimp
03-31-2010, 09:35 PM
domedia, your absolutely right, that's why I'm totally confused!

I've placed a copy of the html here (http://blimpmedia.com.au/cssworkarounds/001.html), is there anything that sticks out?

FYI:
You'll also notice at the top of the <header div> I've added "PLACE LOGO HERE", that also has a white box which it shouldn't.

I also added a background color on the left_box div, middle_box div and the right_box div, and the grey background color is only showing on the left_box div?

I'm so confused, please explain?

gentleone
03-31-2010, 09:49 PM
It's the background color that you've assigned to * which means you assign that gray/white background color to all the elements on that page.

* {
padding: 0;
margin: 0;
background-color: #f8f8f8;
}
Remove that background-color property.