2 DIV's boven elkaar
Frederic - 03/04/2005 17:49
PHP ver gevorderde
Hoe kan ik ervoor zorgen dat deze boven elkaar komen staat ipv naast elkaar?
<style type="text/css">
div.rechterkolom {
border: 1px dashed #E9E9E9;
color: #F0F0F0;
background-color: orange;
text-align: right;
width: 200px;
margin: 0px;
padding: 4px;
float: right;
}
div.rechterkolom-titel {
border: 1px dashed #E9E9E9;
color: #F0F0F0;
background-color: orange;
text-align: right;
width: 200px;
float: right;
}
</style>
<div class="rechterkolom-titel">hey, dit is de titel</div>
<div class="rechterkolom">gegroet, dit is het bericht</div>
< style type= "text/css" >
div. rechterkolom {
border: 1px dashed #E9E9E9;
color: #F0F0F0;
background- color: orange;
text- align: right;
width: 200px;
margin: 0px;
padding: 4px;
float: right;
}
div. rechterkolom- titel {
border: 1px dashed #E9E9E9;
color: #F0F0F0;
background- color: orange;
text- align: right;
width: 200px;
float: right;
}
</ style>
< div class = "rechterkolom-titel" > hey, dit is de titel</ div>
< div class = "rechterkolom" > gegroet, dit is het bericht</ div>
10 antwoorden
Gesponsorde links
barry - 03/04/2005 18:05
PHP interesse
je moet position: absolute; erin zetten...
:)
En dan positioneren met left:; en right:;
Frederic - 03/04/2005 18:08
PHP ver gevorderde
hmmm, maar de dingen die erboven komen zijn variabel in lengte (erboven wordt nog een tekst uit een DB gehaald), dus dan loopt die er gewoon door?
TFOL - 03/04/2005 18:59
PHP beginner
<div class="rechterkolom-titel">hey, dit is de titel</div>
<br>
<div class="rechterkolom">gegroet, dit is het bericht</div>
< div class = "rechterkolom-titel" > hey, dit is de titel</ div>
< br>
< div class = "rechterkolom" > gegroet, dit is het bericht</ div>
dit werkt bij mij wel:cool:
Fenrir - 03/04/2005 19:38 (laatste wijziging 03/04/2005 19:42)
PHP expert
Divs komen standaard naast elkaar door display: block; Maar aangezien je float gebruikt, is dit niet zo. Je moet clear: both gebruiken om iets onder een float te krijgen.
Mss zo:
div.rechterkolom {
clear: both;
border: 1px dashed #E9E9E9;
color: #F0F0F0;
background-color: orange;
text-align: right;
width: 200px;
margin: 0px;
padding: 4px;
float: right;
}
div.rechterkolom-titel {
border: 1px dashed #E9E9E9;
color: #F0F0F0;
background-color: orange;
text-align: right;
width: 200px;
float: right;
}
div. rechterkolom {
clear: both;
border: 1px dashed #E9E9E9;
color: #F0F0F0;
background- color: orange;
text- align: right;
width: 200px;
margin: 0px;
padding: 4px;
float: right;
}
div. rechterkolom- titel {
border: 1px dashed #E9E9E9;
color: #F0F0F0;
background- color: orange;
text- align: right;
width: 200px;
float: right;
}
Edit:
Aan je class-namen te zien zijn het titels, dan kun je beter deze code gebruiken:
<div class="rechterkolom">
<h2>titel</h2>
<p>rechterkolom</p>
</div>
Frederic - 03/04/2005 20:34 (laatste wijziging 03/04/2005 20:40)
PHP ver gevorderde
OK, hartelijk bedankt
Laatste vraagje nog mss:
Ik heb nu
div.rechterkolom {
clear: both;
border: 1px dashed #CCCCCC;
color: #F0F0F0;
background-color: #F0F0F0;
text-align: right;
width: 175px;
margin: 0px;
padding: 4px;
float: right;
color: #333333;
font-size:10pt;
font-family: Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
div.rechterkolom-titel {
clear: both;
border: 1px dashed #CCCCCC;
color: #E9E9E9;
background-color: #E9E9E9;
text-align: left;
width: 175px;
margin: 0px;
padding: 4px;
float:right;
color: #333333;
font-size:12pt;
font-family: Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
div. rechterkolom {
clear: both;
border: 1px dashed #CCCCCC;
color: #F0F0F0;
background- color: #F0F0F0;
text- align: right;
width: 175px;
margin: 0px;
padding: 4px;
float: right;
color: #333333;
font- size: 10pt;
font- family: Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, sans- serif;
}
div. rechterkolom- titel {
clear: both;
border: 1px dashed #CCCCCC;
color: #E9E9E9;
background- color: #E9E9E9;
text- align: left;
width: 175px;
margin: 0px;
padding: 4px;
float: right;
color: #333333;
font- size: 12pt;
font- family: Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, sans- serif;
}
Waar er tussen de 2 helemaal niet veel verschil is, wat mss wel onnodig veel code oplevert? Is er geen manier om te zeggen:
het ene is het andere PLUS nog enkele extra's?
AcIdBuRn - 03/04/2005 22:15
HTML beginner
div.rechterkolom, div.rechterkolom-titel {
clear: both;
border: 1px dashed #CCCCCC;
color: #F0F0F0;
background-color: #F0F0F0;
text-align: right;
width: 175px;
margin: 0px;
padding: 4px;
float: right;
color: #333333;
font-size:10pt;
font-family: Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
div.rechterkolom-titel {
color: #E9E9E9;
background-color: #E9E9E9;
text-align: left;
float:right;
font-size:12pt;
}
div. rechterkolom, div. rechterkolom- titel {
clear: both;
border: 1px dashed #CCCCCC;
color: #F0F0F0;
background- color: #F0F0F0;
text- align: right;
width: 175px;
margin: 0px;
padding: 4px;
float: right;
color: #333333;
font- size: 10pt;
font- family: Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, sans- serif;
}
div. rechterkolom- titel {
color: #E9E9E9;
background- color: #E9E9E9;
text- align: left;
float: right;
font- size: 12pt;
}
Frederic - 04/04/2005 11:39 (laatste wijziging 04/04/2005 11:39)
PHP ver gevorderde
Dit is echt hét laatste
Dit is mijn code:
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div.rechterkolom, div.rechterkolom-titel {
clear: both;
border: 1px dashed #CCCCCC;
border-left: 3px double #CCCCCC;
background-color: #F0F0F0;
text-align: right;
width: 175px;
width: 100px;
margin: 0px;
padding: 4px;
float: right;
color: #333333;
font-size:10pt;
font-family: Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, sans-serif;
-moz-border-radius: 6px 6px 6px 6px;
}
div.rechterkolom-titel {
background-color: #E9E9E9;
text-align: left;
font-size:11pt;
font-weight: bold;
}
div.inhoud {
border: 1px dashed #FF0000;
text-align: center;
padding: 4px;
float: right;
margin: 0px;
}
</style></head>
<body>
<div class="rechterkolom" align="right"><input type="button" value="Go"></div>
<div class="inhoud">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus tempus. Nulla ut tortor. Integer ac lectus. Maecenas commodo vehicula purus. Suspendisse et nibh id libero lobortis ullamcorper. Suspendisse iaculis turpis vitae lacus. Vestibulum commodo, nulla nec eleifend pretium, massa pede placerat neque, non dignissim sem pede non mi. Nunc ut tellus in velit convallis molestie. Quisque in urna nec pede semper rhoncus. Proin posuere turpis id tellus. Curabitur suscipit egestas est.
</body>
</html>
< head>
< title> Untitled Document</ title>
< meta http- equiv= "Content-Type" content= "text/html; charset=iso-8859-1" >
< style type= "text/css" >
div. rechterkolom, div. rechterkolom- titel {
clear: both;
border: 1px dashed #CCCCCC;
border- left: 3px double #CCCCCC;
background- color: #F0F0F0;
text- align: right;
width: 175px;
width: 100px;
margin: 0px;
padding: 4px;
float: right;
color: #333333;
font- size: 10pt;
font- family: Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, sans- serif;
- moz- border- radius: 6px 6px 6px 6px;
}
div. rechterkolom- titel {
background- color: #E9E9E9;
text- align: left;
font- size: 11pt;
font- weight: bold;
}
div. inhoud {
border: 1px dashed #FF0000;
text- align: center;
padding: 4px;
float: right;
margin: 0px;
}
</ style></ head>
< body>
< div class = "rechterkolom" align= "right" >< input type= "button" value= "Go" ></ div>
< div class = "inhoud" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus tempus. Nulla ut tortor. Integer ac lectus. Maecenas commodo vehicula purus. Suspendisse et nibh id libero lobortis ullamcorper. Suspendisse iaculis turpis vitae lacus. Vestibulum commodo, nulla nec eleifend pretium, massa pede placerat neque, non dignissim sem pede non mi. Nunc ut tellus in velit convallis molestie. Quisque in urna nec pede semper rhoncus. Proin posuere turpis id tellus. Curabitur suscipit egestas est.
</ body>
</ html>
Nu, wat staat in de div van 'rechterkolom' heeft een variabele lengte, maar het lukt me niet de 2 gewoon langs elkaar te zetten? gewoon zo:
---------
| | |
---------
Maar ze komen de hele tijd boven elkaar?
vinTage - 04/04/2005 11:45 (laatste wijziging 04/04/2005 12:01)
Nieuw lid
uhm, ik plak net jou code in dreamweaver, maar bij mij is het resultaat gewoon zoals jij het wilt hebben
Citaat:
Nu, wat staat in de div van 'rechterkolom' heeft een variabele lengte, maar het lukt me niet de 2 gewoon langs elkaar te zetten? gewoon zo:
---------
| | |
---------
zo dus
edit ow, dat is in IE wel goed, maar niet in Fx
edit 2
(gedelete omdat dat ook niet goed was)
maar je bent zoiezo je div vergeten te sluiten <div class="inhoud">blabla</div>
Frederic - 04/04/2005 11:51
PHP ver gevorderde
Jep, IE doet het perfect, maar hoe krijg ik dat ook zo in FF?
Gesponsorde links
Dit onderwerp is gesloten .