Hallo,
Laatst heb ik hier een review geplaatst, en nu heb ik dat layout gemaakt in xHTML en css. Zie hier. Ik heb alleen nog een probleem:
Bovenaan, net onder de header heb ik een groot vlak (dat stuk met ronde hoeken). Ik heb dat als achtergrond gedaan bij de #wrapper. Het probleem is dat ik daar 2 kolommen in wil hebben, één met "Populairste blog van deze week" en één met "Inloggen". Deze kolommen willen niet erg goed op hun plaats gaan staan ;). Ik heb het nu op een stomme manier gedaan, en dat werkt in Firefox, niet in IE. Met stom bedoel ik dat ik probeer om niet met Paddings en Margins te werken, omdat dat de breedte en de hoogte van de hele box veranderd.
Ik wil het ongeveer zo hebben als op dit plaatje: http://zjapske.no-ip.org/2.0.jpg.
Het ziet er naar uit dat je inlog-stukje te breed is (volgens IE6). Daar moet je dus even een hack op los laten (voice family, gok ik) zodat de margins/paddings goed gerenderd worden.
Ik heb die kolom rechts gewoon wat korter gemaakt... En nu zie ik pas wat verkeerd is in IE6 (niet ie7 volgens mij). Dat achtergrondplaatje moet in IE wat opzij. Ik zal inderdaad wel even wat doen met voice family, maar euh, pakt ie7 voice-family?
[edit]
Ik heb nu geprobeerd om het plaatje wat op te schuiven op deze manier:
#wrapper {
text-align: left;
margin: 0 auto;
width: 800px;
background: url(achtergrond.gif) no-repeat 10px 16px;
voice-family: "\"}\"";
voice-family: inherit;
background: url(achtergrond.gif) no-repeat left 16px;
}
Op die manier zou het achtergrondplaatje in IE6 10px opschuiven naar rechts en in FF op dezelfde plek blijven... Dat werkt niet.
Anders doe je toch een conditional comment voor IE6 only. Dan zet je daarin het plaatje wat naar rechts toe.
Als je het op een andere manier wilt doen, dan moet je goed kijken naar je margins en paddings, want IE wil daar nog wel eens raar mee doen.
@Jordy,
Ik heb expres geen paddings en margins gebruikt. En voice-family is eigenlijk zoiets als voor < IE6 alleen. En aangezien je dan met dat stukje CSS het plaatje niet kan verschuiven...
Nog één laatste keer ;)
Weet iemand hoe ik het plaatje een pixel of 10 naar rechts schuif in IE6?
In de HTML img-tag kun je ook gebruik maken van hspace en vspace. Hspace: horizontal-space, vspace: vertical-space. vspace zou bij jou dus 10 moeten zijn ;).
@ Djemo: dan heb je opmaak in je XHTML en dat wil je niet. Dit soort dingen kan allemaal met CSS. Ik zit nu op mijn werk op Vista, dus IE6 lukt ff niet. Vanavond als ik thuis ben zal ik eens kijken.
