Css Snippets » margin 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 Jquery – verwijder margin van elk 5de element http://www.csssnippets.be/2010/02/jquery-verwijder-margin-van-elk-5de-element/ http://www.csssnippets.be/2010/02/jquery-verwijder-margin-van-elk-5de-element/#comments Wed, 10 Feb 2010 07:28:12 +0000 Mark http://www.csssnippets.be/?p=740 als je op deze manier spatie wilt verzekeren tussen je blokken). Nu kan de laatste margin-right je laatste blok naar de volgende lijn schuiven omwille van de extra ruimte die nodig is. Je kan dit met Jquery oplossen.]]> Meestal als je afbeeldingen, of verschillende blokken langs elkaar float, bijvoorbeeld 5 langseen, en je weet niet op voorhand hoeveel items er zullen zijn, zit je altijd met het probleem van margin aan de rechter kant (als je op deze manier spatie wilt verzekeren tussen je blokken). Nu kan de laatste margin-right je laatste blok naar de volgende lijn schuiven omwille van de extra ruimte die nodig is.
Je kan dit met Jquery oplossen.

HTML

>div id="blokken">
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
>/div>

CSS

#blokken {
width: 540px;
}
.blok-item {
width: 100px;
background-color: #aaa;
margin: 0 10px 10px 0;
}

Jquery

<![CDATA[
var items = $('.blok-item').length;
for(var i = 4;i < items;i = i + 5){
  $('.blok-item:eq('+i+')').css("margin-right","0");
}
]]>
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2010/02/jquery-verwijder-margin-van-elk-5de-element/feed/ 0 Vertikaal centreren http://www.csssnippets.be/2008/12/vertikaal-centreren-2/ http://www.csssnippets.be/2008/12/vertikaal-centreren-2/#comments Sun, 28 Dec 2008 10:31:47 +0000 Mark http://www.csssnippets.be/?p=65 Er zullen zich waarschijnlijk al reeds veel webmasters en stylers afgevraagd hebben, hoe je nu juist (en op de correcte manier) een ontwerp met achtergrond gecentreerd krijgt op de pagina zonder dat de tekst ook zelf gecentreerd zich gaat verhouden.

<html>
<head>
<title>Wij maken een blog</title>
</head>
<body>
<div id="container">
...uw volledige website staat hier...
</div>
</body>
</html>

#container {
margin: 0 auto;
width: 720px;
border: 1px solid #000;
}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

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