CSS page layout assistance

Discussion in 'CSS' started by JakeThePeg, Nov 23, 2009.

  1. #1
    Howdy folks

    I'm hacking an existing website template for my site, One Million Hit Wonder. Please note, I am hopeless with CSS code.

    Basically, I want to minimize the unnecessary white space that you are seeing between the major headings on the home page. It shouldn't be all that hard I don't think, but I'm not having any luck!

    Can any please suggest which lines of code I need to modify in my CSS to reduce the large spaces between each of the headings on my home page?
     
    JakeThePeg, Nov 23, 2009 IP
  2. fixie

    fixie Member

    Messages:
    25
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #2
    .storytitle {float:left;height:240px;width:240px;}

    .storytitle class has height of 240 pixels. If you want to reduce the white space (I take it you mean vertically?), change the height value for that class.

    My suggestion is to set it like this (i'm doing this on the first look assumption):

    .storytitle {float:left; margin-bottom: 30px; display:block; width:240px;}
     
    fixie, Nov 23, 2009 IP
  3. JakeThePeg

    JakeThePeg Active Member

    Messages:
    230
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #3
    Thanks for your suggestion. That kind of worked, but not really. The problems with it were:

    1. The text from the second 'column' started to wrap beneath the headings (I wanted the headings to be all in one column, and the text to be in the second column, no wrapping)

    2. The other issue, was that the text from second column moved down, so that it was vertically aligned with the bottom of the titles, instead of being vertically aligned the top of the titles.

    If you have an other suggestions which will help me achieve my objective, they will be greatly appreciated!
     
    JakeThePeg, Nov 23, 2009 IP
  4. JakeThePeg

    JakeThePeg Active Member

    Messages:
    230
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #4
    I just realised an easier way of explaining what I am after. I require a basic tabular layout, but of course, using CSS

    • The layout I desire, is a table with 2 columns.
    • Column 1 will contain the titles, and column 2 will contain the text.
    • Both columns are left aligned, and top aligned.
    • No cells are to be merged.
    • And there will be approximately 30 pixels of padding between each row in the table.

    How do I do this using CSS?
     
    JakeThePeg, Nov 23, 2009 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    You do have enough work in front of you involving CSS that it would totally be worth it to learn some.

    It's fine to ask for help/code with one website that you're the webmaster of or whatever but since you like to have many sites look nice, go ahead and see if you can find
    Build Your Own Web Site the Right Way Using HTML and CSS by Ian Lloyd
    in your public library or somewhere. (the point isn't to build your own web site but to learn how to, which means you also learn how to READ a website you receive from someplace)

    You may not consider yourself a developer but you're doing the work of one, so... go ahead! : )
     
    Stomme poes, Nov 27, 2009 IP