SitePoint Sponsor

User Tag List

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

    New here, :) just left table world, need help aligning horz now :(

    Morning all,

    Well I decided to dive head first into the sea of tableless design, and the waters are a little choppy right now. I understand how to center a page now using #container and setting the width, but now for example if I have a 1 row 4 col image that is sliced into 4 cells across I'm having a challenge in how to keep it that way in css. I'm pretty clear on if you want to put two elements side by side you can use the left-element then right-element and set the width accordingly, but what if you several elements that need go side by side. Now I could take the easy way and just not slice the image, and set the container then set width of the image and center it, but this bugging me to no end...

    Sincerley,
    lifeguard for new css swimmers

  2. #2
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should just be able to float the images all the same direction and have them line up against each other.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  3. #3
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perhaps if you posted a link to the image / site your trying to create we can advise better?
    "If it ain't broken, don't fix it!"
    ----
    Northern Star - Web design, stategy & development.

  4. #4
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Tailslide,

    What do you mean by same direction? Align or float rather right or left...I keep thinking in terms of tables like this...

    <tr>
    <td>slice1</td>
    <td>slice2</td>
    <td>slice3</td>
    <td>slice4</td>
    </tr>

    so that same effect would be something like this for example...

    .left-side, .middle, .right, .far-right {float-left}

    <div id="container">
    <div class="left-side"></div>
    <div class="middle"></div>
    <div class="right"></div>
    <div class="far-right"></div>
    </div>

    Or am I totally of the mark here? Thanks!

  5. #5
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi northstar, I'll post a link, hold a sec...thanks again for everyone's assistance

  6. #6
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have a simple php includes at the top so I won't have to repeat the image and nav on every page. So this link, http://www.webbworkz.com/divtest.php should look like this when everything lined up properly http://www.webbworkz.com/index.php (this is tables)

  7. #7
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see what your trying to achieve, but like you admitted... your still seeing things as cells and rows.

    It's hard to get your head round tabless sites to start with, but you get used to it after a while.

    With this design, you don't need to splice up your image so many times.

    Basically, you have a background for your header, a background for your navigation and a background for your search form.

    You could easily have it laid out like this...

    Code:
    <div id="header">
    
        <form>
          <input type="text".../>
          <input type="submit".../>
       </form>
    
       <div id="navigation">
    
       </div>
    
    </div>
    If I get chance later on today I'll knock you up a diagram of how I'd split it up...
    "If it ain't broken, don't fix it!"
    ----
    Northern Star - Web design, stategy & development.


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
  •