Design omzetten naar CSS

[robkorv]

Beste lezers,

Onlangs ben ik in de wondere wereld van XHTML en CSS gestapt. Ben blij dat er steeds meer gestandaardiseerd wordt maar ik blijf het moeilijk vinden om de standaard te laten doen wat ik wil.

Ik ben bezig om dit design http://www.pcmw.eu/home.gif om te zetten naar XHTML.

Wat ik al heb is hier -> http://www.pcmw.eu/index.php

In internet explorer 6 & 7 ziet het er goed uit, maar in firefox totaal niet. Ik ga er van uit dat firefox een betere CSS implementatie heeft dan ie dus ik denk dat mijn code niet klopt.

Hoe krijg ik die 2 blokken op de goede plek in mijn container en dat het er ook nog zo uit ziet als mijn design.

[Verwijderd]

Maak je body-background blauw

edit
En als dat wit er omheen moet blijven, zorg ervoor dat je container de juiste hoogte krijgt. Ik kan uit je afb niet opmaken of die 100% hoog moet zijn.

[ Voor 70% gewijzigd door Verwijderd op 07-01-2008 13:22 ]

[TERW_DAN]

Mijn tip, gooi zoveel mogelijk paddings en margins eruit en gebruik position en top/bottom left/right voor het positioneren. Er zijn vast meerdere manieren, maar de elementen op deze manier positioneren vind ik het fijnste werken (zodat het er in alle browsers hetzelfde uitziet).

[Xcalibur]

Terw_Dan schreef op maandag 07 januari 2008 @ 13:22:
Mijn tip, gooi zoveel mogelijk paddings en margins eruit en gebruik position en top/bottom left/right voor het positioneren. Er zijn vast meerdere manieren, maar de elementen op deze manier positioneren vind ik het fijnste werken (zodat het er in alle browsers hetzelfde uitziet).

daar kan ik me dan juist weer helemaal niet in vinden, omdat je daarmee de hele flow van je pagina aan gort helpt... je zit eigenlijk alleen maar uitzonderingen te maken. Bovendien zit je ook redelijk vast aan bepaalde afmetingen, zodat een vlak bovenin niet hoger mag worden

[TERW_DAN]

Xcalibur schreef op maandag 07 januari 2008 @ 13:29:
[...]


daar kan ik me dan juist weer helemaal niet in vinden, omdat je daarmee de hele flow van je pagina aan gort helpt... je zit eigenlijk alleen maar uitzonderingen te maken. Bovendien zit je ook redelijk vast aan bepaalde afmetingen, zodat een vlak bovenin niet hoger mag worden

Hoezo, ik kan het geheel toch relatief positioneren zou ik dat willen. Dan maken afmetingen niet zo veel meer uit. Daarbij zie ik niet hoe je de flow van je pages hiermee aan gort zou helpen.

[robkorv]

Verwijderd schreef op maandag 07 januari 2008 @ 13:21:
Maak je body-background blauw

edit
En als dat wit er omheen moet blijven, zorg ervoor dat je container de juiste hoogte krijgt. Ik kan uit je afb niet opmaken of die 100% hoog moet zijn.

Alleen de container moet blauw zijn. Een blauwe strook in het midden van de viewport waar de rest van de website in zit. Hij moet dus 100% hoog zijn.

Als ik voor de container height: 100% opgeef dan gebeurt er niets.

[imp4ct]

Het gebruik van je tags is volledig verkeerd om te beginnen.

Je menu steek je best in een <ul><li> lijstje, vermits het eigenlijk een lijst van links is die je wilt afdrukken, hier dan wel horizontaal.

Ook die <p> tag bij "snel een domein opzoeken" is helemaal naast de kwestie. Hier kan je beter gewoon een <span> gebruiken.

Een juist gebruik van de HTML-tags is aangeraden, wanneer je dit van nature aanleert levert het alleen maar voordelen op. Daarna een juist gebruik van CSS en je ben vertrokken.

[robkorv]

Terw_Dan schreef op maandag 07 januari 2008 @ 13:22:
Mijn tip, gooi zoveel mogelijk paddings en margins eruit en gebruik position en top/bottom left/right voor het positioneren. Er zijn vast meerdere manieren, maar de elementen op deze manier positioneren vind ik het fijnste werken (zodat het er in alle browsers hetzelfde uitziet).

Heb je een voorbeeld hiervan? Ik lees in de specificaties dat die waarden alleen gelden als de positioning niet static is. http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme

Ik heb het even met fixed geprobeerd maar dit zorgt er ook voor dat er geen normal flow meer. Denk dat dit het probleem is waar Xcalibur het over heeft.

Ik zou graag een voorbeeld willen zien waar de manier van jou is gebruikt.

[robkorv]

imp4ct schreef op maandag 07 januari 2008 @ 14:03:
Het gebruik van je tags is volledig verkeerd om te beginnen.

Ik vind dat ik al wat redelijk dingen goed heb. Dus volledig verkeerd is het zeker niet.

Je menu steek je best in een <ul><li> lijstje, vermits het eigenlijk een lijst van links is die je wilt afdrukken, hier dan wel horizontaal.

Gedaan kon dit ook bevestigd zien in de specificaties. http://www.w3.org/TR/html401/struct/lists.html#edef-MENU
Ik krijg hem alleen nu niet meer gecentreerd als ik wordspacing: 5 aan het staan in #menu. Hij springt dan naar rechts.

Ook die <p> tag bij "snel een domein opzoeken" is helemaal naast de kwestie. Hier kan je beter gewoon een <span> gebruiken.

Waarom zou je dit doen? Een span mag niet van de w3c validator.

Een juist gebruik van de HTML-tags is aangeraden, wanneer je dit van nature aanleert levert het alleen maar voordelen op. Daarna een juist gebruik van CSS en je ben vertrokken.

Akkoord, maar zoiets gaat niet 1, 2, 3.

[robkorv]

Zo het was even flink stoeien maar ik heb het voor elkaar. Met behulp van firebug kon ik precies zien wat er nou mis wat. Geweldige addon voor firefox. Iedereen bedankt voor de reacties. Echt tof dat het gelukt is.

[BtM909]

En probeer voortaan even meer zelf voordat je direct naar GoT komt