Volgorde DIV anders dan opbouw
Ik wil bijvoorbeeld div 3 bovenaan,dan 2, 1 en 4.
En de DIV's hebben GEEN vaste hoogte.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="container">
<div class="1">
tekst
</div>
<div class="2">
tekst
</div>
<div class="3">
tekst
</div>
<div class="4">
tekst
</div>
</div>
<div class="1">
tekst
</div>
<div class="2">
tekst
</div>
<div class="3">
tekst
</div>
<div class="4">
tekst
</div>
</div>
Gewijzigd op 11/12/2013 12:00:50 door Sander Z
Ja dat kan
Of bedoel je divs die over elkaar heen gezet zijn?
Kun je iets duidelijker zijn? Het kan namelijk, op tientallen manieren. Bijvoorbeeld met PHP, of gewoon een vaste positie geven, of met javascript etc...
Qua HTML code staan deze dus letterlijk ook in die volgorde geschreven.
Maar nu wil ik met behulp van CSS deze volgorde aanpassen, dus niet de HTML code aanpassen.
Ik wil ze ook gewoon onder elkaar hebben,dus niet links of rechts van elkaar.
Hoop het zo duidelijker gemaakt te hebben
Gewijzigd op 11/12/2013 12:20:31 door Sander Z
kun je nog duidelijker zijn? moeten de divs naast elkaar staan of onder elkaar? hebben ze vaste breedten/hoogten? heb je een link naar je situatie?
Sander Z op 11/12/2013 12:18:27:
Ik wil ze ook gewoon onder elkaar hebben,dus niet links of rechts van elkaar.
Sander Z op 11/12/2013 11:59:49:
En de DIV's hebben GEEN vaste hoogte.
Breedte wordt vast of 100%
Nee, dat kan niet. Je HTML moet geschreven zijn in de volgorde van je pagina, waarom zou je ook anders willen?
Dan kan je gelijk welke div zetten waar je wil.
bv.
{
top: 100px;
left: 100px;
}
Wouter J op 11/12/2013 16:47:07:
waarom zou je ook anders willen?
Wel ja, inderdaad. Waarom zou je dit willen?
Met float: right; gebeurt het wel dat je een div hoger in de code zet, terwijl die div fysisch niet hoger staat.
Er zullen nog wel een aantal redenen zijn.
Maar ik zou het vermijden en ik zou het afraden.
Gewijzigd op 11/12/2013 17:07:51 door Kris Peeters
De reden waarom ik dit zou willen is omdat ik div 4 bijvoorbeeld boven div 2 wil plaatsen, maar div 4 wel afhankelijk is van wat er uiteindelijk in div 2 staat.
Maw, als ik div 4 fysiek als 2e zou gaan schrijven, kan ik deze dus niet afrondencompleet vullen.
Hoe doen jullie dit? Maken jullie een class aan welke jullie vullen met data en die geven jullie uiteindelijk weer??
Gewijzigd op 16/12/2013 08:40:22 door Sander Z
Sorry, je bent nog steeds erg onduidelijk. Waarom moet div 4 boven 2 staan? Kun je misschien in een schets uitleggen wat je wilt bereiken?
Wat je dan zou kunnen doen is door middel van If..Else aangeven of een DIV boven of onder moet worden geplaatst. Dit hoeft dus niet in de html/css code worden gedaan(altans: dit doet php dan).
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
/* Hier komen de divs uiteindelijk in te staan */
$output;
/* Het lijkt me dat je op een of andere manier een loop hebt in je code */
while(..){
/* En hier komt het belangrijke deel */
if($row['position']=='top'){
/* We plaatsen een div VOORAAN de output */
$output = "<div class='box'></div>" . $output;
}else{
/* We plaatsen een div ACHTERAAN de output (daar zorgt de punt voor) */
$output .= "<div class='box'></div>";
}
}
?>
/* Hier komen de divs uiteindelijk in te staan */
$output;
/* Het lijkt me dat je op een of andere manier een loop hebt in je code */
while(..){
/* En hier komt het belangrijke deel */
if($row['position']=='top'){
/* We plaatsen een div VOORAAN de output */
$output = "<div class='box'></div>" . $output;
}else{
/* We plaatsen een div ACHTERAAN de output (daar zorgt de punt voor) */
$output .= "<div class='box'></div>";
}
}
?>
Als dit niet is wat je bedoeld vraag ik me net als anderen hier af wat je nou daadwerkelijk wilt bereiken.
Gewijzigd op 16/12/2013 09:34:25 door phpnuke r
Het is inderdaad PHP wat ik gebruik.
Laten we zeggen ik heb het volgende fysiek als output gekregen vanuit PHP naar HTML:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<div id="content">
Hier staat de content van de pagina
</div>
<div id="title">
<h2>Titel van de pagina</h2>
</div>
Hier staat de content van de pagina
</div>
<div id="title">
<h2>Titel van de pagina</h2>
</div>
Bij het opbouwen van de "div id content" haal ik data op uit een Database. Maar gebaseerd op wat hier gebeurt/opgehaald/weergegeven wordt wil ik de titel van de pagina aanpassen.
Zou ik de "div id titel" al opgebouwd hebben, dan kan ik deze niet meer aanpassen. Vandaar dat ik deze pas op wil bouwen nadat ik "div id content" heb gemaakt. Maar uiteraard wil ik de "div id titel" wel geplaatst hebben boven de "div id content".
Mijn vraag is, is bovenstaande mogelijk? Of is er een manier hoe ik eerst alles ophaal (div id content) en verwerk/klaarzet en daarna pas in de juiste volgorde output?
Gewijzigd op 16/12/2013 10:03:15 door Sander Z
Kun je vertellen wat je bedoelt met fysieke output? Bedoel je dan gewoon html?
Ja met fysieke html output bedoel ik als je bv via je browser de bron bekijkt.
Quote:
Bij het opbouwen van de "div id content" haal ik data op uit een Database. Maar gebaseerd op wat hier gebeurt/opgehaald/weergegeven wordt wil ik de titel van de pagina aanpassen.
Zou ik de "div id titel" al opgebouwd hebben, dan kan ik deze niet meer aanpassen. Vandaar dat ik deze pas op wil bouwen nadat ik "div id content" heb gemaakt. Maar uiteraard wil ik de "div id titel" wel geplaatst hebben boven de "div id content".
Zou ik de "div id titel" al opgebouwd hebben, dan kan ik deze niet meer aanpassen. Vandaar dat ik deze pas op wil bouwen nadat ik "div id content" heb gemaakt. Maar uiteraard wil ik de "div id titel" wel geplaatst hebben boven de "div id content".
Dit is gewoon een kwestie van een goed opgebouwde PHP code. Waarom zou je echo al gebruiken als je inderdaad nog niet weet of er iets boven zou moeten komen te staan? Maak dus gebruik van de code die ik je in mijn vorige post heb gegeven. Sla alle outputs op in variables en mocht er nog iets 'gewijzigd' zijn dan kan je op het laatste moment vooralsnog de outputs verwisselen.
Dus concentreer jezelf op de PHP code en NIET op de html output zoals je nu doet.