Solved

Defining <HR> in CSS?

Posted on 2004-09-12
3
228 Views
Last Modified: 2006-11-17
Hi!

I'd like to define a couple of different <HR> lines (for example, one <HR> with shades and specific color, another <HR> with different color and size, etc.) in external CSS, but I can't find a solution. I know how to define a 'global' <HR> (for a whole page/site), but I need several different predefined lines.  

Thanks in advance for any input,
Le
0
Comment
Question by:athanasius296
  • 2
3 Comments
 
LVL 8

Expert Comment

by:klykken
ID: 12038775
Hi Le,
This is dont by adding a CLASS to some of your elements:

Examples

CSS:
<style type="text/css">
<!--
hr {width:100%;}
hr.overarticle {width:80%;}
hr.underarticle {width: 50%;}
-->
</style>

HTML:
<hr>
<hr class="overarticle">
<hr class="underarticle">

Good Luck :-)
-klykken
0
 

Author Comment

by:athanasius296
ID: 12039962
Hi klynnen,

For some reason "width" in my external css file doesn't work:
hr.overarticle {align:left; width:24%; color:#cccccc; noShade;}
Any thoughts?
Thanks!
Le
0
 
LVL 8

Accepted Solution

by:
klykken earned 50 total points
ID: 12040121
Hi Le,
yes, there is not 'align' in CSS.
use 'text-align'

Also 'noshade' is not css either.

Change your css to this:
hr.overarticle {
      text-align:left;
      width:24%;
      color:#cccccc;
      }

-klykken
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to dynamically set the form action using jQuery.

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now