Gigadesign, XHTML-CSS website maken

Volgende week maandag 23/11 ben ik niet in het land, je kan mij hier vinden

Kijk uw projecten eens na!

Onlangs pas heb ik deze bug ontdekt dat als je een achtergrond-afbeelding zet via CSS op een input field type text, dat in IE6 & IE7 (inderdaad, bug zit er nog steeds in) de achtergrond-afbeelding wegschuift als er meer data in het veld invoerd wordt als dat het visueel kan bevatten. Moeilijke uitleg, maar zal ik je even tonen:

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

Als het soms niet anders kan.

Soms moet je een minimum hoogte hebben voor een (block)element, daarvoor dient min-height, en werkt in alle browsers. Ahja, behalve in Internet Explorer 6, daarom ook deze tutorial. Internet Explorer 6 leest de bepaling min-height wel, maar verandert het naar height.

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.

Afbeeldingen veranderen met mouseover

Zou het niet handig zijn als je iemand zijn/haar artikel zou lezen waarbij misschien verschillende fotos aan te pas zouden komen, dat je in plaats van op elke link van de foto zou moeten klikken om de foto te zien, je direct de foto zou kunnen zien op een vaste plaats als je over de link “hovert”?

Dit idee had ik reeds lange tijd, en de hint hiervoor kwam van deze site, maar de CSS is nogal uitgebreid ( 73 regels code ), mijn doel was het met minder CSS klaar te spelen ( 39 regels code ), wat mij dus ook gelukt is.

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.

Eén regel, één wet en maar één manier

Ik heb eens ooit de shorthand methode aangeprezen en uitgelegd, maar ik heb er nooit bij stilgestaan dat er bijvoorbeeld bij de font shorthand methode één regel is die je moet volgen.

Float = zweven

Float is na absoluut te positioneren de enige eigenschap van CSS die je toelaat HTML elementen te plaatsen daar waar jij ze graag zou willen hebben. Hoewel je je aan enkele regels moet houden wens je frustratieloos te positioneren.