How can I put solid lines on either side of a header with css? [duplicate]


Tags: css

Problem :

Possible Duplicate:
How can I make a fieldset legend-style “background line” on heading text?

On a certain page my client wants me to make a small widget with lines coming off of either side of the headers. Is there a simple way I can make these red headers with just css?

headers with bars



Solution :

Off the top of my head and untested... You could put a border bottom on the header, then have a <span> inside the header which contains the text, put a background colour of white on the span and move it down a few pixels to cover up part of the border

position: relative;
bottom: -10px;

Edit: You would need to set a text-align: center; on the header, and ensure it does not have an overflow: hidden; on it!


    CSS Howto..

    how to allow transform in htmlpurifier

    When using ''@keyframe play'' in css, how can you get the frame the animation is currently at with javascript?

    How to Change CSS direction property of the input field automaticly if the user can use an language rtl or ltr

    How to make visual changes with dynamically generated HTML code?

    jQuery Show/Hide for and

    How to center HTML content

    How to manipulate SVG element style with javascript?

    how to apply two classes of css on same element?

    How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?

    Picture thumbnail shown in Google image search output is
    not , why? [closed]
    It basically comes down to preference. It is considered outdated to use table for data layouts. Use table for just that - actual tables. For the layout and such tasks,...
    Read more

    How should I set this caption over my image using CSS?

    HTML/CSS: how to force text within a tag to be styled with font-style: italic !important;

    how to position div with css and force text to wrap around

    How does ASP.NET generate HTML?

    How do I use -moz-element() to Create a Reflection?

    How do you make a sticky nav bar change colour when you scroll to a desired div?

    CSS Positioning: How to make 2 overlapping divs and then 1 more div to the right of the overlapping divs

    Section background image showing empty space in bottom [closed]

    How can you make an absolute positioning in css to adjust after the text modification?

    How to make my SVG map render correctly in the browser?

    CSS: How to set position absolute of a span inside a relative-position-div which contains [closed]

    custom styles not effecting the nested accordion jquery - How to fix

    how can i add style with CSS to