 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Krisslinger
Threadersteller
Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Fr 31.08.2007 17:04
Titel
|
  |
|
Ich glaub dir das es nervig ist, jedes mal das gleiche zu erzählen, aber wie gesagt, bei mir scheint irgendwas anders zu sein, dass es so eben nicht funktioniert, habs so gemacht, wie in dem Artikel, so wie du beschrieben und trotzdem funktioniert es noch nicht. Wenn ich das auf ne Testseite anwende, dann funktioniert es wunderbar, aber auf meiner eben noch nicht.
Ich werd jetzt das ganze nochmals von vorne aufbauen, unter Berücksichtigung der von dir geposteten Hilfe und dem Wissen das ich bis hierhin zusammengetragen habe. Vielleicht bekomm ich die Sache übers Wochenende in den Griff.
Tut mir leid, trotzdem vielen Dank nochmal.
|
|
| |
  |
 |
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 31.08.2007 17:11
Titel
|
|
|
Hab nur einen kurzen Blick auf deinen Quelltext geworfen, aber ich gehe mal davon
aus dass dein Problem durch die floats entsteht. Daher hier einfach nochmal ein
weiteres Beispiel:
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="de" lang="de">
<head>
<title>CSS Layout, height 100% & Footer</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
div#wrapper {
position: relative;
margin: 0 auto;
width: 800px;
min-height: 100%;
height: auto !important;
height: 100%;
background: #eee;
}
div#header {
height: 80px;
background: #ccc;
}
div#sidebar {
background: #999;
float: left;
padding-bottom: 50px;
width: 200px;
}
div#content {
background: #bbb;
float: left;
padding-bottom: 50px;
width: 600px;
}
div#footer {
position: absolute;
bottom: 0;
clear: both;
width: 800px;
height: 20px;
background: #ddd;
}
.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 */
</style>
</head>
<body>
<div id="wrapper" class="clearfix">
<div id="header">
header
</div>
<div id="content">
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt Inhalt <br /><br /><br />
Inhalt
</div>
<div id="sidebar">sidebar</div>
<div id="footer">
footer
</div>
</div>
</body>
</html> |
|
|
| |
 |
