PDA

View Full Version : Resolved How do i fix this little CSS background issue?



Dj SharK
Jul 17th, 2010, 11:54 PM
UPDATE : I've decided to go with a simpler yet effective method. Topic resolved. :)


Hi.

I'm trying to do a simple drop-down menu but the background doesn't look as i expected. Here's an image of the issue.

http://i27.tinypic.com/15nnazr.jpg

As you could see, the whole thing just doesn't look right. The 'bottom line' doesn't go all the way across. Same as the background. How do i go about this?

HTML : ( Copied from a random site i came across just so i get the whole idea. )

<li class="chosen"><a href="/">Home<br /><span></span></a>

</li>
<li><a href="/forum/">Forum<br /><span>&nbsp;</span></a>
<ul>
<li><a href="/forum/news-announcements-f63.html">News</a></li>
<li><a href="/downloads-f400.html">Downloads</a></li>
<li><a href="/forum/requests-f404.html">Requests</a></li>
<li><a href="/forum/discussion-f81.html">Discussion</a></li>
<li><a href="/forum/ucp.php">User Control Panel</a></li>
</ul>

</li>
<li><a href="/downloads/">Downloads<br /></a>
<ul>
<li><a href="/bcp/favourites.php">Edit Favourites</a></li>
</ul>
</li>
<li><a href="/search/">Search<br /><span></span></a>
</li>

<li><a href="/guide/">Guide<br /></a>
</li>
<li><a href="/blog/">Blog<br /></a>
</li>
<li><a href="/wiki/">Wiki<br /><span></span></a>
</li>




<marquee>testing</marquee>


CSS : ( I'm not sure which is it so i'll post the whole lot )

/* +++++++++++ Top navigation +++++++++++++ */

#navouter {
display: block;
height: 38px;
background-image: url(http://4.bp.blogspot.com/_MhvFrz7psjI/S6FRa0bd3AI/AAAAAAAACXg/ZXRuiaGhwjc/s1600/topnavleft.png);
background-repeat: no-repeat;
background-position: 0px 0px;
margin-bottom: -0px;
margin-top: -16px;
}

#navouter #nav {
display: block;
height: 38px;
background-image: url(http://3.bp.blogspot.com/_MhvFrz7psjI/S6FRbTc2T9I/AAAAAAAACXo/suQnVWuJ23I/s1600/topnavright.png);
background-repeat: no-repeat;
background-position: right 0px;
}

#navouter #nav ul{
}

#navouter #nav ul,
#navouter #nav ul li{
margin: 0px;
padding: 0px;
background-image: none;
list-style-type: none;
}

#navouter #nav ul,
#navouter #nav ul li{
margin: 0px;
padding: 0px;
background-image: none;
list-style-type: none;
}

/* menu::base */
#nav {
position: relative;
height: 38px;
margin: 0px 0px;
padding: 0px 12px;
overflow:visible;
}

#nav ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
}

#nav li {
position: relative;
z-index: 9;
margin: 0;
padding: 0 5px 0 0;
display: block;
float: left;
}

#nav a {
position: relative;
z-index: 10;
height: 38px;
display: block;
float: left;
line-height: 38px;
text-decoration: none;
vertical-align: middle;
padding: 0px 12px;
}

#nav li a:hover {
color: #ffffff;
text-decoration: none;
display: block;
}

#nav li ul {
list-style: none;
position: absolute;
width: 150px;
top: 38px;
background-color: #333;
left: -999em;
}

#nav li:hover ul, #nav li.sfhover ul {
left: 0px;
}

/*
#nav li ul li:hover ul, #nav li ul li.sfhover ul {
left: auto;
}
*/

#nav li li {
margin: 0;
padding: 0;
width: 150px;
left: auto;
}

#nav li li a {
padding: 0px 0px 0px 15px;
height: 23px;
line-height: 23px;
color: #c3c3c3;
border-bottom:1px solid #54585c;
background-color: #26282a;
margin: 0;
}

#nav li li a:hover {
background-color: #1f2225;
}

/*
#nav li:hover, #nav li.sfhover { prevents IE7 drop-down menu bug (focus on a page element prevents nested menus from disappearing)
position: static;
}
*/

#nav li.back {
background: url(../images/lava.png) no-repeat right -44px !important;
width: 13px;
height: 38px;
z-index: 8;
position: absolute;
margin: -1px 0 0 -5px;
}

#nav li.back .left {
background: url(../images/lava.png) no-repeat top left !important;
height: 38px;
margin-right: 8px;
}

.lavalamp li a {
z-index: 100;
}


/* menu::level2 */
div#nav ul ul li { background: none; }
div#nav ul ul {
position: absolute;
top: 38px;
left: -999em;
width: 150px;
padding: 0px;
}

div#nav ul ul a,
div#nav ul ul ul a,
div#nav ul ul ul ul a {
padding: 0 0 0 15px;
height: 23px;
float: none;
display: block;
line-height: 23px;
color: #c3c3c3;
}


div#nav ul ul li.last { background: none; }
div#nav ul ul li {
width: 100%;
}

/* menu::level3 */


div#nav ul ul ul {
padding: 0;
margin: 0px 0 0 150px !important;
left: -999em;
top: -1px;
}

div#nav ul li:hover ul ul{
position: absolute;
left: -999em;
}

div#nav ul ul li:hover ul{
position: absolute;
left: 0px;
}

/* colors */
div#nav ul ul ul { background: #26282a;}
div#nav ul ul ul ul { background: #26282a; }
div#nav ul ul ul ul ul { background: #26282a; }

div#nav ul ul li,
div#nav ul ul ul li,
div#nav ul ul ul ul li{
margin: 0px;
padding: 0px;
}

div#nav ul ul,
div#nav ul ul ul,
div#nav ul ul ul ul {
border-left: 1px solid #54585c;
border-right: 1px solid #54585c;
border-top: 1px solid #54585c;
}

div#nav ul li.current_page_item a, div#nav ul li.current_page_parent {
color: #FFFFFF;
}

li.current_page_parent a{
color: #FFFFFF;
}


Thank you!