login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Problemen met DIV en SPAN

Offline gerben - 03/07/2005 19:33
Avatar van gerbenHTML interesse Hallo 'lezers',

Ik heb een probleempje met mijn 'layout', ik maak hem eerst zonder plaatjes e.d en later verwerk ik er plaatjes in zoals logo en kopjes. Nu heb ik met divjes gewerkt, ( waar ik vroeger tables gebruikte ). nu wil ik 3 vlakken naast elkaar maken, ik heb ze voor het gemak maar even linker, center en rechter genoemt. Nu heb ik 2 problemen.

De lay out is totaal 770 px. Linker is 190, center is 440, rechter is 140 (alles in px). Nu moet ik in mijn CSS verwerken dat de rechter 140 px. is anders slaat de tekst van de rechter kolom naar beneden onder de linker.

Het tweede probleem. De achtergrond van center is #E1E1E1. Als ik die instel, dan krijg ik een vlakje van ong. 3px bij de rechter.

Hoe kan ik deze beide problem oplossen. Tips/fouten in de CSS en HTML zijn ook welkom.

CSS:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. /* algemene box */
  2.  div.content {
  3.   background-color: #E1E1E1;
  4.   border: 0px;
  5.   border-style: solid;
  6.   border-color: #333333;
  7.   text-align:top;
  8. 	height: 75%;
  9.  
  10.  }
  11.  
  12. /* linker box */ 
  13.  #.left {
  14.   background-color: #FFFFFF;
  15.   border: 0px;
  16.   border-right-width: 1px;
  17.   border-style: solid;
  18.   border-color: #333333;
  19.   border-collapse: collapse;
  20.   height: 100%;
  21. 	width: 190px;
  22. 	 }
  23.  
  24. /* middle box */ 
  25.  #.middle {
  26.   background-color: #E1E1E1;
  27.   border: 0px;
  28.   border-right-width: 1px;
  29.   border-style: solid;
  30.   border-color: #333333;
  31.   border-collapse: collapse;
  32.   height: 100%;
  33. 	width: 440px;
  34.   border-collapse: collapse;
  35.  }
  36.  
  37. /* right box */ 
  38.  #.right {
  39.   background-color: #FFFFFF;
  40.   border: 0px;  
  41.   border-style: solid;
  42.   border-color: #333333;
  43.   border-collapse: collapse;
  44.   height: 100%;
  45. 	width: 130px;
  46.  }


HTML:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="content">
  2.        <span class="left">linker</span> 
  3.  
  4.        <span class="middle">center</span> 
  5.  
  6.        <span class="right">rechter</span>
  7.    </div>

2 antwoorden

Gesponsorde links
Offline Ontani - 03/07/2005 19:58
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 ik zou margin en padding zeker op 0 zetten:

margin: 0px;
padding: 0px;
Offline Fenrir - 03/07/2005 20:00
Avatar van Fenrir PHP expert zo:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. .content
  2. {
  3. position: relative;
  4. }
  5.  
  6. .left, .right
  7. {
  8. position: absolute;
  9. left: 0;
  10. width: 100px;
  11. }
  12.  
  13. .right
  14. {
  15. left: auto;
  16. right: 0;
  17. }
  18.  
  19. .middle
  20. {
  21. margin: 0 100px;
  22. }
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.2s