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??
| SitePoint Sponsor |
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??
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
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..
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
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.
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>
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
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
add the text-align to the <p> or <h1> or whatever you're using.
sketch
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?
Here is the link: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.
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
Damn!
Sketch beat me to it.
You could also remove the width and use margin-right within the #links
Thanks guys, that did the trick! I didn't even look at the width of the layer.
Posting Permissions
Bookmarks