anoniem Geplaatst: 5 augustus 2003 Delen Geplaatst: 5 augustus 2003 Hallo, Ik ben net begonnen met css, dus weet er nog niet zoveel vanaf. Wat ik wil zijn 3 vakken met een blauwe achtergrond en tekst erin. 1 tje boven in het scherm over de gehele breedte 1 tje daaronder die links evenveel uitgelijnd staat als die erboven en daarnaast nog eentje die rechts evenveel uitgelijnd staat als erboven. Op zich lukt het wel aardig. Van de bovenste heb ik een margin left, right en top van 10px. Die links onder moet dat dus ook hebben dacht ik anders staat hij er niet recht onder. Maar wat blijkt nu als ik hier een margin left van 10px geeft staat hij verder naar rechts! Geef ik echter een margin van 5px dan staat hij er wel recht onder. Hoe zit dit nu?? de 10px van de padding die ik gebruik is wel overal evengroot. Ik snap er niets meer van. Waarom schuift hij bij de onderste met evenveel margin meer op? Kan iemand mij dat uitleggen? hieronder staat de code die in mijn css file staat. Nu staat het dus wel recht onder elkaar, en als ik margin overal 10 maak niet. Ik had juist gedacht dat het andersom zou zijn! Groeten, Wouter [code:1:fa5e31b708].BOVEN { background-color : Navy; color : White; margin-bottom : 10px; margin-right : 10px; margin-top : 10px; margin-left : 10px; padding-bottom : 10px; padding-left : 10px; padding-right : 10px; padding-top : 10px; } .HOOFD { float : right; background-color : Navy; color : Black; margin-left : 5px; margin-right : 5px; margin-bottom : 5px; margin-top : 5px; padding-bottom : 10px; padding-left : 10px; padding-right : 10px; padding-top : 10px; } .LINKS { float : left; background-color : Navy; color : White; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; padding-top : 10px; font : x-large; margin-left : 5px; margin-right : 5px; margin-bottom : 5px; margin-top : 5px; }[/code:1:fa5e31b708] Quote Link naar reactie
anoniem Geplaatst: 6 augustus 2003 Auteur Delen Geplaatst: 6 augustus 2003 Komt door een IE bug :evil: , in Mozilla klopt alles wel namelijk. Dat heeft met float te maken. Heel erg irritant. Als je bepaalde breedtes hebt voor je divs kan ik je wel helpen anders wordt het nogal lastig. Ik heb je code iig even voor je verbeterd:[code:1:0f6ca86d12]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>blaat</title> <style> html,body{ margin:0; } #boven{ background:Navy; color:#fff; margin:10px; padding:10px; } #rechts{ float:right; background:Navy; color:#000; margin:10px; padding:10px; } #links{ float:left; background:Navy; color:#fff; margin:10px; padding:10px; font:x-large; } </style> </head> <body> <div id="boven">df</div> <div id="rechts">fd</div> <div id="links">df</div> </body> </html>[/code:1:0f6ca86d12] Quote Link naar reactie
anoniem Geplaatst: 6 augustus 2003 Auteur Delen Geplaatst: 6 augustus 2003 Inderdaad gek, zoals IE het doet. Als je de margins van #rechts en #links op 5px zet, dan ziet het er wel goed uit in IE. Om andere browsers deze stijldeclaraties niet te laten zien, kun je twee manieren gebruiken: //margin:5px; of: -margin:5px; Voor zover ik weet haalt alleen IE hier nog een stijldeclaratie uit. Quote Link naar reactie
anoniem Geplaatst: 6 augustus 2003 Auteur Delen Geplaatst: 6 augustus 2003 Wat beter zou zijn is geldig CSS plaatsen om het probleem op te lossen. Door een andere bug in IE werkt het volgende ook, terwijl er eigenlijk onzin staat (maar wel geldig is):[code:1:3dbf1a36e1]* #hoofd, * #links{ margin: 5px; }[/code:1:3dbf1a36e1]Als je dit bij de code van Termin8or plaatst dan zou het goed moeten werken in alle browsers. - Bas Quote Link naar reactie
anoniem Geplaatst: 6 augustus 2003 Auteur Delen Geplaatst: 6 augustus 2003 Moet dat niet zijn:[code:1:175574ee43]* html #hoofd, * html #links{ margin:5px; }[/code:1:175574ee43];) Anne Quote Link naar reactie
anoniem Geplaatst: 6 augustus 2003 Auteur Delen Geplaatst: 6 augustus 2003 Dat kan ook. Ik wist niet dat de css-validator over zoiets struikelt: -margin:5px; Het - teken is bedoelt voor vendor-specific extensions (zoals Mozilla er vele kent) en zou geen foutmelding moeten geven voor zover ik weet. Het valideren van css vind ik eigenlijk ook niet zo van belang, aangezien browsers toch worden geacht ongeldige declaraties te negeren. Quote Link naar reactie
anoniem Geplaatst: 6 augustus 2003 Auteur Delen Geplaatst: 6 augustus 2003 [quote:a40d2055a0="hulpje"]Het - teken is bedoelt voor vendor-specific extensions (zoals Mozilla er vele kent) en zou geen foutmelding moeten geven voor zover ik weet.[/quote:a40d2055a0]Voor alle duidelijkheid: vendor-specific extensions zijn [b:a40d2055a0]geen[/b:a40d2055a0] geldig CSS en zullen dan ook gewoon door de validator als foutief bestempeld worden. Wat betreft het valideren van CSS... Ik ben er nog steeds niet over uit. Enerzijds is het belangrijk je aan de standaarden te houden, anderzijds kun je er leuke dingen mee terwijl andere browsers er niet per definitie last van hoeven te hebben. Toch wil ik voorlopig CSS laten valideren. Ben er gewoon nog niet helemaal uit... @termin8or: Weet je zeker dat jouw oplossing de juiste is? De bug in IE houdt namelijk in dat IE de eerste * niet herkent, dus feitelijk staat er bij mij dan alleen de ID. Of doen we het gewoon allebei fout? Volgens mij is de ID namelijk geen child van html maar van body. - Bas Quote Link naar reactie
anoniem Geplaatst: 6 augustus 2003 Auteur Delen Geplaatst: 6 augustus 2003 Het is ook geen child-selector ;) maar een descendent selector. Die kan meerdere dingen "overslaan". De hack is juist dat IE denkt dat er wel dingen voor het element html staan, terwijl dat dus niet klopt (<html> is gelijk aan :root). De hack: http://centricle.com/ref/css/filters/tests/star_html/ Anne Quote Link naar reactie
anoniem Geplaatst: 6 augustus 2003 Auteur Delen Geplaatst: 6 augustus 2003 Bedankt allemaal voor de antwoorden! Ben in iedergeval een hoop wijzer en ga het eens proberen. Jullie horen als het gelukt is! Groeten, Wouter Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen