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:
  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:
  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
  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.172s