CSS Forum

**DrSeuss** · 07-16-2007, 06:20 PM

OK, back again... new problem...

I have certain links set up as, ".pagelinks a:link, etc..., and span around them in my html... however, the text-align: right; does not seem to work??

here tis the page: http://www.systemsnspace.com/new2007/css-test.html

the links are in the content on the left side, "click here to learn more"

Here is my style sheet:

Code:

p {
    color: #000000;
    text-align: justify;
    padding-left: 15px;
    padding-top: 5px;
    padding-right: 37px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}
.style1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #FFFFFF;
    font-weight: bold;
}
body {
    background: #666666;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #333333;
    margin: 0;
}

.style5 {
    color: #000000;
    text-align: justify;
    padding-left: 15px;
    padding-top: 5px;
    padding-right: 37px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}

.menu A:link {font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: underline}
.menu A:visited {font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: underline}
.menu A:active {font-family: Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: underline}
.menu A:hover {font-family: Arial, Helvetica, sans-serif; color: #999999 ; text-decoration: none}

.pagelinks a:link {
    font-family: Arial, Helvetica, sans-serif; 
    color: #000000; 
    text-decoration: underline; 
    text-align: right; 
    padding-right: 37px
}
.pagelinks a:visited {
    font-family: Arial, Helvetica, sans-serif; 
    color: #000000; 
    text-decoration: underline; 
    text-align: right; 
    padding-right: 37px
}
.pagelinks a:active {
    font-family: Arial, Helvetica, sans-serif; 
    color: #000000; 
    text-decoration: underline; 
    text-align: right; 
    padding-right: 37px
}
.pagelinks a:hover {
    font-family: Arial, Helvetica, sans-serif; 
    color: #666666 ; 
    text-decoration: none; 
    text-align: right; 
    padding-right: 37px
}
.style6 {
    color: #CC0000;
    font-weight: bold;
}
.style7 {color: #FFFFFF}

#container {
    position: relative;
    background: #FFFFFF
    width: 930px; /* width + border for IE 5.x */
    w\idth: 924px; /* real width */
    border: hidden;
    border-width: 0;
    margin-bottom: auto;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto; 
}
#toplinks {
    position: absolute;
    top: 9px;
    right: 21px;
    width: 398px;
}
#header {    
    height: 33px;
    width: 924px;    
}
#topscroll {
    width: 924px;
    height: 90px;
}
#partnersbar {
    height: 32px;
    width: 924px;
}
#menubar {
    position: absolute;
    height: 26px;
    width: 924px;
    top: 153px;
} 
#rightimage {
    position: absolute;
    height: 374px;
    width:  355px;
    right: 0px;
    top: 179px;
}
#content {
    background: #FFFFFF;
    position: absolute;
    padding: 10px 10px 10px 10px;
    height: 374px;
    width: 569px;
    left: 0px;
    top: 179px;
}
#footer {
    position: absolute;
    height: 27px;
    width: 924px;
    right: 0px;
    top: 552px;
}
#emaillink {
    position: relative;
    width: 750px;
    left: 95px;
    bottom: 20px;    
}

and my html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript" src="menu.js"></script>
<script language="JavaScript1.2" src="mm_menu.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body onLoad="MM_preloadImages('images/aboutslice_f2.gif','images/solslice_f3.gif','images/filingslice_f4.gif','images/servicesslice_f5.gif','images/spaceslice_f6.gif','images/contactslice_f7.gif');">
<script language="JavaScript1.2">mmLoadMenus();</script>
<div id="container">
<div id="header">
<img src="images/topbar.jpg" />
<div id="toplinks" align="right"><span class="menu"><a href="spaceanalysis.html">Request a Space Analysis</a></span><span class="style7">  |  </span><span class="menu"><a href="brochurereq.html">Download our Corporate Brochure</a></span><span class="style7">  |  </span><span class="menu"><a href="http://store.systemsnspace.com" target="_blank">Online Store</a></span></div>
</div>
<div id="topscroll">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="924" height="90">
      <param name="movie" value="imagescroller30.swf">
      <param name="quality" value="high">
      <embed src="imagescroller30.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="924" height="90"></embed>
  </object></div>
