Ik zit met een kleine uitdaging:
Ik heb op een pagina een kader gedefinieerd ZONDER vaste hoogte-instelling. Deze hoogte-instelling is nl. afhankelijk van de vulling van dit kader. Alleen met de code zoals ik hem heb gedefineerd is het kader te klein.
De html-code: (index.php)
<section>
<article>
<div class="kader900">
<?php
if($lTest == 0 ) {
include "include/sys_melding.php";
} elseif($lTest == 1) {
include "include/winkel.inc.php";
} elseif($lTest == 2) {
include "include/invulblad.inc.php";
} elseif($lTest == 3) {
include "include/samenvatting.inc.php";
} elseif($lTest == 4) {
include "include/afronden.inc.php";
}
?>
</div>
</article>
</section>
De html-code: (winkel.inc.php)
<section>
<?php
$nTeller = 1;
while($rowConcerten = mysqli_fetch_array($cResultConcerten)) {
if($nTeller == 4) {
$cClass = "box_rechts";
} else {
$cClass = "box_links";
}
$nMax = $rowConcerten['aantal_stoelen'] - $rowConcerten['gereserveerd'];
if($nMax > 10) {
$nMax = 10;
}
if($nMax == 0){
$cKnopTekst = "Uitverkocht";
} else {
$cKnopTekst = "Reserveren";
}
?>
<div class="<?php echo $cClass ; ?>">
<?php if($nMax == 0 ) { ?>
<div id="uitverocht">Uitverkocht</div>
<?php } ?>
<figure class="winkel_afbeelding">
<img class="winkel_afbeelding" src="<?php echo $rowConcerten['afbeelding'] ; ?>" />
</figure>
<div class="bericht txt_midden"><?php echo VolleDatumKort($rowConcerten['datum']) ; ?></div>
<div class="bericht txt_midden"><?php echo $rowConcerten['omschrijving'] ; ?></div>
<div class="standaardregel">Er zijn nog <?php echo ($rowConcerten['aantal_stoelen'] - $rowConcerten['gereserveerd']) ; ?> plaatsen beschikbaar</div>
<div class="standaardregel">Prijs per stoel: € <?php echo NederlandsBedrag($rowConcerten['prijs']) ; ?></div>
<?php if($nMax > 0 ) { ?>
<form action="index.php?concert=<?php echo $rowConcerten['id'] ; ?>" method="POST">
<div class="standaardregel txt_midden">Aantal kaarten: <input type="number" class="standaardregel" name="aantal" min="0" max="<?php echo $nMax ; ?>" title="Selecteer hier het aantal gewenste kaarten (max 10)" size="20px" value="0" /></div>
<div class="txt_midden"><input class="smalle_knop" type="submit" name="submit" title="Leg uw reservering vast" value="<?php echo $cKnopTekst ; ?>" /></div>
</form>
<?php } else { ?>
<div class="standaardregel txt_midden">Aantal kaarten: <input type="number" class="standaardregel" name="aantal" min="0" max="<?php echo $nMax ; ?>" size="20px" value="0" /></div>
<div class="txt_midden"><input class="smalle_knop" type="submit" name="submit" title="Helaas zijn de kaarten voor dit concert uitverkocht. Probeer een concert op een ander tijdstip" value="<?php echo $cKnopTekst ; ?>" /></div>
<?php } ?>
</div>
<?php
$nTeller++;
if($nTeller == 5) {
$nTeller = 1;
}
}
?>
</section>
De CSS:
.kader900 {
display: block;
top: 100px;
width: 900px;
margin-left: auto;
margin-right: auto;
border: solid black 2px;
padding: 20px;
background-color: whitesmoke;
-webkit-box-shadow: 6px 6px 9px darkslategray;
box-shadow: 6px 6px 9px darkslategray;
}
.box_links {
position: relative;
width: 179px;
min-height: 300px;
max-height: 300px;
border: solid black 1px;
float: left;
margin-right: 25px;
margin-left: 5px;
padding: 10px;
}
.box_rechts {
position: relative;
width: 179px;
min-height: 300px;
max-height: 300px;
border: solid black 1px;
float: right;
margin-right: 5px;
padding: 10px;
}
Waar gaat het nu fout in de css-class kader900?
Kijk eens voor een voorbeeld op http://cco-harderwijk.nl/v2
George