|
|
Anzeige
|
|
|
Rayne
Dabei seit: 29.01.2006
Ort: Berlin/Brandenburg
Alter: -
Geschlecht:
|
Verfasst Di 04.09.2007 01:28
Titel
|
|
|
Ich möchte mich an dieser Stelle mal einklinken.
Ich bin seit heute dabei, eine neue Website zu erstellen und bin am gleichen Problem ins Stocken gekommen, wie der Threadersteller.
Ich habe eine äußere Ebene (#Schatten) und darin befindet sich die Content-Ebene (#Huelle).
Ich möchte nun, dass beide Ebenen, unabhängig vom Inhalt, sich vom oberen zum unteren Seitenrand erstrecken. Bisher macht das leider nur die äußere Ebene (#Schatten). Das liegt an "height: auto". Wenn dort nicht "auto" steht, sondern "100%", dann bleibt die Ebene #Schatten einfach stehen, auch wenn der Inhalt drübergeht. Dafür passt sich dann die innere Ebene #Huelle an. Steht bei #Schatten "auto", ist es genau umgekert 
Wenn ich #Huelle auf "position:absolute" stelle, passt sich diese Ebene dem Inhalt an, verschiebt sich aber im gesamtem Layout.
Ein weiteres (kleines) Problem ist der obere Rand, also der weiße Platz zwischen dem Blau und der oberen Fenstergrenze. Diesen Platz habe ich mit "margin: 8px auto;" definiert und im IE 7 sieht das super aus, aber im Firefox sind das mehr als 8px und manchmal scheint der Rand auch breiter oder schmaler zu werden, je nachdem, wie man Inhalt in die innere Ebene schreibt. Was kann das sein?
Ich habe das HTML-Dokument samt Daten hochgeladen: zum Problem
| Code: |
html { height: 100%; }
Body {
margin: 0px;
height: 100%;
}
#Schatten { position: absolute;
width: 810px;
left: 50%;
margin-left: -405px;
height: auto; /* mit dem Wert "auto" passt sich #Schatten an, #Huelle aber nicht, mit dem Wert "100%" passt sich #Huelle an, #Schatten aber nicht*/
min-height: 100%;
background-image: url(Bilder/Schatten.gif); }
#Huelle { /*position: absolute; der Wert "absolute" lässt sich #Huelle zwar anpassen, verschiebt die Ebene jedoch */
width: 780px;
min-height: 100%;
margin: 8px auto;
background: url(Bilder/Verlauf.gif) repeat-x #437FBD; } |
| 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>
<link rel="stylesheet" type="text/css" href="styles2.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>
<body>
<div id="Schatten">
<div id="Huelle">
<p>fzu</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</body>
</html> |
Das in dem Thread genannte Beispiel funktioniert auch nicht, da der Inhalts-Bereich sich nach oben hin verkleinert, sobald man den Inhalt rausnimmt, der soll aber immer bündig unten bleiben. Das einzige, was dort bündig unten bleibt, ist die umschließene Ebene, die bleibt aber auch bei mir unten. Es soll aber die äußere und innere Ebene unten bleiben.
Ich habe (nach meinem Empfinden) schon alles Mögliche ausprobiert und hoffe, dass ich doch noch etwas übersehen habe und das Problem zu lösen ist, wäre euch sehr dankbar 
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 04.09.2007 10:56
Titel
|
|
|
| Rayne hat geschrieben: | | Das in dem Thread genannte Beispiel funktioniert auch nicht... |
Doch doch, allerdings muss man es wohl verstehen und etwas umdenken. Das Prinzip
bleibt das gleiche, und du scheinst ja auch schon recht nah dran zu sein. Dein Problem
ist jetzt die blaue Hintergrundgrafik welche sich auch über die volle höhe erstrecken soll?
Faux Columns
Die einfachste Möglichkeit wäre die Hintergrundgrafik (Schatten) im body zu nutzen
anstatt dafür ein extra Element anzulegen.
Zuletzt bearbeitet von m am Di 04.09.2007 10:59, insgesamt 2-mal bearbeitet
|
|
| |
|
|
choise
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Di 04.09.2007 11:31
Titel
|
|
|
|
modifizieren ? => klick
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 04.09.2007 11:36
Titel
|
|
|
| choise hat geschrieben: | | modifizieren ? => klick |
Modifizieren? Aber mal von der Aussage abgesehen, in den Beispielen von themaninblue.com
wird das genauso gehandhabt wie ich ihm gerade vorgeschlagen habe, nämlich die Hintergrundgrafik
in den body zu legen denn wieso sollte man dafür ein extra Element anlegen?
http://www.themaninblue.com/experiment/footerStickAlt/good_example_long.htm
|
|
| |
|
|
Rayne
Dabei seit: 29.01.2006
Ort: Berlin/Brandenburg
Alter: -
Geschlecht:
|
Verfasst Di 04.09.2007 15:21
Titel
|
|
|
| m hat geschrieben: | | Rayne hat geschrieben: | | Das in dem Thread genannte Beispiel funktioniert auch nicht... |
Doch doch, allerdings muss man es wohl verstehen und etwas umdenken. Das Prinzip
bleibt das gleiche, und du scheinst ja auch schon recht nah dran zu sein. Dein Problem
ist jetzt die blaue Hintergrundgrafik welche sich auch über die volle höhe erstrecken soll?
Faux Columns
Die einfachste Möglichkeit wäre die Hintergrundgrafik (Schatten) im body zu nutzen
anstatt dafür ein extra Element anzulegen. |
Fantastisch, das funktioniert tatsächlich 
Über den Artikel bin ich gestern auch gestoßen, habe ihn aber nur überflogen und gar nicht weiter für mein Problem in Betracht gezogen...hätte ich mal aufmerksamer gelesen! Danke!
Ein kleines Problem bleibt trotzdem: Ich möchte oben und unten auch einen kleinen weißen Rahmen haben, wie auch links und rechts. Oben ist das kein Problem, mit "margin: 8px auto;" klappt das. Nur unten wird kein Rand erzeugt, stattdessen erscheint eine Scrollbar und ich kann wenige Millimeter nach unten scrollen, aber von einem weißen Rand keine Spur. Ich schätze, das liegt an der Höhenangabe "height: 100%;", denn wenn ich dort 98% eintrage, habe ich meinen weißen Rand auch unten, nur zu dick...und 99% sind zu dünn 
Gibts für dieses Problem eine Lösung, damit ich den Rand unten auch auf 8px genau festlegen kann?
Noch ein zweites (kleines) bereits angesprochenes Problem: Der Rand oben ist ja wie gesagt kein Problem, der funktioniert im IE 7 wie auch im FF. Doch wenn ich richtig viel Text in die Ebene #Huelle schreibe, wird der Rand oben (nur im FF) etwas dicker, wie kommt das?
Hoffe, auch diese kleinen Ungereimhtheiten können noch aus der Welt geschafft werden
| Code: | html { height: 100%; }
Body {
background: #FFFFFF url(Bilder/Schatten.gif) repeat-y 50% 0;
background-attachment: fixed;
color: #3E62B0;
margin: 0px;
height: 100%;
}
#Huelle {
width: 780px;
height: 100%;
margin: 8px auto;
background: url(Bilder/Verlauf.gif) repeat-x #437FBD; } |
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 04.09.2007 18:15
Titel
|
|
|
So auf die schnelle würde ich sagen nutz einfach
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[css] Problem mit div Höhe
Problem mit der Höhe
Problem mit DIV-Höhe
[css problem] content höhe
CSS-Problem mit der Höhe [gelöst]
IE Problem mit Höhe bei XHTML 1.0
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
