Virusscanner tips?
Automatische hoogte-instelling box in CSS
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)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>
<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)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<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>
<?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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.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;
}
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
Dat die 4 divs te hoog staan? Als je de padding weghaalt gaan ze een stuk omlaag.
Dat reserveren niet binnen de zwarte lijn valt? Dat komt door max-height.
Daarnaast zou ik de boxes allemaal een hoogte geven met een overflow hidden. De content die IN het blokje valt kan je dan wrappen in een bepaalde div en het formulier erbuiten. Zo heb je altijd dezelfde hoogste aan boxes ookal is je content kleiner.
Ik weet niet of dit jou probleem oplost anders graag zoals -SanThe- aangeeft betere toelichting geven.