<div id="partnersbar">
<img src="images/partners_bar.jpg" /></div>
<div id="menubar"><img name="logoslice" src="images/logoslice.gif" alt=""><img name="aboutslice" src="images/aboutslice.gif" width="116" height="26" border="0" usemap="#m_aboutslice" alt=""><img name="solslice" src="images/solslice.gif" width="170" height="26" border="0" usemap="#m_solslice" alt=""><img name="filingslice" src="images/filingslice.gif" width="144" height="26" border="0" usemap="#m_filingslice" alt=""><img name="servicesslice" src="images/servicesslice.gif" width="116" height="26" border="0" usemap="#m_servicesslice" alt=""><img name="spaceslice" src="images/spaceslice.gif" width="159" height="26" border="0" usemap="#m_spaceslice" alt=""><img name="contactslice" src="images/contactslice.gif" width="119" height="26" border="0" usemap="#m_contactslice" alt="">
<map name="m_aboutslice">
<area shape="rect" coords="0,0,116,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0615092146_4,0,26,null,'aboutslice');MM_nbGroup('over','aboutslice','images/aboutslice_f2.gif','',1);"  >
</map>
<map name="m_solslice">
<area shape="rect" coords="0,0,170,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0615092635_3,0,26,null,'solslice');MM_nbGroup('over','solslice','images/solslice_f3.gif','images/solslice_f3.gif',1);"  >
</map>
<map name="m_filingslice">
<area shape="rect" coords="0,0,144,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0620150716_5,1,26,null,'filingslice');MM_nbGroup('over','filingslice','images/filingslice_f4.gif','',1);"  >
</map>
<map name="m_servicesslice">
<area shape="rect" coords="0,0,116,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0615093043_2,1,26,null,'servicesslice');MM_nbGroup('over','servicesslice','images/servicesslice_f5.gif','',1);"  >
</map>
<map name="m_spaceslice">
<area shape="rect" coords="0,0,159,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0615093241_1,0,26,null,'spaceslice');MM_nbGroup('over','spaceslice','images/spaceslice_f6.gif','',1);"  >
</map>
<map name="m_contactslice">
<area shape="rect" coords="0,0,119,26" href="#" alt="" onMouseOut="MM_nbGroup('out');MM_startTimeout();"  onMouseOver="MM_showMenu(window.mm_menu_0615093406_0,0,26,null,'contactslice');MM_nbGroup('over','contactslice','images/contactslice_f7.gif','',1);"  >
</map></div>
<div id="content">
<img src="images/title-innovations.gif" /><br />
<div class="style5">Systems &amp; Space is a single source provider that analyzes, engineers, and implements space, 
          storage and filing solutions for every type of business need. Since 1988 we have been developing storage 
          and space solutions for all types of businesses, government facilities, museums, healthcare facilities, 
          colleges, retail firms and manufacturing companies through-out Northern California.<br /><br />
          </div>
<span class="pagelinks"><a href="whois.html">Click here to learn more</a></span><br />

<img src="images/title-shop.gif" /><br />
<div class="style5">SSI makes it easy for you to save on all your filing supplies by providing an online store filled with 
          all the files, folders, filings supplies, and equipment you use on a daily basis.<br/>
          <span class="style6">Register and recieve a coupon for 15% off your 1st order!</span></span><br /><br />
          </div>
<span class="pagelinks"><a href="http://store.systemsnspace.com" target="_blank">Click here to start saving!</a></span><br />

<img src="images/title-green.gif" /><br />
<div class="style5">Systems &amp; Space, Inc. and our manufacturers are committed to providing sustainable, 
          environmentally friendly products as an integral part of the storage solutions we develop 
          for our customers.<br />
          <br /></div>
<span class="pagelinks"><a href="green.html">Click here to learn more</a></span>
  </div>
<div id="rightimage"><img src="images/index.ani.gif" /></div>

<div id="footer"><img src="images/bottombar.gif" />
<div id="emaillink"><span class="style1">&copy; 2007 Systems &amp; Space, Inc  |  500 Boulder Court, Ste. B  |  Pleasanton, CA 94566  |  800.766.7612  | <span class="menu"><a href="mailto:info@systemsnspace.com">info@systemsnspace.com</a></span> |  CA License # 599899 </span></div>
</div>
</div>
</body>
</html>

Thanks again for your help!

**DrSeuss** · 07-16-2007, 08:53 PM

Oh yeah, and the right justification works fine in DW, but not when I preview in either IE or FF, or when I upload the files and test it live...

**angele803** · 07-16-2007, 11:33 PM

Try this:

Code:

.pagelinks{float:right;
}

You are just aligning the text in the width of the span. You need to float the whole span to the right.
You will also need to clear the float after each link that has this class.

**vangogh** · 07-17-2007, 12:16 AM

You can float things right like Stephanie suggested. You can also add display:block to the css. At the moment the links are inline and don't stretch across the page. text-align won't move the text to the right of the page, only to the right of the element, which is <a> in this case.

Displaying the element as block instead of inline will make it expand to fill it's containing element

**DrSeuss** · 07-17-2007, 02:03 PM

Quote:

Originally Posted by angele803

Try this:

Code:

.pagelinks{float:right;
}

You are just aligning the text in the width of the span. You need to float the whole span to the right.
You will also need to clear the float after each link that has this class.

Thanks for the suggestion, after being told I can't "absolute" position everything, I have been trying to use float, but it has been more confusing.
I used it on this and it seems to have worked. What do you mean by clear the float??

**DrSeuss** · 07-17-2007, 02:07 PM

Quote:

Originally Posted by vangogh

You can float things right like Stephanie suggested. You can also add display:block to the css. At the moment the links are inline and don't stretch across the page. text-align won't move the text to the right of the page, only to the right of the element, which is <a> in this case.

Displaying the element as block instead of inline will make it expand to fill it's containing element

Thanks for your help. I tried using diaplay: block, though it did work, it caused the full line the link is on to become live, even the blank space to the left. I'm sure there is a way to isolate it, but as I am trying to get away from using absolute positioning, I am trying to use floats more.... though they are a bit more confusing...

**LadynRed** · 07-17-2007, 04:11 PM

Yes, floats can be a bit more of a challenge, but they are much more flexible once you 'get it'.

As for clearing your floats, here's a resource on how to do that - and why:
http://css-discuss.incutio.com/?page=ClearingSpace