1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Multi-Column Text and line spacing...

Discussion in 'CSS' started by HUMMIKE, Sep 7, 2011.

  1. #1
    Hi All,

    I've been setting up the following page with my resume: http://michael-nally.com/resume.php.

    Running an up-to-date version of Firefox at and Safari 3, the two columns line up properly (location of each job lines up with date). However, when I opened it in IE8 or (i think) a newer version of Safari on my gfs computer, there is a 3 line difference between the two (my date column is three lines shorter than the left column.

    This is killing me...any help would be appreciated.

    Cheers!
     
    Solved! View solution.
    HUMMIKE, Sep 7, 2011 IP
  2. WebPageMistakes

    WebPageMistakes Active Member

    Messages:
    91
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    60
    #2
    You have not structured this properly at all. You have used a bunch of <br /> tags to force placement and spacing between paragraphs. Also, you have not used heading tags correctly.

    One set of h1 tags per page.

    h2 tags for the division of the sections of the page.

    Each paragraph should be in a set of <p> and closing </p> tag.

    You have 3 <br /> tags at the top of column b which are pushing the contents down to start with.

    Instead of 2 columns I would have used an item div and floated the contents so they are side by side.
     
    WebPageMistakes, Sep 7, 2011 IP
  3. HUMMIKE

    HUMMIKE Member

    Messages:
    42
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #3
    Hi,

    Thanks for the speedy reply. I've never set up columns, so this is great to learn. What do you mean by "h2 tags for the division of the sections of the page"?? I'm going to try what you've recommended and hopefully it will sort out my issues. Can you recommend a good resource for the do's and dont's of the different classes and ids? I've been free-styling so far...

    Thanks again!
     
    HUMMIKE, Sep 8, 2011 IP
  4. #4
    Idea: A bit easier than the column idea

    HTML
    
    <div id="wrapper"> 
      <h1>Resume of Michael Nally</h1>
      <h2>Work Experience</h2>
      <h3 class="name">Name of Co.</h3>
      <p class="date">Date employed</p>
      <p>Info about job</p>
      <h3 class="name">Name of Co.</h3>
      <p class="date">Date employed</p>
      <p>Info about job</p>
      <h2>Education</h2>
      <h3 class="name">Name of School</h3>
      <p class="date">Date</p>
      <p>Info about course</p>
    </div>
    HTML:
    CSS
    
    body {
    background-color: #000000;
    color: #ffffff;
    }
    #wrapper {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    }
    h1, h2 {
    color: #F0795B;
    }
    h2 {
    margin-bottom: 0;
    }
    .name {
    width: 70%;
    float: left;
    margin-bottom: 0;
    }
    .date {
    width: 28%;
    float: right;
    }
    p {
    width: 70%;
    }
    Code (markup):
    Turns out as per attached.

    1 id per page. The same id can be used on multiple pages. e.g. the wrapper id above can be used on each page but only once per page

    Classes can be used a number of times on a page.

    Using an external stylesheet makes editing styles easier. You just edit the attached external stylesheet and it updates all the pages.
     

    Attached Files:

    WebPageMistakes, Sep 8, 2011 IP
    HUMMIKE likes this.
  5. HUMMIKE

    HUMMIKE Member

    Messages:
    42
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #5
    Hi,

    Thanks so much for your time. I've fixed it to the best of my knowledge, and you're right, it works much more consistently. If you could take a peek and confirm that its better I would really appreciate it.

    Thanks again!
     
    HUMMIKE, Sep 10, 2011 IP
  6. WebPageMistakes

    WebPageMistakes Active Member

    Messages:
    91
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    60
    #6
    Yes it is looking better but you still didn't get the heading part right. Look at the coding I included in my reply above.
     

    Attached Files:

    WebPageMistakes, Sep 10, 2011 IP