Help with navigation bar styling please

murphaph · 16-09-2010 1:47pm #1

Hi all,
I'm trying to style a horizontal navigation bar (link1, link2, link3 in screenshot attached).

I would like the link blocks to take up the full width of the containing div (.navList). I cannot simply used fixed widths for the blocks because this is a multi-language site and the link text is automatically replaced with textkeys (hence the square brackets). The problem now is that when you hover over link 3, it looks weird as the background colour obviously doesn't change right at the extreme right hand edge of the navList div. I'm not the best at CSS tbh! Any pointers as to how to achieve this effect much appreciated.

body
{
    font-family:Arial,Helvetica,sans-serif;
}

.quick_guide_wrapper
{
    background-image:url('/images/funsino_games_quick_guide_small.jpg');
    height:232px;
    background-repeat:no-repeat;
    position:relative;
    width:153px;
}


.quick_guide_small_wrapper
{
    height:46px;
    position:relative;
}

.quick_guide_top
{
    //position:relative;
    height:31px;
    position:relative;
}

.funsino_game_type
{
    font-size:14px;
    display:block;

    /*set the div in the bottom left corner*/
    position:absolute;
    bottom:2;
    left:2;
}

.quick_guide_bottom
{
    height:16px;
}

.navList ul , .navList ul a
{    
    width:153px;
    font-size:12px;
    list-style-type:none;
    //margin:0;
    //padding:0;
    overflow:hidden;
    text-decoration:none;
    margin: 0 auto;
    padding: 0;
}

.navList li
{
    display:inline;
    overflow:hidden;
    float:left;
}

.navList a:link, .navList a:visited
{
    font-size:9px;
    color:#000000;
    display:inline;
    //width:120px;
    text-align:center;
    padding:4px;
    text-decoration:none;
}

.navList a:hover, .navList a:active
{
    background-color:#000000;
    color:#FFFFFF;
}

.navList
{
    float:left;
    overflow:hidden;
    display:block;
    //width:153px;
    width:100%;
    //margin:auto;
}

.funsino_spacer
{
    height:1px;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="funsino.css" />
</head>

<body>

<div class="quick_guide_wrapper">
    <div class="quick_guide_small_wrapper">
        <div class="quick_guide_top">
            <div class="funsino_game_type">
                <strong>[fqg_g1]</strong>
            </div>
        </div>
        <div class="quick_guide_bottom">
            <div class="navList">
                <ul>
                    <li><a href="[fqg_g1_l1]">[link1]</a></li>
                    <li><a href="[fqg_g1_l2]">[link2]</a> </li>
                    <li><a href="[fqg_g1_l3]">[link3]</a> </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="quick_guide_small_wrapper">
        <div class="quick_guide_top">
            <div class="funsino_game_type">
                <strong>[fqg_g2]</strong>
            </div>
        </div>
        <div class="quick_guide_bottom">
            <div class="navList">
                <ul>
                    <li><a href="[fqg_g2_l1]">[fqg_g2_t1]</a></li>
                    <li><a href="[fqg_g2_l2]">[fqg_g2_t2]</a> </li>
                    <li><a href="[fqg_g2_l3]">[fqg_g2_t3]</a> </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="funsino_spacer"></div>
    <div class="quick_guide_small_wrapper">
        <div class="quick_guide_top">
            <div class="funsino_game_type">
                <strong>[fqg_g3]</strong>
            </div>
        </div>
        <div class="quick_guide_bottom">
            <div class="navList">
                <ul>
                    <li><a href="[fqg_g3_l1]">[fqg_g3_t1]</a></li>
                    <li><a href="[fqg_g3_l2]">[fqg_g3_t2]</a> </li>
                    <li><a href="[fqg_g3_l3]">[fqg_g3_t3]</a> </li>
                </ul>
            </div>
        </div>
    </div>
    
    <div class="quick_guide_small_wrapper">
        <div class="quick_guide_top">
            <div class="funsino_game_type">
                <strong>[fqg_g4]</strong>
            </div>
        </div>
        <div class="quick_guide_bottom">
            <div class="navList">
                <ul>
                    <li><a href="[fqg_g4_l1]">[fqg_g4_t1]</a></li>
                    <li><a href="[fqg_g4_l2]">[fqg_g4_t2]</a> </li>
                    <li><a href="[fqg_g4_l3]">[fqg_g4_t3]</a> </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="funsino_spacer"></div>
    <div class="quick_guide_small_wrapper">
        <div class="quick_guide_top">
            <div class="funsino_game_type">
                <strong>[fqg_g5]</strong>
            </div>
        </div>
        <div class="quick_guide_bottom">
            <div class="navList">
                <ul>
                    <li><a href="[fqg_g5_l1]">[fqg_g5_t1]</a></li>
                    <li><a href="[fqg_g5_l2]">[fqg_g5_t2]</a> </li>
                    <li><a href="[fqg_g5_l3]">[fqg_g5_t3]</a> </li>
                </ul>
            </div>
        </div>
    </div>
</div>







</body>

tricky D · 16-09-2010 3:32pm

For starters, using a doctype declaration might help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>

Pablod · 16-09-2010 7:51pm

if i'm reading this right
You will need to specify some sort of width

in your .navlist li
add a width of 33.33%

.navList li
{
display: inline;
overflow: hidden;
float: left;
width: 33.33%;
}

see if this helps

murphaph · 17-09-2010 9:57am

Cheers for the suggestions folks but still not working.

I may have to settle for it the way it is. The 33% width is not really a solution because the text varies in length (8 languages) and I run into trouble with some languages not fitting in one div yet having room to spare in another and vice versa with other languages...that's why I wanted the divs inside the navbar to sort of find their own widths dependent on content and divide up the available navbar width (153px). I am not sure it's even possible in CSS, haven't been able to find any examples of it anyway.

Help with navigation bar styling please

Comments