SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Really stuck on how to lay this out

    Hi, I have this site mockup:



    Can anyone post some CSS of how YOU would go about laying this out?

    I just want to see what the best way would be:

    I have had a few attempts and found a few problems.

    - When I added the logo on the top left, I positioned it relative and moved down a bit and was left with a large blank space where it originally was.

    Things like that, I would like to see how you more experienced people would go about it to be honest.

    My HTML code for this bit would be:

    Code HTML4Strict:
    <div id="container">
    			<div id="header">
    				<img src="images/gplogo.png" alt="Logo" />
    				<h1>A New Site...<br />stuff stuff</h1>
    				<ul id="nav">
    					<li><a href="index.php">Home</a></li>
    					<li><a href="#">Products</a></li>
    					<li><a href="#">About</a></li>
    					<li><a href="#">Contact</a></li>
    				</ul>
    			</div><!--header-->
    			<div id="content">

    All help is MUCH appreciated.

    Thanks

  2. #2
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    I would make everything besides the text a bg image to not worry about the logo.
    Ryan B | My Blog | Twitter

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,823
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    that's what happens when you position something relatively. It still occupies its original space, but it's displayed in the coordinates given ( relative to it's original position).

    try this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <style>
    body {background:#878787}
    body {background:#878787}
    * {padding:0; margin:0; }
    #container {width:927px; margin:0 auto;}
    #header {position:relative; overflow:hidden; background:url(images/mockup_07.jpg) no-repeat bottom left;}
    #nav  {position:absolute; bottom:50px; right:30px;  list-style:none;}
    #nav li { float:left;  }
    #nav  a {  display:block; padding:0 .5em;}
    #nav li + li a { border-left:1px solid #000; }
    #nav a , h1 a { text-decoration: none; color:#000; font-family:Arial, Helvetica, sans-serif}
    
    h1 { background:url(images/mockup_03.jpg) no-repeat bottom left; padding-left:129px; min-height:157px; float:left; margin-left:17px}
    h1  a{ display:block; padding-top:50px; padding-bottom:25px;}
    
    
    </style>
    
    
    
    </head>
    
    <body>
    
    
    <div id="container">
                <div id="header">
                    <h1><a href="#">A New Site...<br />stuff stuff </a></h1>
                    <ul id="nav">
                        <li><a href="index.php">Home</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div><!--header-->
                <div id="content">
    
    </div></div>
    
    </body>
    </html>
    where:
    mockup_03.jpg is your logo
    and mockup_7.jpg is an image of the top part of your content area (the rounded corners)

  4. #4
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Thanks for posting. I have not yet tried this out as I have a few other things I have to get on with first.

    One thing I want to mention is that the content area with the rounded corners you see int he image will be a division with css rounded corners and a drop shadow.

    Will this have any impact on your code snippet above?

    EDIT: What's the </div></div> for?

    Thanks.

    Neil

  5. #5
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Neil,
    To do the shadow, you would simply make an image 1 by however wide the white area + the shadow is and set it to repeat-y.

    The /div /div is to close the container and content divs. Dresden just didnt indent them
    Ryan B | My Blog | Twitter

  6. #6
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, yes, I have just noticed that they close those other divs. That's me being thick. Sorry

    I know you can do a shadow like that, I wasn't asking HOW to do a shadow but STATING that that area will be made with a div and CSS rounded corners and a CSS shadow and wondered if by me doing it that way, would ahve any effect on the snippet of code written above?

  7. #7
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Well, like I suggested, and Dresden too, you set the background to the image you posted and have real text positioned within that. The worst thing that you could do is not set up the positioning correctly, so it could look off. Another drawback is if thee text size increases, your layout may break or again look off. Does taht help?
    Ryan B | My Blog | Twitter

  8. #8
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Please can you let me know what the position: relative and overflow: hidden do on the header?

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,823
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    overflow :hidden helps clearing floats. Position relative can do several things; however in the in my specific example , it merely sets the point of origin for any child elements that get position:absolute.

    In another words: I set the header position relative, so that when I set #nav to position absolute; bottom:50px; right:30px; .. the RIGHT EDGE of #nav is placed 30px from (left of) the right of edge #header, and the BOTTOM EDGE UP 50px from the bottom edge of #header.

    If you dont use position:relative on a parent element when you intend to AP child elements, they will end up being positioned from the body element...

    Try my code, it's actually relatively flexible with content amount and flex size.

  10. #10
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand now about the position: relative.

    So position: relative; actually has two purposes then:

    1. To provide an origin for absolutely positioned child elements
    2. To move the element from it's original location in the flow of the document using coordinates.

    Is that correct?

  11. #11
    SitePoint Member
    Join Date
    May 2008
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @rctneil
    Seems correct

    Quote Originally Posted by dresden_phoenix View Post
    If you dont use position:relative on a parent element when you intend to AP child elements, they will end up being positioned from the body element...
    That's kind of retail but they will end up being positioned from the initial containing block, not the body element:
    The containing block for a positioned box is established by the nearest positioned ancestor (or, if none exists, the initial containing block, as in our example)
    and futherer the definition of the initial containing block:
    The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin

  12. #12
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,823
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    That's kind of retail but they will end up being positioned from the initial containing block, not the body element
    The language in the spec can get confusing, as some one new to positioning might assume that using a page wrapper div constitutes a container block...

    Candygirl is right tho, but in essence it is the width of the view port. I suppose I could have said a phantom tag prior to the HTML or BODY ( sine is good to note that BODY and HTML DON'T have 100% height by default) ....

  13. #13
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Hey,

    An update about this. Thanks for your example with this site.

    I have decided I want the logo image to be an actual elemtn in the page rather than as an image background therefore I can make it and the text next to it a link back to the homepage.

    I have got this code so far:

    Code HTML4Strict:
    	<body>
    		<div id="container">
    			<div id="header">
    				<img id="logo" src="images/gplogo.png" alt="Logo" />
    				<h1>Site Title<br />Other text - - -</h1>
    				<ul id="nav">
    					<li><a href="index.php">Home</a></li><!--
    				 --><li><a href="about.php">About</a></li><!--
    				 --><li><a href="trips.php">Trips</a></li><!--
    				 --><li><a href="contact.php">Contact</a></li>
    				</ul>
    			</div><!--header-->
    			<div id="content">

    Code CSS:
    /* Reset Across Browsers */
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 
    blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, 
    em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, 
    var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
    table, caption, tbody, tfoot, thead, tr, th, td, section, header, footer, aside, nav {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    }
     
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
    {
    display: block;
    margin: 0;
    }
     
    html
    {
    height: 100%;
    overflow-y: scroll;
    }
     
    body
    {
    min-height: 100%
    }
     
    body
    {
    background: fuchsia;
    background: -webkit-gradient(
    			linear,
    			left top,
    			left bottom,
    			color-stop(0.25, rgb(135,135,135)),
    			color-stop(1, rgb(48,48,48))
    			);
    background: -moz-linear-gradient(
    			center top,
    			rgb(135,135,135) 25%,
    			rgb(48,48,48) 100%
    			);
    background: -o-linear-gradient(
    			top,
    			rgb(135,135,135) 25%,
    			rgb(48,48,48) 100%
    			);
    font-family: arial, sans-serif;
    font-size: 16px;
    text-align: justify;
    }
     
    #container
    {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    border: 0px solid yellow;
    margin-top: 50px;
    margin-bottom: 2em;
    }
     
    #header
    {
    border: 1px solid yellow;
    position: relative;
    overflow: hidden;
    }
     
    #header #logo
    {
    float: left;
    border: 1px solid yellow;
    position: absolute;
    }
     
    #header h1
    {
    border: 1px solid red;
    float: left;
    font-size: 26pt;
    margin-top: 30px;
    margin-left: 145px;
    }
     
    #nav
    {
    border: 1px solid red;
    position: absolute;
    bottom: 50px;
    right: 30px;
    list-style: none;
    }
     
    #nav li
    {
    float: left;
    }
     
    #nav li
    {
    border-right: 1px solid;
    padding-right: 5px;
    margin-right: 5px;
    }
     
    #nav li:last-of-type
    {
    border-right: 0px;
    padding-right: 0px;
    margin-right: 0px;
    }
     
    #nav a , h1 a
    {
    text-decoration: none;
    color: #000000;
    }
     
    #content
    {
    background: #ffffff;
    background: rgba(255, 255, 255, 0.9);
     
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
     
    padding: 1em;
     
    -webkit-box-shadow: 0px 0px 25px #333;
    -moz-box-shadow: 0px 0px 25px #333;
    box-shadow: 0px 0px 25px #333;
    }

    and here's a screenshot of it:


    As you can see, I have floated both the logo image and the h1 to the left. It all is just as I want it except the bottom of the log is cut off due to the overflow property of the #header div. If I remove that overflow property, it all messes up.

    Any ideas?

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It's hard to tell from that but it looks as though you meant to float the logo but you made it absolute instead. That means it won't stretch the header and it will get cut off because the header is only as tall as the real content.

    Code:
    #header #logo
    
    {
    
    float: left;
    
    border: 1px solid yellow;
    
    position: absolute;
    
    }
    The absolute positioning wins out in the above rule and the logo is now removed from the flow and will not stretch the header.

    If that's what you wanted and you want the logo to overlap the header then remove the overflow:hidden from the header and use another clearing mechanism for the floats.

    If you meant to float the log as well then that was your problem so remove the absolute positioning.

    The image should be in a suitable block container to be semantically and not by itself.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    /* Reset Across Browsers */
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, section, header, footer, aside, nav {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display: block;
        margin: 0;
    }
    html {
        height: 100%;
        overflow-y: scroll;
    }
    body {
        min-height: 100%
    }
    body {
        background: fuchsia;
        background: -webkit-gradient(  linear,  left top,  left bottom,  color-stop(0.25, rgb(135,135,135)),  color-stop(1, rgb(48,48,48))  );
        background: -moz-linear-gradient(  center top,  rgb(135,135,135) 25%,  rgb(48,48,48) 100%  );
        background: -o-linear-gradient(  top,  rgb(135,135,135) 25%,  rgb(48,48,48) 100%  );
        font-family: arial, sans-serif;
        font-size: 16px;
        text-align: justify;
    }
    #container {
        width: 900px;
        margin:50px auto 2em;
    }
    #header {
        border: 1px solid yellow;
        position: relative;
        /*overflow: hidden;*/
        width:898px;
    }
    #header:after{
      content:"."; 
      display:block; 
      height:0; 
      clear:both; 
      visibility:hidden;    
    }
    #header #logo {
        float: left;
        border: 1px solid yellow;
        margin:0;
    }
    #header h1 {
        border: 1px solid red;
        float: left;
        font-size: 26pt;
        margin:30px 0 0 145px;
    }
    #nav {
        border: 1px solid red;
        position: absolute;
        bottom: 50px;
        right: 30px;
        list-style: none;
    }
    #nav li {
        float: left;
    }
    #nav li {
        border-right: 1px solid;
        padding-right: 5px;
        margin-right: 5px;
    }
    #nav li:last-of-type {
        border-right: 0px;
        padding-right: 0px;
        margin-right: 0px;
    }
    #nav a, h1 a {
        text-decoration: none;
        color: #000000;
    }
    #content {
        background: #ffffff;
        background: rgba(255, 255, 255, 0.9);
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
        padding: 1em;
        -webkit-box-shadow: 0px 0px 25px #333;
        -moz-box-shadow: 0px 0px 25px #333;
        box-shadow: 0px 0px 25px #333;
        clear:both;
    }
    </style>
    </head>
    <body>
    <div id="container">
        <div id="header">
            <p id="logo" ><img src="http://www.sitepoint.com/forums/images/gplogo.png" alt="Logo" /></p>
            <h1>Site Title<br />
                Other text - - -</h1>
            <ul id="nav">
                <li><a href="index.php">Home</a></li>
                <li><a href="about.php">About</a></li>
                <li><a href="trips.php">Trips</a></li>
                <li><a href="contact.php">Contact</a></li>
            </ul>
        </div>
        <div id="content"></div>
    </div>
    </body>
    </html>

  15. #15
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Hey Paul,

    Yes, I want the logo to overlap the content division below it slightly.

    Here is my updated CSS without the overlapping bit:

    Code CSS:
    /* Reset Across Browsers */
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 
    blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, 
    em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, 
    var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
    table, caption, tbody, tfoot, thead, tr, th, td, section, header, footer, aside, nav {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    }
     
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
    {
    display: block;
    margin: 0;
    }
     
    html
    {
    height: 100%;
    overflow-y: scroll;
    }
     
    body
    {
    min-height: 100%
    }
     
    body
    {
    background: fuchsia;
    background: -webkit-gradient(
    			linear,
    			left top,
    			left bottom,
    			color-stop(0.25, rgb(135,135,135)),
    			color-stop(1, rgb(48,48,48))
    			);
    background: -moz-linear-gradient(
    			center top,
    			rgb(135,135,135) 25%,
    			rgb(48,48,48) 100%
    			);
    background: -o-linear-gradient(
    			top,
    			rgb(135,135,135) 25%,
    			rgb(48,48,48) 100%
    			);
    font-family: arial, sans-serif;
    font-size: 16px;
    text-align: justify;
    }
     
    #container
    {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    border: 0px solid yellow;
    margin-top: 50px;
    margin-bottom: 2em;
    }
     
    #header
    {
    border: 1px solid yellow;
    position: relative;
    }
     
    #header:after{
      content: "."; 
      display: block; 
      height: 0; 
      clear: both; 
      visibility: hidden;    
    }
     
    #header #logo
    {
    float: left;
    border: 1px solid yellow;
    }
     
    #header h1
    {
    border: 1px solid red;
    float: left;
    font-size: 26pt;
    margin: 30px 0 0 145px;
    }
     
    #nav
    {
    border: 1px solid red;
    position: absolute;
    bottom: 20px;
    right: 20px;
    list-style: none;
    }
     
    #nav li
    {
    float: left;
    }
     
    #nav li
    {
    border-right: 1px solid;
    padding-right: 5px;
    margin-right: 5px;
    }
     
    #nav li:last-of-type
    {
    border-right: 0px;
    padding-right: 0px;
    margin-right: 0px;
    }
     
    #nav a , h1 a
    {
    text-decoration: none;
    color: #000000;
    }
     
    #content
    {
    background: #ffffff;
    background: rgba(255, 255, 255, 0.9);
     
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
     
    padding: 1em;
     
    -webkit-box-shadow: 0px 0px 25px #333;
    -moz-box-shadow: 0px 0px 25px #333;
    box-shadow: 0px 0px 25px #333;
    }

    I have added a div around the image with the id as logo.

    Should I position the #logo div absolutely and then give the h1 a bigger left margin?

    Would that work?

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rctneil View Post
    I have added a div around the image with the id as logo.

    Should I position the #logo div absolutely and then give the h1 a bigger left margin?

    Would that work?
    Yes that sounds ok.

    If you want the logo to overlap the header then you probably want to set the height for the header or make sure that existing content creates the header height that you need.

    The overflow:hidden should be removed and any floats are cleared with the :after rule I gave you (IE needs haslayout to clear which is why I added a width) .

    Then you can place your logo absolutely and it will overlap as required. If the element below the header is position:relative also then you will need to ensure that the header has a higher z-index.


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
  •