login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[css] container

Offline DrB - 10/07/2006 16:05 (laatste wijziging 10/07/2006 16:05)
Avatar van DrBHTML interesse Beste leden,

Ik heb de volgende code om de container aan te maken:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="container">Code pagina</div>


Dit is de CSS:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. #container {margin:0 auto 0 auto;padding:0px 0 0 0;width:778px;text-align:left;background: url("images/achtergrond.jpg") no-repeat 0px 10px;}


Nu komt de website wel in het midden in FF maar niet in IE, hoe kan dit?

11 antwoorden

Gesponsorde links
Offline Bart - 10/07/2006 16:07 (laatste wijziging 10/07/2006 16:07)
Avatar van Bart PHP expert text-align:left; ->
text-align:center;
Offline DrB - 10/07/2006 16:11 (laatste wijziging 10/07/2006 16:15)
Avatar van DrB HTML interesse Bedankt voor je antwoord, maar de website blijft dan links staan.

//edit

Ik denk dat ik het nu gevonden heb. Ik maak gebruik van een javascript menu en als ik een doctype toevoeg werkt het menu niet naar behoren in FF. Als ik het weghaal werkt het in beide browsers. Het is natuurlijk logisch dat de container dan ook niet werkt zonder doctype. Ik gebruik nu deze doctype:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


Weet iemand misschien hoe ik het menu dan ook werkend kan maken in FF?
Offline Dark_Paul - 10/07/2006 16:25 (laatste wijziging 10/07/2006 16:26)
Avatar van Dark_Paul PHP ver gevorderde zorgen dat het zeker valid is? dan zou het in principe moeten werken.
Offline DrB - 10/07/2006 16:40 (laatste wijziging 10/07/2006 18:33)
Avatar van DrB HTML interesse Alles is helemaal valid, alleen het javamenu geeft errors natuurlijk.


--update--

Zie voor een voorbeeld de volgende link:

http://www.xedo.nl/temp/test.php

Kan je niet als mensen firefox gebruiken, dat hij geen doctype laat zien en bij IE wel, dan moet ik verschillende versies maken zeker van de site?
Offline knoopa - 10/07/2006 19:03
Avatar van knoopa Onbekend dan moet je een php ding maken die kijkt welke browser iemand gebruikt
Offline DrB - 10/07/2006 19:10
Avatar van DrB HTML interesse Ja ik weet het, maar alleen de doctype hoeft dan anders , moet ik dan helemaal twee verschillende versies gaan gebruiken?
Offline CDNC - 10/07/2006 19:35
Avatar van CDNC PHP ver gevorderde nee, je moet enkel kijken met php welke browser iemand gebruikt en aan de hand daarvan bepaalt php het doctype...
Offline xSc - 10/07/2006 19:56
Avatar van xSc Onbekend Nee, dat is niet goed.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. html, body, div#container
  2. {
  3. 	min-height: 100%;
  4. 	height: 100%;
  5. 	margin: 0;
  6. 	padding: 0;
  7. }
  8.  
  9. html>body, html>body #site_hoofd
  10. {
  11. 	height: auto;
  12. }
  13.  
  14. div#container
  15. {
  16. 	display: block;
  17. 	position: absolute;
  18. 	left: 50%;
  19. 	margin-left: -400px;
  20. 	width: 800px;
  21. 	height: 100%;
  22. 	background-color: #FFF;
  23. 	border-left: 1px solid #000;
  24. 	border-right: 1px solid #000;
  25. 	padding: 0;
  26. }


Deze werkt in IE en FF.
Offline DrB - 11/07/2006 11:44 (laatste wijziging 12/07/2006 11:08)
Avatar van DrB HTML interesse Bedankt voor je antwoord Henri, maar het gaat erom dat als ik een doctype toevoeg dat het javascript menu niet meer werkt. En de doctype is nodig voor mijn CSS, anders staat alles scheef 

