Css Snippets » style http://www.csssnippets.be Snippets for you, snippets for me Wed, 23 Jun 2010 09:35:12 +0000 http://wordpress.org/?v=2.9 en hourly 1 Table design #2: Box model http://www.csssnippets.be/2009/09/table-design-2-box-model/ http://www.csssnippets.be/2009/09/table-design-2-box-model/#comments Wed, 30 Sep 2009 11:50:44 +0000 Mark http://www.csssnippets.be/?p=373 Tabellen zijn gedacht voor het weergeven van data (dat is een globaal begrip) niet om layout van een website te maken. Dit is deel 2 van verschillende mogelijkheden van tabellen van style te voorzien.

HTML

<table summary="Employee Pay Sheet" id="box-table-a">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Salary</th>
<th scope="col">Bonus</th>
<th scope="col">Supervisor</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stephen C. Cox</td>
<td>$300</td>
<td>$50</td>
<td>Bob</td>
</tr>
<tr>
<td>Josephin Tan</td>
<td>$150</td>
<td>-</td>
<td>Annie</td>
</tr>
<tr>
<td>Joyce Ming</td>
<td>$200</td>
<td>$35</td>
<td>Andy</td>
</tr>
<tr>
<td>James A. Pentel</td>
<td>$175</td>
<td>$25</td>
<td>Annie</td>
</tr>
</tbody>
</table>

CSS

#box-table-a {
border-collapse:collapse;
font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
font-size:12px;
margin:20px;
text-align:left;
width:480px;
}
#box-table-a th {
background:#B9C9FE none repeat scroll 0 0;
border-bottom:1px solid #FFF;
border-top:4px solid #AABCFE;
color:#039;
font-size:13px;
font-weight:normal;
padding:8px;
}
#box-table-a td {
background:#E8EDFF none repeat scroll 0 0;
border-bottom:1px solid #FFF;
border-top:1px solid transparent;
color:#669;
padding:8px;
}
#box-table-a tr:hover td {
background:#D0DAFD none repeat scroll 0 0;
color:#339;
}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/09/table-design-2-box-model/feed/ 0 Table design #1: Horizontaal mini http://www.csssnippets.be/2009/09/table-design-1-horizontaal-mini/ http://www.csssnippets.be/2009/09/table-design-1-horizontaal-mini/#comments Mon, 28 Sep 2009 07:43:30 +0000 Mark http://www.csssnippets.be/?p=371 Tabellen zijn gedacht voor het weergeven van data (dat is een globaal begrip) niet om layout van een website te maken. Dit is deel 1 van verschillende mogelijkheden van tabellen van style te voorzien.

HTML

<table summary="Employee Pay Sheet" id="hor-minimalist-a">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Salary</th>
<th scope="col">Bonus</th>
<th scope="col">Supervisor</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stephen C. Cox</td>
<td>$300</td>
<td>$50</td>
<td>Bob</td>
</tr>
<tr>
<td>Josephin Tan</td>
<td>$150</td>
<td>-</td>
<td>Annie</td>
</tr>
<tr>
<td>Joyce Ming</td>
<td>$200</td>
<td>$35</td>
<td>Andy</td>
</tr>
<tr>
<td>James A. Pentel</td>
<td>$175</td>
<td>$25</td>
<td>Annie</td>
</tr>
</tbody>
</table>

CSS

#hor-minimalist-a {
background:#FFF none repeat scroll 0 0;
border-collapse:collapse;
font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
font-size:12px;
margin:20px;
text-align:left;
width:480px;
}
#hor-minimalist-a th {
border-bottom:2px solid #6678B1;
color:#039;
font-size:14px;
font-weight:normal;
padding:10px 8px;
}
#hor-minimalist-a td {
color:#669;
border-bottom:1px solid #CCC;
padding:9px 8px 0;
}
#hor-minimalist-b tbody tr:hover td {
color:#009;
}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/09/table-design-1-horizontaal-mini/feed/ 0 Geef stijl aan een ol lijst http://www.csssnippets.be/2009/06/geef-stijl-aan-een-ol-lijst/ http://www.csssnippets.be/2009/06/geef-stijl-aan-een-ol-lijst/#comments Thu, 11 Jun 2009 06:28:48 +0000 Mark http://www.csssnippets.be/?p=264 Als je wil dat de nummerieke weergave van een <ol> lijst anders moet zijn als de tekst die erop volgt, kan je ofwel afbeeldingen gebruiken (veel css voor nodig), ofwel volgende trick toepassen.

HTML

<ol>
  <li>
    <p>Lijst item één</p>
  </li>
  <li>
    <p>Lijst item twee</p>
  </li>
  <li>
    <p>Lijst item drie</p>
  </li>
</ol>

CSS

ol {
font: italic 1em Georgia, Times, serif;
color: #999;
}
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000;
}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/06/geef-stijl-aan-een-ol-lijst/feed/ 1 Puur en zuiver formulier template http://www.csssnippets.be/2009/05/puur-en-zuiver-formulier-template/ http://www.csssnippets.be/2009/05/puur-en-zuiver-formulier-template/#comments Mon, 18 May 2009 11:00:11 +0000 Mark http://www.csssnippets.be/?p=222 Nog een eenvoudig formulier template, zo zuiver dat er alleen het nodige aan elementen inzit, want meer heb je niet nodig om een formulier er goed te laten uitzien.

HTML

<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Formulier</h1>
<p>Eenvoudig en zuiver formulier</p>
<label>Naam
<span class="small">Geef uw naam</span>
</label>
<input type="text" name="name" id="name" />
<label>Email
<span class="small">Geef een valide adres</span>
</label>
<input type="text" name="email" id="email" />
<label>Paswoord
<span class="small">Min. 6 chars</span>
</label>
<input type="text" name="password" id="password" />
<button type="submit">Verstuur</button>
<div class="spacer"></div>
</form>
</div>

CSS

body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- Mijn Formulier ----------- */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
border: none;
color:#FFF;
font-size:11px;
font-weight:bold;
}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/05/puur-en-zuiver-formulier-template/feed/ 1 Volgorde stylesheets http://www.csssnippets.be/2009/04/volgorde-stylesheets/ http://www.csssnippets.be/2009/04/volgorde-stylesheets/#comments Thu, 23 Apr 2009 18:52:25 +0000 Mark http://www.csssnippets.be/?p=183 Eerst plaats je de stylesheet voor de moderne browsers, zoals FireFox, Opera, Safari etc…, daarna pas de aangepaste stylesheet voor Internet Explorer versie allemaal.

Foute volgorde

HTML

<!--[if ie]>
<link rel="stylesheet" type="text/css" href="internet_explorer.css" />
<![endif]-->
<style type="text/css" rel="stylesheet">
<!--
@import url(moderne_browsers.css);
-->
</style>

HTML

<style type="text/css" rel="stylesheet">
<!--
@import url(moderne_browsers.css);
-->
</style>
<!--[if ie]>
<link rel="stylesheet" type="text/css" href="internet_explorer.css" />
<![endif]-->

HTML

<!--[if ie]>
<link rel="stylesheet" type="text/css" href="internet_explorer.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="moderne_browsers.css" />

Juiste volgorde

HTML

<link rel="stylesheet" type="text/css" href="moderne_browsers.css" />
<!--[if ie]>
<link rel="stylesheet" type="text/css" href="internet_explorer.css" />
<![endif]-->
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/04/volgorde-stylesheets/feed/ 0