Hallo zusammen
Nach dem ich nun endlich ein Layout mit Photoshop erstellt und geslict habe wollte ich diese in Tabelles packen.
INDEX:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div align="center" class="full">
<table>
<tr>
<td>
<table>
<tr>
<td class="left" valign="top">
<table class="leftmaster">
<tr>
<td class="lefttop"> </td>
</tr>
</table>
</td>
<td valign="top">
<table>
<tr>
<td colspan="2" class="middletop"> </td>
</tr>
<tr>
<td colspan="2" class="clear"> </td>
</tr>
<tr>
<td valign="top">
<table>
<tr>
<td class="menutop"> </td>
</tr>
<tr>
<td class="menu"> </td>
</tr>
<tr>
<td class="menubottom"> </td>
</tr>
</table>
</td>
<td valign="top">
<table>
<tr>
<td class="contenttop"> </td>
</tr>
<tr>
<td class="content"> </td>
</tr>
<tr>
<td class="contentbottom"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="right" valign="top">
<table class="rightmaster">
<tr>
<td class="righttop"> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
CSS:
/* CSS Document */
Body {
background-color: #CCCCCC;
margin: 0px;
padding: 0px;
}
table {
border-collapse: collapse;
padding: 0px;
margin: 0px;
}
td {
border-collapse: collapse;
padding: 0px;
margin: 0px;
}
.full {
width: 100%;
}
.mastertbl {
width: 984px;
}
.leftmaster {
height: auto;
}
.lefttop {
width: 96px;
height: 240px;
background-image: url(../bilder/skrel_01.jpg);
background-repeat: no-repeat;
}
.left {
width: 96px;
background-image: url(../bilder/skrel_15.jpg);
background-repeat: repeat-y;
}
.rightmaster {
height: auto;
}
.righttop {
width: 96px;
height: 240px;
background-image: url(../bilder/skrel_03.jpg);
background-repeat: no-repeat;
}
.right {
width: 96px;
background-image: url(../bilder/skrel_16.jpg);
background-repeat: repeat-y;
}
.middletop {
width: 792px;
height: 160px;
background-image: url(../bilder/skrel_02.jpg);
background-repeat: no-repeat;
}
.clear {
height: 20px;
width: 100%;
}
.menutop {
width: 165px;
height: 39px;
background-image: url(../bilder/skrel_05.jpg);
background-repeat: no-repeat;
}
.menu {
width: 165px;
background-image: url(../bilder/skrel_07.jpg);
background-repeat: repeat-y;
}
.menubottom {
width: 165px;
height: 33px;
background-image: url(../bilder/skrel_11.jpg);
background-repeat: no-repeat;
}
.contenttop {
width: 627px;
height: 39px;
background-image: url(../bilder/skrel_06.jpg);
background-repeat: no-repeat;
}
.content {
width: 627px;
background-image: url(../bilder/skrel_08.jpg);
background-repeat: repeat-y;
}
.contentbottom {
width: 627px;
height: 33px;
background-image: url(../bilder/skrel_12.jpg);
background-repeat: no-repeat;
}
Passt alles so weit....
Doch wenn ich das Fenster kleiner macher wird statt eines Scrollbalken angezeigt, die Bilder abgeschnitten! Kann mir jemand sagen was ich falsch mache? Und was ich dagegen tun kann?
Danke schon mal im Voraus.
MfG
Skulldred