Gigadesign, XHTML-CSS website maken

Zonder dat een browser crasht?

Als je ooit een theme maakt voor Drupal, zal het je ongetwijfelt opvallen dat Drupal een heel deel alsook lange classes toevoegt aan elementen, in het begin was dit zeer frustrerend, maar na verloop van tijd heeft het zo zijn voordelen.

Toen heb ik eens iemand horen beweren (er werd gezegd dat dit de beste HTML/CSS’er van België is) dat IE6 problemen heeft als er meer als 5 classes aan een element hangen.

Onlogisch, maar waar

Tot mijn grote schaamte vandaag moeten ondervinden dat text-align: center ook werkt voor inline-block elementen zoals afbeeldingen!!!
Dus stel je hebt een <div> als container, de afbeeldingen die erin voorkomen worden dynamisch geladen, en via JavaScript heb je dan nog eens een scroll/replace functie.

Inheritance

Inheritance is het overerven van eigenschappen (CSS) van het parent element naar het child element

Dit is een goede zaak, je hoeft niet telkens opnieuw eigenschappen te gaan bepalen, de overerving doet dit voor jouw, bijvoorbeeld:

Een Internet explorer 6 probleem

Toevallig gisteren een IE6 CSS probleem tegengekomen op een of ander forum, en die moest ik dus oplossen, het leek mij te simpel om het niet te wagen.
En inderdaad, het was vrij eenvoudig, maar ik zou eens willen weten hoe jullie dit probleem aanpakken/oplossen.

Voorwaarden

• Geen hack toegelaten (onvalide css)
• Doctype moet HTML strict 1.0 zijn
• Je hebt tot 17 december 22.00 uur
• Geen HTML elementen toevoegen
• Geen HTML elementen weg halen

Geef uitleg aan je links

Om een link extra uitleg te geven bestaat er het title="uitleg" attribuut, maar het zou eigenlijk geen/nooit kwaad kunnen de beschrijving van de link extra in de verf te zetten. Tegelijkertijd is deze tutorial een variatie en een uitbreiding op het vorige artikel: Hoe een block hover maken in een lijst van links.

Meer aandacht voor links

Je ziet het op zoveel sites, maar hoe wordt het nu juist gedaan, het effect dat als je over een lijst met links gaat en dan de gehele achtergrond van de block een :hover effect krijgt. Meestal begin je er niet aan omdat je weet dat Internet Explorer 6 geen :hover over andere elementen toelaat dan een a (link).
Voor de ongeduldigen: hier kan je reeds een voorbeeld zien, om te weten hoe het zou kunnen zal je toch de rest ook moeten lezen.

Website kleuren combinatie

Hier weer een poging jullie enkele kleuren aan te smeren, in een goed design komen deze zeker tot hun recht.

Vandaag blauw / donker-blauw / beige

Gigadesign kleurt je website

Kleurencombinaties zijn niet zo vanzelfsprekend zomaar uit je fantasie te toveren, wat jij mooi vind kan een ander afstotend vinden en omgekeerd natuurlijk.
Door de grote hoeveelheid designs te hebben gezien/gemaakt en verwerkt heb ik toch een reeks mooie kleurencombinaties gezien, en deze wil ik met jullie delen.

Positioneren 101

Een HTML element relative of absolute positioneren is naast float een manier om je elementen te positioneren. Maar wat is nu juist het verschil tussen de 2 mogelijkheden die je hebt bij position?

Zoals al eerder gezegd, je kan elke HTML element positioneren, of dit nu een img, div of table is.

Zo simpel als iets

Maar je moet er maar op komen natuurlijk. Ik heb dit al eens moeten realizeren voor een klant, maar had er toen niet zoveel aandacht aan geschonken.
Eens je het gezien hebt zal je denken “ahjaa, waarom ben ik daar zelf niet op gekomen“.