PDA

Click to See Complete Forum and Search --> : text-align right - a hyperlink

JimJ
09-15-2006, 04:04 AM
I am trying to right-justify a hyperlink inside a wide <td>
I've tried:
td.right { text-align: right;}
td.right a.right { text-align: right;}
td a.right { text-align: right;}
td.right > a { text-align: right;}
and other combinations,
placing the 'class="right"' inside
the <td and/or the <a>.
None work.
Can anyone advise me how to code it?
Thanks, in anticipation,
JimJ
Kravvitz
09-15-2006, 04:07 AM
Text-align doesn't work on inline elements like anchors.

I suggest you float it. (http://www.dynamicsitesolutions.com/css/layout_techniques/#floats_margins)
mark_yieh
09-18-2006, 12:36 PM
td.right {text-align: right;} should work, unless there is something wrong in the HTML. Can you show me your HTML or point me to a URL that has your code.
WebJoel
09-18-2006, 12:41 PM
<TD><a href="#" style="float:right;">link</a></TD>, like Kravvitz said.
toicontien
09-18-2006, 01:04 PM
Applying text-align to an inline <a> tag does not affect it, however applying text-align to a block element or table cell that contains the link will affect it. If the link is the only thing in the table cell, then mark_yieh's solution will work. If you have left aligned text, and within it is a right aligned link, then Kravvitz and WebJoel's solution is what you want.
JimJ
09-19-2006, 04:02 AM
Thanks for all your replies.
Thanks especially WebJoel, your reply was to the point.

For other viewers: Here is CSS that fails and CSS that works:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head><title>Testing</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style> type="text/css">
td { text-align: center; }
td.tdright { text-align: right; }
td.tdleft { text-align: left; }
a.aright { text-align: right; }
a.aleft { text-align: left; }

a.afr { float: right; }
a.afl { float: left; }
a.blokright { display: block; text-align: right; }
a.blokleft { display: block; text-align: left; }
</style>
</head>

<body><table><tr>

<td>-VeryWideCell-</td><td>narrow</td><td>-VeryWideCell-</td></tr>

<tr><td class="tdright"><a href="#">tdr</a></td>
<td>xx</td>
<td class="tdleft"><a href="#">tdl</a></td></tr>

<tr><td><a class="aright" href="#">ar</a></td>
<td>yy</td>
<td><a class="aleft" href="#">al</a></td></tr>

<tr><td class="tdright"><a class="aright" href="#">bothr</a></td>
<td>zz</td>
<td class="tdleft"><a class="aleft" href="#">bothl</a></td></tr>

<tr><td><a style="float: right;" href="#">fr</a></td>
<td>aa</td>
<td><a style="float: left;" href="#">fl</a></td></tr>

<tr><td><a class="afr" href="#">afr</a></td>
<td>bb</td>
<td><a class="afl" href="#">afl</a></td></tr>

<tr><td><a class="blokright" href="#">afr</a></td>
<td>cc</td>
<td><a class="blokleft" href="#">afl</a></td></tr>
</table></body></html>

BUT, Another question.
Why doesn't 'text-align: center;' work??

Thanks, again
JimJ
BrettNooyen
09-19-2006, 09:50 AM
It's text-align, not text-aligh

As well its text-align: center; not text-align: centre

If those are typos when you brought the code over sorry.
JimJ
09-19-2006, 12:49 PM
Thanks Brettnooyen,
My sloppy code again. I think I've corrected it now,
and added a bit to the CSS.
a.aright is the only text-align that fails now.
Text-align: center; was correct in the code.
It still is. It still fails.
Thanks,
JimJ
toicontien
09-19-2006, 01:10 PM
You cannot apply text-align to an inline element like the <a> tag and have it work. If you set the display property to block in a.aright then it will work, but then your <a> tag will act like a DIV.
JimJ
09-19-2006, 02:21 PM
Thanks again, Toicontien.
Yes , I've tried it, and amended the code above
to demonstrate it.
a.aright fails
a.blokright works.
All the Left-aligns work anyway, by default.

Can you spot what's wrong with my
td ( text-align: center; } ???

Thanks,
JimJ
mark_yieh
09-19-2006, 11:53 PM
right off the bat, I noticed that you didn't close one of your td tags.

Line 23: the second "-Very Wide Cell-" needs to have a closing </td>

There is no point in putting any of your styles in the <a> tag. It's not going to do any good because it's not a block element. Remember that text-align will only align it's containing elements if it knows it's width and height property and if there's any extra room to align it. In the case of the <a> tag, the content is going to be the same size as the entire tag, therefore, if you set it to align right or left or center, it's going to look the same. If you added a width property to the <a> tag, then you might see a difference. For example:

<a href="#" style="display: block; width: 200px; text-align: right;">Some content</a>

It's critical that you add that closing </td> tag in the right location first. After you do that, everything should work ok. You can get rid of all your styles for the <a> tags unless you want to make them a block element by using "display: block;"
JimJ
09-21-2006, 06:55 AM
Thanks Mark yieh,
I thought I answered you yesterday,
but maybe I forgot to click to reply.

I've inserted the missing </td>
Notice the some CSS definitions refer to <a>,
and take effect.

WebJoel told me I could use { display: block; }
I've applied it directly before <td>aa</td>
<td><a style="float: right;" href="#">fr</a>
and via a.afr { float: right; } for <td>bb</td>

Toicontien then added I could use { text-align: right; }
in the <a> tag IF I used { display: block; } in the <td>.
I applied those two to my last test <td>cc</td>.

So I think I've learnt a lot from this thread.

EXCEPT none of my {text-align: left; } come into effect.
They simply default to aligning left.
They would have been needed IF my initial
td { text-align: center; } had worked.

I still don't know WHY is that initial ALIGN CENTER not working.
Any suggestions?

Thanks JimJ
toicontien
09-21-2006, 11:37 AM
Toicontien then added I could use { text-align: right; }
in the <a> tag IF I used { display: block; } in the <td>.
I applied those two to my last test <td>cc</td>.
No, you need to apply display: block to the <a> tag not the <td> tag. TD elements have a table-data-cell value for the display property, so causing a TD tag to be a block element should break the TD tag's functionality in browsers.

I still don't know WHY is that initial ALIGN CENTER not working.
Any suggestions?

Thanks JimJ
I still think we're missing something here. If the text align center is not working, then a text-align declaration else where is taking precedence over the td {text-align: center;} declaration. We need the full HTML and CSS to the page in order to successfully answer your question.
JimJ
09-22-2006, 06:00 AM
Hi Toicontien,
Apologies.
I'm having great difficulty accessing the Threads
in my default browser: FireFox.
I've accessed them easily in Opera and IE.
I've even answered your replies,
but when I use Opera or IE my replies are not posted.
WebDev do not seem to appreciate my problem.

My reply, via Opera and IE, was this:
The code mentioned above is the complete HTML program,
with CSS embedded.
I was assuming it could be copied and pasted.
I see now that is not possible.
I've stuck the code on my server:
www.jimjoyce.co.uk/test/test.html
Thanks for persisting with my problem,
JimJ
toicontien
09-22-2006, 09:31 AM
The row with the code:
<tr><td class="tdright"><a href="#">tdr</a></td>
<td>xx</td>
<td class="tdleft"><a href="#">tdl</a></td></tr>
... is probably the ideal way to go. <a class="aright" href="#"> and <a class="aleft" href="#"> do not work because text-align is applied to the <a> tag, which has an inline display. Text-align affects inline elements, but only if text-align is applied to the block level container of an inline element.

Adding display: block; to .aleft and .aright would allow the text-align property to work on <a> tags, because then the <a> tag is no longer an inline element. The display: block; makes it a block element.

And my apologies if I came off a bit harsh in my previous post :) I didn't mean to.