Hypopotamus hat geschrieben:Gernot kannst Du mir nochmal einen Gefallen tun.
Schaumer mal
Also, ich habe mir Dein Gästebuch runtergeladen. Die Style-Blöcke habe ich nicht genauer untersucht. Zunächst mal - ich hoffe, ich darf offen Kritik üben? - muss dringend der Code in ein gutes Layout gebracht werden (Einrückungen und Zeilenumbrüche), denn sonst blickt man da nicht mehr durch und verliert schnell den Überblick. Ich weiß, daß das für Skripte wie PHP oder ASP manchmal recht schwer und aufwändig ist, aber es rechnet sich auf Dauer... Ich habe das mal für einen Block gemacht:
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Gästebuch BunteBlumenWelt</title>
<style>
BODY
{
background-color: #F0F1EF;
background-image: none;
background-position: center;
color: 000000;
scrollbar-face-color: #F0F1EF;
scrollbar-shadow-color: #F0F1EF;
scrollbar-highlight-color: #F0F1EF;
scrollbar-3dlight-color: #F0F1EF;
scrollbar-darkshadow-color: #F0F1EF;
scrollbar-track-color: #F0F1EF;
scrollbar-arrow-color: #000000;
font-size: 9pt;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
TABLE
{
cell-padding: 0;
background-repeat: no-repeat;
cell-spacing: 0;
border: 1;
border-color: #000000;
border-style:solid;
background-color: #FFFFFF;
}
TD
{
font-family: Verdana;
font-size: 9pt;
text-decoration: none;
color: #000000;
}
A
{
color: #4A8667;
font-family: Verdana;
font-size: 9pt;
text-decoration: none;
font-style: none;
font-weight: bold;
cursor: hand;
}
A:hover
{
color: #BBD5BF;
text-decoration: underline;
cursor: hand;
}
TD.mark
{
color: #000000;
font-family: Verdana;
font-size: 9pt;
background-color: #F0F1EF;
}
A.mark
{
color: #FFFF33;
font-family: Verdana;
font-size: 9pt;
text-decoration: none;
font-style: none;
font-weight: bold;
cursor: hand;
}
A.mark:hover
{
color: #E0F8FF;
text-decoration: underline;
cursor: hand;
}
SELECT
{
font-family: Verdana;
font-size: 9pt;
border-color: #000000;
color: #000000;
background-color: #F0F1EF;
border-width: 0;
}
TEXTAREA
{
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #F0F1EF;
scrollbar-highlight-color: #F0F1EF;
scrollbar-3dlight-color: #F0F1EF;
scrollbar-darkshadow-color: #F0F1EF;
scrollbar-track-color: #F0F1EF;
scrollbar-arrow-color: #000000;
font-family: Verdana;
font-size: 9pt;
border-style:solid;
border-color: #000000;
color: #000000;
background-color: FFFFFF;
border-width: 0;
}
INPUT
{
font-family: Verdana;
font-size: 9pt;
border-style:solid;
border-color: #000000;
color: #000000;
background-color: #FFFFFF;
border-width: 0;
}
</style>
</head>
<body>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="30" width="80%">
<tbody>
<tr>
<td background="v.php_files/schatten_01.gif" height="6" width="150"></td>
<td colspan="3" background="v.php_files/schatten_02.gif" height="6"></td>
<td align="right" background="v.php_files/schatten_03.gif" height="6" width="120"></td>
</tr>
<tr>
<td background="v.php_files/schatten_04.gif" height="14" valign="top" width="150"><span style="padding-left: 10px; font-size: 8pt;"><b><nobr>Anonym</nobr></b></span></td>
<td colspan="3" background="v.php_files/schatten_05.gif" height="14" valign="top" nowrap><span style="font-size: 8pt;">Titel:<b> DAs ist ein Test DAs ist ein TestDAs ist ein TestDAs ist ein Test<br></b></span></td>
<td background="v.php_files/schatten_06.gif" height="14" valign="top" width="120"><span style="padding-right: 10px; font-size: 8pt; text-align: left;"><nobr>04.01.2005 17:45</nobr></span></td>
</tr>
<tr>
<td background="v.php_files/schatten_07.gif" height="6" width="150"></td>
<td colspan="3" background="v.php_files/schatten_08.gif" height="6"></td>
<td background="v.php_files/schatten_09.gif" height="6" width="120"></td>
</tr>
</tbody>
</table>
</body>
</html>
Das Problem an Deinem Tabellenkonstrukt ist meiner Meinung nach die Kombination aus einer Höhenbeschränkung (height="14") für das Hintergrundbild und gleichzeitig zu viel Text - das gleiche Problem haben wir in unseren Intranetapplikationen auch oft! Ich habe das Problem mal von der anderen Seite her aufgerollt, nämlich dort, wo der zu lange Text entsteht - und er kann entstehen, weil das INPUT-Tag keine Maximallänge definiert hat. Dort, wo der
Betreff eingegeben werden kann, sollte stehen:
Code: Alles auswählen
<input type="text" name="oben" value="Überschrift" size="40" maxlength="40" onFocus="this.value='';">
Damit kannst Du ganz einfach die Maximallänge begrenzen, und es entstehen nicht so oft die unliebsamen Umbrüche.
Als nächstes habe ich oben in der
Ausgabe des Betreffs schlichtweg ein
nowrap eingefügt - das verhindet ein Umbrechen des Textes, bei zu wenig Platz entsteht halt evtl. eine horizontale Scrollleiste. Aber aus der Kombination
nowrap und
maxlength="40" solltest Du die Textlänge so hinbekommen, daß auch bei kleineren Bildschirmen oder im Fenstermodus das Layout nicht gleich zerreißt.
Viele Grüße,
-Gernot