login  Naam:   Wachtwoord: 
Registreer je!
 Forum

probleem met padding plus positionering div

Offline ecoracer - 02/05/2014 13:04 (laatste wijziging 04/05/2014 21:02)
Avatar van ecoracerNieuw lid mijn padding van de content area is geen 10 pixels ook al geef ik de padding aan in de css zie code, hoe moet ik de div content floaten als ik hem naast de navleft div wil hebben, wie kan mij helpen, dank u!

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Testsite</title>
  6. <style>
  7. * 
  8. { 
  9. 	padding: 0px;
  10. 	margin: 0px;
  11. }
  12. body {
  13.     background-color: #033;
  14. }
  15.  
  16. #container
  17. {
  18. 	width: 960px;
  19. 	background-color: #FFF;
  20. 	position: relative;
  21. 	font-family: "Courier New", Courier, monospace;
  22. 	background-color: #ffcccc;
  23. 	margin-top: 0px;
  24. 	margin-right: auto;
  25. 	margin-bottom: 0px;
  26. 	margin-left: auto;
  27. }
  28.  
  29. #menu
  30. {
  31.     width: 940px;
  32.     padding: 10px;
  33.     background-color: #ccffcc;
  34. }
  35.  
  36. #logo
  37. {
  38.     width: 940px;
  39.     padding: 10px;
  40.     background-color: #ccccff;
  41. }
  42.  
  43. #leftnav
  44. {
  45.     width: 240px;
  46.     padding: 10px;
  47.     float: left;
  48.     background-color: #aaffff;
  49. }
  50.  
  51. #content-container
  52. {
  53.     width: 960px;
  54. }
  55.  
  56. #content
  57. {
  58.     width: 680px;
  59.     padding: 10px;
  60.     float: left;
  61.     background-color: #ffffcc;
  62. }
  63.  
  64. #content img 
  65. {
  66.     padding: 0px 10px 0px 0px;
  67. 	margin: 0px;
  68. }
  69.  
  70. #container img.left 
  71. {
  72. 	float: left;
  73. 	clear: left;
  74. }
  75.  
  76. #container img.right
  77. {
  78. 	float: right;
  79. 	clear: right;
  80. }
  81.  
  82. #content p
  83. { 
  84. 	padding: 0px;
  85. 	margin: 0px;
  86.  
  87. }
  88.  
  89. #content h1
  90. {
  91. 	padding: 0px 0px 10px 0px;
  92. 	margin: 0px;
  93. }
  94.  
  95. #content h2
  96. {
  97. 	padding: 0px 0px 10px 0px;
  98. 	margin: 0px;
  99. }
  100.  
  101. #footer
  102. {
  103.     clear: both;
  104.     width: 940px;
  105.     padding: 10px;
  106. 	background-color: #ffffff;
  107. }
  108.  
  109. </style>
  110. </head>
  111. <body>
  112. <div id="container">
  113.     <div id="menu">MENU</div>
  114.     <div id="logo">LOGO</div>
  115.   <div id="content-container">
  116.         <div id= "leftnav">LEFTNAV</div>
  117.         <div id="content">
  118.         <h1>CONTENT</h1>
  119.         <h2>Welkom op onze website</h2>
  120.         <img src="afbeeldingen/honden.jpg" width="400" height="320" class="left" />
  121.         <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.</p>
  122.     </div>
  123.     </div>
  124.     <div id="footer">FOOTER</div>
  125. </div>
  126. </body>
  127. </html>

11 antwoorden

Gesponsorde links
Offline Wijnand - 02/05/2014 13:38
Avatar van Wijnand Moderator
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #leftnav {
  2.     width: 220px;
  3.     padding: 10px;
  4.     float: left;
  5. }
  6. #content {
  7.     width: 700px;
  8.     padding: 10px;
  9.     float: left;
  10. }
  11. #footer {
  12.     width: 960px;
  13.     padding: 10px;
  14.     clear:both;
  15. }


Zo? :-)
Offline ecoracer - 02/05/2014 13:57
Avatar van ecoracer Nieuw lid eerst en vooral bedankt voor de snelle reactie, helaas is dit nog niet de oplossing voor mij, helaas kan ik hier geen afbeelding posten maar ik ga het trachten uit te leggen hieronder

menu 960 px
logo 960 px
leftnav 260 px + content 700 px (naast elkaar)
footer 960 px
Offline Wijnand - 02/05/2014 14:16
Avatar van Wijnand Moderator Dan moet je normalize erbij toevoegen, dan moet het wel werken.

http://necolas....malize.css

Het probleem (als je de floats hebt) met de 260px breedte, is dat de padding erbij gerekend wordt.
Gebruik je normalize dan doet hij dat niet meer (en hij fixt andere dingen ook voor je).

Dus dat zou ik even proberen om erbij te zetten.

Als het dan nog niet werkt, dan moet je even iets duidelijker proberen uit te leggen wat je bedoelt, want het is bijna weekend, en mijn gedachten werken niet meer zoals het behoort 
Offline ecoracer - 02/05/2014 14:47 (laatste wijziging 02/05/2014 14:58)
Avatar van ecoracer Nieuw lid hier een link die hopelijk meer duidelijkheid scheppen kan over wat ik bereiken wil

http://www.buurtcentrumstroboertje.be/divs.png
Offline Wijnand - 02/05/2014 16:14
Avatar van Wijnand Moderator
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <link rel="stylesheet" href="normalize.css" type="text/css" />
  6.     <title>Testsite</title>
  7.     <style type="text/css">
  8.         body {background-color: #033;}
  9.         div {border:1px solid #000;margin:10px;padding:10px;display:block;clear:both;}
  10.         #container {max-width: 960px;background-color: #FFF;position: relative;margin: 0px auto;font-family: "Courier New", Courier, monospace;}
  11.         #menu{}
  12.         #logo{}
  13.         #leftnav{width: 260px;float: left;clear:none;margin-top:0;}
  14.         #content{width: 638px;float:left;clear:none;margin-top:0;}
  15.         #footer{clear:both;}
  16.  
  17.     </style>
  18. </head>
  20.     <div id="container">
  21.         <div id="menu">MENU</div>
  22.         <div id="logo">LOGO</div>
  23.         <div id="leftnav">LEFTNAV</div>
  24.         <div id="content">CONTENT</div>
  25.         <div id="footer">FOOTER</div>
  26.     </div>
  27. </div>
  28. </body>
  29. </html>


Dit krijgt het resultaat. Niet helemaal netjes, maar er zijn meerdere dingen die het lastig maakt.

1. De borders worden meegerekend in sommige browers.
2. Padding wordt ook extra meegerekend.
3. float's left zorgen dat een dubbele margin worden meegerekend, maar normaal is dit (schijnbaar) niet het geval.

Kun je hier mee uit de voeten?
Offline Thomas - 02/05/2014 17:09 (laatste wijziging 02/05/2014 17:19)
Avatar van Thomas Moderator Hiervoor heb je geen CSS "hacks" nodig.

- introduceer een aparte container voor je floats
- sluit deze af met een clear-div, of zet een clear: both in de volgende div zoals Wijnand al aangaf
- zorg ervoor dat je breedtes kloppen (trek padding af van de breedte)

Het volgende werkt in Firefox, Internet Explorer en Chrome:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Testsite</title>
  7. #container
  8. {
  9.     width: 960px;
  10.     background-color: #FFF;
  11.     position: relative;
  12.     margin: 0px auto;
  13.     font-family: "Courier New", Courier, monospace;
  14.     background-color: #ffcccc;
  15. }
  16.  
  17. #menu
  18. {
  19.     width: 940px;
  20.     padding: 10px;
  21.     background-color: #ccffcc;
  22. }
  23.  
  24. #logo
  25. {
  26.     width: 940px;
  27.     padding: 10px;
  28.     background-color: #ccccff;
  29. }
  30.  
  31. #leftnav
  32. {
  33.     width: 240px;
  34.     padding: 10px;
  35.     float: left;
  36.     background-color: #aaffff;
  37. }
  38.  
  39. #content-container
  40. {
  41.     width: 960px;
  42. }
  43.  
  44. #content
  45. {
  46.     width: 680px;
  47.     padding: 10px;
  48.     float: left;
  49.     background-color: #ffffcc;
  50. }
  51.  
  52. #footer
  53. {
  54.     clear: both;
  55.     width: 940px;
  56.     padding: 10px;
  57. }
  58.  
  59. body {
  60.     background-color: #033;
  61. }
  63. </head>
  65. <div id="container">
  66.     <div id="menu">MENU</div>
  67.     <div id="logo">LOGO</div>
  68.     <div id="content-container">
  69.         <div id= "leftnav">LEFTNAV</div>
  70.         <div id="content">CONTENT</div>
  71.     </div>
  72.     <div id="footer">FOOTER</div>
  73. </div>
  74. </body>
  75. </html>


Persoonlijk zou ik ook geen id's gebruiken voor HTML-elementen, maar deze -als je dat nodig hebt- reserveren voor JavaScript-toepassingen.
Bedankt door: ecoracer
Offline ecoracer - 02/05/2014 21:11 (laatste wijziging 02/05/2014 22:25)
Avatar van ecoracer Nieuw lid dank voor alle gewaardeerde hulp, ik denk dat het nog niet honderd procent is maar dat zie ik later wel ivm positionering afbeeldingen, slideshow en tekst in de content divider, ik gebruik ID's omdat je ze maar één keer mag gebruiken en dit voor de duidelijkheid m.i. beter zou kunnen zijn, ...

nu ga ik de navigatie trachten op te lossen, moet dubbele navigatie worden, bovenaan in div MENU en links in LEFTNAV
Offline Thomas - 03/05/2014 12:49
Avatar van Thomas Moderator De layout die ik gaf komt redelijk overeen met je eerder geplaatste afbeelding. Wat zou hier nog aan veranderd moeten worden?
Offline ecoracer - 03/05/2014 13:02
Avatar van ecoracer Nieuw lid De layout was zeker goed, dank daarvoor, maar moet de pagina nu verder ontwikkelen en daar gaat het mis, in de CONTENT div wil ik dat tekst en afbeeldingen bovenaan beginnen en niet zakken, dit komt het design niet ten goede, hoe los ik dit op, liefst voor alle div's?
Offline Thomas - 03/05/2014 17:29 (laatste wijziging 03/05/2014 17:33)
Avatar van Thomas Moderator Uhm, divs hebben standaard geen verticale uitlijning, dus als je content plaatst in een div staat deze altijd bovenaan. Wellicht wil je de padding aan de bovenkant (en de onderkant) van de div verwijderen?

Je kunt paddings, borders en margins op twee verschillende manieren declareren:

1. je geeft aan welke zijde het betreft (dus met een -top, -right, -bottom, -left toevoeging is je CSS opmaak)
2. of je gebruikt de shorthand: simpelweg padding, border of margin

In het tweede geval heb je de mogelijkheid om 1, 2, 3 of 4 spatie-gescheiden waarden op te geven.

1 waarde wil zeggen: pas toe voor alle zijden; deze variant gebruik je als alle zijden dezelfde padding hebben

2 waarden wil zeggen: pas paarsgewijs toe op boven- en onderkant (eerste waarde) en linker- en rechterkant (tweede waarde); deze variant gebruik je als de tegenonvergestelde zijden dezelfde uitsparing hebben maar deze onderling verschillen (anders gebruik variant 1)

3 waarden wil zeggen: pas toe op bovenzijde (eerste waarde), de zijkanten (linker- en rechterkant, tweede waarde) en de onderkant; deze variant gebruik je wanneer de boven- en onderzijde onderling verschillende uitsparingen hebben, en de zijkanten symmetrisch zijn

4 waarden wil zeggen: pas toe op (achtereenvolgens) bovenkant, rechterzijde, onderkant, linkerzijde; deze variant gebruik je wanneer alle zijden verschillende uitsparingen hebben

Oftewel, in jouw geval, om de padding-top te verwijderen en de rest intact te laten, kun je zoiets doen als: padding: 0 10px; (bovenzijde 0px, rest van de zijden 10px) voor #content en #menu of waar je het nog meer wilt.

Houd er ook rekening mee dat headers en paragrafen zelf ook marges en dergelijke hebben.
Offline ecoracer - 03/05/2014 21:14
Avatar van ecoracer Nieuw lid Bedoel je dat ik de padding van de div met id CONTENT op nul moet zetten en padding of margin moet geven aan de elementen binnen deze div, zoals a, img, p, h1 enzovoort?
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.193s