login  Naam:   Wachtwoord: 
Registreer je!
 Forum

CSS div - nette code?

Offline Boris - 24/04/2006 22:24 (laatste wijziging 24/04/2006 22:28)
Avatar van BorisNieuw lid Dag, ik ben bezig om een pagina te maken met divjes. Ik heb 3 (update 4) vragen:
1. Ik loop tegen het 'probleem' aan dat het meeste wel werkt maar dat ik niet zeker weet of de gebruikte code, 'netjes' is. Ik wil een header met daaronder 3 kolommen.

2. De height van 100% werkt niet bij de linker en rechter kant. Deze werkt wel als ik position: relative; weg haal bij de container div maar dan is de rest van m'n opmaakt weer verprutst.

3. Ik gebruik 4 div's binnen de container div. Is het beter om voor de 3 die naast elkaar staan weer een aparte container div te maken?

4. Ahhhh, blijkt alleen in ff te werken. In IE is de gehele opmaak totaal overhoop. Help

CSS
php code - Bekijk de code zonder highlighting - Klap code in 
  1. body {
  2. 	margin:0;
  3. 	padding:0;
  4. 	}
  5.  
  6. #container {
  7. 	width:700px;
  8. 	margin-top: 0;
  9. 	margin-right: auto;
  10. 	margin-bottom: 0;
  11. 	margin-left: auto;
  12. 	position: relative;
  13. 	}
  14.  
  15. #top {
  16. 	height: 100px;
  17. }
  18.  
  19. #links {
  20. 	width: 150px;
  21. 	float: left; 
  22. 	height: 100%;
  23. 	position: absolute;
  24. 	margin-top: 0px;
  25. 	padding: 0px;
  26. 	top: 100px;
  27. }
  28.  
  29. #midden {
  30. 	width: 400px;
  31. 	float: left; 
  32. 	margin-left: 150px;
  33. 	margin-right: 150px;
  34. }
  35.  
  36. #rechts {
  37. 	width: 150px;
  38. 	float: left; 
  39. 	height: 100%;
  40. 	position: absolute;
  41. 	margin-top: 0px;
  42. 	padding: 0px;
  43. 	right: 0px;
  44. }


HTML
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="container">
  2. 	<div id="top">top</div>
  3. 	  <div id="links">links</div>
  4. 	  <div id="midden">midden</div>
  5. 	  <div id="rechts">rechts</div>
  6. </div>


Bij voorbaad dank allen.
:D

4 antwoorden

Gesponsorde links
Offline Metalhead - 25/04/2006 09:30
Avatar van Metalhead HTML gevorderde Ik heb ff geen tijd om te kijken wat het probleem is, maar in deze tutorial http://www.site...&id=90 staat een voorbeeld van hetgeen jij probeert te verkrijgen 
Offline Boris - 25/04/2006 21:24 (laatste wijziging 25/04/2006 21:25)
Avatar van Boris Nieuw lid Bijna, maar niet helemaal. De tutorial gaat over OF een pagina met een header en 2 kolommen, OF een pagina met 3 kolommen. Dus niet over beide. Gaarne een reactie, vooral de ontdekking dat IE de pagina helemaal overhoop gooit zet me weer een stuk terug.
Offline RelatedHack - 25/04/2006 22:55
Avatar van RelatedHack Onbekend Is je pagina W3C validated ?
Meestal als je pagina niet zo gevalideerd is krijg je het fenomeen zoals jij zegt ... werkt wel in FF en niet in IE ( of IE gooit deze overhoop )
Als deze wel gevalideerd is , is het in 99% van alle gevallen dat zowel IE als FF de pagina hetzelfde weergeven...

Over die div'jes moet ik even uitzoeken...
Zal je later wel even wat laten weten...
Offline Boris - 29/04/2006 17:09 (laatste wijziging 01/05/2006 16:04)
Avatar van Boris Nieuw lid @Relatedhack
Weet ja al wat meer?

Ik heb al heeeeel veel sites bekeken en ik kan OF ccs styles vinden met een header en (maar) 2 kolommen welke op vaste grootte in het midden zijn gecentreerd, OF een css style met een header en 3 kolommen maar niet op vaste grootte (maw uitlijnen over de breedte van het scherm). Zo moeilijk moet het toch niet zijn om 3 kolommen in het midden op een vaste breedte vast te zetten....
Hulp is van harte welkom.
Bvd 

Laat maar, heb het al
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.189s