...

View Full Version : HR rule



SMGames
07-01-2007, 01:16 PM
This is a hr rule that i have used
<div style="width:100%; border-top:thin dotted #75a1d0"> which shows a line close to the text. when there is text above and below the hr i was wondering if you can put a small gap between the hr and text, i have tried <br> but its a bit too big, does anyone know, thanks.

Jutlander
07-01-2007, 01:46 PM
I'm not sure I quite understand what you want, but have you tried with the margin property? For instance, add a


margin-top: 5px;

or

margin-bottom: 5px;

Also, I recommend that you put



* {
margin: 0;
padding: 0;
}


to your stylesheet. That will eliminate all default margin and padding and allow you to specify what you want, without having to use hacks.

But why not use <hr> for the purpose?

Arbitrator
07-01-2007, 04:02 PM
<div style="width:100%; border-top:thin dotted #75a1d0">Declaring width: 100% on a div element is often unnecessary and redundant since a div element expands automatically by default. It may also be more appropriate to simply set a border to an existing element as well, assuming that your text blocks are correctly marked up via p elements and the like. Just thought that Iíd point those things out in case you hadnít already considered them.


when there is text above and below the hr i was wondering if you can put a small gap between the hr and text, i have tried <br> but its a bit too big, does anyone know, thanks.You would use top and/or bottom margins. If you go for the border approach, then you would probably use vertical margins and/or padding.


But why not use <hr> for the purpose?The hr element has styling and compatibility issues. Arguably, itís also a presentational element that should be avoided.

Jutlander
07-01-2007, 04:06 PM
The hr element has styling and compatibility issues. Arguably, itís also a presentational element that should be avoided.

It is still more semantic IMO than using a div, because a div is meant as a section in a document and they're not meant to be thrown all over the page (as many people do).

What I mean in example:


<h2 class="whatever">Heading</h2>

is a lot better than:


<div class="h2"><h2>Heading</h2></div>

Arbitrator
07-01-2007, 04:27 PM
It is still more semantic IMO than using a div, because a div is meant as a section in a document and they're not meant to be thrown all over the page (as many people do).Depending upon itís usage, you might be right; Iíd have to see the page. However, generally, correct use of other semantic constructs will negate the need for the hr element; below is an example. This is one of the reasons that I suggested the border approach. Using background images in conjunction with margins or padding is another alternative.


<h2></h2>
<div>
<h3></h3>
<p>Ö</p>
<p>Ö</p>
<p>Ö</p>
</div>
<hr>
<div>
<h3></h3>
<p>Ö</p>
<p>Ö</p>
<p>Ö</p>
</div>

You can see how the hr is redundant in the above code. With regard to the div elements, they would, ideally, be replaced by the section element of the upcoming HTML 5 and XHTML 2 specifications.


What I mean in example:


<h2 class="whatever">Heading</h2>

is a lot better than:


<div class="h2"><h2>Heading</h2></div>Yeah, I see such redundancies frequently. In addition to headings, I often see it done with navigation lists. People seem to ignore the ul and instead style a parent div.

SMGames
07-01-2007, 07:01 PM
Hey thanks guys those should work, ill try them.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum