login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Probleem met margin-bottom

Offline tomie94 - 29/05/2008 16:45
Avatar van tomie94PHP interesse Hallo,

Ik ben bezig met een site over Habbo,
hierbij wil ik ronden hoeken, daarvoor heb ik de volgende code gemaakt:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .container
  2. {
  3. 	width: 95%;
  4. 	height: 800px;
  5. 	background-color: #FFF;
  6. 	margin: 15px auto;
  7. 	border: 1px solid black;
  8. }
  9. .container .top .left
  10. {
  11. 	width: 20px;
  12. 	height: 20px;
  13. 	margin-top: -1px;
  14. 	margin-left: -1px;
  15. 	float: left;
  16. 	background-image: url('img/container_top_left.gif');
  17. }
  18. .container .top .right
  19. {
  20. 	width: 20px;
  21. 	height: 20px;
  22. 	margin-top: -1px;
  23. 	margin-right: -1px;
  24. 	float: right;
  25. 	background-image: url('img/container_top_right.gif');
  26. }
  27. .container .bottom .left
  28. {
  29. 	width: 20px;
  30. 	height: 20px;
  31. 	margin-bottom: -1px;
  32. 	margin-left: -1px;
  33. 	float: left;
  34. 	background-image: url('img/container_bottom_left.gif');
  35. }
  36. .container .bottom .right
  37. {
  38. 	width: 20px;
  39. 	height: 20px;
  40. 	margin-bottom: -1px;
  41. 	margin-right: -1px;
  42. 	float: right;
  43. 	background-image: url('img/container_bottom_right.gif');
  44. }


als ik nu de site bekijk(klik) zie je dat de 2 onderste hoeken bovenaan staan, terwijl bij deze toch echt margin-bottom staat, hoe kan dat?

5 antwoorden

Gesponsorde links
Offline tomie94 - 29/05/2008 16:47
Avatar van tomie94 PHP interesse ow ok, hoe krijg ik ze dan wel beneden?
Offline nvleeuwen88 - 29/05/2008 16:53
Avatar van nvleeuwen88 HTML interesse volgens mij kan je het doen met position background kijk hier maar eens
http://www.w3sc...sition.asp
Offline tomie94 - 29/05/2008 17:01
Avatar van tomie94 PHP interesse
Sandernerd schreef:
Natuurlijk staan ze daar, met margin-bottom geef je een marge aan vanaf de onderkant.
kijk hier eens: http://kalsey.com/2003/07/rounded_corners_in_css/


die code waar jij met je link heen verwijst werkt niet bij mij, i.v.m. de border(misschien kan het wel, maar het lukt me niet)
Offline tomie94 - 29/05/2008 17:06 (laatste wijziging 29/05/2008 20:19)
Avatar van tomie94 PHP interesse ik heb in die container ook een border zitten, met die code van jouw kom ik daar niet uit...
Offline tomie94 - 30/05/2008 14:35 (laatste wijziging 02/06/2008 16:22)
Avatar van tomie94 PHP interesse oke, het werkt nu, maar niet in IE5.5, 6.0 of 7.0. Hier zie je de border nog om de randen heen, de code die ik nu gebruik is:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .roundcont {
  2. 	width: 98%;
  3.  
  4. 	background-color: #fff;
  5. 	color: #000;
  6. 	border: 1px solid #000;
  7. 	margin: 10px auto;
  8. }
  9.  
  10. .roundcont p {
  11. 	margin: 0 10px;
  12. }
  13.  
  14. .roundtop { 
  15. 	background: url('img/container_top_right.gif') no-repeat top right;
  16. 	margin-right: -1px; 
  17. 	margin-bottom: -1px;
  18. }
  19.  
  20. .roundbottom {
  21. 	background: url('img/container_bottom_right.gif') no-repeat top right;
  22.  
  23. 	margin-right: -1px; 
  24. 	margin-bottom: -1px;
  25. }
  26.  
  27. img.corner {
  28.    width: 20px;
  29.    height: 20px;
  30.    border: none;
  31.    display: block !important;
  32.    margin-left: -1px; 
  33.    margin-top: -1px;
  34. }


HTML
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="roundcont">
  2.    <div class="roundtop">
  3. 	 <img src="img/container_top_left.gif" alt="" 
  4. 	 width="20" height="20" class="corner" 
  5. 	 style="display: none" />
  6.    </div>
  7.  
  8.    <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
  9.    elit, sed do eiusmod tempor incididunt ut labore et 
  10.    dolore magna aliqua. Ut enim ad minim veniam, quis 
  11.    nostrud exercitation ullamco laboris nisi ut aliquip 
  12.    ex ea commodo consequat. Duis aute irure dolor in 
  13.    reprehenderit in voluptate velit esse cillum dolore eu 
  14.    fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
  15.    non proident, sunt in culpa qui officia deserunt mollit 
  16.    anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing 
  17.    elit, sed do eiusmod tempor incididunt ut labore et 
  18.    dolore magna aliqua. Ut enim ad minim veniam, quis 
  19.    nostrud exercitation ullamco laboris nisi ut aliquip 
  20.    ex ea commodo consequat. Duis aute irure dolor in 
  21.    reprehenderit in voluptate velit esse cillum dolore eu 
  22.    fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
  23.    non proident, sunt in culpa qui officia deserunt mollit 
  24.    anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing 
  25.    elit, sed do eiusmod tempor incididunt ut labore et 
  26.    dolore magna aliqua. Ut enim ad minim veniam, quis 
  27.    nostrud exercitation ullamco laboris nisi ut aliquip 
  28.    ex ea commodo consequat. Duis aute irure dolor in 
  29.    reprehenderit in voluptate velit esse cillum dolore eu 
  30.    fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
  31.    non proident, sunt in culpa qui officia deserunt mollit 
  32.    anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing 
  33.    elit, sed do eiusmod tempor incididunt ut labore et 
  34.    dolore magna aliqua. Ut enim ad minim veniam, quis 
  35.    nostrud exercitation ullamco laboris nisi ut aliquip 
  36.    ex ea commodo consequat. Duis aute irure dolor in 
  37.    reprehenderit in voluptate velit esse cillum dolore eu 
  38.    fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
  39.    non proident, sunt in culpa qui officia deserunt mollit 
  40.    anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing 
  41.    elit, sed do eiusmod tempor incididunt ut labore et 
  42.    dolore magna aliqua. Ut enim ad minim veniam, quis 
  43.    nostrud exercitation ullamco laboris nisi ut aliquip 
  44.    ex ea commodo consequat. Duis aute irure dolor in 
  45.    reprehenderit in voluptate velit esse cillum dolore eu 
  46.    fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
  47.    non proident, sunt in culpa qui officia deserunt mollit 
  48.    anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing 
  49.    elit, sed do eiusmod tempor incididunt ut labore et 
  50.    dolore magna aliqua. Ut enim ad minim veniam, quis 
  51.    nostrud exercitation ullamco laboris nisi ut aliquip 
  52.    ex ea commodo consequat. Duis aute irure dolor in 
  53.    reprehenderit in voluptate velit esse cillum dolore eu 
  54.    fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
  55.    non proident, sunt in culpa qui officia deserunt mollit 
  56.    anim id est laborum.</p><div class="menu"></div><p>dolore magna aliqua. Ut enim ad minim veniam, quis 
  57.    nostrud exercitation ullamco laboris nisi ut aliquip 
  58.    ex ea commodo consequat. Duis aute irure dolor in 
  59.    reprehenderit in voluptate velit esse cillum dolore eu 
  60.    fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
  61.    non proident, sunt in culpa qui officia deserunt mollit 
  62.    anim id est laborum.</p>
  63.  
  64.    <div class="roundbottom">
  65. 	 <img src="img/container_bottom_left.gif" alt="" 
  66. 	 width="20" height="20" class="corner" 
  67. 	 style="display: none;" />
  68.    </div>
  69. </div>


live: http://www.habbonline.nl/site/lab/new/
screenshots: http://browsers...te/lab/new/

niemand?
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.171s