De PHPhulp kroeg
Nieuwssysteem
Ik heb een nieuwssysteem wat mijn berichten na 50 woorden afkapt. Er wordt dan netjes een korte tekst weergegeven. En als je dan op Lees meer duwt krijg je de volledige tekst te zien. Dit wordt gedaan met Javascript.
Maar als je dan de tekst uitklapt wordt deze div langer. De div van mijn nieuwsfoto blijft staan en staat dan dus ook langs de tekst van het vorige nieuwsitem.
Zie: http://www.zscwesterhoven.nl/ voor een voorbeeld (meteen vooraan onder nieuws)
Weet iemand hier een oplossing voor?
Dit is het nieuwsscript:
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
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
#pagina .nieuwsmeer {
text-align:right;
font-size:90%;
font-style:Italic;
}
#pagina .completetekst {
display:none;
}
#pagina .kortetekst {
}
#pagina .nieuwsitem {
margin-left: 30px;
width: 620px;
}
#pagina .nieuwstekst {
padding: 5px;
padding-top: 0px;
vertical-align: top;
width: 405px;
float: left;
}
#pagina .nieuwsfoto {
margin: 0px 0px 0px 410px;
text-align:right;
vertical-align: top;
padding: 5px;
width: 205px;
height: 250px;
}
text-align:right;
font-size:90%;
font-style:Italic;
}
#pagina .completetekst {
display:none;
}
#pagina .kortetekst {
}
#pagina .nieuwsitem {
margin-left: 30px;
width: 620px;
}
#pagina .nieuwstekst {
padding: 5px;
padding-top: 0px;
vertical-align: top;
width: 405px;
float: left;
}
#pagina .nieuwsfoto {
margin: 0px 0px 0px 410px;
text-align:right;
vertical-align: top;
padding: 5px;
width: 205px;
height: 250px;
}
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
<script type="text/javascript">
function nieuwsitem(value){
var x = 'nieuws_' + value + 'm';
var y = 'nieuws_' + value + 'l';
if(document.getElementById(x).style.display == 'none' || document.getElementById(x).style.display == '') {
document.getElementById(y).style.display = 'none';
document.getElementById(x).style.display = 'block';
}
else {
document.getElementById(x).style.display = 'none';
document.getElementById(y).style.display = 'block';
}
}
</script>
function nieuwsitem(value){
var x = 'nieuws_' + value + 'm';
var y = 'nieuws_' + value + 'l';
if(document.getElementById(x).style.display == 'none' || document.getElementById(x).style.display == '') {
document.getElementById(y).style.display = 'none';
document.getElementById(x).style.display = 'block';
}
else {
document.getElementById(x).style.display = 'none';
document.getElementById(y).style.display = 'block';
}
}
</script>
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<?
$query = "
SELECT
id,
van,
tot,
titel,
nieuws,
foto,
prioriteit
FROM
Nieuws
WHERE
DATE_FORMAT(NOW(),'%Y-%m-%d') >= van
AND
DATE_FORMAT(NOW(),'%Y-%m-%d') <= tot
ORDER BY
id DESC
";
$res=mysql_query($query) or die(mysql_error());
if (mysql_num_rows($res) > 0) {
echo '<b>Nieuws</b><br>';
while ($row=mysql_fetch_array($res)){
if ( $row['prioriteit'] == 'X') {
$rood = 1;
}
else {
if ( $row['id'] <= $gelezen ) {
$rood = 0;
}
else {
$rood = 1;
}
}
if ( $rood == 1 ) {
$output = '<p style="color:red;"><b>'. html_entity_decode($row['titel']). '</b></p>';
$output .= '<p class="insp" style="color:red;">';
}
else {
$output = '<p><b>'. html_entity_decode($row['titel']). '</b></p>';
$output .= '<p class="insp">';
}
$nieuws = nl2br(html_entity_decode($row['nieuws']), false);
$woorden = explode(" ", $nieuws);
$totaalwoorden = count($woorden);
if ( $totaalwoorden > $aantalwoorden ) {
$output .= '<div class="kortetekst" id="nieuws_'. $row['id']. 'l">';
for ($i = 0; $i < $aantalwoorden; $i++) {
if ( $kortetekst == '' ) {
$kortetekst = $woorden[$i];
}
else {
$kortetekst .= ' '. $woorden[$i];
}
}
$kortetekst .= '.....';
$output .= $kortetekst;
$output .= '<br>';
$output .= '<p class="nieuwsmeer"><a style="cursor:pointer;" onclick="nieuwsitem('. $row['id']. ');">Lees meer</a></p><br>';
$output .= '</div>';
$output .= '<div class="completetekst" id="nieuws_'. $row['id']. 'm">';
$output .= $nieuws;
$output .= '<br>';
$output .= '<p class="nieuwsmeer"><a style="cursor:pointer;" onclick="nieuwsitem('. $row['id']. ');">Lees minder</a></p><br>';
$output .= '</div>';
$kortetekst = '';
}
else {
$output = $nieuws;
}
echo '<div class="nieuwsitem">';
echo '<div class="nieuwstekst">';
echo $output;
echo '</p>';
echo '</div>';
echo '<div class="nieuwsfoto">';
if ( $row['foto'] != '' ) {
echo '<img src="'. $row['foto']. '" alt="'. html_entity_decode($row['titel']). '">';
}
echo '</div>';
echo '</div>';
$rood = 0;
}
}
?>
$query = "
SELECT
id,
van,
tot,
titel,
nieuws,
foto,
prioriteit
FROM
Nieuws
WHERE
DATE_FORMAT(NOW(),'%Y-%m-%d') >= van
AND
DATE_FORMAT(NOW(),'%Y-%m-%d') <= tot
ORDER BY
id DESC
";
$res=mysql_query($query) or die(mysql_error());
if (mysql_num_rows($res) > 0) {
echo '<b>Nieuws</b><br>';
while ($row=mysql_fetch_array($res)){
if ( $row['prioriteit'] == 'X') {
$rood = 1;
}
else {
if ( $row['id'] <= $gelezen ) {
$rood = 0;
}
else {
$rood = 1;
}
}
if ( $rood == 1 ) {
$output = '<p style="color:red;"><b>'. html_entity_decode($row['titel']). '</b></p>';
$output .= '<p class="insp" style="color:red;">';
}
else {
$output = '<p><b>'. html_entity_decode($row['titel']). '</b></p>';
$output .= '<p class="insp">';
}
$nieuws = nl2br(html_entity_decode($row['nieuws']), false);
$woorden = explode(" ", $nieuws);
$totaalwoorden = count($woorden);
if ( $totaalwoorden > $aantalwoorden ) {
$output .= '<div class="kortetekst" id="nieuws_'. $row['id']. 'l">';
for ($i = 0; $i < $aantalwoorden; $i++) {
if ( $kortetekst == '' ) {
$kortetekst = $woorden[$i];
}
else {
$kortetekst .= ' '. $woorden[$i];
}
}
$kortetekst .= '.....';
$output .= $kortetekst;
$output .= '<br>';
$output .= '<p class="nieuwsmeer"><a style="cursor:pointer;" onclick="nieuwsitem('. $row['id']. ');">Lees meer</a></p><br>';
$output .= '</div>';
$output .= '<div class="completetekst" id="nieuws_'. $row['id']. 'm">';
$output .= $nieuws;
$output .= '<br>';
$output .= '<p class="nieuwsmeer"><a style="cursor:pointer;" onclick="nieuwsitem('. $row['id']. ');">Lees minder</a></p><br>';
$output .= '</div>';
$kortetekst = '';
}
else {
$output = $nieuws;
}
echo '<div class="nieuwsitem">';
echo '<div class="nieuwstekst">';
echo $output;
echo '</p>';
echo '</div>';
echo '<div class="nieuwsfoto">';
if ( $row['foto'] != '' ) {
echo '<img src="'. $row['foto']. '" alt="'. html_entity_decode($row['titel']). '">';
}
echo '</div>';
echo '</div>';
$rood = 0;
}
}
?>
Gewijzigd op 10/10/2014 20:09:35 door D B
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
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
Dit heb je nu:
------------------- -------------------
| | | |
| | | |
| Nieuwsbericht | | Foto |
| | | |
| | | |
| | | |
------------------- -------------------
Wat als je er een container omheen maakt en die hoger of lager laat worden?
--- container ----------------------------------
| |
| ------------------- ------------------- |
| | | | | |
| | | | | |
| | Nieuwsbericht | | Foto | |
| | | | | |
| | | | | |
| | | | | |
| ------------------- ------------------- |
| |
------------------------------------------------
tadaaaaa
--- container ----------------------------------
| |
| ------------------- ------------------- |
| | | | | |
| | | | | |
| | Nieuwsbericht | | Foto | |
| | | | | |
| | | | | |
| | | | | |
| | | ------------------- |
| | | |
| | | |
| | | |
| | | |
| | | |
| ------------------- |
| |
------------------------------------------------
------------------- -------------------
| | | |
| | | |
| Nieuwsbericht | | Foto |
| | | |
| | | |
| | | |
------------------- -------------------
Wat als je er een container omheen maakt en die hoger of lager laat worden?
--- container ----------------------------------
| |
| ------------------- ------------------- |
| | | | | |
| | | | | |
| | Nieuwsbericht | | Foto | |
| | | | | |
| | | | | |
| | | | | |
| ------------------- ------------------- |
| |
------------------------------------------------
tadaaaaa
--- container ----------------------------------
| |
| ------------------- ------------------- |
| | | | | |
| | | | | |
| | Nieuwsbericht | | Foto | |
| | | | | |
| | | | | |
| | | | | |
| | | ------------------- |
| | | |
| | | |
| | | |
| | | |
| | | |
| ------------------- |
| |
------------------------------------------------
Gewijzigd op 10/10/2014 23:49:20 door Frank Nietbelangrijk
Maar, nieuwsitem is volgens mij al mijn container div, helaas groeit deze alleen niet mee.
Weet je hier nog wat op?
Code (php)
1
clear:both;
moet meegeven. Ik heb een voorbeeld je op codepen gezet: http://codepen.io/anon/pen/emcbH
Let vooral op wat er gebeurt als je de tekst heel veel inkort en als je de <div class="clear"> weghaalt
Gewijzigd op 11/10/2014 11:03:24 door Frank Nietbelangrijk
Wel vreemd dat hij met die extra div erbij de container ook meeneemt. Kun je dit verklaren?
D B op 11/10/2014 14:11:50:
Het werkt inderdaad.
Wel vreemd dat hij met die extra div erbij de container ook meeneemt. Kun je dit verklaren?
Wel vreemd dat hij met die extra div erbij de container ook meeneemt. Kun je dit verklaren?
Mooi dat het werkt :-)
Voor mij lastig om uit te leggen waarom. Onthoud het maar ;-)
Quote:
A floated box is shifted to the left or right until its margin edge touches the containing block edge or the margin edge of another float. If there is a line box, the top of the floated box is aligned with the top of the current line box.
If there isn't enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist. However, line boxes created next to the float are shortened to make room for the margin box of the float. If a shortened line box is too small to contain any further content, then it is shifted downward until either it fits or there are no more floats present. Any content in the current line before a floated box is re-flowed in the first available line on the other side of the float. In other words, if inline boxes are placed on the line before a left float is encountered that fits in the remaining line box space, the left float is placed on that line, aligned with the top of the line box, and then the inline boxes already on the line are moved accordingly to the right of the float (the right being the other side of the left float) and vice versa for rtl and right floats.
If there isn't enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist. However, line boxes created next to the float are shortened to make room for the margin box of the float. If a shortened line box is too small to contain any further content, then it is shifted downward until either it fits or there are no more floats present. Any content in the current line before a floated box is re-flowed in the first available line on the other side of the float. In other words, if inline boxes are placed on the line before a left float is encountered that fits in the remaining line box space, the left float is placed on that line, aligned with the top of the line box, and then the inline boxes already on the line are moved accordingly to the right of the float (the right being the other side of the left float) and vice versa for rtl and right floats.
Dit houdt in dat een element zonder float onder een element met float wordt gepositioneerd. Maar volgens de regels wordt de tekst wel gepositioneerd ten opzichte van de floats. Zie ook http://jsbin.com/cejize/1/watch
Dit kun je wel voorkomen door de floats te clearen, hiermee geef je aan aan welke zijde er wel rekening gehouden moet worden met floats (left, right of both): http://jsbin.com/cejize/2/watch
Aangezien de elementen met een float geen onderdeel uitmaken van de flow van een pagina, zal de parent element "doen alsof ze niet bestaan" (zoals beschreven in de specs). Dus krijgt de parent element een hoogte 0.
Om dit te voorkomen kun je een element met clear:both; als laatste element in de parent element plaatsen. Dat element is geen floating element en zal dus wel onderdeel uitmaken van de flow. Tevens zorgt clear:both; ervoor dat beide zijdes van het element vrij zijn van een floating element. Het element is dus gepositioneerd wanneer alle andere floating elements in de parent element opgehouden zijn. Nu heeft het parent element ineens wel een hoogte!
Nu is er tegenwoordig een mooiere manier om het op te lossen: overflow:hidden; of overflow:auto;. Met de overflow property geef je aan wat er moet gebeuren wanneer de content groter wordt dan de grote van de parent element. In dit geval wordt er door het browser dus wel rekening gehouden met de floating elementen. (overflow:scroll; werkt ook, maar veroorzaakt standaard een scrollbar).