SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to position a horizontal tab layout

    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 :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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/

  3. #3
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 :-(
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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>
    Last edited by ronpat; Dec 18, 2012 at 16:03. Reason: modified li presentation slightly

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Sorry, forgot to mention you need to stretch out the windows.

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

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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>

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post
    .header is a block element... does it actually need {width:100%} declared?
    No. Not with what I posted, anyhow. So a waste of code.

  11. #11
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it, brill what an excellent tool too :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •