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 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2007
    Posts
    75
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Border to stretch 100% of the div length?

    So I'm back with a question.
    I'm not sure if I have done this the best way.
    I tried headings (h1) but I got problems with line-breaks. It worked to add
    Code:
    line-height:0pt;
    but that also removed all the line-breaks I actually wanted. After a lot of testing and head-scratching I gave up with headings.

    Instead I did a span class. It works perfectly fine, BUT I want a 2px border underneath the text, and I want it to stretch 100% of the div.
    This is how it looks now: http://noomirapace.org/?page_id=72
    The border is just under the text, and I want it to stretch all the way to the right.

    I bet this isn't the best way to make borders, so that's probably why I have this problem hehe.

    CSS code
    Code:
    .heading {
    font-size:20px;
    text-shadow: 0px -1px 0px #765020;
    color:#C1997B;
    font-weight:bold;
    border-bottom:#744f21 solid 2px;
    border-bottom-width:100%;
    line-height:0pt;
    }
    HTML code
    Code:
    <span class="heading"><strong>•</strong> Early Life</span>
    <em>coming soon!</em>
    Last edited by Emsan; 02-17-2011 at 12:21 PM.

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    You need to make it a normal heading in order to get the line right across the page.

    <h1 class="heading"> Then style the heading as before.

    The underline you have is only working on the span element so where the span ends the heading ends too.

    Not sure I understand your line heights, but again if you only want certain line heights to be smaller, give the <h1> tag the class.

  • #3
    New Coder
    Join Date
    Sep 2007
    Posts
    75
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Okay thank you!
    Changed it to a heading now. But there is one thing. I centered the text giving it
    Code:
    text-align:center;
    in the css. This centered the border as well.
    Is it possible to just center the text, and have the border underneath?
    OR is it possible to delete the border behind the text, and just have it on the sides?

    Okay I'm probably making it complicated haha
    Last edited by Emsan; 02-17-2011 at 01:28 PM.

  • #4
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    If you want to not have the border centred, remove the border style from the heading, and make a new short div of 2px to get the border.

    <div id="line">.</div>

    #line {border: 2px solid #000;
    margin: 0; padding: 0;
    height: 2px;
    background: #fff;
    }

    BUT If you have centred the text, that would not affect the heading which you have not centred.

  • Users who have thanked quartzy for this post:

    Emsan (02-17-2011)

  • #5
    New Coder
    Join Date
    Sep 2007
    Posts
    75
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Oh that did the job, thank you!
    And it was easier to style as well

    Okay one last thing.
    Look how it is now: http://noomirapace.org/?page_id=72
    Is it possible to make the line invisible under the text and the 2 dots?

    Right now I have put the div like this:
    Code:
    <div class="line"><h1 class="heading"><strong>•</strong> Early Life <strong>•</strong></h1></div>
    CSS of the div:
    Code:
    .heading {
    font-size:20px;
    text-shadow: 0px -1px 0px #765020;
    color:#C1997B;
    text-align:center;
    font-weight:bold;
    line-height:0pt;
    }
    
    .line {
    margin: 0; padding: 0;
    height: 2px;
    background-color:#765020;
    -moz-box-shadow: 0px -1px 0px #C1997B;
    -webkit-box-shadow: 0px -1px 0px #C1997B;
    box-shadow: 0px -1px 0px #C1997B;
    }

  • #6
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    You could not stop and start the line, without using a lot of coding I imagine, I have not done it. Bit I think you would need to end the first div. Then absolutely position another div on the line.

    But if you wanted the whole line under the text, you would do a margin-top: 10px; on the line div.
    Last edited by quartzy; 02-17-2011 at 02:43 PM.

  • #7
    New Coder
    Join Date
    Sep 2007
    Posts
    75
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Oh okay, thank you for everything! ♥


  •  

    Posting Permissions

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