login  Naam:   Wachtwoord: 
Registreer je!
 Forum

div in 2en delen

Offline copyfile - 13/09/2006 20:21
Avatar van copyfileNieuw lid Ik ben vandaag gestart om toch maar eens met div's te gaan werken. Nu vraag ik me alleen het volgende af. Ik heb gewoon een div. maar hoe kan ik ervoor zorgen dat ik nu 2 vakken krijg naast elkaar eigenlijk ? Ik hoop dat me vraag begrepen wordt en dat iemand me kan helpen

15 antwoorden

Gesponsorde links
Offline Button - 13/09/2006 20:27
Avatar van Button PHP ver gevorderde je moet hier op sima eens naar die tut over div zien:
http://www.site...&id=90
daar wordt dat uitgelegd
Offline zamna - 13/09/2006 20:35
Avatar van zamna HTML beginner of hier
http://www.zamn...=divlayout
(wat reclame voor eigen site  )
Offline copyfile - 13/09/2006 20:42
Avatar van copyfile Nieuw lid Ik heb al vanalles geprobeerd maar krijg het niet voor elkaar. De bedoeling is namelijk als volgt. als ik namelijk met zo'n container en daarin floats zet krijg ik b.v. als ik ze 200px breed maak steeds boxen van 200px breed. Maar de 1e moet 800px groot worden en de 2e die ernaast staat 140. Hoe doe ik dat dan ?
Offline zamna - 13/09/2006 20:52
Avatar van zamna HTML beginner gewoon je container maar 940px breed maken  
Offline copyfile - 13/09/2006 20:57
Avatar van copyfile Nieuw lid Ja dat snap ik. Maar nu heb ik dus de volgende code. Maar dan elke keer als ik Float gebruik maakt hij boxen van 100px breed. Maar de bedoeling is dat de linker box 800px breed wordt en die ernaast komt 140. om zo dus op die 940 te komen. Hoe doe ik dat dan ?:

#div.container {
border: 1px solid #000000;
width: 940px;
padding: 0px;
}

#div.float {
border: 1px dashed #FF0000;
color: #000000;
text-align: center;
width: 100px;
margin: 0px;
padding: 4px;
float: left;
}
Offline zamna - 13/09/2006 20:59 (laatste wijziging 13/09/2006 21:00)
Avatar van zamna HTML beginner #div.float {
border: 1px dashed #FF0000;
color: #000000;
text-align: center;
width: 100px;
margin: 0px;
padding: 4px;
float: left;
}
Offline copyfile - 13/09/2006 22:17 (laatste wijziging 14/09/2006 12:00)
Avatar van copyfile Nieuw lid Het is me al gelukt. Heb 2 float boxen aangemaakt en nu werkt het goed ! thanks

Maar toch nog even een ander probleem waar ik nu tegenaan loop. Ik heb namelijk de volgende code. Deze werkt goed als ik de site in IE kijk maar als ik in FF kijk dan is de onderste balk (DivBottom) die achtergrond wordt i.p.v. onder de "container" in de container geplaatst. Wat doe ik hier fout ?:

css :


php code - Bekijk de code zonder highlighting - Klap code in 
  1. #divContent { 
  2.     background-color: #FFFFFF; 
  3.     text-align: left; 
  4.     margin<img src="images/smilies/hypocrite.gif" border="0" alt=""> auto; 
  5.     width:950px; 
  6. } 
  7. #divContentTekst { 
  8.     background-color: #FFFFFF; 
  9.     text-align: left; 
  10.     margin<img src="images/smilies/hypocrite.gif" border="0" alt=""> auto; 
  11.     width:940px; 
  12.     padding-right: 5px; 
  13.     padding-left: 5px; 
  14. } 
  15. .ContentTekst { 
  16.     color: #000000 
  17. } 
  18. div.container { 
  19. width: 940px; 
  20. padding: 0px; 
  21. } 
  22.  
  23. div.float1 { 
  24. text-align: center; 
  25. width: 800px; 
  26. margin: 0px; 
  27. padding: 0px; 
  28. float: left; 
  29. } 
  30. div.float2 { 
  31. text-align: center; 
  32. width: 140px; 
  33. margin: 0px; 
  34. padding: 0px; 
  35. float: right; 
  36. } 
  37. #divBottom { 
  38.     text-align: left; 
  39.     margin<img src="images/smilies/hypocrite.gif" border="0" alt=""> auto; 
  40.     width:950px; 
  41.     background-image:url("img/bottom.jpg"); 
  42.     height: 18px; 
  43. }



