SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry How to create rows using DIV vs Table... **UGH!**

    I am stumped beyound belief atm...

    I am trying to create a 2 column 2 row layout for my header area. If I were using tables this would be a snap, but trying to do this with CSS is causing me to pull my hair out. Can you help me?

    Here's a screenshot of what the header should look like once the CSS is put together:

    http://screencast.com/t/8ZJ1pEhpko

    Here's a screenshot of what I have done:

    http://screencast.com/t/Y3hvc9FgY1N

    I need to create 3 rows to teh right of the logo, then float the content to the right on each of the 3 rows...

    At least that is my train of though thus far. What do you think?


    Thanks a million!!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    OK, assuming this is fixed width, the first thing I'd do is make that red/black background one single background image and place that on the main container as a bg image.

    Then, to keep things a bit simpler, I might have a div floated left to hold the logo and a div floated right to hold everything else. (That right div is not essential, but might make things a little neater.) Give both divs an appropriate width.

    Then, inside the right div, have a para with the toll free number, with right-aligned text. Give padding as necessary to create the spacing.

    Then, under that, perhaps a div that holds the paragraph (floated left) and the form (floated right).

    Then under that your navigation UL, with appropriate margins/padding, with the LIs set to float: left.

    For best results, set any element with floated contents to overflow: hidden to force it to wrap around its floated contents.

    Does that make sense?

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Tho Ralph may have answered your Q, I looked at your desired layout and feel it necessary to chime in.

    A lot of people transitioning from tables layouts to CSS find this issue perplexing, and get stuck IN TRYING TO SOLVE how to do with DIVs what they did with TDs .
    #1 That shouldnt be your goal.
    #2 That shouldnt be your goal.




    #1) Start by coding your HTML semantically.
    #2) Now that you have coded your HTML semantically you can assign BGs to elements at needed, which 9/10 wont follow a "row" structure.


    Looking at your intended output ( and assuming that TEACH CPR is a LOGO) naturally suggest this structure

    Code:
    <div id="hedWrap">
    <h1>Teach CPR</h1>
    <p>Call toll free</p>
    <form...><p>..Alive tomorrow</p></from>
    <ul id="mainnav"> <li><a href="#">Nave Item</a></li>...</ul>
    </div>
    Alternatively you could do away with the logo as content ...
    Code:
    <div id="hedWrap">
    <p>Call toll free</p>
    <form...><p>..Alive tomorrow</p></from>
    <ul id="mainnav"> <li><a href="#">Nave Item</a></li>...</ul>
    </div>
    Neither is a row structure ( you don't need a col for the logo and col for other things!!!)

    In fact, in the latter example you can achieve the same effect setting the same amount of padding-left, as the width of the logo, to the container as using the logo image as a bg.

    BUT more realistically the name of your organization is content so let's keep the H1, shall we?


    Code:
    <div id="hedWrap">
    <h1>Teach CPR</h1>
    <p>Call toll free</p>
    <form...><p>..Alive tomorrow</p></from>
    <ul id="mainnav"> <li><a href="#">Nave Item</a></li>...</ul>
    </div>
    
    #hedWrap{background:url (headgradient.gif) repeat-x #MactchingRed; }
    h1{height: height of logo image px;  width: width of logo image px; overflow:hidden; position:relative; float:left;}
    h1:after{ position:absolute; top:0; left:0; height:100%; width:100%;  background: url (logo.jpg) no-repeat; content:"";}
    #hedWrap >p, #hedWrap form, #mainnav{ margin-left: width of logo image px}
    That is a bare bones conceptual explanation, but you can see it is far simpler and also more semantically correct than merely trying to recreate tables with divs.


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
  •