I've been at this for about 2 hours and made some progress but the final outcome is not what I'm after. Here's what I currently have.
<table width="520" border="0" cellspacing="0" cellpadding="0" height="34">
<tr>
<td width="75" bgcolor="#ADADD3">
<div align="center"><font face="Engravers MT" size="3"
color="#FFFFFF"><b><font size="5">TIP</font></b></font></div>
</td>
<td width="5" bgcolor="#E9E9F3"> </td>
<td width="430" bgcolor="#E9E9F3"><font face="Georgia, Times New
Roman, Times, serif" size="2" color="#000000">Gauging
your reactions can help you assess the intensity of your
feelings
and signal whether you are heading into dangerously, negative
territory.</font></td>
</tr>
</table>
All I'm trying to do is convert this into CSS without having to use tables. Using the code above, how do I go about converting this? Thanks a bunch in advance.drop us a screen shot of what you want. It's easier.
My print scrn button is already devoted to a task. If you copy and paste the code into the body of a html page you'll see what I'm trying to build using CSS. Thanks for the quick reply!How `bout something like this?Thanks for the sample. Is there a way to build this so that anytime I need to incorporate a tip box all I need to do is assign a single div tag to it? Also, how would I build it so that the TIP box expands in conjuction with the content. In other words the TIP height should be the same as the content box. I hope this makes sense. I may be better off leaving it in a table.how bout this:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
*{
margin:0;padding:0;
}
#container{
width:520px;
height:34px;
}
#container dl{
display:inline;
}
#container dt{
width:75px;
height:34px;
background:#ADADD3;
display:block;
font-family:"Engravers MT",Arial,sans-serif;
font-size:18pt;
color:white;
font-weight:bold;
text-align:center;
float:left;
}
#container dd{
background:#E9E9F3;
height:34px;
margin-left:75px;
font-family:Georgia, "Times New Roman", Times, serif,sans-serif;
font-size:9pt;
}
-->
</style>
</head>
<body>
<div id="container">
<dl>
<dt id="tip">
TIP
</dt>
<dd>
Gauging your reactions can help you assess the intensity of your feelings and signal whether you are heading into dangerously, negative territory.
</dd>
</dl>
</div>
</body>
</html>
EDIT:
HOLY broken in real browers... this fixes it...
EDIT 2:
silly me, forgot to close my DL tag too...Or this: (I can't get 'tip' to vertically align.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#leftbar {
background: #ADADD3;
width: 520px;
}
#leftbar span {
color: #FFF;
float: left;
font-family: 'Engravers MT', serif;
font-size: 24px;
text-align: center;
vertical-align: middle;
width: 75px;
}
#leftbar div {
background: #E9E9F3;
font-family: 'Georgia', 'Times New Roman', 'Times', serif;
font-size: 12px;
margin-left: 75px;
}
-->
</style>
</head>
<body>
<div id="leftbar"><span>TIP</span>
<div>Gauging your reactions can help you assess the intensity of your feelings and
signal whether you are heading into dangerously, negative territory.</div>
</div>
</body>
</html>
</html>In response to your comment, you can add more tips just by adding more <dt>/<dd> pairs to my source code, though you might want to add a margin-bottom so it doesn't appear to be one tip.I actually couldn't get the text vertically centered either...Dave,
That's perfect and easy to understand. The only problem is if the text spans more then two lines the padding doesn't remain intact. Also, if there's only one line of text it doesn't work. I'll see if I can fix that. Thanks for your help (both of you)!Did you fix it or do you want someone to have another look?
<table width="520" border="0" cellspacing="0" cellpadding="0" height="34">
<tr>
<td width="75" bgcolor="#ADADD3">
<div align="center"><font face="Engravers MT" size="3"
color="#FFFFFF"><b><font size="5">TIP</font></b></font></div>
</td>
<td width="5" bgcolor="#E9E9F3"> </td>
<td width="430" bgcolor="#E9E9F3"><font face="Georgia, Times New
Roman, Times, serif" size="2" color="#000000">Gauging
your reactions can help you assess the intensity of your
feelings
and signal whether you are heading into dangerously, negative
territory.</font></td>
</tr>
</table>
All I'm trying to do is convert this into CSS without having to use tables. Using the code above, how do I go about converting this? Thanks a bunch in advance.drop us a screen shot of what you want. It's easier.
My print scrn button is already devoted to a task. If you copy and paste the code into the body of a html page you'll see what I'm trying to build using CSS. Thanks for the quick reply!How `bout something like this?Thanks for the sample. Is there a way to build this so that anytime I need to incorporate a tip box all I need to do is assign a single div tag to it? Also, how would I build it so that the TIP box expands in conjuction with the content. In other words the TIP height should be the same as the content box. I hope this makes sense. I may be better off leaving it in a table.how bout this:<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
*{
margin:0;padding:0;
}
#container{
width:520px;
height:34px;
}
#container dl{
display:inline;
}
#container dt{
width:75px;
height:34px;
background:#ADADD3;
display:block;
font-family:"Engravers MT",Arial,sans-serif;
font-size:18pt;
color:white;
font-weight:bold;
text-align:center;
float:left;
}
#container dd{
background:#E9E9F3;
height:34px;
margin-left:75px;
font-family:Georgia, "Times New Roman", Times, serif,sans-serif;
font-size:9pt;
}
-->
</style>
</head>
<body>
<div id="container">
<dl>
<dt id="tip">
TIP
</dt>
<dd>
Gauging your reactions can help you assess the intensity of your feelings and signal whether you are heading into dangerously, negative territory.
</dd>
</dl>
</div>
</body>
</html>
EDIT:
HOLY broken in real browers... this fixes it...
EDIT 2:
silly me, forgot to close my DL tag too...Or this: (I can't get 'tip' to vertically align.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#leftbar {
background: #ADADD3;
width: 520px;
}
#leftbar span {
color: #FFF;
float: left;
font-family: 'Engravers MT', serif;
font-size: 24px;
text-align: center;
vertical-align: middle;
width: 75px;
}
#leftbar div {
background: #E9E9F3;
font-family: 'Georgia', 'Times New Roman', 'Times', serif;
font-size: 12px;
margin-left: 75px;
}
-->
</style>
</head>
<body>
<div id="leftbar"><span>TIP</span>
<div>Gauging your reactions can help you assess the intensity of your feelings and
signal whether you are heading into dangerously, negative territory.</div>
</div>
</body>
</html>
</html>In response to your comment, you can add more tips just by adding more <dt>/<dd> pairs to my source code, though you might want to add a margin-bottom so it doesn't appear to be one tip.I actually couldn't get the text vertically centered either...Dave,
That's perfect and easy to understand. The only problem is if the text spans more then two lines the padding doesn't remain intact. Also, if there's only one line of text it doesn't work. I'll see if I can fix that. Thanks for your help (both of you)!Did you fix it or do you want someone to have another look?