A
Amadan
Hi. I'm trying to implement something done in table style in tableless.
The original was something like this (actually, uglier; this is just the
skeleton of the original design):
<table bgcolor="#CFDAEB">
<tr>
<td height="10" width="10">
<img height="10" width="10" src="icon.gif">
</td>
<td bgcolor="#F0F1F4">
Title
</td>
</tr>
<tr>
<td>
Text
</td>
</tr>
</title>
The closest I've managed to come is this:
<style><!--
..item {
font-size: smaller;
font-family: "trebuchet ms", verdana, arial, helvetica, sans-serif;
margin: 10px 0;
}
..item .title {
padding: 2px;
font-size: larger;
font-weight: bold;
vertical-align: bottom;
}
..item .footer {
padding: 1px 2px;
font-size: smaller;
font-family: verdana, arial, helvetica, sans-serif;
text-align: right;
}
..item .content {
padding: 2px;
}
div.item.blue {
background-color: #CFDAEB;
border: thick solid #CFDAEB;
}
div.item.blue div.title {
background-color: #F0F1F4;
}
div.item.blue div.footer {
background-color: #F0F1F4;
}
--></style>
<div class="item blue">
<div class="title">
Title
</div>
<div class="content">
Text
</div>
</div>
My problem is that I do not know how to position the icon. If I just put
the IMG tag in front of the title DIV, the title goes into the next
line; if I put float: left on the IMG, it covers the title; if I float
both of them, the title is not full-width any more.
Any hint would be appreciated.
Goran Topic
The original was something like this (actually, uglier; this is just the
skeleton of the original design):
<table bgcolor="#CFDAEB">
<tr>
<td height="10" width="10">
<img height="10" width="10" src="icon.gif">
</td>
<td bgcolor="#F0F1F4">
Title
</td>
</tr>
<tr>
<td>
Text
</td>
</tr>
</title>
The closest I've managed to come is this:
<style><!--
..item {
font-size: smaller;
font-family: "trebuchet ms", verdana, arial, helvetica, sans-serif;
margin: 10px 0;
}
..item .title {
padding: 2px;
font-size: larger;
font-weight: bold;
vertical-align: bottom;
}
..item .footer {
padding: 1px 2px;
font-size: smaller;
font-family: verdana, arial, helvetica, sans-serif;
text-align: right;
}
..item .content {
padding: 2px;
}
div.item.blue {
background-color: #CFDAEB;
border: thick solid #CFDAEB;
}
div.item.blue div.title {
background-color: #F0F1F4;
}
div.item.blue div.footer {
background-color: #F0F1F4;
}
--></style>
<div class="item blue">
<div class="title">
Title
</div>
<div class="content">
Text
</div>
</div>
My problem is that I do not know how to position the icon. If I just put
the IMG tag in front of the title DIV, the title goes into the next
line; if I put float: left on the IMG, it covers the title; if I float
both of them, the title is not full-width any more.
Any hint would be appreciated.
Goran Topic