SattlereiRudolstadt
Neues Mitglied
Grüße euch,
ich bin neu hier und habe gleich paar Fragen. Ich programmiere mir eine kleine Firmenhomepage die eine 100 % Höhe hat. Zu Anfangs hat dies geklappt, aber Dreamweaver hat mir jetzt unter dem untersten Container ein Art Leerspalte eingefügt. Ich habe oben ein Head Bereich, dann ein Body der sich der Höhe anpasst und ein Foot Bereich. Wenn man die Seite betrachten hört alles auch an passender Stelle auf und die Seite ist in der Höhe ganz gefüllt. Unter dem Foot Bereich taucht seid neusten noch ein weiteres Feld auf, so das auf der rechten Seite ein Hässlicher Scrollbalken zu sehen ist. Optisch hat sich an dem HTML Text nichts, zu mindestens nichts offensichtliches geändert und ich kann mir nicht erklären wieso ich jetzt nach unten Scrollen kann, denn die 3 DIV Container ergeben schon die 100% und der unterste Container schließt auch an unterster Stelle Bündig mit dem Bildschirmrand/Browserfenster ab. Es kommt öfter vor das Dreamweaver Leerräume von selbst hineinbastelt und auf der fertigen Homepage zu sehen ist, Offensichtlich im Code stehen diese Leerräume leider nicht, ich finde kein Fehler. Ich bedanke mich in voraus für eurere Mühe!
Die Index.html:
<!doctype html>
<html>
<head>
<title>Sitzsysteme Schröter</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="content">
<div class="top_block head">
<div class="content">
<table width="100%%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle"><h6>Verkleidungsteile</h6></td>
<td align="center" valign="middle"><h6>Liegepolster</h6></td>
<td align="center" valign="middle"><h6>Relingspolster</h6></td>
<td align="center" valign="middle"><h6>Back to Back Sitze</h6></td>
<td align="center" valign="middle"><h6>Offshore Sitze</h6></td>
<td align="center" valign="middle"><h6>Verkleidungsteile</h6></td>
<td align="center" valign="middle"><h6>Verdecke</h6></td>
<td align="center" valign="middle"><h6>Vollbild</h6></td>
</tr>
</table>
</div>
</div>
<div class="bottom_block foot">
<table width="100%%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="12%" align="center" valign="middle"><h6>Impressum</h6></td>
<td width="12%" align="center" valign="middle"><h6>Kontakt</h6></td>
<td width="12%" align="center" valign="middle"><h6>Links</h6></td>
<td width="12%" align="center" valign="middle"><h6>Download</h6></td>
<td width="12%" align="center" valign="middle"><h6>Handbuch</h6></td>
<td width="12%" align="center" valign="middle"><h6>Map</h6></td>
<td width="12%" align="center" valign="middle"><h6>Nützliches</h6></td>
<td width="12%" align="center" valign="middle"><h6>Preise</h6></td>
</tr>
</table>
<div class="content">
</div>
</div>
</div>
</body>
</html>
Und hier die style.css:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(center, ellipse farthest-corner, #FFF4C7 0%, #f0e6b3 100%);
/* Mozilla Firefox */
background-image: -moz-radial-gradient(center, ellipse farthest-corner, #FFF4C7 0%, #f0e6b3 100%);
/* Opera */
background-image: -o-radial-gradient(center, ellipse farthest-corner, #FFF4C7 0%, #f0e6b3 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #FFF4C7), color-stop(1, #f0e6b3));
/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(center, ellipse farthest-corner, #FFF4C7 0%, #f0e6b3 100%);
/* W3C Markup, IE10 Release Preview */
background-image: radial-gradient(ellipse farthest-corner at center, #FFF4C7 0%, #f0e6b3 100%);
}
.content {
min-height: 100%;
position: relative;
overflow: auto;
z-index: 0;
}
.background {
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
margin: 0;
padding: 0;
}
.top_block {
width: 100%;
display: block;
}
.bottom_block {
position: absolute;
width: 100%;
display: block;
bottom: 0;
}
.left_block {
display: block;
float: left;
}
.right_block {
display: block;
float: right;
}
.center_block {
display: block;
width: auto;
}
.head {
width: 100%;
height: 70px;
background-color: #f0e6b3;
}
.foot {
width: 100%;
height: 70px;
background-color: #f0e6b3;
}
Nachwort:
Zu anfangs war wie gesagt dieser verbleibende Raum nicht vorhanden und es gab kein Scrollbalken, ich habe eine ähnliche Website schon und wollte von Tabellen Layout zu DIV Containern Wechseln. Deswegen hier mein Neuversuch.
Patrick
ich bin neu hier und habe gleich paar Fragen. Ich programmiere mir eine kleine Firmenhomepage die eine 100 % Höhe hat. Zu Anfangs hat dies geklappt, aber Dreamweaver hat mir jetzt unter dem untersten Container ein Art Leerspalte eingefügt. Ich habe oben ein Head Bereich, dann ein Body der sich der Höhe anpasst und ein Foot Bereich. Wenn man die Seite betrachten hört alles auch an passender Stelle auf und die Seite ist in der Höhe ganz gefüllt. Unter dem Foot Bereich taucht seid neusten noch ein weiteres Feld auf, so das auf der rechten Seite ein Hässlicher Scrollbalken zu sehen ist. Optisch hat sich an dem HTML Text nichts, zu mindestens nichts offensichtliches geändert und ich kann mir nicht erklären wieso ich jetzt nach unten Scrollen kann, denn die 3 DIV Container ergeben schon die 100% und der unterste Container schließt auch an unterster Stelle Bündig mit dem Bildschirmrand/Browserfenster ab. Es kommt öfter vor das Dreamweaver Leerräume von selbst hineinbastelt und auf der fertigen Homepage zu sehen ist, Offensichtlich im Code stehen diese Leerräume leider nicht, ich finde kein Fehler. Ich bedanke mich in voraus für eurere Mühe!
Die Index.html:
<!doctype html>
<html>
<head>
<title>Sitzsysteme Schröter</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="content">
<div class="top_block head">
<div class="content">
<table width="100%%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle"><h6>Verkleidungsteile</h6></td>
<td align="center" valign="middle"><h6>Liegepolster</h6></td>
<td align="center" valign="middle"><h6>Relingspolster</h6></td>
<td align="center" valign="middle"><h6>Back to Back Sitze</h6></td>
<td align="center" valign="middle"><h6>Offshore Sitze</h6></td>
<td align="center" valign="middle"><h6>Verkleidungsteile</h6></td>
<td align="center" valign="middle"><h6>Verdecke</h6></td>
<td align="center" valign="middle"><h6>Vollbild</h6></td>
</tr>
</table>
</div>
</div>
<div class="bottom_block foot">
<table width="100%%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="12%" align="center" valign="middle"><h6>Impressum</h6></td>
<td width="12%" align="center" valign="middle"><h6>Kontakt</h6></td>
<td width="12%" align="center" valign="middle"><h6>Links</h6></td>
<td width="12%" align="center" valign="middle"><h6>Download</h6></td>
<td width="12%" align="center" valign="middle"><h6>Handbuch</h6></td>
<td width="12%" align="center" valign="middle"><h6>Map</h6></td>
<td width="12%" align="center" valign="middle"><h6>Nützliches</h6></td>
<td width="12%" align="center" valign="middle"><h6>Preise</h6></td>
</tr>
</table>
<div class="content">
</div>
</div>
</div>
</body>
</html>
Und hier die style.css:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(center, ellipse farthest-corner, #FFF4C7 0%, #f0e6b3 100%);
/* Mozilla Firefox */
background-image: -moz-radial-gradient(center, ellipse farthest-corner, #FFF4C7 0%, #f0e6b3 100%);
/* Opera */
background-image: -o-radial-gradient(center, ellipse farthest-corner, #FFF4C7 0%, #f0e6b3 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #FFF4C7), color-stop(1, #f0e6b3));
/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(center, ellipse farthest-corner, #FFF4C7 0%, #f0e6b3 100%);
/* W3C Markup, IE10 Release Preview */
background-image: radial-gradient(ellipse farthest-corner at center, #FFF4C7 0%, #f0e6b3 100%);
}
.content {
min-height: 100%;
position: relative;
overflow: auto;
z-index: 0;
}
.background {
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
margin: 0;
padding: 0;
}
.top_block {
width: 100%;
display: block;
}
.bottom_block {
position: absolute;
width: 100%;
display: block;
bottom: 0;
}
.left_block {
display: block;
float: left;
}
.right_block {
display: block;
float: right;
}
.center_block {
display: block;
width: auto;
}
.head {
width: 100%;
height: 70px;
background-color: #f0e6b3;
}
.foot {
width: 100%;
height: 70px;
background-color: #f0e6b3;
}
Nachwort:
Zu anfangs war wie gesagt dieser verbleibende Raum nicht vorhanden und es gab kein Scrollbalken, ich habe eine ähnliche Website schon und wollte von Tabellen Layout zu DIV Containern Wechseln. Deswegen hier mein Neuversuch.
Patrick
