Css Snippets http://www.csssnippets.be Snippets for you, snippets for me Thu, 04 Mar 2010 07:00:20 +0000 http://wordpress.org/?v=2.9 en hourly 1 Een ul lijst opsplitsen in kolommen http://www.csssnippets.be/2010/03/een-opsplitsen-in-kolommen/ http://www.csssnippets.be/2010/03/een-opsplitsen-in-kolommen/#comments Thu, 04 Mar 2010 07:00:20 +0000 Mark http://www.csssnippets.be/?p=753 opsplitsen in meerdere lijsten zonder toevoeging van extra HTML code? Heel eenvoudig, laat de lijst items er zelf voor zorgen, door er afmetingen aan te geven.]]> Hoe kun je 1 lijst <ul> opsplitsen in meerdere lijsten zonder toevoeging van extra HTML code? Heel eenvoudig, laat de lijst items er zelf voor zorgen, door er afmetingen aan te geven.

HTML

<ul class="col2">
  <li>Lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>consectetuer</li>
  <li>adipiscing</li>
  <li>elit</li>
</ul>

CSS

ul {
  width:760px;
  margin-bottom:20px;
  overflow:hidden;
  border-top:1px solid #ccc;
}
li {
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;
}
.col2 li  { width:50%;}
.col3 li  { width:33.333%; }
.col4 li  { width:25%; }
.col6 li  { width:16.666%; }
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2010/03/een-opsplitsen-in-kolommen/feed/ 0 Conditionele body tag voor IE http://www.csssnippets.be/2010/02/conditionele-body-tag-voor-ie/ http://www.csssnippets.be/2010/02/conditionele-body-tag-voor-ie/#comments Sat, 27 Feb 2010 07:14:26 +0000 Mark http://www.csssnippets.be/?p=750 zie eerdere Snippet) toevoegen, maar je kan in plaats van een extra CSS bestand, conditioneel een extra class toevoegen aan zoals in dit voorbeeld de body tag.]]> Je kan CSS via conditionele comments (zie eerdere Snippet) toevoegen, maar je kan in plaats van een extra CSS bestand, conditioneel een extra class toevoegen aan zoals in dit voorbeeld de body tag.

HTML

<!--[if IE ]>
   <body class="ie">
<![endif]-->
<!--[if !IE]>-->
   <body>
<!--<![endif]-->

Het enigste wat je nu moet doen is de uitzondering toevoegen aan je reeds bestaande CSS.

Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2010/02/conditionele-body-tag-voor-ie/feed/ 0 Tekst overlapping 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 del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2010/02/tekst-overlapping/feed/ 0 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 JQuery – performance tips #2 http://www.csssnippets.be/2010/02/jquery-%e2%80%93-performance-tips-2/ http://www.csssnippets.be/2010/02/jquery-%e2%80%93-performance-tips-2/#comments Tue, 02 Feb 2010 07:01:55 +0000 Mark http://www.csssnippets.be/?p=738 Je kan je JQuery aanzienlijk versnellen door je selectors op #(id) te laten selecteren in plaats van op .(class), omdat JQuery gebruik maakt van de browser eigen getElementById() functie, dewelke aanzienlijk sneller werkt.

Doe de test

JQuery

<![CDATA[
console.time('test');
for (i = 0; i < 500; i++) {
    $('.'+i);
}
console.timeEnd('test');
// ~8204ms
]]>

<![CDATA[
console.time('test');
for (i = 0; i < 500; i++) {
    $('#'+i);
}
console.timeEnd('test');
// ~32ms
]]>
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2010/02/jquery-%e2%80%93-performance-tips-2/feed/ 0 JQuery – performance tips #1 http://www.csssnippets.be/2010/01/jquery-performance-tips-1/ http://www.csssnippets.be/2010/01/jquery-performance-tips-1/#comments Fri, 29 Jan 2010 07:00:27 +0000 Mark http://www.csssnippets.be/?p=736 JQuery is snel, maar soms kan je het gebruik en proces ervan versnellen door de juiste functie op de juiste plaats te gebruiken:
Stel je hebt 5 dezelfde .class en je wil de hoeveelheid ervan weten:

