SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    noob: have layout, need matching css code

    I need to get this kind of layout for my web site:

    ____1___|___2___|__3___|__4__|
    5 | 6
    block_6, should line up below block_4. Block_5 lines up below block1-block3.
    Block_5 content is dynamic from the database, so how do you specify the height?

    My web page dimensions:
    width= 950px
    height = 100%


    Here is my css for the block, will this get me the above layout?

    #block_1 {
    padding: 0px 0px 0px;
    width: 300px;
    height: 200px;
    float: left;
    }
    #block_2 {
    padding: 0px 0px 0px;
    width: 100px;
    height: 200px;
    float: left;
    }
    #block_3{
    padding: 0px 0px 0px;
    width: 300px;
    height: 250px;
    float: left;
    }

    #block_4 { padding: 0px 0px 0px;
    width: 250px;
    height: 200px;
    float: right;
    }


    #block_5 {
    padding: 0px 0px 0px;
    width: 600px;
    float: left;
    }

    #block_6{ padding: 0px 0px 0px;
    width: 300px;
    height: 200px;
    float: right;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    What is this being used for?

    If its dynamic data then it looks a bit like a table is needed.

    However I can't really tell what you want from your explanation and you may need to do a real drawing.

    It's unlikely that setting heights on elements like that is what you want. Floating those elements should result in 2 rows but we'd really need to know what is being planned for this.

    Here is my css for the block, will this get me the above layout?
    Why don't you try it and see?

    Then at least you will have some html to show us and then we can maybe see what you are after.

  3. #3
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I need to get the links "feedback comments" below block1-4 and above block5. I have placed "sub-nab" div between block1-4 and block5. But when the html page is viewed in browser, link is always on the top, never between block1-4 and block5. Here is my html code:

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <
    HTML>
     <
    HEAD>
      <
    TITLE> New Document </TITLE>

    <
    style type="text/css">
    #main-nav {
        
    marginauto;
      
    text-alignright;
      
    padding0 1em;
      
    background-color#ff00fa
    }
    #sub-nav {
        
    marginauto;
      
    text-alignright;
      
    padding0 1em;
      
    background-color#ffd700
    }

    #block_1 {
    padding0px 0px 0px;
    width300px;
    height200px;
    floatleft;
    }
    #block_2 {
    padding0px 0px 0px;
    width100px;
    height200px;
    floatleft;
    }
    #block_3{
    padding0px 0px 0px;
    width300px;
    height250px;
    floatleft;
    }

    #block_4 { padding: 0px 0px 0px;
    width250px;
    height200px;
    floatright;
    }


    #block_5 {
    padding0px 0px 0px;
    width600px;
    floatleft;
    }

    #block_6{ padding: 0px 0px 0px;
    width300px;
    height200px;
    floatright;
    }
    </
    style>

      <
    META NAME="Generator" CONTENT="EditPlus">
      <
    META NAME="Author" CONTENT="">
      <
    META NAME="Keywords" CONTENT="">
      <
    META NAME="Description" CONTENT="">
     </
    HEAD>

     <
    BODY>

      <
    div id="main-nav">
      </
    div>

    <
    div id="block_1">
    <
    p>Crude oil rose above $90 a barrel to a record in New York the day after a government report showed an unexpected drop in U.Sstockpiles.</p>
    </
    div>
    <
    div id="block_2">
    <
    p>Crude oil rose above $90 a barrel to a record in New York the day after a government report showed an unexpected drop in U.Sstockpiles.</p>
    </
    div>
    <
    div id="block_3">
    <
    p>Crude oil rose above $90 a barrel to a record in New York the day after a government report showed an unexpected drop in U.Sstockpiles.
     </
    p>
    </
    div>
    <
    div id="block_4">
    <
    p>Crude oil rose above $90 a barrel to a record in New York the day after a government report showed an unexpected drop in U.Sstockpiles.
     </
    p>
    </
    div>

    <
    div id="sub-nav">
                        <
    a href="http://www.mysite.com/">Comment</a>
                        <
    a href="http://www.mysite.com/">Feedback</a>
                        <
    br />
    </
    div>

    <
    div id="block_5">
    <
    p>Crude oil rose above $90 a barrel to a record in New York the day after a government report showed an unexpected drop in U.Sstockpiles.

    "It's not a question of when we'll hit $100 but how quickly," said Nauman Barakatsenior vice president of global energy futures at Macquarie Futures USA in New York"There are no bearish factors in the market right now."

    Supplies of crude oil fell 5.29 million barrels to 316.6 millionthe lowest level since Januaryaccording to a report issued Wednesday by the Energy Department. New U.Ssanctions against Iranwarnings of a Turkish assault on militants in Iraq and a falling dollar also pushed prices higher. </p>
    </
    div>
    <
    div id="block_6">
    <
    p>Crude oil rose above $90 a barrel to a record in New York the day after a government report showed an unexpected drop in U.Sstockpiles.

    "It's not a question of when we'll hit $100 but how quickly," said Nauman Barakatsenior vice president of global energy futures at Macquarie Futures USA in New York"There are no bearish factors in the market right now."

    Supplies of crude oil fell 5.29 million barrels to 316.6 millionthe lowest level since Januaryaccording to a report issued Wednesday by the Energy Department. New U.Ssanctions against Iranwarnings of a Turkish assault on militants in Iraq and a falling dollar also pushed prices higher. </p>
    </
    div>
     
     </
    BODY>
    </
    HTML

  4. #4
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello, anyone?

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #sub-nav {
      margin: 0 auto;
      text-align: right;
      padding: 0 1em;
      background-color: #ffd700;
      clear: both
    }

  6. #6
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool...thanks...


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
  •