...

View Full Version : Need help with text positioning



webosb
06-04-2007, 09:54 PM
I'm trying to accomplish the following in CSS:
http://i16.tinypic.com/53ex1mq.gif

but so far, I can only get it to look like this:
http://i18.tinypic.com/4u47vxv.gif


can someone check out my code and tell me what i'm doing wrong?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>

<body>
<style type="text/css">
.pricepoint{
float:left;
font-family: Arial;
font-size: 30px;
font-weight:700;
text-align:center;
color:#000;
margin:0 auto;
}
.smalldollar{
float: left;
text-align: center;
color:#000;
font-size:20px;
margin:0 auto;
}
.smalldollarfrom{
position: absolute;
color:#000;
text-align: center;
font-size:10px;
margin: 18px 0 0 0;
}
.ppl{
float: left;
text-align:center;
color:#000;
font-size:10px;
margin: 0 auto;
}
.tripamount{
float: left;
text-align:center;
color:#000;
font-size:30px;
}
.kindoftrip{
float: left;
text-align:center;
color:#000;
font-size:10px;
}
.rightprice{
float: left;
position: absolute;
text-align:center;
color:#000;
font-size:20px;
margin: 0 0 0 26px;
}

</style>
<div class="pricepoint">
<div class="ppl">
<p class="smalldollar">&nbsp;&nbsp;$</p>
<p class="smalldollarfrom">from</p>
</div>
<div class="rightprice">
<p class="tripamount">299</p>
<p class="kindoftrip">RT</p>
</div>

</div>
</body>
</html>

_Aerospace_Eng_
06-04-2007, 10:25 PM
One variation

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
.pricepoint {
font-family: Arial;
text-align:center;
color:#000;
font-size:10px;
font-weight:normal;
float:left;
}

.smalldollar {
text-align: center;
color:#000;
font-size:20px;
position:relative;
top:-10px;
left:-10px;
}

.tripamount {
text-align:center;
color:#000;
font-size:30px;
margin-left:-10px;
}
</style>
</head>
<body>
<div class="pricepoint">from<span class="smalldollar">$</span><span class="tripamount">299</span><span>RT</span> </div>
</body>
</html>

webosb
06-04-2007, 10:36 PM
u are god. lol. thanks for the help, I really appreciate it. u got my nomination!

webosb
06-04-2007, 10:58 PM
actually, is there an alternative to accomplishing this without the use of top and left? because I'm trying to make this show up in an email and gmail doesnt support top and left.

_Aerospace_Eng_
06-04-2007, 11:15 PM
I don't see how this is going to work. Gmail encodes all of its html so the html is unusable. Maybe this will work for you. I don't know

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
.pricepoint {
font-family: Arial;
text-align:center;
color:#000;
font-size:10px;
font-weight:normal;
float:left;
position:relative;
}

.smalldollar {
text-align: center;
color:#000;
font-size:20px;
position:absolute;
margin-top:-35px;
margin-left:10px;
display:block;
_top:0;
_left:0;
}

.tripamount {
text-align:center;
color:#000;
font-size:30px;
}
</style>
</head>
<body>
<div class="pricepoint">from<span class="smalldollar">$</span><span class="tripamount">299</span><span>RT</span> </div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum