SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    seattle.usa
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div / column layout problem

    hey.. my first post!
    i've been looking at this tutorial:http://www.webreference.com/authorin...yout/advanced/ and i really like the ideas.. but i must be slow or something, cause i cant seem to use those ideas to create my own layout. (see attached gif) i'm hoping somebodyhere could show me what i need to do to create this layout using div/span tags and.. comment the code. i'm assuming for anybody who understands the techniques well, it'd only take a minute or two..

    however if i'm mistaken, and thats actually a lot of work, then maybe somebody could point me to some other tutorials that might be a little eaiser for me to follow? or maybe to a layout online somewhere that is like what i'm trying to do?

    thanks a zillion!!


    mmmm.. maybe it's right in front of me and i'm just not seeing it.. but when i view this post, i dont see the attached gif anywhere. here's a link to the layout gif: http://gotchaopen.net/Assets/css.div_column_layout.gif
    Attached Images Attached Images
    Last edited by GOLGO-13; Sep 7, 2004 at 12:15. Reason: cant see attached gif!

  2. #2
    SitePoint Addict loadx's Avatar
    Join Date
    Jul 2004
    Location
    Melbourne, VIC, Australia
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heres the body.

    NOTE: all the boxes are nested inside the big red box named "middle"

    HTML Code:
    <body>
    <div id="topnav" class="nav">Navigation</div>
     <div id="middle" class="middle">
        <div id="box" class="boxvert">content</div>  
        <div id="box2" class="boxvert2">content</div>
        <div id="box3" class="boxhorz">content</div>
     </div>
    <div id="botnav" class="nav">Navigation</div>
    </body>
    CSS with comments

    Code:
    body,html 
    {
     margin-top: 5px;
     margin-left: 104px;
     background-color: #EDEDED;
     /*keep mozilla happy*/
     height: 100%;
     weight: 100%;
    }
    
    
    .nav 
    { 
     background-color: #000000; /*black*/
     /*font crap*/
     font-size: 24px; 
     font-weight: bold;
     font-family: arial;
     color: #FFFFFF;
     text-align: right;
     /*set the size*/
     width: 70%;
     height: 30px;
     /*pull the text off the edge*/
     padding: 5px;
    }
    	
    
    .middle 
    {
     background-color: #FF0000; /*red*/
     /*set the size*/
     width: 70%;
     height: 85%;
     /*space div's*/
     padding: 5px;
    }
    
    
    .boxvert
    {
     border: 1px solid #FFFFFF;
     /*shift it left and down*/
     margin-left: 20px;
     margin-top: 20px;
     /*set size*/
     height: 380px;
     width: 240px;
    }
    
    
    .boxvert2
    {
     border: 1px solid #FFFFFF;
     /*set size*/
     height: 380px;
     width: 240px;
     /*get the divs side by side*/
     float: right;
     position: absolute;
     /*manual co-ords*/
     top: 75px;
     left: 400px;
    }
    
    
    .boxhorz
    {
     border: 1px solid #FFFFFF;
     /*set size*/
     height: 90px;
     width: 510px;
     /*position it*/
     position:absolute;
     top: 485px;
     /*bring it off the sides*/
     margin-left: 20px;
     margin-right: 20px;
    }
    Hope that helps you, any questions feel free to pm or jsut leave a message here.
    ciao

    oh yeah forgot, you can view it here:
    (the positioning may be a little off in different resolutions :S)
    CSS Positioning

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    seattle.usa
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    COOL!!!

    i'm playing around with it now.. i'll let you know how it works for me!

    thanks a lot!!!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,856
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Without wishing to seem ungrateful I think I need to point out a couple of errors in the above code. Please don't take this the wrong way but I do like things to be correct where possible (and I realise this may just be an oversight as we all make mistakes at some time.

    This piece of code here:
    Code:
    .boxvert2
    {
     border: 1px solid #FFFFFF;
     /*set size*/
     height: 380px;
     width: 240px;
     /*get the divs side by side*/
     float: right;
     position: absolute;
     /*manual co-ords*/
     top: 75px;
     left: 400px;
    }
    You have floated it right and then used position:absolute. It can't be both, it has to be one or the other. Which one is the browser going to select?

    If you place the element absolutely then it is removed from the flow and will not be able to exert pressure on the footer or remaining content in the document. You will be better off floating the element and then letting the elements below clear it with clear:both etc.

    Your linked example above shows the horizontal box completely covering the footer at 1024x768 res and reducing the widow in any direction results in most of the elements overlapping.

    I've tidied the code up (a bit) so that elements respect each other but I have used a fixed size. Obviously a fluid width could be applied also now that the elements are not absolutely placed.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>CSSP</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    html,body 
    {
     margin: 0;
     padding:0;
     background-color: #EDEDED;
     text-align:center;/* centre for ie5 and 5.5. */
     min-width:664px/* for mozilla to stop sliding off the left side */
    }
    #container {
    width:664px;/*set the size*/
    margin-left:auto;/* centre for compliant browsers */
    margin-right:auto;/* centre for compliant browsers */
    background:#000;
    text-align:left;/*reset text*/
    }
    .nav 
    { 
     background-color: #000000; /*black*/
     font-size: 24px; 
     font-weight: bold;
     font-family: arial;
     color: #FFFFFF;
     text-align: right;
     /*set the size*/
      height: 30px;
    }
    #middle 
    {
     background-color: #FF0000; /*red*/
     /*space div's*/
     padding: 5px;
    }
    #boxvert, #boxvert2
    {
    border: 1px solid #FFFFFF;
    margin: 20px;
    min-height: 360px;
    width: 280px;
    float:left;
    display:inline;/* ie double margin fix*/
    }
     * html #boxvert, * html #boxvert2{height:380px}/* for ie*/
    #boxvert2{float:right;}
    #boxhorz
    {
     border: 1px solid #FFFFFF;
     height: 90px;
     width: 614px;
     margin-left: 20px;
     margin-bottom:20px;
     clear:both;
    }
    </style>
    </head>
    <body>
    <div id="container"> 
      <div class="nav">Navigation</div>
      <div id="middle"> 
    	<div id="boxvert">content</div>
    	<div id="boxvert2">content</div>
    	<div id="boxhorz">content</div>
      </div>
      <div class="nav">Navigation</div>
    </div>
    </body>
    </html>
    Hope that helps.

    Paul

  5. #5
    SitePoint Addict loadx's Avatar
    Join Date
    Jul 2004
    Location
    Melbourne, VIC, Australia
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the heads up paul, it was 3am when i wrote that
    However i will take your suggestions on board and remeber for next time, cheers.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,856
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    thanks for the heads up paul, it was 3am when i wrote that
    lol - I know the feeling

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    seattle.usa
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the help guys!
    i REALLY appreciate it, and hopefully i'll be completing my project this weekend!

  8. #8
    SitePoint Zealot jammo's Avatar
    Join Date
    Dec 2003
    Location
    el paso tx
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    loadz & Paul O'B
    im no newbie at HTML, but CSS? im tinkering with it more and more everyday.

    now im going through many of my old designs and trying to convert them all from tables, to CSS positioning.

    its members like you that assist all the rest of us to make our websites THAT much more compliant, and easy to update.

    thanks guys!
    and gals!


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
  •