Ik voeg wel even mijn css toe:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. /* algemeen */
  2. body {background-color: #FFFFFF;font-color: black;font-size: 8pt;font-family: verdana;text-align:left;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;background: url(images/achtergrond.jpg)}
  3. img{border:none;}
  4.  
  5. h1{margin:0;padding:0 0 0 3px;font-size:23px;line-height:24px;letter-spacing:0.03em;color:#BF222C;}
  6. h2{margin:1;padding:0;font-size:14px;line-height:20px;color:#004C6B;text-transform:uppercase;letter-spacing:0.1em;}
  7. h3{margin:10px 0 0 0;padding:0;color:#BF222C;font-size:18px;line-height:16px;letter-spacing:0.04em;}
  8. h4{margin:0;padding:0;color:#00364C;font-size:14px;letter-spacing:-0.04em;}
  9. h5{margin:0;padding:0 0 0 5px;font-size:21px;line-height:23px;letter-spacing:0.02em;color:#BF222C;}
  10. h6{margin:0;padding:0;color:#004C6B;font-size:18px;line-height:18px;}
  11.  
  12. .h3 {font-size: 8pt;color:#0066FF;margin-right: 20px;text-align:justify;}
  13.  
  14. .h4 {font-size: 8pt;color:#222321;margin-right: 20px;}
  15.  
  16. .h5 {color: #8e2e5c;font-size: 11px;font-weight: bold;margin-right: 20px;text-align:justify;}
  17.  
  18. .copy {font-size: 7pt;color:#0066FF;margin-top: 100px;}
  19.  
  20. .ul class {font-size: 8pt;color:#0066FF;}
  21.  
  22.  
  23. #container {margin:0 auto 0 auto;padding:0px 0 0 0;width:778px;text-align:center;background: url("images/achtergrond.jpg") ;}
  24.  
  25. #headerlinks{float:left;margin:0;padding:0;width:363px;height:116px;background:url("images/headerlinks.jpg") no-repeat;}
  26.  
  27. #headerrechts{float:left;margin:0;padding:0;width:415px;height:116px;background:url("images/headerrechts.jpg") no-repeat;}
  28.  
  29. /*styles for navigation*/
  30.  
  31. .menu{float:left;width:778px;height:25px;margin:0 0 10px 8px;padding:0;background:url("images/menu.jpg") no-repeat;}
  32.  
  33. /*text & styling*/
  34. .menu{float:left;margin:0;padding:0px 0 0 0;font-size:12px;color:#000;}
  35.  
  36. /*styles for the left picture*/
  37.  
  38. /*background */
  39. .flash{float:left;width:360px;height:147px;margin:0px 0 0 0;padding:0;background:url("images/flash.jpg") no-repeat;overflow:hidden;}
  40.  
  41. /*styles for the LATEST NEWS item*/
  42. /*background */
  43. .nieuws{float:left;width:418px;height:147px;margin:0px 0 0 0;padding:0;background:url("images/nieuws.jpg") no-repeat;overflow:hidden;}
  44. /*text & styling*/
  45. .nieuws a:link{color:#004C6B;}
  46. .nieuws a:visited{color:#004C6B;}
  47. .nieuws a:hover{color:#BF222C;}
  48. .nieuws a:active{color:#333;}
  49.  
  50. #boven{float:left;margin:0;padding:0;width:221px;height:32px;background:url("images/boven.jpg") no-repeat;}
  51. #rechts{float:left;margin:0;padding:0;width:557px;height:32px;background:url("images/rechts.jpg") no-repeat;}
  52.  
  53. .borderl{float:left;margin:0;padding:0;width:10px;height:369px;background:url("images/borderl.jpg") no-repeat;}
  54. .borderr{float:right;margin:0;padding:0;width:10px;height:369px;background:url("images/borderr.jpg") no-repeat;}
  55.  
  56. /*styles for the menu 2 item*/
  57. /*background */
  58. .login{float:left;width:211px;height:369px;margin:0px 0 0 0;padding:0;background:url("images/login.jpg") no-repeat;overflow:hidden;}
  59. /*text & styling*/
  60. .login p{width:228px;margin:0;padding:5px 0 0 0;}
  61. .login ul{margin:5px 0 0 8px;padding:0;}
  62. .login ul li{margin:2px 0 3px 0;padding:0;list-style:none;}
  63. .login a:link{color:#004C6B;}
  64. .login a:visited{color:#004C6B;}
  65. .login a:hover{color:#356210;}
  66. .login a:active{color:#333;}
  67.  
  68. .balk{float:left;margin:0;padding:0;width:18px;height:369px;background:url("images/balk.jpg") no-repeat;}
  69.  
  70. /*styles for the content*/
  71.  
  72. /*background */
  73. .content{float:left;width:529px;height:369px;margin:0px 0 0 0;padding:0;background:url("images/content.jpg") no-repeat;overflow:auto;}
  74. /*text & styling*/
  75.  
  76. .footer{float:left;margin:0;padding:0;width:778px;height:40px;background:url("images/footer.jpg") no-repeat;}
  77. .footer p{margin-left:580px;padding:5px 0 0 0;}
  78.  
  79. input, textarea, select{
  80. background-color: #d2ceca;
  81. color: black;
  82. border-width:1px;
  83. border-color:black;
  84. font-family: verdana;
  85. font-size: 8pt;
  86. }
  87.  
  88. #footer{float:left;margin:0;padding:0;width:778px;height:31px;background:url("images/footer.jpg") no-repeat;}



Dus samenvattend:

Ik heb een javascript menu, te zien op bovenstaande link. Dit menu werkt alleen zonder doctype, de website is opgebouwd in divs , zie bovenstaande code, dit heeft een doctype nodig anders staat alles scheef. Doctype weghalen staat website scheef, doctype laten staan, werkt menu in FF niet.
Offline xSc - 12/07/2006 13:10
Avatar van xSc Onbekend Dan is je doctype niet juist helemaal juist.

Zie voor meer informatie:

http://www.mijnhomepage.nl/xhtml/les3.php
Offline DrB - 12/07/2006 13:25
Avatar van DrB HTML interesse Ik heb al alle doctypes geprobeerd die er zijn dus daar ligt het niet aan.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.23s