I current use a table to do the graphics for a site. How can I use CSS to do this.
here is the table is use:
<table cellspacing="0" cellpadding="0" width="175" border="0">
<tbody>
<tr>
<td valign="top" align="left" width="26" height="30">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/icons/1.gif" width="26" height="30" border="0" alt="" height="30">
</td>
<td align="left" width=143 height="30" background="images/icons/2.gif">
<b>Download </b></td>
<td valign="top" align="left" width="6" height="30">
<img height="30" src=http://www.webdeveloper.com/forum/archive/index.php/"images/icons/3.gif" width="6">
</td>
</tr>
</tbody>
</table>
the css I have so far but does not work. It just stacks them one per row.
.r1{
background-image:
url('images/icons/1.gif');
width: 26px;
height: 30px;
border: 0px solid #000;
}
.r2{
background-image:
url('images/icons/2.gif');
width: 143px;
height: 30px;
border: 0px solid #000;
}
.r3{
background-image:
url('images/icons/3.gif');
width: 6px;
height: 30px;
border: 0px solid #000;
}
the html
<div class="r1"></div>
<div class="r2">Download s</div>
<div class="r3"></div>
I am going search this forum. maybe I'll find it. In the meantime, if it has been answered before, please tell me what to search for or point me to the post.
Thanks
.please can u post a link so i can see what ur trying to <!-- m --><a class="postlink" href="dohttp://www.indexuhelp.com/index0008.html">dohttp://www.indexuhelp.com/index0008.html</a><!-- m -->
.Moving from table layouts to css is a lot like moving from classic programming to object oriented. Most of the old artifacts don't survive. Each of your little XP-esque divisions looks like a heading, some content (2 out of 3 are lists) and a sub-heading or footer. There seem to be two classes of containers, one for link lists and one for categories. The first thing you do is write the HTML to match then figure out the css.
<div class="links">
<h3>Hot Links</h3>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"xxx">something</a> (291)</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"yyy">web design</a> (30)</li>
</ul>
<p class="foot">updated: 10-nov-2005</p>
</div>
<div class="categories">
<h3>Categories</h3>
<h4>Information last updated: 26 Oct 2005</h4>
... whatever goes here ...
<p class="foot"> </p>
</div>
<div class="links">
<h3>Editor's Pick</h3>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"xxx">something</a> (291)</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"yyy">web design</a> (30)</li>
</ul>
<p class="foot">updated: 10-nov-2005</p>
</div>thanks for the input. Yep, this is just the shell. Kind of a classic header, three columns and footer design. The old page did the same thing but with tables. The graphics were designed with tables in mind which allowed for exact positioning and minimum graphics size.
For example, by cutting the graphic into small sizes and using tables, then using certain parts as a cell background, you can expand and contract the size of the columns and rows without increasing the size of the graphic on the server. Not to mention the need to have different sizes of the same part.
but then you know all this.
What I am trying to do is take the graphics from the right, left and center cells of a three column table and use something from css to re-combine them to give the same effect as the three column table.
As for the content, I already have that. The left side will have the menu and other action type stuff. the right side will have ads, etc. and the center section will have the categories/links. There are no tables except for the categories and I am working on the PHP code to do away with that (that is what the left and right boxes are for in the bottom box in the center section ).
Except for the "container" for the sections. that is what I'd like to use but the tables are tough and add a lot of size to the page. I would like to make it look professional without the use of tables . but I can't find a way for CSS to take the place of the tables.
here is what it looked like before I added the graphics. <!-- m --><a class="postlink" href="http://www.indexuhelp.com/index0007.html">http://www.indexuhelp.com/index0007.html</a><!-- m -->. Still a lot of work to do on it but you get the idea.
.It's actually simpler with css. The header "title bar" is probably just two images instead of three, for instance. The left bit is icon1.gif, the right bit is the extended title bar with icon3.gif forming the right end. You could make this second image 600-800 px wide; lets call the new images tbleft.gif and tbright.gif. You make tbright.gif the background of the heading and put tbleft in the heading (<h3><img src=http://www.webdeveloper.com/forum/archive/index.php/"tbleft.gif">Hot Links</h3>). The concept is Sliding Doors (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/slidingdoors/">http://www.alistapart.com/articles/slidingdoors/</a><!-- m -->) at A List Apart.The header "title bar" is probably just two images instead of three, for instance. I am definately looking for simple!
but to be sure, it is also definately 3 images. Top left, top middle and top right. you can see them here: <!-- m --><a class="postlink" href="http://www.indexuhelp.com/index0008.html">http://www.indexuhelp.com/index0008.html</a><!-- m -->. Look under the Hot Links section on the left. you can see the green arrow, underneath that is the middle with the word "Top Rated" in it, and underneath that is the right corner.
And while I have not mentioned it, there are actually three other "rows" to the graphic, each with its own set of 3 graphics, right, middle and left.
If I can get one to work then I can get them all.
I'm still not 100% percent sure that I will use them but the graphics give it a certain look of professionalism. I still have a LOT to do to get to that point but I'd like to get rid of the tables if I can. The rest of the HTML will come.
I'll take a look at what you have given me. Thanks
.Checkthe css I have so far but does not work. It just stacks them one per row.
.r1{
background-image:
url('images/icons/1.gif');
width: 26px;
height: 30px;
border: 0px solid #000;
}
.r2{
background-image:
url('images/icons/2.gif');
width: 143px;
height: 30px;
border: 0px solid #000;
}
.r3{
background-image:
url('images/icons/3.gif');
width: 6px;
height: 30px;
border: 0px solid #000;
}
the html
<div class="r1"></div>
<div class="r2">Download s</div>
<div class="r3"></div>
well, it seems that the following works:
the css I have so far but does not work. It just stacks them one per row.
.r1{
background-image:
url('images/icons/1.gif');
width: 26px;
height: 30px;
border: 0px solid #000;
float: left;
}
.r2{
background-image:
url('images/icons/2.gif');
width: 143px;
height: 30px;
border: 0px solid #000;
float: left;
}
.r3{
background-image:
url('images/icons/3.gif');
width: 6px;
height: 30px;
border: 0px solid #000;
float: left;
}
the html
<div class="r1"></div>
<div class="r2">Download s</div>
<div class="r3"></div>but to be sure, it is also definately 3 images. Top left, top middle and top right.I know that's what you have. You only need 2, top left and top right. But *my* top right is not *your* top right. It's your 2 and 3 merged and 2 extended to say a 500px width. Then the left is an <img> and the right is a background.
here is the table is use:
<table cellspacing="0" cellpadding="0" width="175" border="0">
<tbody>
<tr>
<td valign="top" align="left" width="26" height="30">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/icons/1.gif" width="26" height="30" border="0" alt="" height="30">
</td>
<td align="left" width=143 height="30" background="images/icons/2.gif">
<b>Download </b></td>
<td valign="top" align="left" width="6" height="30">
<img height="30" src=http://www.webdeveloper.com/forum/archive/index.php/"images/icons/3.gif" width="6">
</td>
</tr>
</tbody>
</table>
the css I have so far but does not work. It just stacks them one per row.
.r1{
background-image:
url('images/icons/1.gif');
width: 26px;
height: 30px;
border: 0px solid #000;
}
.r2{
background-image:
url('images/icons/2.gif');
width: 143px;
height: 30px;
border: 0px solid #000;
}
.r3{
background-image:
url('images/icons/3.gif');
width: 6px;
height: 30px;
border: 0px solid #000;
}
the html
<div class="r1"></div>
<div class="r2">Download s</div>
<div class="r3"></div>
I am going search this forum. maybe I'll find it. In the meantime, if it has been answered before, please tell me what to search for or point me to the post.
Thanks
.please can u post a link so i can see what ur trying to <!-- m --><a class="postlink" href="dohttp://www.indexuhelp.com/index0008.html">dohttp://www.indexuhelp.com/index0008.html</a><!-- m -->
.Moving from table layouts to css is a lot like moving from classic programming to object oriented. Most of the old artifacts don't survive. Each of your little XP-esque divisions looks like a heading, some content (2 out of 3 are lists) and a sub-heading or footer. There seem to be two classes of containers, one for link lists and one for categories. The first thing you do is write the HTML to match then figure out the css.
<div class="links">
<h3>Hot Links</h3>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"xxx">something</a> (291)</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"yyy">web design</a> (30)</li>
</ul>
<p class="foot">updated: 10-nov-2005</p>
</div>
<div class="categories">
<h3>Categories</h3>
<h4>Information last updated: 26 Oct 2005</h4>
... whatever goes here ...
<p class="foot"> </p>
</div>
<div class="links">
<h3>Editor's Pick</h3>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"xxx">something</a> (291)</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"yyy">web design</a> (30)</li>
</ul>
<p class="foot">updated: 10-nov-2005</p>
</div>thanks for the input. Yep, this is just the shell. Kind of a classic header, three columns and footer design. The old page did the same thing but with tables. The graphics were designed with tables in mind which allowed for exact positioning and minimum graphics size.
For example, by cutting the graphic into small sizes and using tables, then using certain parts as a cell background, you can expand and contract the size of the columns and rows without increasing the size of the graphic on the server. Not to mention the need to have different sizes of the same part.
but then you know all this.
What I am trying to do is take the graphics from the right, left and center cells of a three column table and use something from css to re-combine them to give the same effect as the three column table.
As for the content, I already have that. The left side will have the menu and other action type stuff. the right side will have ads, etc. and the center section will have the categories/links. There are no tables except for the categories and I am working on the PHP code to do away with that (that is what the left and right boxes are for in the bottom box in the center section ).
Except for the "container" for the sections. that is what I'd like to use but the tables are tough and add a lot of size to the page. I would like to make it look professional without the use of tables . but I can't find a way for CSS to take the place of the tables.
here is what it looked like before I added the graphics. <!-- m --><a class="postlink" href="http://www.indexuhelp.com/index0007.html">http://www.indexuhelp.com/index0007.html</a><!-- m -->. Still a lot of work to do on it but you get the idea.
.It's actually simpler with css. The header "title bar" is probably just two images instead of three, for instance. The left bit is icon1.gif, the right bit is the extended title bar with icon3.gif forming the right end. You could make this second image 600-800 px wide; lets call the new images tbleft.gif and tbright.gif. You make tbright.gif the background of the heading and put tbleft in the heading (<h3><img src=http://www.webdeveloper.com/forum/archive/index.php/"tbleft.gif">Hot Links</h3>). The concept is Sliding Doors (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/slidingdoors/">http://www.alistapart.com/articles/slidingdoors/</a><!-- m -->) at A List Apart.The header "title bar" is probably just two images instead of three, for instance. I am definately looking for simple!
but to be sure, it is also definately 3 images. Top left, top middle and top right. you can see them here: <!-- m --><a class="postlink" href="http://www.indexuhelp.com/index0008.html">http://www.indexuhelp.com/index0008.html</a><!-- m -->. Look under the Hot Links section on the left. you can see the green arrow, underneath that is the middle with the word "Top Rated" in it, and underneath that is the right corner.
And while I have not mentioned it, there are actually three other "rows" to the graphic, each with its own set of 3 graphics, right, middle and left.
If I can get one to work then I can get them all.
I'm still not 100% percent sure that I will use them but the graphics give it a certain look of professionalism. I still have a LOT to do to get to that point but I'd like to get rid of the tables if I can. The rest of the HTML will come.
I'll take a look at what you have given me. Thanks
.Checkthe css I have so far but does not work. It just stacks them one per row.
.r1{
background-image:
url('images/icons/1.gif');
width: 26px;
height: 30px;
border: 0px solid #000;
}
.r2{
background-image:
url('images/icons/2.gif');
width: 143px;
height: 30px;
border: 0px solid #000;
}
.r3{
background-image:
url('images/icons/3.gif');
width: 6px;
height: 30px;
border: 0px solid #000;
}
the html
<div class="r1"></div>
<div class="r2">Download s</div>
<div class="r3"></div>
well, it seems that the following works:
the css I have so far but does not work. It just stacks them one per row.
.r1{
background-image:
url('images/icons/1.gif');
width: 26px;
height: 30px;
border: 0px solid #000;
float: left;
}
.r2{
background-image:
url('images/icons/2.gif');
width: 143px;
height: 30px;
border: 0px solid #000;
float: left;
}
.r3{
background-image:
url('images/icons/3.gif');
width: 6px;
height: 30px;
border: 0px solid #000;
float: left;
}
the html
<div class="r1"></div>
<div class="r2">Download s</div>
<div class="r3"></div>but to be sure, it is also definately 3 images. Top left, top middle and top right.I know that's what you have. You only need 2, top left and top right. But *my* top right is not *your* top right. It's your 2 and 3 merged and 2 extended to say a 500px width. Then the left is an <img> and the right is a background.