|
rubyaim -> Nested Divs for 2 background images (3/9/2006 0:44:27)
|
Hello everyone, I've had a long break from work, started back Monday, and seem to have forgotten everything [:o]
I'm working on a dropdown menu that a co-worker started (think it may have commenced life as a Suckerfish). We would like a background image as well as an image on the right to show when there are actually links in a dropdown.
Only way I could think to do this was by nesting divides, but am wondering if this is very poor coding and / or a very poor solution. Code below. Am still working on this, looks okay in FF and finally in IE, but I'd appreciate it if someone could suggest a better way to do this? I don't want code, but need help to start thinking once more.
CSS
.topblck{
border: 1px solid #cccccc;
background:url("grey.gif") repeat-x;
width:127px;
}
.mainlinks a{
font-weight: bold;
width:100%;
display:block;
text-align:center;
}
.expand{
background:url('expmnu.gif');
background-repeat:no-repeat;
background-position:right;
width:98%;
}
HTML
<li class="topblck">
<!-- nest div's for 2 background images -->
<div class="mainlinks">
<div class="expand">
<!-- main link -->
<a title="Full contact details for all Administration Staff" href="../admin/contact.asp">Contact Admin</a>
<!-- close divides -->
</div>
</div>
<!-- sub links-->
<ul class="sublinks">
<li>
<a title="Building Layout and Site Map for Head Office" href="../admin/maps.htm">Admin Maps</a>
</li>
</ul>
</li>
etc, etc
Thanks [:)]
|
|
|
|
