Question

I have a design where the main navigation is rotated 90 degrees and the sub-menu’s normal horizontally aligned.

 <div id="nav">
                    <ul>
                    <li><a href="#">Woonaccessoires</a></li>
                    <li><a href="#">Lampenkappen</a></li>   
                    <li><a href="#">Sieraden</a></li>
                    <li><a href="#">Geuren</a></li>
                    <li><a href="#">Tassen</a></li>
                    <li><a href="#">Aanbiedingen</a></li>
                    <li><a href="#">Bedrijven</a></li>
                    <li><a href="#">Contact</a></li>                
                </ul>
                </div>  

css part is:

    #nav {
    width: 60%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
}
#nav li {
    float: left;
    list-style-type:none; 
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
 }
 #nav li a {
    display: block;
    padding: 8px 2px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
 }
 #nav li a:hover {
    color: #c00;
    background-color: #fff; }

What you see now is that not all spaces between the li tag is NOT equal.
How to fix this? I tried with margins and paddings.

Do I have to make seperate classes for each li tag ?

Hope someone can help.

regards,

Roland

Answer 1

HTML (got rid of list because it was useless)

<div id="nav">
<a href="#">Woonaccessoires</a>
<a href="#">Lampenkappen</a>
<a href="#">Sieraden</a>
<a href="#">Geuren</a>
<a href="#">Tassen</a>
<a href="#">Aanbiedingen</a>
<a href="#">Bedrijven</a>
<a href="#">Contact</a>
</div>

CSS:

#nav {
    float:left;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    line-height:0;
    width:100%;
}

#nav a {
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
    float: left;
    width:5px;
    margin-top:120px;
    padding: 10px 10px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
}

#nav a:hover {
    color: #c00;
    background-color: #fff;
}

If you would like to change how it looks try adjusting the width and margin values of #nav a

Example: http://jsfiddle.net/howderek/WD9PL/embedded/result/