I have a table that contain 4 photos of round corners and text in the middle of the table. Here's the code:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"cornerLT.gif" border="0"></td>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pixel.gif" width="1" border="0"></td>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"cornerRT.gif" border="0"></td>
</tr>
<tr>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"pixel.gif" width="1" border="0"></td>
<td>text text text text text text</td>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"pixel.gif" width="1" border="0"></td>
</tr>
<tr>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"cornerLB.gif" border="0"></td>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"pixel.gif" width="1" border="0"></td>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"cornerRB.gif" border="0"></td>
</tr>
</table>
My question is if there's a better way to do it with CSS?
Thanks!Think in terms of a div wrapping three divs. The first and last having images floated left and right and the middle containing your text.something like it?I'm sure there are some here if you search the forums for "corner image". I'll guarantee it's not as simple as I made it sound but that's a starting point.you would leave it for the HTML > Tables to take care of it?If you don't care about semantics, sure.What is it and Why do I need to care about it?.topCornersHolder {
width: 700px;
}
.cornerLT {
background: #fff url('../images/cornerLT.jpg') no-repeat 1 1px;
width: 30px;
height: 30px;
float: left;
}
.cornerRT {
background: #fff url('../images/cornerRT.jpg') no-repeat 1 1px;
width: 30px;
height: 30px;
float: right;
}
<div class="topCornersHolder">
<div class="cornerLT"></div>
<div class="cornerRT"></div>
</div>
But I can't see the photos. That's what you meant?Originally posted by weee
What is it and Why do I need to care about it? Semantics is marking things up with what they should be marked up with; lists with <ul>, paragraphs with <p>, headings with <h#>, emphasized text with <em>||<strong>, etc. This will help the disabled access your page, because the pages will be able to be deciphered by audio and text-only browsers, and also have slimmer, cleaner markup.Thanks guys!Originally posted by weee
Thanks guys! No problem.I have some space under the min div (topCornersHolder). How can I take it out?
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"cornerLT.gif" border="0"></td>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pixel.gif" width="1" border="0"></td>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"cornerRT.gif" border="0"></td>
</tr>
<tr>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"pixel.gif" width="1" border="0"></td>
<td>text text text text text text</td>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"pixel.gif" width="1" border="0"></td>
</tr>
<tr>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"cornerLB.gif" border="0"></td>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"pixel.gif" width="1" border="0"></td>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"cornerRB.gif" border="0"></td>
</tr>
</table>
My question is if there's a better way to do it with CSS?
Thanks!Think in terms of a div wrapping three divs. The first and last having images floated left and right and the middle containing your text.something like it?I'm sure there are some here if you search the forums for "corner image". I'll guarantee it's not as simple as I made it sound but that's a starting point.you would leave it for the HTML > Tables to take care of it?If you don't care about semantics, sure.What is it and Why do I need to care about it?.topCornersHolder {
width: 700px;
}
.cornerLT {
background: #fff url('../images/cornerLT.jpg') no-repeat 1 1px;
width: 30px;
height: 30px;
float: left;
}
.cornerRT {
background: #fff url('../images/cornerRT.jpg') no-repeat 1 1px;
width: 30px;
height: 30px;
float: right;
}
<div class="topCornersHolder">
<div class="cornerLT"></div>
<div class="cornerRT"></div>
</div>
But I can't see the photos. That's what you meant?Originally posted by weee
What is it and Why do I need to care about it? Semantics is marking things up with what they should be marked up with; lists with <ul>, paragraphs with <p>, headings with <h#>, emphasized text with <em>||<strong>, etc. This will help the disabled access your page, because the pages will be able to be deciphered by audio and text-only browsers, and also have slimmer, cleaner markup.Thanks guys!Originally posted by weee
Thanks guys! No problem.I have some space under the min div (topCornersHolder). How can I take it out?