SitePoint Sponsor |
|
User Tag List
Results 1 to 14 of 14
-
Dec 21, 2001, 13:05 #1
- Join Date
- Feb 2001
- Location
- Clearwater, FL
- Posts
- 3,615
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Right-align text in DIV tag with CSS?
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??
-
Dec 21, 2001, 13:33 #2
- Join Date
- Sep 2001
- Location
- Ohio - U.S.A. Outlook: Cautiously Optimistic
- Posts
- 3,283
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Dec 21, 2001, 14:07 #3
- Join Date
- Feb 2001
- Location
- Clearwater, FL
- Posts
- 3,615
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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..
-
Dec 21, 2001, 14:25 #4
- Join Date
- Sep 2001
- Location
- Ohio - U.S.A. Outlook: Cautiously Optimistic
- Posts
- 3,283
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Dec 21, 2001, 14:42 #5
- Join Date
- Feb 2001
- Location
- Clearwater, FL
- Posts
- 3,615
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Dec 21, 2001, 14:46 #6
- Join Date
- Feb 2001
- Location
- Clearwater, FL
- Posts
- 3,615
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
-
Dec 21, 2001, 14:53 #7
- Join Date
- Sep 2001
- Location
- Ohio - U.S.A. Outlook: Cautiously Optimistic
- Posts
- 3,283
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Dec 21, 2001, 15:07 #8
- Join Date
- Feb 2001
- Location
- Clearwater, FL
- Posts
- 3,615
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Dec 21, 2001, 15:51 #9
- Join Date
- Jun 2001
- Location
- Before These Crowded Streets
- Posts
- 9,446
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
add the text-align to the <p> or <h1> or whatever you're using.
sketch
-
Dec 21, 2001, 16:11 #10
- Join Date
- May 2001
- Location
- View Ridge
- Posts
- 692
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
-
Dec 21, 2001, 16:41 #11
- Join Date
- Feb 2001
- Location
- Clearwater, FL
- Posts
- 3,615
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
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.
-
Dec 21, 2001, 17:06 #12
- Join Date
- Jun 2001
- Location
- Before These Crowded Streets
- Posts
- 9,446
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Dec 21, 2001, 17:31 #13
- Join Date
- May 2001
- Location
- View Ridge
- Posts
- 692
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Damn!
Sketch beat me to it.
You could also remove the width and use margin-right within the #links
-
Dec 22, 2001, 09:16 #14
- Join Date
- Feb 2001
- Location
- Clearwater, FL
- Posts
- 3,615
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks guys, that did the trick! I didn't even look at the width of the layer.
Bookmarks