rotated navigation website

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

Stack Overflow is for specific concrete programming questions not for trying to get free developers. http://stackoverflow.com/about — howderek, Feb 03 '13 at 18:42
Put your answer inside your question, then delete the answer. — howderek, Feb 03 '13 at 19:34
Ok thanks! Welcome to Stack Overflow! Sorry if I seemed rude, but there are far too many people looking for free work, and I thought you were one of them. Anyways, what is causing your problem is that the width is calculated based on the text, even though it is rotated, I am working on a solution now :D — howderek, Feb 03 '13 at 19:43
@howderek No problem. I have square eyes already looking for a solution all day today and couldn't find it. Add the end, all sub-menu's have to horizontal under the rotated main-navigation. But that's part2 of my problem. Thanks! — Quinox, Feb 03 '13 at 19:47

score 0 · Accepted Answer · answered Feb 03 '13 at 19:50

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/

Is the list useless? I seem to recall the benefit is for people who have CSS disabled - primarily people who use screen readers. The list makes it easier to navigate the navigation for these types of programs. — DACrosby, Feb 03 '13 at 19:55
I wasn't aware of that, why doesn't the screen reader recognize that the links are in a div with an id of "nav", what does the list do to help? @DouglasA.Crosby — howderek, Feb 03 '13 at 19:59
This is great!! Many many thanks. Btw, I've included in the li tag. — Quinox, Feb 03 '13 at 20:10
@howderek This SO post gives some valuable insight as to why `li`s are preferable: http://stackoverflow.com/questions/549689/why-should-i-use-li-instead-of-div — DACrosby, Feb 04 '13 at 05:34

rotated navigation website

1 Answers1