http://www.csssnippets.be Snippets for you, snippets for me Wed, 23 Jun 2010 09:35:12 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 http://www.csssnippets.be/2010/02/tekst-overlapping/ http://www.csssnippets.be/2010/02/tekst-overlapping/#comments Tue, 23 Feb 2010 14:33:24 +0000 Mark http://www.csssnippets.be/?p=745 Dit is ideaal voor headers, kopregels en titels en zo. Wat we eigenlijk gaan doen is 2 regels tekst met CSS zo positioneren dat ze elkaar overlappen, uiteindelijk zal het eruit zien als een afbeelding.

HTML

<h2>CSS Snippets </h2>
<h3>CSS - JQuery - XHTML</h3>

CSS

h2  {
position: relative;
top: 5px;
left: 5px;
font: italic 72pt times, serif;
color: #FC0;
}

h3 {
position: relative;
top: -60px;
font: bold 18pt times, sans-serif;
color: #000;
margin-left: 20px;
}

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

]]> http://www.csssnippets.be/2010/02/tekst-overlapping/feed/ 0 http://www.csssnippets.be/2009/04/layout-met-100-hoogte/ http://www.csssnippets.be/2009/04/layout-met-100-hoogte/#comments Fri, 24 Apr 2009 16:47:28 +0000 Mark http://www.csssnippets.be/?p=185 Hoe maak je een pagina die 100% hoog is – dus het gehele beeldscherm in beslag neemt – terwijl er eigenlijk weinig tekst of inhoud in staat ?

HTML

<div id=”container”>
<h1>Header</h1>
<div id=”inhoud”>
<p>inhoud hier</p>
</div>
<div id=”footer”>Footer</div>
</div>

CSS

html, body {
height: 100%; /* héél belangrijk */
}
#container {
position: relative;
min-height: 100%;
height:auto !important; /* voor moderne browsers */
height:100%; /* voor IE */
}
#footer {
position: absolute;
bottom: 0; /* heel belangrijk */
}

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

]]> http://www.csssnippets.be/2009/04/layout-met-100-hoogte/feed/ 1 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