How to position a horizontal tab layout

**Zygoma** · Dec 18, 2012 04:06

Buon Giorno from Latitude 53.92705600 Longitude -1.38481600

On this page http://tutorial.davidclick.com/philpotts-clone.html And illustrated here http://i216.photobucket.com/albums/c...psd3c58db2.jpg I'm looking just to understand how you'd go abount positioning a horizontal nav to hand off the right side of the #Header.

Unfortunately i cant get my head arroung how toi get an <ul> to appear as if its sitting off the edge of the #header. Ive got 1 foggy idea that maybe i'd have to add the ul in the #container and position relatively.

Any insights welcome :-)

**chris.upjohn** · Dec 18, 2012 05:38

I would position the <ul> absolutely off the side of the header then set a fixed width so the <li>'s stack one over the other, see the following jsFiddle.

http://jsfiddle.net/RMGUN/

**Zygoma** · Dec 18, 2012 08:20

HI Chris & thanks for taking a look, unfortunately when i click on the link i get this http://i216.photobucket.com/albums/c...ps92c97064.jpg a black box in the results window :-(

**ronpat** · Dec 18, 2012 15:46

Try this DEMO:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?939674-How-to-position-a-horizontal-tab-layout
Thread: How to position a horizontal tab layout
2012.12.18 05:06
Zygoma  (Cheeky)
-->
<head>
    <title>Menu Hangout</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

.container {
    display:table;
    margin:0px auto;
}
.header {
    background-color:#ffa;
    width:600px;
    height:220px;
    position:relative;
}
ul {
    list-style-type:none;
    padding:0;
    margin:0;
    position:absolute;
    top:10px;
    left:100%;
}
li {
    border:1px solid #b86;
    background-color:#fdb;
    line-height:1;
    padding:5px;
    margin:0;
}
.content {
}
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <ul>
            <li>o<br>n<br>e</li>
            <li>t<br>w<br>o</li>
            <li>t<br>r<br>e<br>e</li>
        </ul>
    </div>
    <div class="content">
        <p>Lorem Ipsum lives here.</p>
    </div>
</div>

</body>
</html>

**ralph.m** · Dec 18, 2012 16:15

From a quick look, I think I would use position: absolute too, but put some right padding on the header, give the header a flexible width (in %) and place the menu in that padding area. Hopefully that would prevent the menu being hidden in narrow browser windows. That's one of the downsides of having a menu in this position. Unless you are really careful, that menu might be hidden in a lot of situations.

**chris.upjohn** · Dec 18, 2012 16:15

Sorry, forgot to mention you need to stretch out the windows.

http://jsfiddle.net/RMGUN/embedded/result/

**Zygoma** · Dec 19, 2012 07:49

Got it, brill what an excellent tool too :-)

**ronpat** · Dec 18, 2012 17:06

Originally Posted by ralph.m

From a quick look, I think I would use position: absolute too, but put some right padding on the header, give the header a flexible width (in %) and place the menu in that padding area. Hopefully that would prevent the menu being hidden in narrow browser windows. That's one of the downsides of having a menu in this position. Unless you are really careful, that menu might be hidden in a lot of situations.

Agree 100%. That's how Chris' demo handles the right-hand menu (keeps it inside the header box). My demo follows the OP's request, but is flawed as you describe. (Knew that goin' in

)

This is revised to incorporate (or recommend) Ralph's suggestions. Whaddaya think, big guy?

Code:

<!--
http://www.sitepoint.com/forums/showthread.php?939674-How-to-position-a-horizontal-tab-layout
Thread: How to position a horizontal tab layout
2012.12.18 05:06
Zygoma  (Cheeky)
-->
<head>
    <title>Menu Hangout 2</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

.container {
    display:table;
    margin:0px auto;
}
.header {
    background-color:#ffa;
    width:600px;          /* unit of measure to be determined by author with responsiveness in mind ? */
    height:220px;         /* height to be determined by contents ? */
    position:relative;
    padding-right:2em;    /* padding to prevent contents from sliding under the right-hand AP'd menu.  unit of measure depends on construction of right-hand menu. */
}
ul {
    list-style-type:none;
    padding:0;
    margin:0;
    position:absolute;
    top:10px;             /* unit of measure to be determined by layout */
    right:0;
}
li {
    display:block;
    border:1px solid #b86;
    background-color:#fdb;
    text-align:center;
    line-height:1;
    padding:.4em;
    margin:0;
}
.content p {
}
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <ul>
            <li>o<br>n<br>e</li>
            <li>t<br>w<br>o</li>
            <li>t<br>r<br>e<br>e</li>
        </ul>
    </div>
    <div class="content">
        <p>Lorem Ipsum lives here.</p>
    </div>
</div>

</body>
</html>

Of course, the problem with this approach is that the right-hand menu no longer appears to be hanging out to the right of content beneath the header box. Using the first solution plus padding left & right in .container would solve that.

**ralph.m** · Dec 18, 2012 17:46

Yep, better. Here's a quick attempt to get rid of the color overlap, and to put a flexible width on the layout (to help prevent the menu getting hidden in a narrow browser):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Menu Hangout 2</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

.container {
    width: 80%;
    margin:0px auto;
    padding: 0 30px;
    position: relative;
}
.header {
    background-color:#ffa;
    width:100%;
    min-height:220px;
}
ul {
    list-style-type:none;
    padding:0;
    margin:0;
    position:absolute;
    top:10px; 
    right:0;
}
li {
    display:block;
    border:1px solid #b86;
    background-color:#fdb;
    text-align:center;
    line-height:1;
    padding:.4em;
    margin:0;
}
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <ul>
            <li>o<br>n<br>e</li>
            <li>t<br>w<br>o</li>
            <li>t<br>r<br>e<br>e</li>
        </ul>
    </div>
    <div class="content">
        <p>Lorem Ipsum lives here.</p>
    </div>
</div>

</body>
</html>

**ronpat** · Dec 18, 2012 18:16

Great. Quick question: .header is a block element... does it actually need {width:100%} declared?

Although I posted .4em for the padding around the list item in example 2, I would personally use pixels (as in example #1) because I would not want those suckers growing any faster than the font when text only is zoomed.

**ralph.m** · Dec 18, 2012 18:47

Originally Posted by ronpat

.header is a block element... does it actually need {width:100%} declared?

No. Not with what I posted, anyhow. So a waste of code.

User Tag List

Thread: How to position a horizontal tab layout

Thread Tools

Display

Hybrid View

How to position a horizontal tab layout

Bookmarks

Bookmarks

Posting Permissions