Learning CSS - But Have ONE Problem

Discussion in 'CSS' started by simonspurr, Oct 4, 2008.

  1. #1
    This morning I decided to learn CSS - I currently now how a pretty good basic understanding of it all and was working my way through coding a simple HTML/CSS site.

    However, I noticed 1 thing that wasn't going to plan - between each div there seems to be a white space of about 20-30 pixels
    Screenshot here: http://tutorial-videos.info/stuck.jpg

    I will give u the code of the page

    What do I need to do/what am I doing wrong?
     
    simonspurr, Oct 4, 2008 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Somewhere in your speed-learning, you missed §8.3.1 Collapsing margins.

    BTW, the center tag is deprecated and not a part of current x/html recommendations.

    cheers,

    gary
     
    kk5st, Oct 4, 2008 IP
  3. simonspurr

    simonspurr Peon

    Messages:
    604
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #3
    ahh, thanks, I think I got it - I just had to set padding and margins to 0... right?
     
    simonspurr, Oct 5, 2008 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    kk5st, Oct 5, 2008 IP
  5. steve875

    steve875 Peon

    Messages:
    91
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Not sure if it's recommended or not, but you can start off with this in your CSS Style:

    *    { margin: 0; padding: 0; }
    Code (markup):
    If I remember correctly, it's pretty much a global reset, so your divs wont have margin or padding.
     
    steve875, Oct 5, 2008 IP
  6. simonspurr

    simonspurr Peon

    Messages:
    604
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #6
    thanks everyone - I plan to have a good knowledge of it within a week, and then maybe move onto WordPress - it's possible to learn it in a week, right?
     
    simonspurr, Oct 5, 2008 IP
  7. steve875

    steve875 Peon

    Messages:
    91
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #7
    You'll know enough to get along fine within a few days. I learned in like 2-3 days, it's pretty straight forward until unexplainable things happen. lol
     
    steve875, Oct 5, 2008 IP
  8. moonboxdesign

    moonboxdesign Guest

    Messages:
    30
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    You have no margins or padding.

    Try this

    .navbar{
    margin: 0px;
    padding: 0px
    background-image: url('nav.gif');
    background-repeat: repeat-x;
    font-family: DiavloBook-Regular;
    }

    That should work.
     
    moonboxdesign, Oct 5, 2008 IP
  9. simonspurr

    simonspurr Peon

    Messages:
    604
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Yea, I had already fixed that

    I almost have a site done - just have 1 problem with the sidebars though

    If my main content area has lots of text in it and it extends quite a long way down the page, how do I made the length of the sidebars equal the length of the main content panel?
     
    simonspurr, Oct 6, 2008 IP
  10. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Google "faux columns" because generally you cannot force things to grow just because some other box over there is growing.

    There are other tricks but Faux Columns are the most popular. Other techniques would be (yuck) wrapping your whole page in tables (table data cells are one of the few boxes who DO look to see how big their neighbours are getting, because they are all in the same row), or multiple float wrapping (whoever is the section most likely to grow is the innermost float, forcing its parents, the other floats, to grow along with it).

    Sonny, I've been learning this crap for over a year and it NEVER STOPS! Arrrrrg! CSS never stops and even worse, neither does HTML.

    You can "get by" in a week maybe. You can make lots of different page types in a month. But you'll never defeat the various bugs and quirks and strange specs until after many many months or arduous googling and downloading of browsers and hair-pulling and begging the cloaked and hooded gurus for knowledge, for which most of the time they'll just say "google it."

    : )
     
    Stomme poes, Oct 6, 2008 IP
  11. simonspurr

    simonspurr Peon

    Messages:
    604
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #11
    haha, sounds like a painful and continuous process I have got myself into :)

    Thanks for the info though, i will look into it soon - I don't like the look of tables so I will probably do the multiple float wrapping or faux columns
     
    simonspurr, Oct 6, 2008 IP