how to make decorative horizontal line on page

  • Suzannah

    #6563

    Hello and thank you in advance for your assistance.

    On this page … http://patriciahuntsman.com/?page_id=14 … you will see red lines between sets of info.

    (http://patriciahuntsman.com/ on her Services page.)

    I used the underline key which is clearly not correct so how can I improve this line in code and looks please?

    Thanks!

    Suzannah

    Mod

    Kenneth John Odle

    #34857

    Easy way:

    In HTML editor, add this where you want line to appear:

    <hr class="red-flourish">

    And in your custom CSS, add

    .red-flourish {
    color: #f00;
    height: 8px;
    }

    Another easy way:

    Find a particularly decorative flourish (a good Google image search term), and then add it as an image wherever you would like the line to appear.

    Yet another easy way:

    In HTML editor, add

    <div class="red-flourish"></div>

    and in custom CSS, add

    .red-flourish {
    border-top: dotted 1px #f00;
    border-bottom: solid 1px #f00;
    height: 6px;
    }

    I didn’t test that last one, but it should work.

    Suzannah

    #34858

    As always Kenneth, your answers are very helpful!

    Thanks

    Mod

    Kenneth John Odle

    #34859

    I’m not entirely sure how “proper” that last one is. If valid code is a big concern of yours, you might want to run it through a validator.

    Also, I missed a period in that second rule. I’ve corrected it now. But if you copied and pasted and it doesn’t work, check for a missing period.

    Suzannah

    #34860

    Almost there … I think.

    I understand the first option i.e. the hr code and it almost works!

    The line look great except that the color isn’t showing?

    What am I missing please and thank you?

    http://patriciahuntsman.com/?page_id=14

    Mod

    Kenneth John Odle

    #34861

    Try adding:

    background-color: #f00;

    See this page:

    http://www.sovavsiti.cz/css/hr.html

    and try using Firebug on some of their examples. Enlightening!

    Suzannah

    #34862

    Yes some great examples and I got it to work.

    Thanks so much,

    Suzannah

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.