Table width, tekst gaat erbuiten
Hallo, ik wil mijn tekst BINNEN een bepaalde tabel hebben. Ik weet niet precies hoe dat moet.. heb al aantal dingen geprobeerd zoals max-width maar dan blijft de tekst erbuiten lopen.. hij moet automatisch verspringen naar volgende regel.. hoe doe ik dit??
Laat eens een voorbeeld zien? Als je een tabel gebruikt (ik hoop dat het om tabulaire data gaat?) zou de tekst er nooit zomaar buiten kunnen lopen?
Met max-width geef je de tabel juist een breedte die niet groter kan zijn dan het opgegeven getal. Als je een tabel of column geen width geeft dan stretched het volledig.
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
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
<?php
include 'config.php';
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
$naam = $_POST['naam'];
$subject = $_POST['onderwerp'];
$bericht = $_POST['bericht'];
$query = "INSERT INTO berichten (user, subject, bericht)
VALUES ('$naam', '$subject', '$bericht')";
$result = mysql_query($query)
or die(mysql_error());
header ('refresh: 3; url=gastenboek.php');
echo "Uw bericht is toegevoegd, u wordt terug gestuurd.";
}
else
{
$query = "SELECT *
FROM berichten";
$res = mysql_query($query) or die(mysql_error());
echo "<div id='container'>";
echo "<br />";
date_default_timezone_set('Europe/Amsterdam');
$today = date("d/n/Y - H:i:s");
while($row = mysql_fetch_assoc($res))
{
?>
<table border='1'>
<tr>
<td><?php echo $row['user']; ?></td>
<td><?php echo $row['bericht']; ?></td>
</tr>
<tr>
<td><?php echo $today; ?></td>
</tr>
</table><br />
<?php
}
echo "<br /><br />";
?>
<form action="gastenboek.php" method="post">
Naam: <input type="text" name="naam"/>
Onderwerp: <input type="text" name="onderwerp" style="width:163px;"/><br />
<textarea name="bericht" cols="53" rows="10"></textarea><br/>
<input type="submit" name="submit" value="Bericht plaatsen" style="width:450px;"/>
</form>
<?php
}
echo "</div>";
?>
<style type="text/css">
#container
{
margin-left: 440px;
}
td
{
max-width: 200px;
}
</style>
include 'config.php';
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
$naam = $_POST['naam'];
$subject = $_POST['onderwerp'];
$bericht = $_POST['bericht'];
$query = "INSERT INTO berichten (user, subject, bericht)
VALUES ('$naam', '$subject', '$bericht')";
$result = mysql_query($query)
or die(mysql_error());
header ('refresh: 3; url=gastenboek.php');
echo "Uw bericht is toegevoegd, u wordt terug gestuurd.";
}
else
{
$query = "SELECT *
FROM berichten";
$res = mysql_query($query) or die(mysql_error());
echo "<div id='container'>";
echo "<br />";
date_default_timezone_set('Europe/Amsterdam');
$today = date("d/n/Y - H:i:s");
while($row = mysql_fetch_assoc($res))
{
?>
<table border='1'>
<tr>
<td><?php echo $row['user']; ?></td>
<td><?php echo $row['bericht']; ?></td>
</tr>
<tr>
<td><?php echo $today; ?></td>
</tr>
</table><br />
<?php
}
echo "<br /><br />";
?>
<form action="gastenboek.php" method="post">
Naam: <input type="text" name="naam"/>
Onderwerp: <input type="text" name="onderwerp" style="width:163px;"/><br />
<textarea name="bericht" cols="53" rows="10"></textarea><br/>
<input type="submit" name="submit" value="Bericht plaatsen" style="width:450px;"/>
</form>
<?php
}
echo "</div>";
?>
<style type="text/css">
#container
{
margin-left: 440px;
}
td
{
max-width: 200px;
}
</style>
Gewijzigd op 17/11/2011 22:56:12 door pietje akkers
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div class="bericht">
<span class="naam">Naam: Jantje</span><span class="datum">17 nov. 2011</span>
<p>
Woepetie woppety.
</p>
</div>
<span class="naam">Naam: Jantje</span><span class="datum">17 nov. 2011</span>
<p>
Woepetie woppety.
</p>
</div>
Gewijzigd op 17/11/2011 22:59:26 door - Ariën -
En wat zou ik dan in die class/div moet en doen om tot dat resultaat te komen dat het beetje netjes is?
Ligt er aan hoe jij het wilt hebben.
Ik wil dat het bericht naar de volgende regel springt als hij 200px heeft bereikt.. heb alles al geprobeert..
Gewijzigd op 17/11/2011 23:23:11 door - Ariën -
Code (php)
en het werkt ook niet als ik een css maak:
.bericht
{
width: 200px;
}
Dit doe je in CSS. Niet in HTML.
laat eens een voorbeeld zien. Ik vind het maar vreemd dat het doorloopt.
Gewijzigd op 17/11/2011 23:31:51 door - Ariën -
Het stylen doe je in je CSS bestand.
Je moet geen width meer inline zetten, anders zal hij de CSS overrulen.
Dit moet echt zo werken.
Anders moet je even zoals aar zegt je code laten zien.
Code (php)
En een tastbaar voorbeeld is anders ook erg makkelijk.
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
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
<?php
include 'config.php';
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
$naam = $_POST['naam'];
$subject = $_POST['onderwerp'];
$bericht = $_POST['bericht'];
$query = "INSERT INTO berichten (user, subject, bericht)
VALUES ('$naam', '$subject', '$bericht')";
$result = mysql_query($query)
or die(mysql_error());
header ('refresh: 3; url=gastenboek.php');
echo "Uw bericht is toegevoegd, u wordt terug gestuurd.";
}
else
{
$query = "SELECT *
FROM berichten";
$res = mysql_query($query) or die(mysql_error());
echo "<div id='container'>";
echo "<br />";
date_default_timezone_set('Europe/Amsterdam');
$today = date("d/n/Y - H:i:s");
while($row = mysql_fetch_assoc($res))
{
?>
<div class="bericht">
<span class="naam"><?php echo $row['user']; ?></span><span class="datum"><?php echo $today; ?></span>
<p>
<?php echo $row['bericht']; ?>
</p>
</div>
<?php
}
echo "<br /><br />";
?>
<form action="gastenboek.php" method="post">
Naam: <input type="text" name="naam"/>
Onderwerp: <input type="text" name="onderwerp" style="width:163px;"/><br />
<textarea name="bericht" cols="53" rows="10"></textarea><br/>
<input type="submit" name="submit" value="Bericht plaatsen" style="width:450px;"/>
</form>
<?php
}
echo "</div>";
?>
<style type="text/css">
#container
{
margin-left: 440px;
}
#bericht
{
width: 200px;
}
</style>
include 'config.php';
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
$naam = $_POST['naam'];
$subject = $_POST['onderwerp'];
$bericht = $_POST['bericht'];
$query = "INSERT INTO berichten (user, subject, bericht)
VALUES ('$naam', '$subject', '$bericht')";
$result = mysql_query($query)
or die(mysql_error());
header ('refresh: 3; url=gastenboek.php');
echo "Uw bericht is toegevoegd, u wordt terug gestuurd.";
}
else
{
$query = "SELECT *
FROM berichten";
$res = mysql_query($query) or die(mysql_error());
echo "<div id='container'>";
echo "<br />";
date_default_timezone_set('Europe/Amsterdam');
$today = date("d/n/Y - H:i:s");
while($row = mysql_fetch_assoc($res))
{
?>
<div class="bericht">
<span class="naam"><?php echo $row['user']; ?></span><span class="datum"><?php echo $today; ?></span>
<p>
<?php echo $row['bericht']; ?>
</p>
</div>
<?php
}
echo "<br /><br />";
?>
<form action="gastenboek.php" method="post">
Naam: <input type="text" name="naam"/>
Onderwerp: <input type="text" name="onderwerp" style="width:163px;"/><br />
<textarea name="bericht" cols="53" rows="10"></textarea><br/>
<input type="submit" name="submit" value="Bericht plaatsen" style="width:450px;"/>
</form>
<?php
}
echo "</div>";
?>
<style type="text/css">
#container
{
margin-left: 440px;
}
#bericht
{
width: 200px;
}
</style>
Screen is hier te zien:
http://imageshack.us/photo/my-images/689/voorbeeldmh.png/
Je snapt het verschil niet tussen een class en id.
#bericht == <div id="bericht">
.bericht == <div class="bericht">
Dus je moet in je css # veranderen naar een punt. (.bericht)
Toevoeging op 18/11/2011 10:26:25:
ik snap het echt niet?
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test </title>
<style type="text/css">
#container
{
margin-left: 440px;
}
.bericht
{
width: 200px;
border:1px solid #eee;
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* IE 5.5+ */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera */
white-space: -o-pre-wrap; /* Opera 7 */
}
</style>
</head>
<body>
<div id="container">
<div class="bericht">
<span class="naam">Piet</span><span class="datum">18-11-2011</span>
HEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEle lange tekst
</div>
<div class="bericht">
<span class="naam">Piet</span><span class="datum">18-11-2011</span>
<p>
HEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEle lange tekst
</p>
</div>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test </title>
<style type="text/css">
#container
{
margin-left: 440px;
}
.bericht
{
width: 200px;
border:1px solid #eee;
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* IE 5.5+ */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera */
white-space: -o-pre-wrap; /* Opera 7 */
}
</style>
</head>
<body>
<div id="container">
<div class="bericht">
<span class="naam">Piet</span><span class="datum">18-11-2011</span>
HEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEle lange tekst
</div>
<div class="bericht">
<span class="naam">Piet</span><span class="datum">18-11-2011</span>
<p>
HEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEle lange tekst
</p>
</div>
</div>
</body>
</html>
Ja, maar dat kan toch nooit. Ik moet toch gewoon de breedte kunnen instellen, ik snap er echt niets van?
kan je echt geen voorbeeld laten zien? Met width in css kan je gewoon de breedte instellen.
Ik weet al wat het is, natuurlijk doet hij dat als het één lang woord is.. doe ik het met spaties, doet hij het gewoon (bron: pfz.nl)
overflow'.
En bovendien, bij het maken van een layout werk je nooit met ellen-lange strings. Gebruik dan iets van Lorum ipsum.
Ja, dat is erg logisch, kijk ook eens naar 'En bovendien, bij het maken van een layout werk je nooit met ellen-lange strings. Gebruik dan iets van Lorum ipsum.
Gewijzigd op 18/11/2011 20:09:45 door - Ariën -