blcArmadillo
19 Aug 2009, 08:55 PM
I'm trying to position two lines of text next to a single word like "Monday" with just html and css similar to what you see in the screenshot below.
http://i27.photobucket.com/albums/c190/blcArmadillo/ss-3.jpg
In the final product the two lines that currently say hi and blah will be replaced with a little bit of text and input fields. The screenshot version was accomplished with the following 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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font:12pt Arial, Helvetica, sans-serif;
}
dl, dd, dt {
margin:0px;
padding:0px;
}
dl {
clear:both;
}
dt {
float:left;
font-size:2.75em;
color:#ccc;
letter-spacing:-7px;
margin-right:10px;
}
-->
</style>
</head>
<body>
<dl>
<dt>MONDAY</dt>
<dd>hi</dd>
<dd>blah</dd>
</dl>
<dl>
<dt>WEDNESDAY</dt>
<dd>hi</dd>
<dd>blah</dd>
</dl>
</body>
</html>
I'd like it so that everything is vertically aligned nicely... i.e. the top of the top line is aligned with the top of the word "Monday" and the bottom of the bottom line is aligned with the bottom of the word "Monday." I don't think using definition lists is going to be very versatile or the proper way of accomplishing this look. Any suggestions on how to do this? I'd rather stay away from images just so that everything looks nice if someone scales up the page... but throw all your thoughts out there. Thanks.
http://i27.photobucket.com/albums/c190/blcArmadillo/ss-3.jpg
In the final product the two lines that currently say hi and blah will be replaced with a little bit of text and input fields. The screenshot version was accomplished with the following 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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font:12pt Arial, Helvetica, sans-serif;
}
dl, dd, dt {
margin:0px;
padding:0px;
}
dl {
clear:both;
}
dt {
float:left;
font-size:2.75em;
color:#ccc;
letter-spacing:-7px;
margin-right:10px;
}
-->
</style>
</head>
<body>
<dl>
<dt>MONDAY</dt>
<dd>hi</dd>
<dd>blah</dd>
</dl>
<dl>
<dt>WEDNESDAY</dt>
<dd>hi</dd>
<dd>blah</dd>
</dl>
</body>
</html>
I'd like it so that everything is vertically aligned nicely... i.e. the top of the top line is aligned with the top of the word "Monday" and the bottom of the bottom line is aligned with the bottom of the word "Monday." I don't think using definition lists is going to be very versatile or the proper way of accomplishing this look. Any suggestions on how to do this? I'd rather stay away from images just so that everything looks nice if someone scales up the page... but throw all your thoughts out there. Thanks.