CODEWITHSUNDEEP
cssmenu
Kayote
Kayote

Reputation: 15627

CSS - placing two bars side by side

All,

I have been scratching my head for well over two hours now and I just cannot see whats wrong with the code.

I am building a liquid layout with two navigation bars at the top. The first one is sitting well but the second one (id="filem_right") refuses to sit alongside it.

Here is the HTML:

<body id="container">
        <div id="main_bar">
            <ul>
                <li class="maintabs"><a href="#">Overview</a></li><li class="maintabs"><a href="#">Collar/ Neckline</a></li><li class="maintabs"><a href="#">Sleeves</a>
                <ul>
                    <li class="s_leftright"><a href="#">Left Sleeves</a></li>
                    <li class="s_leftright"><a href="#">Right Sleeves</a></li>
                </ul></li><li class="maintabs"><a href="#">Body</a></li>
            </ul>
        </div>

        <div id="filem_right">
            <ul>
                <li class="filetabs"><a href="#">File</a></li><li class="filetabs"><a href="#">Edit</a></li><li class="filetabs"><a href="#">Settings</a></li>
            </ul>
        </div>

And here is the CSS:

#container {
    min-width: 960px;
    max-width: 1034px;
    min-height: 500px;
    background: rgba(245,212,13,1);
}


/* START OF MAIN MENU */
 #main_bar ul {
    width: 60%;
    position: relative;
    left: 3.2%;
    border: 1px solid black;
    background: rgba(153, 244,200,0.3);
}

.maintabs {
    display: inline-block;
    width: 25%;
    line-height: 3.5em;
    list-style-type: none;

}

.maintabs a {
    display: block;
    text-decoration: none;
    color: rgb(165,165,165);
    color: rgba(165,165,165,1);
    text-align: center;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
}

.s_leftright {
    list-style-type: none;
}

.maintabs ul {
    display: none;
}

.maintabs:hover > ul {
    display: inline-block;
    position: absolute;
}
*/ END OF MAIN MENU */


/* START OF FILE MENU */
#filem_right {
    display: inline-block;
    position: relative;
    width: 30%;
    left: 69%;
    top: 14%;
    right: 3.2%;
}

.filetabs {
    display: inline-block;
    width: 33.3%;
    overflow: hidden;
    list-style-type: none;
    line-height: 3.5em;
}

I had a look at Firebug and it appears that none of my code for 'filem_right' is rendered by the browser (FF 3.6).

Thank you,

Upvotes: 0

Views: 743

Answers (1)

Rich Adams
Rich Adams

Reputation: 26574

Your comment here is incorrect,

*/ END OF MAIN MENU */

Should be /* at the start. This could be a reason the filem_right CSS isn't being picked up by the browser.

Upvotes: 3

Related Questions