Link to home
Start Free TrialLog in
Avatar of SM17CH
SM17CH

asked on

CSS - How to style create a horizontal rule like this? See Image

Hey,
If possible, how do I create a horizontal line that looks like the image below. It simply a dashed blue line with the heading sitting over the top in the centre.

Example: http://img406.imageshack.us/img406/9458/csshrfd1.jpg

Thanks I appreciate your time

Regards
Mitch
Avatar of Cornelia Yoder
Cornelia Yoder
Flag of United States of America image

That is an image, so you can just use any graphics program such as MSPaint to make an image with the background color you want and the text in it.  Then your CSS can simply use that image as background in a table cell or wherever you want it.
Avatar of SM17CH
SM17CH

ASKER

I want to create it with CSS. I just created the image for illustration purposes to explain what I am trying to do.
There is no value in re-creating this with CSS.  You would have to tweak the CSS and the markup to a point where you would have more markup than a simple <img> tag.

I assume the only reason you would want to do this in html/css is for standards issues, but as I said before, you would write more code than needed, and all that code would have the adverse effect of just using an image tag.
Avatar of SM17CH

ASKER

I cant use an image as I need to create these headings dynamically from a CMS. The heading will always be changing and will depend on what page you are on etc etc..

Creating 100's of images is not an option.

Can anyone show me the CSS required?

Avatar of hielo
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
      <style type="text/css"><!--
      fieldset{border:0;border-top:1px dashed #008;}
      legend{display:block;text-align:center;}
      legend div{margin:0 auto;background-color:white;width:50px;color:#008;}
      --></style>

</head>
<body>
      <fieldset>
            <legend><div>News</div></legend>
      </fieldset>
</body>
</html>
So why not just do it with simple php/html?

You can generate the line in a php string, based on whatever the CMS says it is, and then echo it wherever you need it.
Avatar of SM17CH

ASKER

your on the money Hielo.

I already have styles for fieldset, how do I seperate them so the existing styles dont affect these new ones?
ASKER CERTIFIED SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of SM17CH

ASKER

Perfect. Thankyou. I really appreciate it.