login  Naam:   Wachtwoord: 
Registreer je!
 Forum

CSS vraagje

Offline mike87 - 15/06/2007 21:24
Avatar van mike87Nieuw lid Ik liep tijdens het opzetten van een layout net tegen een probleem en het lukt me maar niet om deze op te lossen.

Wat ik wilde was een div, die over de gehele breedte van een venster loopt. En aan de linkerkant van deze balk tekst, en aan de rechterkant tekst. Met een tussenruimte van 30px (Tussen de tekst en het einde/begin).

Hiervoor had ik deze HTML:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="topBar">
  2.     	<div id="topDate"> 15-06-2007 </div>
  3.         <div id="topMenu"> Administratie Contact </div>
  4.     </div>


En deze CSS:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. #topBar
  2.  {
  3.  	background-color: #48433d;
  4. 	width: 100% - 60px;
  5. 	height: 19px;
  6. 	padding-left: 30px;
  7. 	padding-rght: 30px;
  8. 	padding-top: 6px;
  9.  }
  10.  
  11.  #topDate
  12.  {
  13.  	float: left;
  14. 	color: #FFFFFF;
  15.  }
  16.  
  17.  #topMenu
  18.  {
  19.  	float: left;
  20. 	text-align: right;
  21. 	color: #FFFFFF;
  22. 	width: 100% - 30px;
  23. 	padding-right: 30px;
  24.  }


Maar de inhoud van die 2 divs, komen tegen elkaar aan te staan.
Hoe kan ik er nu voor zorgen dat de inhoud van #topDate links staat en de inhoud van #topMenu rechts?

En dan had ik nog een vraagje.
In de layout heb ik een soort van sidebar achtig idee verwerkt.
Deze loopt over de header, over het menu en ook nog over de content van de website heen.
Voor elk van deze onderdelen heb ik een div gemaakt, dus deze sidebar moet zichbaar zijn in alle drie de div elementen.
Ik wil deze ten alle tijde, een X aantal pixels van de rechterkant van de browser plaatsen. Maar hoe krijg ik een div op deze manier in positie zodat deze altijd een X aantal pixels van de rechterzijde komt te staan?

2 antwoorden

Gesponsorde links
Offline finduilas - 16/06/2007 08:42
Avatar van finduilas PHP gevorderde style:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <style>
  2. .links {
  3. position: absolute;
  4. left: 5px;
  5. padding: 0px;
  6. top: 0px; 
  7. width: 10%;
  8. }
  9.  
  10. .midden {
  11. position: absolute;
  12. margin-left: 150px;
  13. padding: 0px;
  14. margin-right: 150px;
  15. top: 0px;
  16. width: 60%;
  17. }
  18.  
  19. .rechts {
  20. position: absolute;
  21. right: 15px;
  22. padding: 0px;
  23. top: 0px;
  24. width: 150px;
  25. }
  26. </style>


Divs:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="links">Links</div>
  2. <div class="midden">Middsdsqdsqden</div>
  3. <div class="rechts">Floating Rechts</div>


Voor die sidebar moet je een container div rond de rest maken. Is wel even werk aan om het correct te krijgen.
Offline JBke - 16/06/2007 08:54
Avatar van JBke PHP gevorderde je kan volgens mij ook werken met de css paramater float: om eventueel divs links en rechts van een andere te krijgen:D
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.194s