SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Absolute positioning for difficult layout

    Code CSS:
     
     
     
    body {
        font: 12px Arial, "Helvetica Neue", Helvetica, Geneva, sans-serif;
        color: #393939;
        background:#fbfbfb;
    }
    ul {
        list-style: none;
    }
    .clearfix {
        clear: both;
    }
     
    p {
        padding: 3px 0 8px;
    }
     
     
    /*-- Header --*/
    #header {
        background: url(../images/header_bg.png) repeat-x 0 bottom;
        height: 170px;
        width: 100%;
    }
     
    #header #inner_header #twitter_bird {
        position: absolute;
        right: 83px;
        top: 20px;
        z-index: 5;
    }
     
    #header #inner_header {
        background: url(../images/header_starburst.png) no-repeat center;
        margin: 0 auto;
        padding: 50px 0 0;
        position: relative;
        width: 1000px;
    }
     
    #header #inner_header #nav {
        color: #000;
        margin:10px 0 0 65px;
     
    }
    #logo img {
        margin-left:70px;
    }
    #header #inner_header #nav li {
        background: url(../images/nav_li_bg.png) no-repeat;
        font: 12px Arial, "Helvetica Neue";
        float: left;
        height: 45px;
        margin: 0 5px 0;
        padding: 15px 0;
        text-align: right; }
    #nav li a:hover {
        text-decoration:underline; }
     
    #header #inner_header #nav li a {
        background: url(../images/nav_item_bg.png) no-repeat right;
        color: #4e4e4e;
        margin: 0 0 0 5px;
        padding: 17px 10px 17px 5px;
        text-decoration:none;
    }
     
    #header #inner_header #nav li a:hover {
        color: #000;
    }
     
     
     
    /*-- Container --*/
    #container {
        background: #fff url(../images/container_bg.png) no-repeat;
        height: 570px;
        margin:-35px auto;
        position: relative;
        width: 860px;
        z-index: -1;
     
     
     
    }
     
    #container #inner_container {
        padding: 20px 10px;
    }
     
    .content {
        float: left;
        width: 520px; }
     
     
    #sidebar {
        background: url(../images/sidebar_bg.png) repeat-y;
        float: right;
        margin: -20px 0 0;
        position: relative;
        width: 250px;
        height:448px;    
    }
     
    #sidebar #inner_sidebar {
        padding: 30px 10px 0;
    }
     
    #sidebar #sidebar_bottom {
        background: url(../images/sidebar_bottom.png) no-repeat;
        bottom: -45px;
        height: 45px;
        position: absolute;
        width: 250px;
     
    }
    #clearer {
        clear:both;
    }
    #footer {
        width:860px;
        height:204px;
        margin:-215px auto;
        background:url('../images/footer.png');
     
    }
    Code HTML4Strict:
    <!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" xml:lang="en" lang="en">
    <head>
        <title>Twitter Explode</title>
     
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="Author" content="" />
        <meta name="Copyright" content="" />
        <meta name="Description" content="" />
        <meta name="Distribution" content="Global" />
        <meta name="Keywords" content="" />
        <meta name="Robots" content="index, follow" />
     
        <link rel="stylesheet" href="./css/main.css" type="text/css" media="screen" charset="utf-8"/>
     
    </head>
    <body>
     
    <div id="header">
        <div id="inner_header">
     
            <img src="./images/twitter_bird.png" alt="Twitter Bird" id="twitter_bird" />
     
            <div id="logo"><img src="./images/logo.png?1" alt="" /></div>
     
            <ul id="nav">
                <li><a href="#" class="current">Example</a></li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Example</a></li>
            </ul>
     
        </div><!-- /inner_header -->
    </div><!-- /header -->
     
    <div class="clearfix"><!-- --></div>
     
    <div id="container">
        <div id="inner_container">
     
            <div class="content">
     
                <h3>Example Heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<a href="#">Example</a></p>
     
                <h3>Example Heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<a href="#">Example</a></p>
     
     
            </div>
     
     
            <div id="sidebar">
                <div id="inner_sidebar">
     
     
                </div>            
                <div id="sidebar_bottom"><!-- --></div>
            </div>
        </div>
    </div>
    <div id="clearer"></div>
    <div id="footer">
    <p>testing</p>
    </div>
    </body>
    </html>

    Ok, I took the easy way out. Usually, I use float's for my layout, but im trying to learn absolute positioning. I got a problem how do I get my links in the content to behave regulary? It seems that they have lost there full control of behaving like a regular link? What I do wrong?

    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  2. #2
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm in a hurry but it seems that the z-index on #container is the culprit.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  3. #3
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Forgot to mention: using negative values is not reliable. Change it to z-index:1 and the links will behave.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Blake, you told me on facebok the link was
    twitterexplode.com

    Which redirected me like 6 times to this page
    http://www.web2formula.com/free2/

    Can we have a link?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fixed

    God, why do I even waste my time with absolute positioning? This CSS is garbageeeeeee. I can get every image to it's exact spot where I want it using floats/padding/margin.

    I got mad and started over again. Absolute positioning is an embarrasment.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.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
  •