30juli

Descendant selectors in CSS en Dreamweaver

Zodra –beginnende – webdesigners wat meer kaas hebben gegeten van het werken met lagen en CSS, wordt hun nieuwsgierigheid gewekt. Ook in mijn boeken over webdesign en Dreamweaver probeer ik de lezer te leren om de inhoud/structuur en opmaak van webpagina's zoveel mogelijk te scheiden.

In de trainingen die ik geef krijg ik dan ook regelmatig een vraag zoals ook Roel Bouwhuis (www.roelbouwhuis.nl) afgelopen week via e-mail stelde:

 

"Zoals u op mijn site kunt zien, maak ik gebruik van donkere en lichte vlakken (div's) waarbij het lettertype omgedraaid donker of licht is. Het probleem is dat de kleur van de hyperlink in beide vakken hetzelfde is (in mijn geval wit) waardoor de hyperlinks in het lichte vlak heel moeilijk te zien zijn. Mijn vraag is: hoe kan ik de opmaak van hyperlinks per division opmaken?"

Omdat dit een standaardtechniek is waarvan ik vind dat elke webdesigner deze zou moeten beheersen heb ik hier even een video over samengesteld (mentale notitie aan mezelf: neem deze techniek direct op in het boek over Dreamweaver CS4!). De video laat zien hoe u zonder wijzigingen in de HTML-code hyperlinks en andere elementen op de pagina een afzonderlijke opmaak kunt geven. Als hulpmiddel wordt Dreamweaver gebruikt, maar uiteraard is dit een algemeen geldige techniek (06:59 min.)

 

Video over het werken met descendant selectors in CSS en Dreamweaver

Vragen of opmerkingen? Laat het weten via een commentaar onder dit bericht. Een e-mail sturen mag natuurlijk ook, maar door uw reactie rechtstreeks onder dit bericht te plaatsen kunnen andere lezers er ook hun voordeel mee doen.

Bedankt voor het kijken/lezen,

Peter Kassenaar
-- 30 juli 2008.

Reacties

07-10-2008 03:30 #

Beste Peter Kassenaar,
De video's op jouw blog helpen mij bijzonder tijdens mijn studie in CS3. Ik heb een korte vraag: als ik een interne CSS-stijl aanmaak dan komt deze te staan in de HEADsectie binnen commentaarhaken (<!-- en -->) Hoe kan dit? Het is toch geen commentaar maar een actie. Als ik overigens de commentaarhaken verwijder dan blijft alles gewoon werken. Verwarrend. Alvast bedankt voor je reactie,
m.v.g. Henk van Vliet

Henk van Vliet Netherlands

10-10-2008 08:12 #

@Henk,

De commentaarhaken zijn een 'overblijfsel'  uit vroeger tijden. Toen waren er ook nog browsers die geen CSS ondersteunden. Om er voor te zorgen dat in dat geval niet letterlijk de CSS-code op het scherm kwam te staan, werd afgesproken de CSS-code in te sluiten in <! - - en - ->. De CSS-stijlen werden door die browsers dus genegeerd.

Browsers die *wel* CSS herkennen, negereen juist de commentaartekens en voeren de CSS netjes uit.

Iedereen blij.

Daarom maakt het ook geen verschil of je ze weghaalt of laat staan. Elke moderne browser snapt nu inmiddels CSS en praktisch gezien kunnen de commentaartekens vervallen. Om toch compatible te zijn met die 0,00x% Netscape 4-gebruikers zet Dreamweaver ze er echter toch nog in (ook nog in het nieuwe Dreamweaver CS4).

Peter

Reacties zijn gesloten