Grow your CSS skills. Land your dream job.

table-based sites

  • # September 30, 2008 at 5:37 pm

    hey guys, a friend just ask me to make a site for him. He wants it to look just like this site http://www.mamaina.com.ar.
    I was trying to figure out how it was build with the help of my beloved firebug. Is a complete table based site.
    I’m, one of those who writes his pages in textmate, so that kind of tables seems a lot of work to me.
    My questions are:
    Is there any way to make a site like this in css?
    Is there any software that can help me to make tables easily?

    I can imagine this site in css, but I can’t figure out how to center it horizontally in the middle of the screen.
    I would preciate any answers. Thanks!

    # September 30, 2008 at 5:50 pm
    "fedeisas" wrote:
    hey guys, a friend just ask me to make a site for him. He wants it to look just like this site http://www.mamaina.com.ar.
    I was trying to figure out how it was build with the help of my beloved firebug. Is a complete table based site.
    I’m, one of those who writes his pages in textmate, so that kind of tables seems a lot of work to me.
    My questions are:
    Is there any way to make a site like this in css?
    Is there any software that can help me to make tables easily?

    I can imagine this site in css, but I can’t figure out how to center it horizontally in the middle of the screen.
    I would preciate any answers. Thanks!

    Hi fedeisas

    To make you make tables easy? Dreamweaver, I guess :)

    For the matter of centering the div’s with css, make a wrapper that centers all your content displayed on your page..

    Code:
    wrapper {
    margin-left:auto;
    margin-right:auto;
    }

    This will center the div on any screens..

    I guess that is what you were looking for, or am I wrong?

    # September 30, 2008 at 6:03 pm

    hi BrianZet, thanks for the reply!
    Dreamweaver could be a choice. thanks.
    But with that code I’ll center the content horizontally.
    How can I center it vertically?

    thxs.

    # September 30, 2008 at 6:07 pm

    you need to make a wrapper like suggested above. that will wrap all of your xhtml. give it a width though. and combine the rules like this

    #wrapper { width: 900px; margin: 0 auto; }

    this will center your page and give it a width of 900 pixels. to see the wrapper, add a border to the code

    border: 1px solid #000;

    box
    # September 30, 2008 at 6:33 pm

    Please do not build a table based site. There’s no need!

    # September 30, 2008 at 6:56 pm

    I think no one is undestanding what I’m asking. And that’s because my primary language isn’t english.
    I already know how to center a div horizontally using "margin: 0 auto;".
    But, how do I center it vertically? Let’s say I gave it a fixed height about 500 px. and I need it in the center of the screen.
    Any suggestions?

    Please see the site http://www.mamaina.com.ar as an example of what I’m looking for.

    # September 30, 2008 at 8:11 pm

    I was a long-time holdout when it came to embracing css layout. I always thought that all the cross-browser issues made css layout too big a headache and I liked tables. I was used to them.

    Recently, being tired of all the snide comments about table-based layouts, I decided to give css layout a try. I converted an entire osCommerce site (many many many pages with thousands, or even possibly tens of thousands of table-related tags).

    After a few minor hurdles dealing with floats and clearing, the conversion from table-based to css-based layout became a snap. The code is cleaner, more readable, faster and many files were reduced in size by 75% or more!!!

    Don’t waste your time on a table layout. You can make it better, faster, cleaner and smaller and have more control using css.

    (This message has been brought to you by the CSS for President campaign) :D

    # September 30, 2008 at 8:14 pm

    Here’s a solution:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




    **NOTE: I INCLUDED 2 BOXES TO HELP YOU VISUALIZE THE DIFFERENCE IN MOVEMENT WHEN YOU ADD THE NEGATIVE MARGINS. Check out http://www.thedailyspunkmeyer.com/testingdirectory/test.html to see what I mean.

    Basically, you have a box (#box) which in this example is 600px wide and 400px tall. Now, working from the top left corner, you then apply a "fixed" position to the element which makes the positioning of the element relevant to the browser window. You then apply the positioning: "top:50%; left:50%;" to move it down and right 50%.

    Now, imagine that the box you’re creating has a dot right smack in the middle of it. If all was well, the browser would interpret our rules and move the box based on this middle dot. Unfortunately, the browser takes our rule and applies it to the perimeter of the box, marked by the border that I’ve included for this example. Well, if it does that, our box will be out of line horizontally and vertically by exactly half of the box’s dimensions; In this case, 300px too far right, and 200px too far down.

    Ok. so let’s take that space back then by adding negative margins to the box with: "margin-top:-200px; margin-left: -300px; which then essentially moves the box left 300px and up 200px. The box should now be centered in the browser window.

    ** After I wrote this entire article, I thought it to be prudent to mention that Chris (the guy who writes the articles on this site) actually had a work around in an article that was pretty much exactly the same. Doheth!

    ***Also, you may want to read the posts after his article at http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ which illustrate the weaknesses of this particular work-around.

    # September 30, 2008 at 9:04 pm

    Awesome! I can’t believe it was that simple.
    Spunkmeyer, you saved me a lot of troubles.
    And, Mikes, you’re probably right, it’s not worth the trouble making table based sites.

    Thank you all!

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".