Seitenanpassung in der Höhe? @ tutorials.de: Tutorials, Forum & Hilfe

cille · 19.03.07 08:35

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-Code:

<!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-Code:

/* 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.03.07 08:48

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 {
  [b]position: relative;[/b]
  left:50%;
  margin-left: -450px;
  top:0px;
  width:900px;
  [b]min-height: 100%;
  height: auto !important;
  height: 100%;[/b]
}
 
.id08_ {
  position:absolute;
  [b]bottom: 0;[/b]
  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.03.07 08:55

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

HTML-Code:

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.03.07 09:03

Mit diesem Regelblock

Code :

1
2
3

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.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Höhe von DIV an Höhe des Nebenanliegenden anpassen

div in div mit 100% höhe

Höhe des Menüs an Höhe des Contents anpassen

Minimale Höhe, maximale Höhe?

Dynamische Seitenanpassung

E-Mail:

Abonnieren Abbestellen