Hyperlink and CSS (alignment) 1

[Stoemp]

I define in my style sheet that the text should be aligned right. I do it like this:
.pBodyTekstRechts {
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
text-align: right;
}

Here's where I define my hyperlink:
<a class=&quot;pBodyTekstRechts&quot; href=&quot;somePage.asp&quot; target=&quot;_blank&quot;>Lees verder >></a>

It appears the link is not aligned to the right, bit it's aligned to the left. Is this normal? Am I doing something wrong here?

Thanks,
Steven

 

[cian]

Hi,

Try enclosing the link in a P, Span or Div. You can then add align=&quot;right&quot; to those tags or assign them a class.

<p class=&quot;rechts&quot;>
<a class=&quot;pBodyTekstRechts&quot; href=&quot;somePage.asp&quot; target=&quot;_blank&quot;>Lees verder >></a>
</p>

.rechts {text-align: right;}


É
::

http://www.endamcg.com

::

http://www.endamcg.com/finland-gaa

 

[Stoemp]

Yes! This works. But is it an accepted solution or is there a better way. It seems to me it's a bit roundabout.

Can someone confirm to me this method is 100% correct?

 

[cian]

I don't consider it roundabout. What you are doing is aligning the content of the p or div. As far as I am concerned ALL text/links should be enclosed in some container like a paragraph.


É
::

http://www.endamcg.com

::

http://www.endamcg.com/finland-gaa

 

[Stoemp]

I didn't think about it that way... You're right I guess
Thanks

 

[IronOrchid]

It makes sense really. The CSS &quot;text-align: right&quot; positions the text within a given element. Because the anchor tag is an inline element the text is only being right-aligned in respect to itself.

In short; it is actually working, the effect just isn't noticable unless it's in respect to a block element.

http://www.ironorchid.com

 

[cian]

Thanks IronOrchid for a better explanation.


É
::

http://www.endamcg.com

::

http://www.endamcg.com/finland-gaa

 

[bluranj]

The correct method is to use inheritance

.pBodyTekstRechts {
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
text-align: right;
color: #333333
}
.pBodyTekstRechts a{
color: #000000;
text-decoration: none;
}

The a tag inherit the properties font-size, font-family and text-align from the base tag. To apply this you can use

<p class=&quot;pBodyTekstRechts&quot;>This is a paragraph with a <a href=&quot;link.html&quot;>LINK</a></p>

Notice that the link color overrides the paragraph color



Ranjan

http://www.dreamlettes.com

- A Dreamweaver Community
Join today for your answers in web design