[HELP] HTML Design with CSS elements

Discussion in 'HTML & Website Design' started by rebrain, Apr 23, 2008.

  1. #1
    Hallo.
    I am new to CSS and I am still learning how to create full webpages with css instead of just using it for some text formatting and other minor changes.

    Here is the production page http://demo.pipez.cn/first_design/
    The design is built for webspell, but it does not matter.
    See the little piece of picture coming out to the right from HEADSPONSOR?
    It happens when I put the "padding" CSS property in the td of the table in index.php

    it looks like this

    style="padding: 10px 10px 10px 10px;"
    Code (markup):
    Well, you can see the source code.
    I added the padding for the text to be on the right place and does not end up on the border somewhere.

    Thank you for help.
     
    rebrain, Apr 23, 2008 IP
  2. rebrain

    rebrain Peon

    Messages:
    60
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    it seems that the tds are getting bigger because of the padding property. How do I avoid it?
     
    rebrain, Apr 23, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I don't see anything coming out of Headsponsor, but yet, padding is part of width. You can just use less padding, or text-align, or have just padding on the top and bottom instead on all four sides...
     
    Stomme poes, Apr 23, 2008 IP
  4. rebrain

    rebrain Peon

    Messages:
    60
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    yeah i just changed it. Desided to use tables to make an area where the text can go.


    I read that padding and border are added to the width only by IE6.
    Is is wrong?
     
    rebrain, Apr 23, 2008 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Well, yes and no. IE6 with a proper doctype will act like all modern browsers as far as the box model. IE5.5 and below count padding and borders as Total Width which is wrong and cannot be fixed without hacks.

    What I meant was, though, that if you have a box that's 50px wide, and you add 10px left and right padding, the whole box is now 70px wide. Padding increases the width (the visual width) of the box, and when you have boxes inside a container and you're counting widths to see what will fit, you need to count the padding and borders too.

    So adding padding to your text is increasing the width of space it's taking up inside the cell.
     
    Stomme poes, Apr 23, 2008 IP
  6. rebrain

    rebrain Peon

    Messages:
    60
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    wow! i did not know that :eek:
    Thank, you!
     
    rebrain, Apr 23, 2008 IP