Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: HR rule

  1. #1
    New Coder
    Join Date
    Jul 2007
    Location
    UK
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HR rule

    This is a hr rule that i have used
    Code:
    <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.
    http://www.smgames.staticfire.co.uk Under construction, Currently hiring mods and admins anyone interested pm me.

  • #2
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    I'm not sure I quite understand what you want, but have you tried with the margin property? For instance, add a

    Code:
    margin-top: 5px;
    
    or
    
    margin-bottom: 5px;
    Also, I recommend that you put

    Code:
    * {
    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?
    Last edited by Jutlander; 07-01-2007 at 12:51 PM. Reason: add something

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by SMGames View Post
    Code:
    <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.

    Quote Originally Posted by SMGames View Post
    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.

    Quote Originally Posted by Jutlander View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Quote Originally Posted by Arbitrator View Post
    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:

    Code:
    <h2 class="whatever">Heading</h2>
    is a lot better than:

    Code:
    <div class="h2"><h2>Heading</h2></div>
    Last edited by Jutlander; 07-01-2007 at 03:08 PM.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by Jutlander View Post
    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.

    Code:
    <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.

    Quote Originally Posted by Jutlander View Post
    What I mean in example:

    Code:
    <h2 class="whatever">Heading</h2>
    is a lot better than:

    Code:
    <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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    New Coder
    Join Date
    Jul 2007
    Location
    UK
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey thanks guys those should work, ill try them.
    http://www.smgames.staticfire.co.uk Under construction, Currently hiring mods and admins anyone interested pm me.


  •  

    Posting Permissions

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