login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Rare div achtergrond zonder border.

Offline rajaroy - 19/06/2009 17:24
Avatar van rajaroyNieuw lid Ik ben met een eigen simpele portfolio bezig waarin ik een aantal divjes in wil hebben. De divjes positioneren lukt allemaal wel alleen als ik op de "content_bg" een achtergrondje zonder een border zet dan sluit het niet goed aan met de divje boven en onder.

Hieronder het stukje code:
PHP
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <head>
  2. <title><?php echo "$titel"; ?></title>
  3. <link rel="stylesheet" href="css/style.css" type="text/css">
  4. </head>
  5. <body>
  6. <div class="container">
  7. <div class="header"></div>
  8. <div class="menu"></div>
  9. <div class="content_top"></div>
  10. <div class="body_bg">
  11. <div class="content_inner"><? include("contents/home.php"); ?></div>
  12. </div>
  13. <div class="content_bottom"></div>
  14. </div>
  15. </body>
  16. </html>


CSS
css code - Bekijk de code zonder highlighting - Klap code in 
  1. body            {
  2. 					 background-color: black; margin: auto; font-family: Calibri, Arial; font-size: 14px; color: black;
  3.                 }
  4.  
  5. html            {
  6. 					heigth: 90%;
  7.                 }
  8.  
  9. .header         {
  10. 					background-image: url(../imgs/header.png); width: 950px; height: 152px; margin: auto;
  11.                 }
  12.  
  13. .container		{
  14. 					width: 1000px; height: 800px; margin: auto; border: green dotted 1px;
  15. 				}
  16.  
  17. .content_top	{
  18. 					background-image: url(../imgs/content_top.png); width: 950px; height: 19px; margin: auto;
  19. 				}
  20.  
  21. .body_bg		{
  22. 					background-image: url(../imgs/content_bg.png); background-repeat: repeat-y; width: 950px; border: 0px; margin: auto; border: 0px;
  23. 				}
  24.  
  25. .content_inner	{
  26. 					width: 900px; margin: auto; border: 0px;
  27. 				}
  28.  
  29. .content_bottom	{
  30. 					background-image: url(../imgs/content_bottom.png); width: 950px; height: 19px; margin: auto;
  31. 				}


Het is online te kijken op www.srmalaha.com

2 antwoorden

Gesponsorde links
Offline WouterPSV - 19/06/2009 19:43 (laatste wijziging 19/06/2009 19:43)
Avatar van WouterPSV Lid Ik heb via Xampp even jou code getest. Je plaatjes van de site geript, en in de classes content_bottom en top &nbsp; geplaatst. Ik heb de ruimte er niet tussen dus misschien kun jij dit ook proberen.

Voor de rest zie ik geen fouten in je code.
Offline rajaroy - 19/06/2009 21:18 (laatste wijziging 07/07/2009 13:48)
Avatar van rajaroy Nieuw lid Dit is de oplossing!

Zie je wel Roy,


Wat je fout had gedaan was dit,


css code - Bekijk de code zonder highlighting - Klap code in 
  1. body, html {background-color: black; margin: 0 auto; font-family: Calibri, Arial; font-size: 14px; color: black;}
  2. Hier had je de 'margin: 0 auto;' op moeten zetten. Maar niet alleen hier!
  3.  
  4. code {font-size: 12px; }
  5.  
  6. #header {background: url(../imgs/header.png) top center no-repeat; width: 950px; height: 152px;}
  7.  
  8. #container {margin: 0 auto; width: 950px; background: url(../imgs/body_b8.png) repeat-y;}
  9. Ook op je gehele container moet je de margin toepassen want die houd natuurlijk alles netjes bij elkaar, de rest word vanzelf gecentreert.
  10.  
  11. #content_top { background: url(../imgs/content_top.png) center top no-repeat; width: 950px; height: 19px;}
  12.  
  13. #body_bg { background-color: white; width: 928px; border: 0px; border: 0px; margin-left:1px; padding-left: 20px; padding-top: 10px; padding-bottom: 10px;}
  14. Wat jij "fout" deed was dit ** 
  15.  
  16. #content_inner { width: 900px; border: 0px; } #content_bottom { background-image: url(../imgs/content_bottom.png); width: 950px; height: 19px; }
  17. Waar dit voor staat wist ik niet? Het lijkt me dat je het wou gebruiken als buitenkant ofzo, heb er maar niet aangezeten of veranderd.



** Je moet in FF en IE rekening houden dat je div's weleens willen verspringen, dit kan je corrigeren door een margin te geven maar naar naar een negatief getal "margin-top: -19px" maar er is ook een ander handig trucje.

Wat je kan doen is alles gewoon zo laten staan (dus geen negatieve margins) en alleen een padding geven, dan zakt je bovenste div naar beneden want hij word in principe groter. Dat doe je bij allebei. (de padding boven en beneden) Je div is nu dus gewoon goed zonder enkele margins eraan te geven! 

Ook is zo dat je een padding aan de linkerkant geeft, zodat je tekst netjes van de kantlijn komt, nu moet je alleen je div niet op de orginele grootte houden anders is hij telang.

De padding die je aan een div geeft moet je van de lengte en hoogte afhalen. Kan je zien wat ik heb gedaan, je div is nu nog naar 928 pixels breed, omdat die padding van 20px erop zit
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.221s