7 Belangrijke CSS-lay-outtips

Het moeilijkste aan CSS om goed te krijgen, is de lay-out van uw site. Hier zijn een paar tips die daar precies mee omgaan. Sommige van deze tips zijn niet bepaald nieuw, of rocket science, maar hopelijk kunnen ze iemand ergens een beetje moeite besparen!

Tip 1: Wis de standaardinstellingen voor opvulling en marge voordat u begint te werken.
Verschillende browsers hebben verschillende standaardmarges en opvulgroottes, dus u wilt als het ware met een schone lei beginnen. Gebruik deze opdracht:

*
{
marge: 0;
opvulling: 0;
grens: 0;
}

om alle standaardinstellingen voor marge en opvulling te wissen. Let ook op de rand, die op 0 staat. Houd er rekening mee dat als je dit doet, je ook de vervelende paarse rand rond klikbare afbeeldingen kwijt raakt, hoewel sommige mensen beweren dat de paarse rand noodzakelijk is voor de toegankelijkheid en bruikbaarheid. Maar veel mensen houden niet van de paarse rand rond afbeeldingen, en dit is een manier waarop je er in één keer vanaf kunt komen zonder dat je de instellingen hoeft in te stellen img-rand=0 voor elke afbeelding (wat in ieder geval in strijd is met de strikte opmaakregels).

Tip 2: Om uw lay-out te centreren, gebruikt u een container-div die al uw inhoud bevat
Geef dit als volgt aan:

#container

{
marge: 0 auto;
breedte: xxxpx;
}

Er zijn een paar punten waar u rekening mee moet houden. Verklaar NIET dat de breedte 100% is. Dit verslaat het hele object, omdat je alleen maar de subelementen in de container hoeft te declareren en ze vervolgens te centreren met behulp van marge: 0 automatisch. Dit is ZEER SLECHT omdat het betekent dat u, in plaats van de centrale lay-out één keer te declareren, deze op meerdere plaatsen moet declareren voor elk element in uw container.

Tip 3: Werk van boven naar beneden
Begin letterlijk aan uw CSS-indeling te werken, beginnend bij de bovenste elementen in uw ontwerp, evenals de ‘bovenste’ elementen in uw HTML, zoals de body, en uw hoofdcontainers.

Declareer uw CSS-opdrachten op het hoogst mogelijke niveau en probeer iets slechts één keer te declareren en het overal te laten doorlopen. Overschrijf de commando's op een lager niveau alleen als dit strikt noodzakelijk is. Dit voorkomt een uitgebreid CSS-bestand dat moeilijk te onderhouden en te begrijpen is. Als je dat bijvoorbeeld hebt { marge: 0 automatisch} instellingen op elke subdiv in uw container – u zit in de problemen.

Tip 4: Documenteer wat u doet en gebruik Firebug en de Firefox-browser om fouten op te sporen
Je schrijft je CSS-code niet alleen voor jezelf; op een dag zal een arme dwaas er fouten in moeten maken. Maak talloze opmerkingen in uw CSS-bestand om uit te leggen waarom u de dingen op een specifieke manier doet.

In dit verband kan het zijn dat u de CSS van iemand anders vaker moet repareren dan u denkt (of zelfs die van uzelf). Gebruik de Firebug-add-on voor Firefox om uw CSS te debuggen. Dit is een levensredder omdat het u inzicht geeft in waar uw ontwerp precies kapot kan gaan en waarom.

Het enige probleem hiermee is dat uw ontwerp mogelijk perfect werkt in Firefox, maar niet in IE5, IE6 of IE7. Dit brengt ons bij de volgende tip.

Tip 5: Bepaal voor welke browsers je je CSS gaat bouwen en test vanaf het begin
Sommige puristen staan ​​erop ervoor te zorgen dat uw website voor alle mogelijke browsers werkt, anderen zorgen ervoor dat deze alleen voor de ‘grote’ browsers werkt. Hoe weet je precies welke browsers het meest worden gebruikt? Opnieuw komen W3-scholen te hulp.

Op de volgende pagina kunt u zien welke browsers het populairst zijn: http://www.w3schools.com/browsers/browsers_stats.asp. Op deze pagina kun je zien dat zoiets als IE5 slechts door ongeveer 1.1% van de browsers wordt gebruikt. Het is aan jou of je het de moeite waard vindt om je CSS compatibel te maken met deze browser, of dat je alleen je compatibiliteit met bijvoorbeeld IE6, IE7 en Firefox gaat testen. Wat je ook doet, als je begint met het bouwen van je CSS, begin dan bovenaan en test gaandeweg elke instelling in elke browser. Er is niets erger dan een perfecte website bouwen in Firefox, en er dan direct nadat je een CSS-bestand van 1000 regels hebt gecodeerd, achter komen dat deze in IE6 kapot is. Om vervolgens je code achteraf te debuggen en te repareren is een nachtmerrie.

Tip 6: Hier is een gênante kleine tip voor het repareren van uw CSS in IE6 of IE7
Laten we zeggen dat uw ontwerp perfect werkt in Firefox, maar niet werkt in IE6. U kunt Firebug niet gebruiken om vast te stellen waar het probleem zou kunnen liggen, aangezien het WERKT in Firefox. U heeft niet de luxe om Firebug in IE6 te gebruiken, dus hoe debugt u een IE6- of IE7-stylesheet? Ik heb vaak gemerkt dat het helpt om toe te voegen {rand: 1 px effen rood} or {rand: 1 px effen paars} naar de problematische elementen. Zo kun je vaak zien waarom bepaalde elementen niet in de beschikbare ruimte passen. Het is een gênant tipje, omdat het zo primitief en eenvoudig is, maar het werkt!

Tip 7: Begrijp drijvers
Het zweven van elementen is essentieel om te begrijpen, vooral in de context van het laten werken van uw zwevende elementen in de verschillende browsers!

In principe worden elementen zoals div's naar links of rechts verplaatst (nooit naar boven of naar beneden, alleen zijwaarts). Hier zijn een paar dingen waarmee u rekening moet houden bij zwevende elementen. Voor elk zwevend element moet een expliciete breedte worden opgegeven. Als u zwevende div's gebruikt om een ​​indeling met 3 of 2 kolommen te maken, geeft u de breedte liever op in termen van percentages dan in vaste breedtes. Als u wel percentages gebruikt, zorg er dan voor dat de percentages niet optellen tot 100. % zal dit er vaak voor zorgen dat de meest rechtse kolom onder de rest zakt, wat duidelijk aangeeft dat u iets in de beschikbare ruimte probeert te passen dat er te breed voor is. Gebruik liever percentages die opgeteld iets onder de 100% uitkomen, zoals 25%, 49%, 24% voor een linkerkolom, middenkolom en rechterkolom.

Zwevende elementen kunnen uiterst complex zijn om te begrijpen en het is de moeite waard om wat tijd door te brengen op goede sites die specifieke richtlijnen en tips bieden, zoals de Positie is alles website.

Conclusie
Deze CSS-tips voor de lay-out zullen u hopelijk wat tijd en moeite besparen als u de volgende keer een tabelloos ontwerp via een paneel moet inleveren! Dit was een gastpost geschreven door Christine Anderssen.