CSS Help

[Connie]

I'm trying to move a couple of links to the right side of the page. text-align: right is not working.

a.two:link {color:#ffffff; text-decoration: none; font-weight: bold;text-align: right }
a.two:visited {color:#ffffff; text-decoration: none; font-weight: bold; text-align: right}
a.two:hover {background-color: #8dbedb; font-weight: bold;text-align: right}
a.two:active {font-weight: bold; text-decoration: underline; text-align: right}

What do I need to do?

[g1smd]

A link is an inline piece of code.

It is blocks that you can position.

My suggestion to make pages from headings, paragraphs, lists, tables, and forms is made for good reason.

All of your content is then enclosed in logical, semantic blocks.


Wrap the links each in a <p class="right"> ... </p> tag pair and position that using: p.right {float: right;}

Unless your links are going to use a different size, colour, typeface, to the rest of the links on the page, then there is no need to add any additonal styling for those at all.

[chrishirst]

<a> is an inline element so is only the width of the content and text-align will have no effect.

so you could use

.two a {
display:block;
float:right;
color:#ffffff;
text-decoration: none;
font-weight: bold;
}
.two a:link{
}
.two a:visited{
}
.two a:hover {
background-color: #8dbedb;
}
.two a:active {
text-decoration: underline;
}

There are of course several other ways it could be done depending on the overall layout

[WebSavvy]

g1 suggested exactly what I would suggest, too. You can also put them into a <div> but that depends on your layout.

You can define a specific div in CSS like this:

div.two {
float:right;
width:xx%;
margin:0px 5px;
}

Setting width will tell it how wide it needs to be.
Setting margin ->
0px will give it a 0px margin on top and bottom
5px will give it a 5px margin to its left and to its right

To use in a div tag on page would be like this:

<div id="two">
link link link
</div>

[g1smd]

I have an aversion to multiple nested div tags. They add no semantic meaning to the content.

On the otherhand, a page made out of headings, paragraphs, lists, tables (for tabular data), and forms feeds the browser and the search engine a structured document.


You can style the blocks using CSS, and add classes for the exceptions, and then you can also position those blocks using CSS or you can drop them into a table-based layout to position them as you choose instead.

[Connie]

The links are in a Table based layout. currently there are five <tds> each contains a link. I'm going to remove all but one <td> and there will only be two links but I want to align them right.

I'll try the suggestions presented and see which one works best.

Just thought of something else. What If I did an align="right" in the <td>? I know that works with graphics, but hadn't thought about trying that with a link.

Thanks Chris, Deb, and G1.

[WebSavvy]

Connie, try:

<td style="vertical-align:right;">

... and see if it helps any?

[polarmate]

Connie, align is a deprecated attribute. I would use Chris' method especially if the table cell contains nothing but a link. You don't need additional p tags or div tags if you set the class for the a tag to display as a block element.

[g1smd]

I try to avoid tag soup like that. I try to start with a structured document: one that consists of headings, paragraphs, lists, tables and forms, and then style and position that content.

[WebSavvy]

I'm working with <div> <p> and <br /> only, for validated XHTML markup to control the layout and then using CSS to control the presentation.

It isn't easy ... but it's doable.

Lots of people are moving away from tables as the new technology develops.

It's better to write good markup that's been validated right from the get go because later on it's easier to fix when it becomes broken or to update as other elements become depreciated.

[g1smd]

Nice chart.

http://www.ilovejackdaniels.com/css/css-cheat-sheet/