login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Div uitlijning

Offline Tuinstoel - 05/05/2006 13:21
Avatar van TuinstoelPHP expert Ik word er nu zo langzamerhand strontziek van. De uitlijning van een website wil dan in de een en dan in de andere browser niet werken. In IE werkt het wel, en in FF zit het er weer nét 1 pixeltje naast.

http://img138.i...gen8pa.jpg

De code die ik gebruik:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. #mainDiv {
  2. 	width: 752px;
  3. 	margin-left: auto;
  4. 	margin-right: auto;
  5. }
  6. #mainHeader {
  7. 	position: relative;
  8. 	width: 742px;
  9. 	height: 58px;
  10. 	border: 1px solid #000000;
  11. 	margin: 0px;
  12. 	background-color: #fbe6d1;
  13. 	background-image: url('../header.jpg');
  14. 	background-position: left top;
  15. 	background-repeat: no-repeat;
  16. 	margin-left: auto;
  17. 	margin-right: auto;
  18. 	}
  19.  
  20. #mainBox {
  21. 	position: relative;
  22. 	margin-left: auto;
  23. 	margin-right: auto;
  24. 	width: 742px;
  25. }
  26.  
  27. #mainMenu {
  28. 	position: relative;
  29. 	float: right;
  30. 	padding: 0px;
  31. 	width: 100px;
  32. 	border: 1px solid #000000;
  33. 	background-color: #fbe6d1;
  34. 	margin-top: 10px;
  35. 	margin-right: 0px;
  36. 	text-align: left;
  37. }
  38.  
  39. #mainContent {
  40. 	background-color: #fbe6d1;
  41. 	background-image: url('oranje/achtergrond.jpg');
  42. 	background-position: bottom left;
  43. 	background-repeat: no-repeat;
  44. 	float: left;
  45. 	position: relative;
  46. 	border: 1px solid #000000;
  47. 	width: 618px;
  48. 	margin-top: 10px;
  49. 	margin-left: 0px;
  50. 	text-align: left;
  51. 	padding: 3px;
  52. }


En dan de html schematisch:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="mainDiv">
  2.   <div id="mainHeader"></div>
  3.  
  4.   <div id="mainBox">
  5.     <div id="mainMenu"></div>
  6.     <div id="mainContent"></div>
  7.   </div>
  8. </div>

Eerst had ik #mainBox er niet bij staan, maar toen ik hem er bij zette kwam ik al veel verder in de buurt.

13 antwoorden

Gesponsorde links
Offline Ultimatum - 05/05/2006 13:27 (laatste wijziging 05/05/2006 13:28)
Avatar van Ultimatum PHP expert volgens mij komt het door je plaatje, want (ik dacht) dat als je image doet de border boven de image komt dus heb je 1px extra en met color kwam de border erop zodat die 1px er niet bij kwam. in die richting zit je probleem denk ik

oplossing , zorg dat je 1px overhoud voor je border 

dit probleem had ik namelijk ook, een plaatje van 100px breed en nog 1 van 700 naast elkaar dat was perfect alleen toen had ik recht van het plaatje van 100px nog een 1px border gezet en gelijk kwam het plaatje rechts onder mijn linker plaatje omdat nu de layout 801px was ipv 800px precies 
Offline Tuinstoel - 05/05/2006 13:31
Avatar van Tuinstoel PHP expert Maar dan is mijn probleem nog niet opgelost. Want nu is het in IE fout en in FF goed . Dat komt dus omdat het 2 pixels breder wordt. Waar komen die 2 pixels in godsnaam vandaan bij FireFox :/
Offline sjak - 05/05/2006 13:34
Avatar van sjak HTML interesse miss doordat ie een minder groot browservenster heeft, recht heeft internet explorer namelijk die scrollbar die lang niet altijd nodig is
:\
Offline Tuinstoel - 05/05/2006 13:35
Avatar van Tuinstoel PHP expert Neen daar past het zich op aan. IE heeft standaard een scrollbalk (bij mij tenminste), maar als ik bij FF wel of geen scrollbalk hebt, het maakt niks uit het wordt alsnog dan precies in het midden geplaatst.
Offline Ultimatum - 05/05/2006 13:36
Avatar van Ultimatum PHP expert lol , als je het plaatje 2 px kleiner maakt is dan wel je probleem opgelost of niet, want kan niet echt uitmaken of je dat al had gedaan 
Offline Tuinstoel - 05/05/2006 13:39
Avatar van Tuinstoel PHP expert Het plaatje zit in de achtergrond, lijkt me sterk als dat invloed heeft. Ik heb gewoon de breedte van #mainHeader aangepast.
Offline Ultimatum - 05/05/2006 13:41
Avatar van Ultimatum PHP expert ja maar er komt toch een border overheen dus ik geef daar de schuld aan 

neem aan dat het probleem is opgelost nu 
Offline Tuinstoel - 05/05/2006 13:44
Avatar van Tuinstoel PHP expert Nee, dat zei ik in een van mijn eerdere posts ook al. Beter lezen, als het in de ene browser is opgelost, is het in de andere nog niet opgelost. Het is nu dus altijd één van de twee die te breed of te smal is. Als IE goed staat op basis van 752 pixels, komt FF 2 pixels te kort. Doe je die 2 pixels er bij, is IE 2 pixels te breed. En dat valt dus niet op te lossen met die header.
Offline sjak - 05/05/2006 13:45
Avatar van sjak HTML interesse je moet het met positionering doen ik weet niet op je dat kent bijv dit:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. style="position:absolute; left: 0; top: 0;"


dan komt ie helemaal linksboven welke browser dan ook op je kan beter werken met dit:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. style="position:absolute; left: 0px; top: 0px;"


dan werk je met pixels zo werkt positioneren al je bijv bij left 5px neerzet staat ie 5 px van de linkerkant zo heb je bij ff en ie hezelfde dat gebruik ik namelijk ook 
Offline Ultimatum - 05/05/2006 13:45 (laatste wijziging 05/05/2006 13:52)
Avatar van Ultimatum PHP expert ik heb het ook niet over die header maar over MainContent als dat niet duidellijk was 
Offline Tuinstoel - 05/05/2006 13:49
Avatar van Tuinstoel PHP expert @Sjak: Als ik relative in absolute verander dan is het bittere noodzaak om de boel wéér te herschrijven. Absolute zou kunnen, maar relative past zich beter aan qua centreren. Ik kan het proberen maar dan moet ik het weer helemaal omgooien en daar had ik nou net even geen zin aan .
Offline sjak - 05/05/2006 13:50
Avatar van sjak HTML interesse tis de enige oplossing die ik weet, maar ik snap dat je niet meteen wil herscripten dat soort dingen heb ik ook altijd:)
Offline CDNC - 30/06/2006 21:53 (laatste wijziging 30/06/2006 21:54)
Avatar van CDNC PHP ver gevorderde [ oops, hoorde in het andere topic hierover... ]
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.377s