[CSS] voor dummies.

Hij is IE-only, jammer.

Als je een witte border maakt op een witte achtergrond dan zie je 'm niet. Lijk me logisch.

Ik zou 'm eerst crossbrowser maken en me daarna pas zorgen maken over een mouseover effect van een knopje.

Die popups voor kleur en lettertype werken wel, maar het lijkt me mooier (en mss nog makkelijker te maken) als je die extra opties als dropdown bij 't knopje toont.

Nou ok dan

Er zitten nog wat schoonheidsfoutjes in. De positioning in IE is niet helemaal goed. En er zou maar 1 panel tegelijk open moeten zijn.
Maar dat is aan jou

Denk dat je een float right op de button moet doen, of een float:left op de textfield. Moet je niet vergeten een clear:both div te adden.

volgens mij komt je zo verder in de buurt:


doordat je de css-styles duidelijk scheidt van de HTML-code ben je veel flexibeler, voor je HTML-code is het dan essentieel dat deze een goede beschrijving is van de inhoud, in dit geval een form...

Het gebruik van een Unordered List is een eigenschap die veel HTML-bouwers die veel met CSS doen snel overnemen, en welke ook enigszins terughoudend moet worden behandeld (pas op dat je het gebruik van UL's niet gaat overdoen, ik heb al mensen gezien die data-strukturen die gewoon tabulaire data waren, ipv in eennormale table, toch in lelijk genestte UL-LI's neergezet werden uit css-gewoonte) ...

In deze structuur zie je ook een zeker zwaktepunt, namelijk dat de button direkt in dezelfde LI als het input-veld staat, wat voor gebruikers verwarrend kan zijn, omdat het de indruk wekt dat die submit enkel geldig is voor dat specifieke veld (als een 'file-upload-veld') .. hier ligt die 'fout' echter al aan het design zelf, en kan je in de HTMLstruktuur daar weinig aan doen.

quote:

Op donderdag 3 februari 2005 14:06 schreef RM-rf het volgende:
volgens mij komt je zo verder in de buurt:
[ code verwijderd ]

RM-rf, je moet me hier niet op vastpinnen, maar is CSS niet hoofdletter gevoelig, dwz dat FORM#a alleen matched met <FORM id="a"> en niet met <form id="a">?

Dit vroeg ik mij af, omdat ik jou (als enige eigenlijk) altijd in css de tags in uppercase zie schrijven.

quote:

<ul><li>....</li></ul>

Is een fieldset in deze zaak niet sematisch correcter?

-r-

quote:

Op donderdag 3 februari 2005 14:36 schreef Roönaän het volgende:

Dit vroeg ik mij af, omdat ik jou (als enige eigenlijk) altijd in css de tags in uppercase zie schrijven.

css is niet hoofdlettergevoelig, ik heb zelf de gewoonte om alle tag-selectoren altijd in hoofdletters te zetten, maar dat is gewoon een leesbaarheid-issue, zo kun je makkelijk de tag-selectoren uit de code halen...

In XML is de element-selector echter wel case-sensitive. (wat in theorie het ook bij XHTML zou zijn, echter dat komst niet echt ter sprake zolang XHTML gewoon verzonden wordt met text/html mimetype)

Tag-names zijn niet case sensitive, classnames wel!
Testje

-edit-

quote:

Op maandag 7 februari 2005 01:58 schreef Chandler het volgende:
why -edit-?

Ze leken er goed uit te zien, tot ik de rollover probeerde.

Ik zit vast .

http://nitespeed.servebeer.com/ns/

In FireFox werkt het als een tiet, snel geladen en 100% valide code.
Open je het in IE dan zijn de borders anders, en is mijn menu divje niet meer zo hoog als de content hoog is.

Ik heb express de menu div inherent gemaakt aan de content div, zodat 100% height er voor zou zorgen dat hij de hoogte van mijn content div zou overnemen...

niet dus !

Om te zorgen dat IE in strict mode springt moet de doctype op de eerste regel staan. Dit betekend dus dat je je <?xml definitie weg moet halen, wil je dat het in ie er netjes uitziet. Om dit te compenseren zou je een text/xml header kunnen produceren aan de serverkant natuurlijk.

quote:

Op maandag 7 februari 2005 21:46 schreef Roönaän het volgende:
Om te zorgen dat IE in strict mode springt moet de doctype op de eerste regel staan. Dit betekend dus dat je je <?xml definitie weg moet halen, wil je dat het in ie er netjes uitziet. Om dit te compenseren zou je een text/xml header kunnen produceren aan de serverkant natuurlijk.

Goed, gedaan wat je hebt gezegd en de borders zijn nu inderdaad hetzelfde waardoor de IMG perfect blijft in IE en FF. Helaas was dit nog geen goede oplossing voor mijn menu div.

Update:

Een hoop geklooi later weet ik nog niet hoe ik dit het beste kan oplossen, de vraag blijft dus:
"Hoe zorg ik ervoor dat mijn menu div even hoog is als mijn content div?"

[ Bericht 13% gewijzigd door NiteSpeed op 07-02-2005 23:53:44 ]