SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with Margin bottom?

    Hey,

    This page: http://midwestwebdesign.net/co2/

    I want to create bottom space between each horizontal rule and the pictures, I think you'll get my drift when you view it. I was using <br> but this seemed to cheat so I'm attempting to break bad habits. I used margin-bottom on each class associated with the horizontal line but I must be missing something. Here's the revelevant css classes for the horizontal rule:

    Code:
    .hrline{
    	width:75%;
    	background-color:#000000;
    	height:1px;
    	overflow:hidden;
    	margin-bottom:8px;
    }
    .hrline2{
    	width:75%;
    	background-color:#000000;
    	height:1px;
    	overflow:hidden;
    	margin-bottom:85px;
    }
    .hrline3{
    	width:75%;
    	background-color:#000000;
    	height:1px;
    	overflow:hidden;
    	margin-bottom:65px;
    }
    .hrline4{
    	width:75%;
    	background-color:#000000;
    	height:1px;
    	overflow:hidden;
    	margin-bottom:120px;
    }
    Then part of my HTML/CSS code:

    Code:
    <div class="hrline"></div>
      <p class="volunteer"><img src="m2img/jimmurphyandstudent.jpg" width="172" height="173" class="jim"></p>
      <p class="caption">Jim Murphy is one of 400 volunteers in the Reading Buddies/Chat and Chew Program of RSVP. Jim says, &quot;Helping these kids learn to read, helps me as much as it does them.&quot; ... <a href="javascript:;">read more</a></p>
       <div class="hrline2"></div>
        <ul>
      	<li>The Council is a faith based human services organization with nine <span class="emphasized">projects</span> that focus on improving the quality of life for children, families, seniors and those with disabilities.</li>
      </ul>
    Additionally, would anyone know why the spacing on the second picture isn't there even though I used float:left?

    Feedback as always is appreciated.
    Ryan Butler

    Midwest Web Design

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You can cut down on your CSS by using multiple classes in your HTML:
    Code:
    .hrbase{
    	width:75%;
    	background-color:#000000;
    	height:1px;
    	overflow:hidden;
    }
    .hrline1 {
      margin-bottom: 8px;
    }
    .hrline2{
    margin-bottom:85px;	
    }
    .hrline3{
    	margin-bottom:65px;
    }
    .hrline4{
    	margin-bottom:120px;
    }
    HTML Code:
    <div class="hrbase hrline1"></div>
    Should save you some code

    As for your problem, maybe think of a different way to go about it? Such as:
    Code:
    .hrbase {
      width: 75%;
      border-top: 1px solid black;
    }
    .hrline1 {
      padding-top: 8px;
    }
    .hrline2{
    padding-top: 85px;	
    }
    .hrline3{
    padding-top:65px;
    }
    .hrline4{
    padding-top:120px;
    }
    Code:
    <div class="hrbase hrline1"></div>
      <p class="volunteer"><img src="m2img/jimmurphyandstudent.jpg" width="172" height="173" class="jim"></p>
      <p class="caption">Jim Murphy is one of 400 volunteers in the Reading Buddies/Chat and Chew Program of RSVP. Jim says, &quot;Helping these kids learn to read, helps me as much as it does them.&quot; ... <a href="javascript:;">read more</a></p>
       <div class="hrbase hrline2"></div>
        <ul>
      	<li>The Council is a faith based human services organization with nine <span class="emphasized">projects</span> that focus on improving the quality of life for children, families, seniors and those with disabilities.</li>
      </ul>
    I still think an empty div is a little weird for a horizontal line though. Perhaps you should try using border-top and padding-top on other elements to achieve the styles you're going for, and reduce the amount of unnecessary empty divs on your page.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi Ryan,

    I think you should maybe re-think that left column a bit and add a little more structure to it.

    While dividing lines (whether they are hr or empty divs) do separate the content they always strike me as amateurish and more like an after-thought. e.g. ok finished that bit now heres the next.

    You could achieve more professional look by using a more consistent format down that left hand side and not using horizontal lines to separate content. Maybe some sublte shading around the pictures and text and separate each item with white space to produce the border effect.

    Thats just an idea but I think you would benefit from thinking about the formatting and spacing issues on that side.

    Paul

  4. #4
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not exactly the input I was looking for but anyways. It's interesting how you can design a site that ten people love but one person will dislike.

    Personally, I like the hr's but that's a personal preference. I'll look into re-arranging somethings.

    Well, the issue of white space was what I was asking about but I'll just re-think the presentation a bit.
    Ryan Butler

    Midwest Web Design

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ryan
    Personally, I like the hr's but that's a personal preference. I'll look into re-arranging somethings
    Don't take my opinions to heart they were just a suggestion. In the end the decision is yours

  6. #6
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't take my opinions to heart they were just a suggestion. In the end the decision is yours
    Actually, in the end, it's the clients. At least sitepoint opens eyebrows for me that I don't think of, which I highly appreciate.
    Ryan Butler

    Midwest Web Design

  7. #7
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm wondering on the same page I have this scenerio. My navigation is 105 pixels from the top. I need the boy at the top to be behind the navigation and tag line. Would z-indexing work in this scenerio or would it be easier to move the navigation down 10 pixels to accomdate for this image?

    Guess I'm merely asking what is the better alternative.
    Ryan Butler

    Midwest Web Design

  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by rbutler
    I'm wondering on the same page I have this scenerio. My navigation is 105 pixels from the top. I need the boy at the top to be behind the navigation and tag line. Would z-indexing work in this scenerio or would it be easier to move the navigation down 10 pixels to accomdate for this image?

    Guess I'm merely asking what is the better alternative.
    Either way is acceptable. Go with what would be easier to maintain if all other things are equal

  9. #9
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm assuming you start with zero (z-indexing) and work your way up then right?
    Ryan Butler

    Midwest Web Design

  10. #10
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by rbutler
    I'm assuming you start with zero (z-indexing) and work your way up then right?
    Yep


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •