www.webdeveloper.com
Results 1 to 6 of 6

Thread: Table Style Layout in CSS (question)

  1. #1
    Join Date
    Oct 2005
    Posts
    8

    Table Style Layout in CSS (question)

    I was going to do a friend a favor by recoding his portfolio page (he uses dreamweaver) and I realized I didn't really know how to do it properly.

    How would I go about lining up where it says Portfolio, then has the name, then under is Type:, then properly aligned is the type of site.

    What is the best way to go about doing this?

  2. #2
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Got anything we can look at?
    Every fight is a food fight when you’re a cannibal.

  3. #3
    Join Date
    Oct 2005
    Posts
    8
    doh! that's what i get for posting at 1am or whatever time it was. I meant to post the link www.thrivefx.com

    sorry about that and i appreciate your interest in helping

  4. #4
    Join Date
    Oct 2005
    Location
    Hoffman Estates, IL
    Posts
    12
    helio,

    if you're looking to space the text and images in the fashion that it's featured on these individiual areas of the page, there are several different ways to go about it.

    the method I would personally use is using nested divs, although perhaps this will be called out as not the best way to do it. regardless, here's the code for the XHTML as i would put it:

    <div class="container">
    <img src="blah.jpg">
    <div class="heading">
    Project
    </div>
    <div class="blurb">
    slashtRend
    </div>
    <div class="heading">
    Type
    </div>
    <div class="blurb">
    Website Design etc
    </div>
    <div class="heading">
    Description
    </div>
    <div class="blurb">
    slashtRrent has taken the plunge...
    </div>
    </div>

    Then you style your CSS a little something like...
    .container {
    width: 500px;
    margin: 50px;
    padding: 20px;
    }
    .container img{
    float:left;
    width:200px;
    }
    .heading{
    float:left;
    width:100px;
    padding: 10px;
    height: auto;
    }
    .blurb{
    float:left;
    width:200px;
    padding: 10px;
    }

    i might be a little off with this, as i typed it all in about 2 minutes - be wary of the height:auto, as perhaps you will have to float header and description to the right rather than the left so the height doesn't match up with the image instead of the description. on the other hand, it could work fine.

    the reason i went with the div's separate is that if you try to put each column in one, you'll end up with a lot of <p></p> junk code that you don't really need. <div> tags in the long run end up being a lot less junky than table tags, which is why i neglected to surround anything in a table.

    that's your basic idea. feel free to private message me.
    Last edited by TymArtist; 10-19-2005 at 06:16 PM.

  5. #5
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Here's my go at it. Had some rather annoying problems with IE and had to change the markup somewhat to get it to look right in it.

    I used <h2>'s for the headers in each of the sections, that's because I assume you would use <h1> for the main page header.
    Attached Files Attached Files
    Every fight is a food fight when you’re a cannibal.

  6. #6
    Join Date
    Oct 2005
    Posts
    8
    wow, thankyou so much guys. i really appreciate it!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles