Regnery.net Internet

HTML CSS PHP MYSQL JQuery SEO – internetoplossingen

CSS visibility

Met CSS visibility kun je elementen op je site zichtbaar en onzichtbaar maken. Door te spelen met de eigenschap visibility van een element kun je dit effect zelf toepassen. Samen met JQuery kun je dan leuke effecten maken met uitklapmenu’s, accordeon effecten enzovoorts.

CSS Visibility voorbeeld:

<style type="text/css">
 .lay1 {
 width: 100px;
 height: 100px;
 background-color: #0080ff;
 position: absolute;
 top: 10px;
 left: 10px;
 z-index: 2;
 }
 .lay2 {
 width: 150px;
 height: 150px;
 background-color: silver;
 position: absolute;
 top: 25px;
 left: 25px;
 z-index: 1;
 visibility: hidden;
 }
 </style>
 <body<
 <div class="lay1">Laag 1</div>
 <div class=”lay2”>Laag 2</div>
 </body>

In dit voorbeeld beïnvloeden we de laag of deze wel of niet zichtbaar wordt op de pagina. Alleen laag 1 is zichtbaar, laag 2 niet. Toch is laag 2 wel aanwezig in de pagina. Klik op je rechtermuisknop en selecteer “bron weergeven”. In de broncode zie je laag 2 wel. Met JQuery kun je hier weer verder mee knutselen.

Visibility versus display

Om een element te verbergen op de site, heb je keuze uit twee mogelijkheden. Allereerst kun je de visibility eigenschap op hidden zetten (zie voorbeeld hiervoor), ten tweede kun je de eigenschap display op none zetten. Dit ziet er in code als volgt uit:

p.hidden{ display: none;}

Als je visibility:hidden gebruikt, blijft het element de plek innnemen op je site als in geval je de visibility niet instelt. Je krijgt dus een witte plek op je site. Stel je display:none in, dan is het alsof dit element niet bestaat. Er blijft in dat geval geen witte plek op de site staan.