Forum Moderators: not2easy

Message Too Old, No Replies

need to align left header when centered in CSS

How do I change alignment for just one page?

         

Lorel

8:01 pm on Jul 21, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I have my Headers centered in CSS but occasionally want them left aligned on just one page. How do I do this? Span and Div surrounding the text in header don't work--as the former controls only the text and a header is a block element as well as the div. I'm stuck.

Lorel

iamlost

8:15 pm on Jul 21, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Two approaches:

Add another class and call it when desired:

CSS:
.left-header {text-align: left;}

HTML:
Change each header individually:
<h1 class="left-header">

Or if it is all headers in the page add another style sheet and call it after the usual one:

CSS:
left-header.css (file containing only:)
h1, h2, h3, h4, h5, h6 {text-align: left;}

HTML:
<head>
<style type="text/css" media="all">@import "main.css";</style>
<style type="text/css" media="all">@import "left-header.css";</style>
</head>

createErrorMsg

10:47 pm on Jul 21, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Optionally, you could stick an inline style...

<h1 style="text-align: left;">Blah</h1>

...in the tag for the element.

Now excuse me while I go hang my head in shame for even hinting at a suggestion of the notion of an idea that this would be a good way to do it (translation: although you can use inline styles, please DON'T. They are cluttery and unclean. Define a new style class and use it when needed, as iamlost suggested above.)

Lorel

4:57 pm on Jul 22, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Thanks I am Lost,

the following worked:

CSS:
.left-header {text-align: left;}

HTML:
Change each header individually:
<h1 class="left-header">

Lorel