Right-align text in DIV tag with CSS?

**moospot** · Dec 21, 2001, 12:05

I have this style defined in the <style> section.

#links {position:absolute; z-index:11; left:28px; top:301px; width:20px;}

How do I right-align the text??

**PalmerB** · Dec 21, 2001, 12:33

Have you tried adding to the attributes...

#links {position:absolute; z-index:11; left:28px; top:301px; width:20px; text-align: right;}

That might do it.

Palmer

**moospot** · Dec 21, 2001, 13:07

Actually, I did try that but it doesn't seem to affect the text in any way. It stays left aligned. I don't get it myself. I just thought that I was doing something wrong..

**PalmerB** · Dec 21, 2001, 13:25

I'm assuming, you put that code in your <head> section then before the links you put the code
<div id="links"> links go here</div>

If you did that, you could try using
<span style="text-align: right">
links go here
</span>

Or...
<div align="right">
links go here
</div>

I usually go through a trial and error process then give up.

Palmer

**moospot** · Dec 21, 2001, 13:42

I tried the latter, but that didn't work. I will try the former and see if that works. I suspect it won't, but it's worth a try.

...rrrr....

didn't work.

**moospot** · Dec 21, 2001, 13:46

Jeez..look at what I had to resort to..

Code:

<div id="links">
4 spaces here<a href="#" onclick="activate(0); return false;" onfocus="if(this.blur)this.blur()">Interiors</a><br>
<a href="#" onclick="activate(1); return false;" onfocus="if(this.blur)this.blur()">Landscapes</a><br>
</div>

**PalmerB** · Dec 21, 2001, 13:53

OK we're not done yet...

try this,

<a style="text-align: right" href="yourlink.htm">Linky link here</a>

Just a thought here as well, the id attribute is a little buggy. One that's more reliable is the class attribute.

You would write it like this...
<head>
<style type="text/css">
.links {put what you want here like the position and text-align, make sure you put the dot before the word}
</style>
</head>
<body>
<div class="links">
links go here
</div>
</body>

I think that's the way it goes. I'm doing this from memory.

Palmer

**moospot** · Dec 21, 2001, 14:07

I've tried both and they dont work. I have to use the 'id' tag because the layer is referenced in a script. But, I tried adding in the text-align attribute in the links style

**Technosailor** · Dec 21, 2001, 14:51

add the text-align to the <p> or <h1> or whatever you're using.

sketch

**isotope235** · Dec 21, 2001, 15:11

Moo,

I think Sketch has found the source of your woes.

It doesn't look like you have a block-level tag (<p>) around the text. If you define text prop's in a div they cascade to the child block-level elements only.

More info http://www.w3.org/TR/REC-CSS1#text-align

If your still having prob's can you post up the html/css code so we can take a look?

**moospot** · Dec 21, 2001, 15:41

Code:

<%@Language=VBScript%>
<!--#INCLUDE FILE="i_shop.asp"-->
<html>
<head>
<title>Untitled Document</title>


<script language="JavaScript" src="scripts/scroller.js"></script>
<style type="text/css">
a {font-family:verdana,arial,helvetica,sans-serif; font-size:11px; color:#666666; text-decoration:none;}
a:hover {text-decoration:underline; color:#cccccc;}
body {background-color:#ffffff; color:#999999; font-size:11px; font-family:verdana,arial,helvetica,sans-serif; line-height:15px;}

#divScroller1 {position:absolute; overflow:hidden; z-index:9; left:100px; top:90px; width:400px; height:300px; clip:rect(0px, 400px, 300px, 0px); visbility:visible; border-width:0px 0px 0px 1px; border-color:#666666; border-style:dashed;}
.dynPage {position:absolute; z-index:10; left:0px; top:0px; width:385px; visibility:hidden; padding-left:15px; font-family:arial,helvetica,sans-serif; font-size:10px; line-height:14px; color:black}
#arrows {position:absolute; z-index:11; left:74px; top:355px; width:20px;}
#links {position:absolute; z-index:11; left:27px; top:301px; width:20px;}  
.ralign {text-align:right;}

</style>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body background="Assets/images/background.gif" bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!--#INCLUDE FILE="i_header.asp" -->
<div id="divScroller1">

<div id="dynPage0" class="dynPage">
<img src="/studio/assets/images/cypress320.jpg">
<img src="/studio/assets/images/fireplace320.jpg">
<img src="/studio/assets/images/cypress320.jpg">
</div>



<div id="dynPage1" class="dynPage">
<img src="/studio/assets/images/cypress320.jpg">
<img src="/studio/assets/images/fireplace320.jpg">
<img src="/studio/assets/images/cypress320.jpg">
</div>


</div>

<div id="arrows">
<a href="#" onmouseover="scroll(6);" onclick="scroll(6); return false;" onmousedown="scroll(25)" onmouseout="stopScroll();"><img src="/studio/assets/images/arrows_rounded_up.gif" width="20" height="17" alt="" border="0"></a>
<a href="#" onmouseover="scroll(-6);" onclick="scroll(-6); return false;" onmousedown="scroll(-25)" onmouseout="stopScroll();"><img src="/studio/assets/images/arrows_rounded_down.gif" width="20" height="17" alt="" border="0"></a>
</div>

<div id="links">
<p class="ralign">
<a href="#" onclick="activate(0); return false;" onfocus="if(this.blur)this.blur()">Interiors</a><br>
<a href="#" onclick="activate(1); return false;" onfocus="if(this.blur)this.blur()">Landscapes</a><br>
</p>
</div>
	
</body>
</html>

Here is the link:

http://www.rolanddescombes.com/studio/test.asp

I swear I have looked at the CSS Specs, I've tried all the things mentioned in this thread, but nothing works!

There is a rather large JS file that makes the images scroll that I didn't post. But, I don't think that should have anything to do with the text-alignment in the layer.

**Technosailor** · Dec 21, 2001, 16:06

hey, moo!

Change the absolute width of your div.links. That's your problem. The words are too wide and so they are returning to the next line....
sketch

**isotope235** · Dec 21, 2001, 16:31

Damn!

Sketch beat me to it.

You could also remove the width and use margin-right within the #links

**moospot** · Dec 22, 2001, 08:16

Thanks guys, that did the trick! I didn't even look at the width of the layer.

The SitePoint Forums have moved.

User Tag List

Thread: Right-align text in DIV tag with CSS?

Thread Tools

Display

Right-align text in DIV tag with CSS?

Bookmarks

Bookmarks

Posting Permissions