Link to home
Start Free TrialLog in
Avatar of SM17CH

asked on

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

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.


Thanks I appreciate your time

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


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


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"

<html xmlns="">
      <style type="text/css"><!--
      fieldset{border:0;border-top:1px dashed #008;}
      legend div{margin:0 auto;background-color:white;width:50px;color:#008;}

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


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?
Avatar of hielo
Flag of Wallis and Futuna image

Link to home
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


Perfect. Thankyou. I really appreciate it.