JQuery

Sneller resultaat

<![CDATA[
$('.class').length;
// geeft terug waarde 5
]]>

Iets minder snel resultaat

<![CDATA[
$('.class').size();
// geeft terug waarde 5
]]>

Dus het is aangeraden length te gebruiken.

Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2010/01/jquery-performance-tips-1/feed/ 0 jQuery – bepaal atribuut waarde http://www.csssnippets.be/2010/01/jquery-bepaal-atribuut-waarde/ http://www.csssnippets.be/2010/01/jquery-bepaal-atribuut-waarde/#comments Mon, 25 Jan 2010 07:59:47 +0000 Mark http://www.csssnippets.be/?p=730 Zoals je in de vorige Snippet kon zien hoe je een waarde van een attribuut kon opvragen, je kan deze waarde ook zetten/aanpassen:

jQuery

<![CDATA[
// op alle links een titel zetten
$("a").attr("title", "dit is een link");

// alle images een alt toevoegen
$("img").attr("alt", "Logo");

//meerdere atributen toevoegen
$("img").attr({
 src: "/images/hat.gif",
 title: "titeltitel",
 alt: "alt omschrijving"
});
]]>
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2010/01/jquery-bepaal-atribuut-waarde/feed/ 0 jQuery – verkrijg html-tag attribuut http://www.csssnippets.be/2010/01/jquery-verkrijg-html-tag-attribuut/ http://www.csssnippets.be/2010/01/jquery-verkrijg-html-tag-attribuut/#comments Thu, 21 Jan 2010 07:47:57 +0000 Mark http://www.csssnippets.be/?p=724 id, class, name, title, href ...) opvragen van eender welke HTML tag door gebruik te maken van de attr() funktie. Het resultaat is een string die de attribuut waarde is.]]> Met jQuery kun je elke attribuut waarde (id, class, name, title, href …) opvragen van eender welke HTML tag door gebruik te maken van de attr() funktie. Het resultaat is een string die de attribuut waarde is.

HTML

<div class="myContainer" id="wrapper">
  Some content
  <a id="siteLink" title="Google" href="http://www.csssnippets.be">link</a>
</div>

jQuery

<![CDATA[
// geef waarde id attribuut van de div
var divID = $("div.myContainer").attr("id");

// geef waarde title attribute van de link
var linkTitle = $("#siteLink").attr("title");
]]>
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2010/01/jquery-verkrijg-html-tag-attribuut/feed/ 0 Text-indent op submit voor ie6 & 7 http://www.csssnippets.be/2010/01/text-indent-op-submit-voor-ie6-7/ http://www.csssnippets.be/2010/01/text-indent-op-submit-voor-ie6-7/#comments Sun, 17 Jan 2010 07:08:22 +0000 Mark http://www.csssnippets.be/?p=719 Tekst values op een submit button zou je willen verbergen als je de submit knop wilt vervangen door een afbeelding, met text-indent kan je voor alle browsers de tekst-valu verbergen, bij Internet Explorer 6 & 7 lukt dit niet, hiervoor is nu een oplossing:

HTML

<input type="submit" class="knop" value="Submit" />

CSS

form input.knop {
text-indent:-9999px; /* Voor alle browsers */
font-size:0; /* Voor alle IE 6&7 */
line-height:0; /* Voor alle IE 6&7 */
}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2010/01/text-indent-op-submit-voor-ie6-7/feed/ 0 Vergroten textarea in Safari uitzetten http://www.csssnippets.be/2010/01/vergroten-textarea-in-safari-uitzetten/ http://www.csssnippets.be/2010/01/vergroten-textarea-in-safari-uitzetten/#comments Wed, 13 Jan 2010 07:00:05 +0000 Mark http://www.csssnippets.be/?p=717 Standaard krijg je in Safari browsers de mogelijkheid om textarea te vergroten of verkleinen – re-size. Dit kan je via CSS uitzetten:

Aangeraden is deze snippet in een Safari only hack te zetten

CSS

@media all and (-webkit-min-device-pixel-ratio:0) {
textarea { resize:none; }
}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2010/01/vergroten-textarea-in-safari-uitzetten/feed/ 0