http://www.csssnippets.be Snippets for you, snippets for me Mon, 17 Oct 2011 08:42:00 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 http://www.csssnippets.be/2009/10/table-design-4-vertikaal-zebra/ http://www.csssnippets.be/2009/10/table-design-4-vertikaal-zebra/#comments Fri, 09 Oct 2009 07:32:04 +0000 Mark http://www.csssnippets.be/?p=392 Tabellen zijn gedacht voor het weergeven van data (dat is een globaal begrip) niet om layout van een website te maken. Dit is deel 4 van verschillende mogelijkheden van tabellen van style te voorzien.

HTML

<table summary="Most Favorite Movies" id="ver-zebra">
<colgroup>
<col class="vzebra-odd"/>
<col class="vzebra-even"/>
<col class="vzebra-odd"/>
<col class="vzebra-even"/>
    </colgroup>
<thead>
<tr>
<th id="vzebra-comedy" scope="col">Comedy</th>
<th id="vzebra-adventure" scope="col">Adventure</th>
<th id="vzebra-action" scope="col">Action</th>
<th id="vzebra-children" scope="col">Children</th>
</tr>
</thead>
<tbody>
<tr>
<td>Scary Movie</td>
<td>Indiana Jones</td>
<td>The Punisher</td>
<td>Wall-E</td>
</tr>
<tr>
<td>Epic Movie</td>
<td>Star Wars</td>
<td>Bad Boys</td>
<td>Madagascar</td>
</tr>
<tr>
<td>Spartan</td>
<td>LOTR</td>
<td>Die Hard</td>
<td>Finding Nemo</td>
</tr>
<tr>
<td>Dr. Dolittle</td>
<td>The Mummy</td>
<td>300</td>
<td>A Bug’s Life</td>
</tr>
</tbody>
</table>

CSS

#ver-zebra {
border-collapse:collapse;
font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
font-size:12px;
margin:0 20px 20px;
text-align:left;
width:480px;
}
.vzebra-odd {
background:#EFF2FF none repeat scroll 0 0;
}
.vzebra-even {
background:#E8EDFF none repeat scroll 0 0;
}
#ver-zebra th {
border-left:1px solid #FFF;
border-right:1px solid #FFF;
color:#003399;
font-size:14px;
font-weight:normal;
padding:12px 15px;
}
#ver-zebra #vzebra-comedy, #ver-zebra #vzebra-action {
background:#DCE4FF none repeat scroll 0 0;
border-bottom:1px solid #D6DFFF;
}
#ver-zebra #vzebra-adventure, #ver-zebra #vzebra-children {
background:#D0DAFD none repeat scroll 0 0;
border-bottom:1px solid #C8D4FD;
}
#ver-zebra #vzebra-comedy, #ver-zebra #vzebra-action {
background:#DCE4FF none repeat scroll 0 0;
border-bottom:1px solid #D6DFFF;
}
#ver-zebra #vzebra-adventure, #ver-zebra #vzebra-children {
background:#D0DAFD none repeat scroll 0 0;
border-bottom:1px solid #C8D4FD;
}
#ver-zebra td {
border-left:1px solid #FFF;
border-right:1px solid #FFF;
color:#669;
padding:8px 15px;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

]]> http://www.csssnippets.be/2009/10/table-design-4-vertikaal-zebra/feed/ 0 http://www.csssnippets.be/2008/11/vertikaal-centreren/ http://www.csssnippets.be/2008/11/vertikaal-centreren/#comments Wed, 19 Nov 2008 13:26:56 +0000 Mark http://www.csssnippets.be/?p=36 een hoogte en een breedte moet hebben. Er wordt vanuit gegaan dat dit is ten opzichte van ofwel de body (die zich relative bevind), ofwel een parent element die dan de CSS eigenschap position: relative heeft:]]> Om een element vertikaal te centreren kan je volgende handige code gebruiken, let wel op dat het element een hoogte en een breedte moet hebben.
Er wordt vanuit gegaan dat dit is ten opzichte van ofwel de body (die zich relative bevind), ofwel een parent element die dan de CSS eigenschap position: relative heeft:

HTML

<div id="center">lorem ipsum enzo</div>

CSS

#center{
   width:100px;
   height:100px;
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-50px;
   margin-left:-50px;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

]]> http://www.csssnippets.be/2008/11/vertikaal-centreren/feed/ 0