CSS tips
Untitled Document
CSS kolommen
We weten allemaal hoe lastig het is om designs in de moderne browsers hetzelfde te krijgen. Onderstaande tips vond mijn collega vandaag op internet. Hierbij de vertaling.
Dubbele margins in IE 6
Internet Explorer 6 heeft eigenschap om de margins ten opzichte van de float te verdubbelen.
Normaal gesproken is dit een duidelijk stukje code. Echter in Internet Explorer zes is de margin 40px;
De oplossing
Je kan dit probleem oplossen door het Block inline te maken:
.sidebar { float: left; display: inline; margin-right: 20px; }
De browsers renderen dit blok gewoon als een block element omdat er een float is meegegeven. Echter wil Internet Explorer 6 deze code wel als inline renderen waardoor het probleem opgelost kan worden.
De content is breder dan het blok zelf
Bekijk de volgende code eens
.columns{ width:500px; } .columns .main{ float:left; width:400px; } .columns .sidebar{ float:right; width:100px; }
... <img src="/images/awesome.gif" /> ...
Dit kan haast niet fout gaan denk je? In bijvoorbeeld Firefox gaat dit goed. Wanneer je echter in Internet Explorer 6 kijkt is de sidebar verdwenen onder main. Een mogelijk probleem zou kunnen worden veroorzaakt door awesome.gif. Deze afbeelding is 510px breed en drukt dus de volgende elementen naar beneden omdat er te weinig ruimte is.
De oplossing
Om dit probleem op te lossen kan je de content dwingen om de inhoud kleiner te maken. Dit doe je door overflow: hidden; aan de sidebar en main div mee te geven.
Slot
Dit is een zeer korte tutorial, Je moet het echter meer zien als een aantal tips voor het designen van een website. Mocht je inhoudelijk vragen hebben over deze tips kan je me bereiken via marten.van.urk@sitemasters.be
|
Stap jij over naar HTML5/CSS3? (S: 29, R: 12)
