Css Snippets » float

Jquery – verwijder margin van elk 5de element

Mark — Wed, 10 Feb 2010 07:28:12 +0000

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

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

5 handige clear float tips

Mark — Mon, 23 Nov 2009 06:10:59 +0000

Floats moeten altijd gecleard worden als je geen onvoorziene omstandigheden wilt hebben in je layout, hier zijn 5 handige manieren om dit te doen:

Tip 1

HTML


	
		big floating contents
	
	Main Content

CSS

#outer {
overflow: auto;
height: 1%; /* for IE6 */
}

Tip 2

HTML


	This text won't extend past the bottom of the "clearfix" div.

CSS

.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE5/Mac \*/
* html .clearfix {
height: 1px;
}
.clearfix {
display: block;
}
/* End hide from IE5/Mac */

Tip 3

HTML

CSS

div.spacer {
clear: both;
}

Tip 4

HTML

CSS

br {
clear: both;
height:0;
font-size: 1px;
line-height: 0;
}

Tip 5

HTML


	
	This text won't extend past the bottom of the "newBFC" div.

CSS

.newBFC {
overflow: hidden;
_overflow: visible; /* not valid */
_overflow-x:hidden; /* not valid */
_height: 0; /* not valid */
}
/*\*//*/
.newBFC {display: inline-block;}
/**/

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

Navigatie centreren door display:inline

Mark — Mon, 10 Aug 2009 08:25:20 +0000

Een navigatie centreren als je float gebruikt heeft het nadeel dat je een container element moet hebben en de exacte afmetingen moet weten om het te centreren, door display:inline te gebruiken vereenvoudig je dit door geen specifieke afmetingen nodig te hebben en text-align:center doet het werk voor jouw, om het even hoeveel navigatie-items je hebt.

HTML


    home
    about us
    products
    services
    contact

CSS

body{
padding-top: 60px;
background: #FFF;
font: 76% Arial,sans-serif;
}
ul#minitabs{
list-style: none;
margin: 0;
padding: 7px 0;
border-bottom: 1px solid #CCC;
font-weight: bold;
text-align: center;
white-space: nowrap;
}
ul#minitabs li{
display: inline;
margin: 0 2px;
}
ul#minitabs a{
text-decoration: none;
padding: 0 0 3px;
border-bottom: 4px solid #FFF;
color: #999;
}
ul#minitabs a#current{
border-color: #F60;
color: #06F;
}
ul#minitabs a:hover{
border-color: #F60;
color: #666;
}

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

Een link is een inline element

Mark — Mon, 13 Jul 2009 10:16:58 +0000

Een link is een inline element, bewijs hiervan is als je een link in een stuk tekst zet zal deze niet op een nieuwe lijn beginnen. Maar soms wil je juist wel dimensie geven aan een link (navigatie, etc …), dan kun je niet anders dan er een block-element van te maken (indien je hoogte, breedte en margin wenst toe te voegen).
Als de links (meerdere) langs elkaar moeten komen kan je inline-block gebruiken of block in combinatie met float.

HTML

Link 1
Link 2
Link 3
Link 4

Links naast elkaar methode 1, zonder dimensie

CSS

a {
padding: 0 5px;
}

Links naast elkaar methode 2, met dimensie

CSS

a {
display: inline-block;
height: 20px;
width: 20px;
margin: 0 3px;
padding: 0 5px;
}

Links naast elkaar methode 3, met dimensie

CSS

a {
display: block;
float: left;
height: 20px;
width: 20px;
margin: 0 3px;
padding: 0 5px;
}

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

Floating quotes

Mark — Sat, 20 Dec 2008 14:04:53 +0000

Als je tekst schrijft en wilt bijvoorbeeld een kleine blok tekst weergeven in je tekst, aan de linker of rechter kant om extra aandacht te trekken. Of als toelichting op je tekst een afbeelding plaatsen zonder je tekst te moeten stop zetten voor de afbeelding.

HTML



...Quotes maken een
coole tekst
om zoveel mooier dat het eigenlijk
spijtig is
dat het nu gedaan is...

Alas, the conjoint dog measurably said
inside this talkative eel. Dear me, the porcupine
is more submissive than a savage meadowlark
Alas, the conjoint dog measurably said
inside this talkative eel. Dear me, the porcupine
is more submissive than a savage meadowlark

CSS

#kleur1 {
color: #ffd700;
}
#kleur2 {
color: #ffa500;
}
#clear {
clear: both;
}
#container {
width:400px;
}
#quoting {
float: right;
width: 150px;
margin : 10px 20px 10px 10px;
font-family: Georgia,Arial,Helvetica;
font-size: 28px;
line-height: 24px;
color:#FF6600;
padding-bottom:5px;
text-align: right;
}

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