[Suzannah]

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

[Kenneth John Odle]

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]

Suzannah

#34858

As always Kenneth, your answers are very helpful!

Thanks

[Kenneth John Odle]

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]

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

[Kenneth John Odle]

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]

Suzannah

#34862

Yes some great examples and I got it to work.

Thanks so much,

Suzannah