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 10 of 10
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Header underlines the whole width

    Is there any special way to have a header underline go the width of the div without having to place it into its own special div? Right now to get a clean div-wide underline I put the header in a separate div and use the border-bottom property.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    </head>
    <body>
    <div style="height:120px;width:100px;color:blue;text-align:center;"><h3>Sammy</h3><hr /></div>
    </body>
    </html>

  • Users who have thanked sunfighter for this post:

    Vytfla (05-30-2012)

  • #3
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    </head>
    <body>
    <div style="height:120px;width:100px;color:blue;text-align:center;"><h3>Sammy</h3><hr /></div>
    </body>
    </html>
    Awesome, thanks a bunch.
    Last edited by Vytfla; 05-30-2012 at 10:00 PM.

  • #4
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Another question:

    I'm trying to style it in CSS and it's not working (using <h3>Sammy</h3><hr />); can I only do it in HTML following the character? (<hr style=" " etc...)

  • #5
    New Coder
    Join Date
    Nov 2010
    Location
    Virginia,USA
    Posts
    36
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by Vytfla View Post
    Another question:

    I'm trying to style it in CSS and it's not working (using <h3>Sammy</h3><hr />); can I only do it in HTML following the character? (<hr style=" " etc...)
    no you can designate what the horizontal rule will look like in your style sheet. or you can do it inline. If its a one time only application then inline styling should be fine. If your going to use Horizontal Rules several times throughout your site then you should create a set of rule in your stylesheet.

  • #6
    New Coder
    Join Date
    Nov 2010
    Location
    Virginia,USA
    Posts
    36
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by RufusMadore View Post
    I'm trying to style it in CSS and it's not working
    Ok, well try this in your stylesheet. The current design makes a Horizontal rule red in color, 80% of the container in width, 4 pixels high with rounded edges;

    Code:
      .test{
    width:80%;
    height:4px;
    background:#ee0000;
     -moz-border-radius:6px;
     -webkit-border-radius:6px;
      border-radius:6px;
    }
    You can name the class anything you want, it dosent have to be "test"
    Everything is totally adjustable and the border radius's round the edges. You can also call an image instead for the HR simply by adding this behind the color url(images/your_image.png)

    Call a styled Horizontal Rule like this;
    Code:
     <hr class="test"/>
    Last edited by badwolf; 05-31-2012 at 06:41 AM.

  • #7
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by badwolf View Post
    Ok, well try this in your stylesheet. The current design makes a Horizontal rule red in color, 80% of the container in width, 4 pixels high with rounded edges;

    Code:
      .test{
    width:80%;
    height:4px;
    background:#ee0000;
     -moz-border-radius:6px;
     -webkit-border-radius:6px;
      border-radius:6px;
    }
    You can name the class anything you want, it dosent have to be "test"
    Everything is totally adjustable and the border radius's round the edges. You can also call an image instead for the HR simply by adding this behind the color url(images/your_image.png)

    Call a styled Horizontal Rule like this;
    Code:
     <hr class="test"/>
    If I only use it once, can I just leave it as <hr />? Then in CSS, it would be:

    hr {
    width
    height
    color
    background color
    }

    Also- if I wanted to be a single straight line of a certain color, the only attribute I'd assign something to is color, right?

    The reason I seem confused is I'm trying to mess around with it in dreamweaver, and when I change colors it shows up in dreamweaver but not when I preview in Chrome, though I haven't been setting a height or anything.
    Last edited by Vytfla; 06-01-2012 at 02:26 AM.

  • #8
    New Coder
    Join Date
    Nov 2010
    Location
    Virginia,USA
    Posts
    36
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by Vytfla View Post
    If I only use it once, can I just leave it as <hr />? Then in CSS, it would be:

    hr {
    width
    height
    color
    background color
    }

    Also- if I wanted to be a single straight line of a certain color, the only attribute I'd assign something to is color, right?

    The reason I seem confused is I'm trying to mess around with it in dreamweaver, and when I change colors it shows up in dreamweaver but not when I preview in Chrome, though I haven't been setting a height or anything.
    You seemed to be having an issue with your own styling. And I know the method I gave you works. But there is no reason why your way shouldnt work.

  • #9
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by badwolf View Post
    You seemed to be having an issue with your own styling. And I know the method I gave you works. But there is no reason why your way shouldnt work.
    I'll play around with it some more. It just seems like dreamweaver is giving my one result and my browser test is giving me another.

  • #10
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by Vytfla View Post
    I'll play around with it some more. It just seems like dreamweaver is giving my one result and my browser test is giving me another.
    Repeat after me: Dreamweaver is not a browser! If you want to use it, just keep it in code view. It is all but useless for the preview element.


  •  

    Posting Permissions

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