SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    Xbox why have you forsaken me? moospot's Avatar
    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??

  2. #2
    Degrading Gracefully PalmerB's Avatar
    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

  3. #3
    Xbox why have you forsaken me? moospot's Avatar
    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..

  4. #4
    Degrading Gracefully PalmerB's Avatar
    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

  5. #5
    Xbox why have you forsaken me? moospot's Avatar
    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.

  6. #6
    Xbox why have you forsaken me? moospot's Avatar
    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>

  7. #7
    Degrading Gracefully PalmerB's Avatar
    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

  8. #8
    Xbox why have you forsaken me? moospot's Avatar
    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

  9. #9
    Prolific Blogger silver trophy Technosailor's Avatar
    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
    Aaron Brazell
    Technosailor



  10. #10
    .net install meltdown
    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?

  11. #11
    Xbox why have you forsaken me? moospot's Avatar
    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>
    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.

  12. #12
    Prolific Blogger silver trophy Technosailor's Avatar
    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
    Aaron Brazell
    Technosailor



  13. #13
    .net install meltdown
    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

  14. #14
    Xbox why have you forsaken me? moospot's Avatar
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •