Seitenanpassung in der Höhe?

cille · 19. März 2007

Hi ho,
habe ein Problem in der Seitanpassung via Höhe.
Ich wollte ja gerne meine homepage jenachdem wie die Bildschirmauflösung bzw. die Fenstergröße ist an der Höhe anpassen vom Design her und dabei aber immer eine minimale höhe haben.
Habe schon einiges Probiert, aber kriege es nicht hin.

Würde mich freuen wenn Ihr mir weiterhelfen könntet,
hier mal der Standardcode:

index.html

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Codegroup.de | programs is our hobby</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="Tabelle_01">
  <div class="id01_"></div>
  <div class="id02_"></div>
  <div class="id03_"> HIER KOMMT IMMER EIN KLEINES FLASH MOVIE</div>
  <div class="id04_"></div>
  <div class="id05_"></div>
  <div class="id06_">
		<div class="Navigation">
			Hier kommt die <b>Navigation</b> hin!		</div>
		<div class="content">
			Hier kommt der <b>Content</b> hin!		</div>
	</div>
	<div class="id07_"></div>
	<div class="id08_">
		<div class="copyright"> Copyright 2007 All rights reserved </div>
		<div class="under_nav">WEBLINKS | SITE MAP | IMPRESSUM | KONTAKT</div>
	</div>
</div>
</body>
</html>

style.css

HTML:

/* CSS Document */
body {
	background-color: #ffffff;
}



/* NAVIGATION, CONTENT, usw... BEREICH */
.Navigation {
	position:absolute;
	left: 20px;
	height: 100%;
	width: 150px;
}
.content {
	position:absolute;
	left: 170px;
	height: 100%;
	width: 614px;
}
.copyright {
	margin-top: 9px;
	margin-left: 30px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:10px;
	float: left;
}
.under_nav {
	margin-top: 8px;
	margin-left: 485px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

/* DESIGN */
.Tabelle_01 {
  position:absolute;
  left:50%;
	margin-left: -450px;
  top:0px;
  width:900px;
  height:768px;
}

.id01_ {
  position:absolute;
  left:68px;
  top:0px;
  width:784px;
  height:98px;
	background-image:url(images/01.gif);
	background-repeat: no-repeat;
}

.id02_ {
  position:absolute;
  left:68px;
  top:98px;
  width:87px;
  height:94px;
	background-image:url(images/02.gif);
	background-repeat: no-repeat;
}

.id03_ {
  position:absolute;
  left:155px;
  top:98px;
  width:123px;
  height:94px;
	background-image:url(images/03.gif);
	background-repeat: no-repeat;
}

.id04_ {
  position:absolute;
  left:278px;
  top:98px;
  width:574px;
  height:94px;
	background-image:url(images/04.gif);
	background-repeat: no-repeat;
}

.id05_ {
  position:absolute;
  left:68px;
  top:192px;
  width:784px;
  height:69px;
	background-image:url(images/05.gif);
	background-repeat: no-repeat;
}

.id06_ {
  position:absolute;
  left:68px;
  top:261px;
  width:784px;
  height:506px;
	background-image:url(images/06.gif);
	background-repeat: no-repeat;
}

.id07_ {
  position:absolute;
	top: 767px;
  left: 68px;;
  width:784px;
	height: 1px;
	background-image:url(images/07.gif);
	background-repeat: no-repeat;
}

.id08_ {
  position:absolute;
	top: 768px;
  left:68px;
  width:784px;
  height:32px;
	background-image:url(images/08.gif);
	background-repeat: no-repeat;
}

Hier der Link fals Ihr eine kleine Übersicht bräuchtet.
KLICK MICH

Habe alles mit "position: absolute"
vielleicht müste ich auch dies ändern,
aber ich bin noch am CSS lernen.

Würde mich riesig freuen.

Sonnige Grüße,
cille

(EDIT01):
Aso welches lang gezogen werden müste ist die Klasse ".id07_".

Maik · 19. März 2007

Hi,

mit den folgenden CSS-Angaben wird die Seite in der Vertikalen "gestreckt" und der Footer am unteren Bildschirmrand positioniert:

Code:

html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.Tabelle_01 {
  position: relative;
  left:50%;
  margin-left: -450px;
  top:0px;
  width:900px;
  min-height: 100%;
  height: auto !important;
  height: 100%;
}

.id08_ {
  position:absolute;
  bottom: 0;
  left:68px;
  width:784px;
  height:32px;
  background-image:url(images/08.gif);
  background-repeat: no-repeat;
}

Kleiner Schönheitsfehler, durch die absoluten Positionierungen und die fixe Höhenangabe für die Klasse .id06_ entsteht eine Lücke zum Footer.

cille · 19. März 2007

Hi ho,
schön dank für die Antwort,
was mich jetzt Interessieren würde ist,
diese Angabe

HTML:

height: auto !important;

Was bedeutet dieses "!important"?

Werd ich gleich mal ausprobieren

(EDIT01):
Kann die Seite leider erst heute Abend ändern bzw. diese änderungen ausprobieren,
da in der Schule das FTP nicht funktioniert.

Maik · 19. März 2007

Mit diesem Regelblock

Code:

min-height: 100%; /* Für moderne Browser */
height: auto !important;  /* Für moderne Browser */
height: 100%;  /* Für IE */

richten wir für das Element eine Mindesthöhe ein, wobei die !important-Regel dafür sorgt, dass die modernen Browser die zweite height-Angabe ignorieren / übergehen.

Seitenanpassung in der Höhe?

cille

Erfahrenes Mitglied

Maik

cille

Erfahrenes Mitglied

Maik

Neue Beiträge