index.html :

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="ContentTekst" id="divContent"> 
  2.             <div id="divContentTekst"> 
  3. <div class="container"> 
  4. <div class="float1">1</div> 
  5. <div class="float2">2</div> 
  6. </div> 
  7.             </div> 
  8.             </div> 
  9.             <div id="divBottom"><div align="center"> 
  10.             © 2006            </div></div>
Offline zamna - 14/09/2006 07:51
Avatar van zamna HTML beginner Plaats eens volgend lijntje in je css van '#divBottom':

php code - Bekijk de code zonder highlighting - Klap code in 
  1. clear: both;


Werkt het nu ?
Offline Dark_Paul - 14/09/2006 16:19
Avatar van Dark_Paul PHP ver gevorderde mag ik ook vragen waarom je dit doet:
<div id="divBottom"><div align="center">&copy; 2006</div></div> ?
Dat kan je ook doen door in de css bij #divBottom
text-align: center;
toe te voegen 
Offline copyfile - 14/09/2006 16:51
Avatar van copyfile Nieuw lid Het is gelukt ! Thanks en Dark_paul : is inderdaad zeeer dom geweest. Gelijk gefixed natuurlijk !

nog even een andere vraag. Ik heb een menu die horizontaal loopt door 5 plaatsjes met links naast elkaar te zetten. Hoe moet ik dit met css/div doen ? Want snap dit niet helemaal. Als ik b.v. dreamweaver plaatjes met links neer laat zetten krijg ik van die <img src..> dingen. En dat is natuurlijk niet goed en niet vallid meer. Hoe doe ik dit dan ?
Offline Dark_Paul - 14/09/2006 16:56
Avatar van Dark_Paul PHP ver gevorderde Een img tag is valid, mits je oplet deze te 'sluiten'.
Tags als <h2> en <div> hebben een sluitingstag, namelijk </h2> en </div>. Tags als <img> en <input> hebben dit niet. XHTML vereist toch dat elke tag word gesloten, zelfs <br> tags. Dat doe je dan niet door <br></br> te doen, maar een 'self-close'. een img tag in deze vorm is dus niet valid:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <img src="plaatje.gif" alt="plaatje">

Dit is wel valid:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <img src="plaatje.gif" alt="plaatje" />

Idem voor <br /> en andere tags die geen echte sluitingstags hebben.
Offline copyfile - 14/09/2006 16:57
Avatar van copyfile Nieuw lid Maar is dit dan de netste manier ? Want had ook iets gelezen ergens over <ul> en <il> maar snap dat niet helemaal hoe ik dit dan moet doen ? Want het gaat nu vooral om een mooie schone code
Offline Ultimatum - 14/09/2006 17:01
Avatar van Ultimatum PHP expert <ul> & <li> zijn om lijsten te maken, dus je begint met <ul> en dan om elke link of opsomming tekst zet je dan <li></li> en dan krijg je dus van die bollentjes voor je links maar die kan je in css dan ook weer veranderen..
Offline copyfile - 14/09/2006 17:43
Avatar van copyfile Nieuw lid oke thansk kan ik hier dus niet toepassen. doe ik het gewoon op de andere,goed werkende manier ! Bedankt allemaal !
Offline Dark_Paul - 14/09/2006 18:00
Avatar van Dark_Paul PHP ver gevorderde wat zou er mis zijn met images? lijkt mij het meest logische als je afbeeldingen wilt gebruiken voor links 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.339s