Beste lezers,

Na wat PHP blogs is het weer tijd voor een CSS blog! En wel over float… Met float kan je divs naast elkaar laten staan. Zonder deze functie gaat het niet lukken om 2 divs naast elkaar te krijgen, ze worden namelijk altijd onder elkaar gezet.

Stel je wilt 2 divs links naast elkaar zetten dan zet je in allebei de div css de volgende code:

float: left;

Voor rechts is het natuurlijk right; Wil je er meerdere naast elkaar hebben? Dit kan natuurlijk alleen let wel altijd op de breedte die het inneemt. Want als het er niet tussen past wordt het alsnog onder elkaar gezet…

Tot de volgende blog!

Beste lezers,

Het is soms erg handig om een rekbare website te maken die automatisch meegaat met de lengte van de inhoud. Het voordeel is dat je niet elke de lengte van je pagina hoeft te updaten als je tekst langer wordt.

Het maken van een auto height kan in een div class en div id. Het is van belang om een minimum height neer te zetten om de minimale hoogte aan te geven als er weinig tekst of content in staat.

De code voor een auto heigt is:

#div_name
{
height: auto;
min-height: 200px;
}

Tot de volgende blog!

Beste lezers,

Op een gegeven moment ben ik overgestapt naar divs en CSS. Ik stuitte toen op div id’s en div classes, alleen ik had geen idee wat het verschil was tussen deze 2 divs.

Het verschil is dat een class meerdere keren gebruikt kan worden en een div id maar 1 keer. Een class is dus over rulend aan een div id.

Voorbeeld div class in het CSS:

.div_name
{
CSS styles
}

Voorbeeld div id in het CSS:

#div_name
{
CSS styles
}

Een kleine blog maar je moet het maar net weten;)

Richard

Beste lezers,

Om mijn blog helemaal werkend te krijgen heb ik zelfs nog wat tricks moeten opzoeken. Ik kreeg het namelijk niet voor mekaar om de content div mee te laten lopen wanneer de text div langer werd dan de content div.

Dit ziet er natuurlijk niet uit dus ik ben op zoek gegaan naar een oplossing en kwam het volgende tegen wat ik graag wil delen:

overflow:hidden;

Dit zorgt ervoor dat er een overflow voorkomen wordt en trekt dus de content mee. Normaal is een overflow op visible ingesteld, dan wordt hij dus niet mee genomen. Wanneer het op scroll staat dan word het niet weergegeven maar krijg je wel een scrollbar om eventueel verder te gaan.

Dit wou ik eventjes delen!

Groetjes Richard

Beste lezers,

Elke keer als je een website gaat maken, maak je als eerste een layout. De layout is een prototype van de website die meestal maakt met een grafisch programma zoals Adobe Photoshop. De extensie van zo’n layout is .PSD.

Natuurlijk wil je dat het niet bij een ontwerp blijft maar dat de website op het internet komt, daarom ga je de PSD omzetten naar HTML/CSS. Dit doe je door alle benodige afbeeldingen uit je PSD te knippen en op te slaan in een aparte map waar je al je afbeeldingen opslaat voor je website. Hierdoor heb je alles bij elkaar en houdt je overzicht. Wanneer dit gebeurt is maak je een index.html en een Stylesheet.css.

In de index.html komen alle links naar de opmaak en de teksten. In de Stylesheet.css komt alle opmaak te staan. Om je index.html aan je CSS page te koppelen kan je de volgende code gebruiken:

<link href=”Stylesheet.css” rel=”stylesheet” type=”text/css” /></code>

Om het slicen echt onder de knie te krijgen is het verstandig om tutorials te volgen en te oefenen met websites maken! Hieronder staan enkele links om het slicen te leren.

http://www.practicalecommerce.com/articles/504-Video-Tutorial-CSS-Design-Part-One

http://www.practicalecommerce.com/articles/505-Video-Tutorial-CSS-Design-Part-Two

Hier heb ik het ook ondermeer geleerd. Kneepjes en handigheden leer je vanzelf kennen door fora door te spitten als je ergens op vast loopt.

Dit was mijn eerste blog, hopelijk tot de volgende keer!