Sarah Tebo, web designerTag Archive | css | Sarah Tebo, web designer http://sarahtebo.com Sat, 21 Jan 2012 16:05:30 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 A simple, styled table http://sarahtebo.com/2009/02/a-simple-styled-table/ http://sarahtebo.com/2009/02/a-simple-styled-table/#comments Sat, 07 Feb 2009 17:18:54 +0000 Sarah Tebo http://blog.sarahtebo.com/?p=42 So how many elections did we have last year? Seems like at least a dozen, though it was probably only about half that. For the bigger elections, like the primaries and the November general election, the Rome News-Tribune had full results pages to show vote totals as they came in. In the smaller elections, though, I just made a simple HTML table that the numbers could easily be inserted into. Here’s an example of the HTML for one of those tables.

What it looks like:

xx of xx precincts reporting
Office 1
Candidate 1 xx
Candidate 2 xx
Candidate 3 xx
Candidate 4 xx
Office 2
Candidate 2 xx
Candidate 3 xx
Candidate 4 xx

Your table may look a little different because of the styles on this page, but it’s pretty much what you see above. Obviously, this can be used for any table you need, and to make more categories, just copy and paste. And now for the code:

?Download table.txt 
<table style="border-collapse: collapse;" border="1" cellpadding="5" width="300" bgcolor="#ffffff">
<tbody>
<tr>
<th colspan="2"><span style="color: #000000;">xx of xx precincts reporting</span></th>
</tr>
<tr>
<th colspan="2"><span style="color: #000000;">Office 1</span></th>
</tr>
<tr>
<td width="240"><span style="color: #000000;">Candidate 1</span></td>
<td width="60"><span style="color: #000000;">xx</span></td>
</tr>
<tr>
<td><span style="color: #ff0000;">Candidate 2</span></td>
<td><span style="color: #ff0000;">xx</span></td>
</tr>
<tr>
<td><span style="color: #000000;">Candidate 3</span></td>
<td><span style="color: #000000;">xx</span></td>
</tr>
<tr>
<td><span style="color: #000000;">Candidate 4</span></td>
<td><span style="color: #000000;">xx</span></td>
</tr>
<tr>
<th colspan="2" width="300"><span style="color: #000000;">Office 2</span></th>
</tr>
<tr>
<td><span style="color: #000000;">Candidate 2</span></td>
<td><span style="color: #000000;">xx</span></td>
</tr>
<tr>
<td><span style="color: #000000;">Candidate 3</span></td>
<td><span style="color: #000000;">xx</span></td>
</tr>
<tr>
<td><span style="color: #ff0000;">Candidate 4</span></td>
<td><span style="color: #ff0000;">xx</span></td>
</tr>
</tbody>
</table>
]]> http://sarahtebo.com/2009/02/a-simple-styled-table/feed/ 0 CSS for quote box with photo http://sarahtebo.com/2008/07/css-for-quote-box-with-photo/ http://sarahtebo.com/2008/07/css-for-quote-box-with-photo/#comments Tue, 29 Jul 2008 23:45:49 +0000 Sarah Tebo http://blog.sarahtebo.com/?p=24

I worked on MagnoliaWoman.com, a Web site for a new woman’s magazine, for several weeks. One of the last things I did was design a page for the “She Said” feature, which uses quotes and photos of local women. My editor wanted to use all the quotes and all the pictures on the Web site, so I had to find a way to package them attractively.

I think this CSS styling worked nicely. It’s very customizable for colors, etc., and the empty div at the end ensures that it will work even if you have a short quote that doesn’t take up the whole box.

In my example, I’ve used a Homer Simpson quote, because nobody gives good quote like Homer.

Here’s the CSS and HTML:

?Download quoteboxcss.txt 
quotebox {
width:500px;
display:block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
padding: 10px;
border:3px double #CCC;
border-width:3px 0;
color:#333;
background-color:#f0f0f0;
font-size: 16px;
font-family: Georgia;}
.quotebox img {
 float: left;
margin: 8px;
width: 50px;
border: 5px solid #fff; }
.after { clear:both;}
?Download quoteboxhtml.txt 
<div class="quotebox">
<img src="photoURLhere" alt="alternatetexthere" />
<p>Quote quote quote quote quote quote quote quote</p>
<div class="after"></div>
</div>
]]> http://sarahtebo.com/2008/07/css-for-quote-box-with-photo/feed/ 0