[thelist] CSS Positioning Question

[Timothy J. Luoma]

Burhan wrote:
> Hello List,
>
> I've got a CSS position question. I've got an <h1> tag, and in that
> tag, I want to align some text to the right. I first thought a span
> would to the trick :
>
> .rightalign { float:right; text-align:right; }
>
> It aligns it to the right, but it bumps the text down (have a look at
> my website for what I mean). The [ + ] | [ - ] text is in the <span>
> tag.

I don't think you want either a span or a float: right

text-align: right

ought to work on an H1 since it is a block level


> I am trying to get it to align with the <h1> text.

Hrm... (goes to look at page http://members.evolt.org/burhankhalid)

AH.... I think I see now.

What you have is:

<h1>
<span class="leftalign">
	<a name="000005"></a><b>Happy Birthday!</b>
</span>

<span class="rightalign">[ + ] | [ - ]</span>

</h1>

Ok, now if you want something to float left or right, it has to come
before the text you want it to float around.  Therefore what I would
suggest is that you change "leftalign:" to "float: left" and change
"rightalign" to "text-align: right" (and no float).

I would also recommend that you change your class names (leftalign and
rightalign) to describe what they contain, not what they do.  Because
what they do might change.

For example, let's say in a year you want to change it so that things
like 'Happy birthday' are centered, and your plus-minus is on the left.

What do you do?

Well you could go in and change every occurrence of "leftalign" to
"centeralign" which would defeat the whole purpose of having a separate
style sheet because you still have to edit your content files.

Then you'd have to wonder whether you used 'leftalign' for any other
places other than these titles.  This would soon grow tiresome.

You could just change 'leftalign' to be centered and not change the
name, however then you have a class name that is called "left" when it
actually centers.  Not good.


However, if you called "leftalign" something like "blogposttitle" then
when you look through your CSS file you would know what it did, and you
could change it left/right/center without worrying about calling it
somewhere else.

This would also help that situation where you go into a CSS file you
haven't used for a long time and ask yourself "Gee, did I ever use this
style anywhere?"  If it is called something like "left" then it is
harder to remember where it was used.  If it is called "blogposttitle"
then you are much more likely to remember.

TjL

ps -- BTW I just remembered that SPAN is an INLINE element so it can't
have a text-align.  So you should do something like this:


<h1 class="blogheader">
<span class="blogposttitle">
	<a name="000005"></a><b>Happy Birthday!</b>
</span>

[ + ] | [ - ]

</h1>


and your CSS would then be

h1.blogheader { text-align: right; }
span.blogposttitle { display: block; float: left; width 50%; }

(floats must be block level and should have a width defined, iirc)

It would be even better if you could convince your blog software to
create entries like this:

<h1 class="blogheader">
<a name="000005"><b>Happy Birthday!</b></a>[ + ] | [ - ]</h1>

because then you can get rid of the SPAN altogether and just use a
contextual selector:

h1.blogheader a { display: block; float: left; width 50%; }

and remove the 'span.blogposttitle' altogether


--
Coming soon:
30 Days to becoming an Opera Lover
http://www.tntluoma.com/opera/lover/