UL gaat over div heen.
Ik heb een opsomming uit een database, dit is overigens ook meteen een link.
Deze opsomming staat in div A, in div A onder deze opsomming staat ook div B.
In div B staat tekst en is een wit vlak.
Als er meer als 2 regels in de opsomming staan wordt de div niet verschoven maar de opsomming gaat dwars door div B heen (het witte vlak blijft dus staan) maar de tekst die in div B stond verschuift wel naar beneden.
hoe kan ik dit oplossen?
alvast bedankt. :)
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
<style>
.verhaal_naam {
width: 700px;
height: 10px;
background-color: #FFF;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
margin_bottom: 5px;
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
}
</style>
.verhaal_naam {
width: 700px;
height: 10px;
background-color: #FFF;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
margin_bottom: 5px;
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
}
</style>
div A met UL:
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
49
50
51
52
53
54
55
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
49
50
51
52
53
54
55
.informatie {
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 5px;
background-color:#DDDDD2;
}
.informatie ul {
display: block;
list-style:none;
margin:0px 0px 0px 0px;
float:left;
}
.informatie ul li {
display: block;
float:left;
font-family:verdana;
font-size:10px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
width: 685px;
margin-left: -35px;
}
.informatie ul li a:link, .informatie ul li a:active, .informatie ul li a:visited {
display: block;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
width: 685px;
font-family:verdana;
font-size:10px;
color:#000;
text-decoration:none;
}
.informatie ul li a:hover, .informatie ul li a.active {
display: block;
width: 685px;
font-family:verdana;
font-size:10px;
color:#000;
background-color: #FFF;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 5px;
background-color:#DDDDD2;
}
.informatie ul {
display: block;
list-style:none;
margin:0px 0px 0px 0px;
float:left;
}
.informatie ul li {
display: block;
float:left;
font-family:verdana;
font-size:10px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
width: 685px;
margin-left: -35px;
}
.informatie ul li a:link, .informatie ul li a:active, .informatie ul li a:visited {
display: block;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
width: 685px;
font-family:verdana;
font-size:10px;
color:#000;
text-decoration:none;
}
.informatie ul li a:hover, .informatie ul li a.active {
display: block;
width: 685px;
font-family:verdana;
font-size:10px;
color:#000;
background-color: #FFF;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}
de html pagina:
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
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
<?php
echo "<ul>";
while($row_dag = mysql_fetch_array($haal_data_dagen)){
echo "<li><a href=\"harderwijk_tijd.php?jaar=".$_GET['jaar']."&maand=".$_GET['maand']."&dag=".$_GET['dag']."&verhaal=".$row_dag['id']."\"><b>".$row_dag['naam']."</b> - gepost door: ".$row_dag['gebruiker']."</a></li>";
}
echo "</ul>";
echo "<br /> <br /><br />";
if(!isset($verhaal))
{
//niks laten zien
//eigen verhaal neerzetten?
if(isset($_SESSION['gebruikersnaam'])){
echo "<div class=\"verhaal_naam\">Klik <a href=\"nieuw_verhaal.php?dag=".$_GET['dag']."\">hier</a> als u uw eigen verhaal wilt posten op deze dag.<br /></div>";
}else{
echo "<div class=\"verhaal_naam\">U moet zijn ingelogd om zelf een verhaal te kunnen plaatsen.<br /></div>";
}
}else{
$haal_verhaal = mysql_query("SELECT * FROM hido_tijdsbalk_content WHERE id = '".$verhaal."'");
while($row_verhaal = mysql_fetch_array($haal_verhaal)){
echo "<div class=\"verhaal_naam\">".$row_verhaal['naam']." door ".$row_verhaal['gebruiker']." - <a href=\"harderwijk_tijd.php?jaar=".$_GET['jaar']."&maand=".$_GET['maand']."&dag=".$_GET['dag']."\">terug</a></div>";
echo "<div class=\"verhaal_content\"><table><tr><td width=\"250\"><a href=\"".$row_verhaal['afbeelding']."\" target=\"blank\"><img src=\"".$row_verhaal['afbeelding']."\" width=\"250\" height=\"250\"></a></td><td valign=\"top\">".$row_verhaal['content']."</td></tr></table></div>";
}
}
}
?>
</div>
echo "<ul>";
while($row_dag = mysql_fetch_array($haal_data_dagen)){
echo "<li><a href=\"harderwijk_tijd.php?jaar=".$_GET['jaar']."&maand=".$_GET['maand']."&dag=".$_GET['dag']."&verhaal=".$row_dag['id']."\"><b>".$row_dag['naam']."</b> - gepost door: ".$row_dag['gebruiker']."</a></li>";
}
echo "</ul>";
echo "<br /> <br /><br />";
if(!isset($verhaal))
{
//niks laten zien
//eigen verhaal neerzetten?
if(isset($_SESSION['gebruikersnaam'])){
echo "<div class=\"verhaal_naam\">Klik <a href=\"nieuw_verhaal.php?dag=".$_GET['dag']."\">hier</a> als u uw eigen verhaal wilt posten op deze dag.<br /></div>";
}else{
echo "<div class=\"verhaal_naam\">U moet zijn ingelogd om zelf een verhaal te kunnen plaatsen.<br /></div>";
}
}else{
$haal_verhaal = mysql_query("SELECT * FROM hido_tijdsbalk_content WHERE id = '".$verhaal."'");
while($row_verhaal = mysql_fetch_array($haal_verhaal)){
echo "<div class=\"verhaal_naam\">".$row_verhaal['naam']." door ".$row_verhaal['gebruiker']." - <a href=\"harderwijk_tijd.php?jaar=".$_GET['jaar']."&maand=".$_GET['maand']."&dag=".$_GET['dag']."\">terug</a></div>";
echo "<div class=\"verhaal_content\"><table><tr><td width=\"250\"><a href=\"".$row_verhaal['afbeelding']."\" target=\"blank\"><img src=\"".$row_verhaal['afbeelding']."\" width=\"250\" height=\"250\"></a></td><td valign=\"top\">".$row_verhaal['content']."</td></tr></table></div>";
}
}
}
?>
</div>
het ziet er onderin misschien een beetje slordig uit, normaal ben ik wel van het netjes scripten (waarschijnlijk dat het nu dan ook fout gaat) maar heb niet veel tijd om netjes te gaan scripten. (sorry hiervoor alvast)
alvast bedankt.
toegevoegd.
toch bedankt :)
Mooi dat je het opgelost hebt :)