1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Moving your content to the top of your <body>

Discussion in 'HTML & Website Design' started by Severus Maximus, Aug 15, 2004.

0
  1. #1
    This is the response to aquestion about absolutely positioned header divs.

    The setup for absolutely psitioned headers that come after your conten in html is:

    <html>
    <head>
    <link href="sf.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" language="JavaScript" src="s.js"></script>
    </head>
    <body>
    <div id=content>
    .
    Your content
    .
    </div>
    <div id=top>
    .
    header
    .
    </div>
    </body>
    </html>

    in the external css file:
    body{
    background-color: #FFFFFF;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    padding:0;
    margin:0;
    }

    #top{
    position:absolute;
    left:10px;
    top:10px;
    width:750px;
    height:100px;
    }

    #content{
    position:absolute;
    width:750px;
    left:10px;
    top:110px;
    }

    The position absolute directs the browser to display these div's absolutely on a page without regards to their position in the html, you will be specifying how much pixels from the left and how many pixels from the top this block will be displayed. Just experiment and count to make the layout you want.

    Don't forget your content needs to pass any borders, margins, and the height of your top div.

    The big pro of this method is that the spider get your content first instead of whatever you put in the top div, this means the first heading and paragraph will be the first thing the spider sees.

    The big con is that this will not work in older browsers (does your targeted audience use pre v5 browsers?). You can make css hacks to get over this problem, but personally I don't like managing css hacks or tricks just for this onpage ranking factor.
    A second (though minor) problem is that the different "modern" browser's support for css may be different, so a pixel perfect layout can not be achieved with the current browsers.

    If you need pixel perfection use the table trick.

    Normally a table layout will be something like:

    3 rows with one column
    --------
    header
    --------
    content
    --------
    footer
    --------

    you could modify this to:

    3 rows with 2 columns
    -------- ----------
    <empty> <content>
    -------- ----------
    <header> <empty>
    -------- ----------
    <footer>
    --------

    Effectively the spider would first find Row 1 col 1 which would be empty.
    Next it would find row 1 col 2 which would have your content.
    Next it would find row 2 col 1 which would have your header.
    This will also make your content the first thing a spider would find.

    The htmfor this table layout would be:
    <table>
    <tr><!-- content -->
    <td></td><!-- r1c1-->
    <td rowspan=2><!-- r1c2-->
    <img src=spacer.gif height={height of header}>
    CONTENT
    </td>
    </tr>
    <tr><!-- header -->
    <td colspan=2><!-- r2c1-->
    HEADER
    </td>
    <!-- r2c2 <td></td> -->
    </tr>
    <tr><!-- footer -->
    <td colspan=2><!-- r3c1-->
    </td>
    <!-- r3c2 <td></td> -->
    </tr>
    </table>

    Here again you will have to have to move your content down past the header height so for this you can use a transparant gif (or the same colour of your background) of 1 x 1 px with the height of the header don't use alt text if you don't have to but if you have to use a keyword term related to that page "New Computer Spacer" for example .

    The con is obviously more code on the page but if you move all formatting to an external css it is not an increase you have to worry about.

    Does anyone know of more ways to move your content up in the html while still using a header banner?
     
    Severus Maximus, Aug 15, 2004 IP
  2. nadlay

    nadlay Guest

    Messages:
    306
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I tried the table method, but I got the header on the left, and the content on the right. Yes the header text was above the content text, but I couldn't make the content text display underneath the header text without being offset to the right, the distance of the width of the header text cell.
     
    nadlay, Aug 16, 2004 IP
  3. Severus Maximus

    Severus Maximus Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You are right I forgot a colspan= 2 in the header <td>, i've updated the post. Now it displays ok in a browser.
     
    Severus Maximus, Aug 16, 2004 IP
  4. nadlay

    nadlay Guest

    Messages:
    306
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Many thanks - I have it working now.
     
    nadlay, Aug 16, 2004 IP
  5. liwei

    liwei Peon

    Messages:
    53
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Also it spiders better I think?
     
    liwei, Aug 26, 2004 IP
  6. SEbasic

    SEbasic Peon

    Messages:
    6,317
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #6
    body {
    text-align: center;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    }

    .container {
    width: 760px;
    top: 5px;
    text-align: left;

    }

    .copy {
    position: relative;
    padding-top: 110px;
    }

    .left {
    width: 180px;
    }

    .right {
    float: right;
    width: 570px;
    }

    .footer {
    clear: both;
    width: 760px;
    margin-top: 20px;
    height: 20px;
    }

    .header {
    position: absolute;
    top: 0px;
    width: 760px;
    height: 99px;
    text-align: center;
    }

    .nav {
    padding-top: 82px;
    color: #fff;
    }

    ______________________
    <html>
    <head>
    <style>
    <!--
    @import url(styles/style1.css);
    -->
    </style>
    </head>
    <body>
    <div class="container">
    <div class="copy">
    <div class="right">
    <h1>Lorem ipsum dolor sit amet, posuere.</h1>
    <p>
    Amet vivamus mauris viverra neque, donec mauris non etiam sed, at etiam vel eu, congue eget fusce pulvinar. Habitasse diam etiam in fermentum, justo dictum et <img src="images/boy-running-on-beach.jpg" alt="boy running on beach" />sit pede, dui erat magna eget. Vestibulum integer laoreet ut, malesuada orci sed praesent. Tincidunt tempus a at quis, habitasse quis luctus mauris. Nam commodo mi ante, nonummy elit sed eros, neque vestibulum sed iaculis.</p>
    <p>
    Nunc ipsum rutrum montes a, eleifend laoreet per amet quis. Nec quis sem suspendisse massa, parturient neque congue cras justo. Integer ultricies vel dolorem, nam suspendisse risus mauris, dapibus tellus tellus non in. Posuere leo libero diamlorem, metus aliquam id porttitor, nulla in cras urna platea. Porttitor laoreet pellentesque vel, nulla lobortis vitae viverra, nisl lorem est aenean, vulputate nec orci odio mi. Veritatis dui nam elit, cras sem eleifend varius.</p>

    </div>
    <div class="left">
    <div class="news1">
    <p>
    <h3>Lorem ipsum</h3>
    Dolor sit amet, posuere interdum accumsan duis scelerisque, donec egestas rhoncus pharetra, morbi posuere eu sed, potenti commodo urna sed hac. Viverra habitasse feugiat mollis, pede lacus donec dolor sem.</p>
    </div>
    <div class="news2">
    <p>
    <h3>Neque sit</h3>
    pellentesque diam odio, sem ipsum wisi donec malesuada. Condimentum nam metus tempor tempor, enim mauris sed dictum in. Sollicitudin interdum a facilisis, nunc massa blandit eget, magna aliquam aliquam purus vestibulum. Integer molestie laoreet lacus fringilla, erat nulla delectus dui, libero pellentesque pellentesque mauris sed. A tincidunt dapibus nunc vulputate, sed amet non velit nunc.</p>
    </div>
    </div>
    </div>
    <div class="footer">
    <a href="site-map.html">Site Map</a>
    </div>
    <div class="header">
    &nbsp;
    </div>

    </div>
    </body>

    </html>

    _____________

    Let me know if this doesn't work. I had to take the specifics out of the CSS...
     
    SEbasic, Aug 27, 2004 IP