✔ Divs doppelt so lang !

X

xkoy

Erfahrenes Mitglied
ola,

mal wieder ein kleines problem :)

Hier mal die Seite: http://www.pureheroes.net/template.html
Hier das style: http://www.pureheroes.net/style.css

Die Seite soll unten den Verlauf immer verlängern also anpassen, aber jetzt ist er doppelt so lang. Hab das gefühl das es mit dem Min-height was zu tun hat...
Wenn ich ganz oben das: html,body { height:100%; } rausmache, ist mein bg.image weg ... und unten der Verlauf wird auch nicht mehr repeatet !

Vielleicht hat jemand nen Tip !

Danke
 
Hi,

hier bedarf es einer Erweiterung deines Markups, um die 100%-Mindesthöhe und Hintergrundformatierung anstelle von #main auf einen übergeordneten DIV-Block anzuwenden, der die bestehenden Blöcke umschliesst.

Für diesen Praxisfall hab ich vor geraumer Zeit mein CSS-Tutorial CSS-Layout mit 100%-Höhe verfasst :)

mfg Maik
 
Hi Maik :) Auf dich is immer Verlass. Schaus mir gleich an !

Den Repeat vom backround Image hab ich hinbekommen, hatte den Clearfix noch nicht gesetzt für den BG. das funkt jetzt, jetzt nurnoch den verlauf unten.

Aber ich les mal dei Tutorial :)
 
Also hab eigentlich das selbe wie du da beschreibst drinnen, aber irgendwie wills nich :/

hab jetzt mal einen seperaten Div angelegt "bg":

Code: 
#bg {
	margin: 0 auto;
	width: 808px;
	background: url(images/verlaufunten.png) repeat-y left bottom;
	min-height:100%;
	height:auto !important;
	height:100%;
}

und hier htm:

Code: 
<body>

<div id="verlaufoben"></div>
<div id="header"></div>
<div id="menu"></div>

<div id="bg">
<div id="main" class="clearfix">

<div id="li">Links</div>
<div id="re">Rechts</div>
<div id="menuunten"></div>
<div id="footer"></div>
<div id="verlaufunten"></div>

</div>
</div>
</body>
</html>

Vielleicht siehst du ja den Fehler :)
bekomms leider nid hin.
 
Hi,

die Höhe von 100 Prozent bezieht sich auf den kompletten Viewport. Aus diesem Grund überschreitet dein Layout diese Höhe um die vertikale Dimension des "Headers".

Eine Möglichkeit wäre es, den "Header" in das Element mit der ID bg zu verschieben und dort noch in einen Container zu packen, der zum Überdecken des bisherigen Hintergrunds dient.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<style type="text/css">
  <!--
body, html{
  height: 100%;
}
*{
  margin: 0;
  padding: 0;
}

#hideBG{
  /* Hier einen Hintergrund definieren, der den darunterliegenden verdeckt */
  background: #efefef;
}
#bg {
  margin: 0 auto;
  width: 808px;
  background: url(images/verlaufunten.png) repeat-y left bottom;
  min-height:100%;
  height:auto !important;
  height:100%;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
 //-->
</style>
</head>
<body>


<div id="bg">
	<div id="hideBG">
	  <div id="verlaufoben">verlauf oben</div>
	  <div id="header">header</div>
	  <div id="menu">menu</div>
  </div>

	<div id="main" class="clearfix">

	  <div id="li">Links</div>
	  <div id="re">Rechts</div>
	  <div id="menuunten"></div>
	  <div id="footer"></div>
	  <div id="verlaufunten"></div>

	</div>
</div>
</body>
</html>

Vielleicht hilft dir das weiter.

Ciao
Quaese
 
xkoy hat gesagt.:
Also hab eigentlich das selbe wie du da beschreibst drinnen, aber irgendwie wills nich :/
Zum Vergrößern anklicken....
Nicht ganz, denn #bg sollte in meinen Tutorial-Beispielen dem DIV-Bock #wrapper entsprechen, der alle weiteren Blöcke umschliesst.

Aus meinen vier Variationen stellt sich das "Modell mit Header und Footer" (analog zu Quaeses Beispiel) so dar:
HTML: 
<div id="wrapper" class="clearfix">
     <div id="header">...</div>
     <div id="leftCol">...</div>
     <div id="rightCol">...</div>
     <div id="centerCol">...</div>
</div>
CSS: 
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}

/* DIV-Boxen */
div#wrapper {
position:relative;
margin:0 auto;
width:800px;
min-height:100%;
height:auto !important;
height:100%;
background:url(3cols.png) repeat-y;
border-left:1px solid #b8b8b8;
border-right:1px solid #b8b8b8;
}
div#header {
height:80px;
background:#fff;
border-bottom:1px solid #b8b8b8;
}
div#leftCol {
width:200px;
float:left;
}
div#rightCol {
width:200px;
float:right;
}
div#centerCol {
margin:0 200px;
}

/* clearfix zum Aufheben der Floatumgebung */
.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

mfg Maik
 
das "#bg" nur übers MAIn geschoben, so das es ALLE zusammenfasst war der Knackpunkt :) Schon gehts :)

Danke euch beiden !!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück