[SOLVED] Tab menu

[cordoprod]

Hi.

 

I have vertical submenu, and i want to add a style to the current sub.

 

The css is like this:

.sub_menu {
    padding-bottom:1px;
padding-left:5px;
padding-top:9px;
margin:0px 0px 0px 0px;
margin-bottom:2px;
background-color: #DDDDDD;
border-bottom:1px solid #999;
display:none;
}

.sub_menu li {
display:inline;
}

.sub_menu a:link, .sub_menu a:visited {
background-color:#edf6d4;
border:1px solid #777;
border-bottom:0px;
padding: 3px 5px 1px 4px;
text-decoration:none;
color:#000;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
}

.sub_menu a:hover {
background-color: #ccc;
}

.sub_menu a:link .selected {
    background-color: #FFFFFF;

}

 

And the html like this:

<ul id="sc2" class="sub_menu">
    <li class="selected"><a href="?s=user&nick=<? echo $_GET['nick']; ?>"><img src="images/icons/01/16/06.png" /> <? echo ucfirst($_GET['nick']); ?></a></li>
    <li><a href="?s=blogg&nick=<? echo $_GET['nick']; ?>"><img src="images/icons/01/16/51.png" /> Blogg</a></li>
    <li><a href="?s=feed&nick=<? echo $_GET['nick']; ?>"><img src="images/icons/01/16/01.png" /> Feed</a></li>
    <li><a href="?s=grupper_liste&nick=<? echo $_GET['nick']; ?>"><img src="images/icons/04/16/02.png" /> Grupper</a></li>
    <li><a href="?s=quiz&nick=<? echo $_GET['nick']; ?>"><img src="images/icons/01/16/44.png" /> Quiz</a></li>
    <li><a href="?s=gjestebok&nick=<? echo $_GET['nick']; ?>"><img src="images/icons/01/16/19.png" /> Gjestebok</a></li>
    <li><a href="?s=venner&nick=<? echo $_GET['nick']; ?>"><img src="images/icons/01/16/10.png" /> Venner</a></li>
    <li><a href="?s=begivenheter&nick=<? echo $_GET['nick']; ?>"><img src="images/icons/01/16/25.png" /> Eventer</a></li>
    <li><a href="?s=bilder&nick=<? echo $_GET['nick']; ?>"><img src="images/icons/01/16/20.png" /> Bilder</a></li>
    <li><a href="?s=videoer&nick=<? echo $_GET['nick']; ?>"><img src="images/icons/02/16/28.png" /> Videoer</a></li>
    </ul>

 

You can see that the .selected is where the style is. i add it with <li class="selected">.

But no style appears.. I want to add a white background to the ones with selected class.

[TheFilmGod]

.sub_menu a:link .selected {
    background-color: #FFFFFF;

}

 

should be:

 

.sub_menu .selected a:link {
    background: #fff;
}

 

I'm not exactly sure though - it's hard to visualize it without a link and without the whole markup.

 

I really DON'T like your coding style. Things such as

 

.sub_menu li {
display:inline;
}

 

alert me with a "red flag." This will create problems, as the whole <li> becomes text "as is". You should call it as dsiplay: block. Then set the width / height as needed. Then use css to create a background image for those links. You would use separate classes for each individual backgrounds.

 

Again, since you didn't post a link and didn't take the time to add necessary elments such as ' width=".." height=".." ' in the <img /> tag makes it difficult for me to tell if those were large image links or just nice icons.

 

PLEASE post a link.

[cordoprod]

Figured it out myself.. thanks anyway

[TheFilmGod]

Figured it out myself.. thanks anyway

 

How did you fix it? I'm curious if I was on the right track. Writing down the solution, may someday help someone that needs help on this exact/similar question. All posts are archived and not deleted.

[cordoprod]

With this:

 

.sub_menu .selected a:link, .sub_menu .selected a:visited {
    background-color: #fff;
border-bottom: 1px solid #fff;
}