Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: CSS <hr>

  1. #1
    Join Date
    Jul 2013
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS <hr>

    Hi Anybody that can help

    xldesign.co.za/New/index.html

    The two lines above the text at the top under the banner have been done using a table but I really do need an hr tag to do this further down the page. I need the hr to look exactly like the line or table border being just the top and the bottom of that table. Hope I'm making sense. I would also prefer to use a hr tag instead of the table. Less code.

    Please brilliant people I'm on a deadline for this site and struggling! Thinking of starting again and raw coding using just html and tables. Seems like that might be going backwards though.

    Brends
    Last edited by Beverleyh; 07-23-2013 at 08:43 AM. Reason: formatting

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,024
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Do you just mean a coloured, 1px line?

    Code:
    hr { height:0; border:solid #E2D8CF 0; border-top-width:1px;  }
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Jul 2013
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Beverleyh you are an absolute star. Yay yay yay. Thank you so much One last quesiton. Where do I stipulate the width? in the css or in the actual html page? and if I want to make it 900px wide can you please give me that as well. Am I being lazy?

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,024
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    You would just add the width to the CSS definitions;
    Code:
    hr { height:0; border:solid #E2D8CF 0; border-top-width:1px; width:900px; }
    Or, it it's contained within something else, let the parent element dictate the width.

    You might also want to throw margin:auto; in there too to make it align centrally.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Jul 2013
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    My client wants everything to be fixed. So can't let parent element dictate. have to specify to be on the safe side I think. I actually did this in the <hr> tag <hr width="850px" align=center> and it seems to be working fine Thanks for your help I really appreciate it.

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,024
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Your using an HTML5 doctype though so its best to remove width="850px" and align=center and do it with CSS instead - they're invalid attributes in HTML5.

    Hope that helps.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  7. #7
    Join Date
    Jul 2013
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Beverleyh can I ask one last question. Can you have another look for me please. xldesign.co.za/New/index.html. Do you see the text below Cobblewalk and Agrimark. Why can't I get it to line up with the rest of the site. i.e. the text seems to go over. I have set the width of those tables and they are all the same. If you look at the Lielenfontein one the text ends just where its supposed to. Sorry to be asking so many questions but I just don't understand it? does it have something to do with it being justified?
    Last edited by Beverleyh; 07-23-2013 at 11:54 AM. Reason: formatting

  8. #8
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,024
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    I *think* I understand but I'm not 100% sure. Do you mean how the Agrimark/Cobble Walk text is a bit wider than the peachy title bars?

    I think that's because of default cell-spacing and cell-padding in tables - if you don't define them yourself, browsers will add their own, and they are different depending on which you're using. You used to be able to (re)set those in HTML4 like this;
    Code:
    <table border="0" cellspacing="2" cellpadding="2" width="100%">
    But sadly that doesn't work in HTML5. It has to be done in the CSS, which is probably a good idea so you can explicitly define the paddings that you want on the actual <td>s afterwards.

    Try this in your stylesheet;
    Code:
    table { width:100%; border-spacing:0; border-collapse:collapse; border:0; }
    And then on the table cells you can define your own paddings which should then be the same in all browsers - eg;
    Code:
    td { padding:2px 4px; }
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  9. #9
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,024
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    ps - For the benefit of others reading this thread, it's worth noting that these table attributes doesn't work in HTML5 either;
    Code:
    <td valign="middle" align="center">
    You would need to move those to the CSS too. Something like;
    Code:
    td { vertical-align:middle; text-align:center; }
    You've already done that Brends, but I'm just putting it in this thread for future reference.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  10. #10
    Join Date
    Jul 2013
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yes I mean the Agrimark/Cobble Walk text is a bit wider than the peachy title bars? I can't seem to get the padding to work? Not sure how to move forward? I"m sure you are right but possibly I'm putting it all in the wrong place? Can you have a look at my styles.css? its at the bottom of the page. and then I also put padding:2px in the actual <td>. But nothing is changing.

Bookmarks

Posting Permissions

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