Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS table-based sites

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #23339
    fedeisas
    Member

    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!

    #50220
    BrianZet
    Member
    "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?

    #50221
    fedeisas
    Member

    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.

    #50228
    fedeisas
    Member

    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.

    #50229
    mikes
    Member

    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

    #50230
    Spunkmeyer
    Member

    Here’s a solution:

    Code:



    Your name here


    **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.

    #50232
    fedeisas
    Member

    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 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.