Help with Margin bottom?

**rbutler** · Nov 2, 2004 09:21

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.

**vgarcia** · Nov 2, 2004 09:26

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.

**Paul O'B** · Nov 2, 2004 09:45

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

**rbutler** · Nov 2, 2004 10:20

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.

**Paul O'B** · Nov 2, 2004 10:56

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

**rbutler** · Nov 2, 2004 11:57

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.

**rbutler** · Nov 3, 2004 09:29

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.

**vgarcia** · Nov 3, 2004 09:40

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