• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit overflow:auto

thuemmy

thuemmy

Aktives Mitglied
Ich bin zur Zeit dabei eine Seite für einen Bekannten neu zu basteln. Mein Hauptuagenmerk liegt darauf, Frames zu beseitigen. Nun habe ich mir was nach einem Tipp von prm zusammengebastelt. Allerdings ist da noch ein kleines Scrollproblem. Ist auch klar, da ich den kompletten #innenwrapper ein overflow:auto; gegeben habe.

Nun habe ich folgendes versucht:
dem #innenwrapper das overflow wegzunehmen und dem #content den overflow:auto hinzuzufügen. Mit dem Ergebniss, dass das ganze Design zerschossen wird.

Wo liegt mein Fehler?

Hier der Link: DEWA-Schaltechnik GmbH - Impressum

Gruß thuemmy
 
"overflow: auto" macht eigentlich nur dann Sinn, wenn dem Element auch eine bestimmte Höhe zugewiesen ist. Das ist bei content nicht der Fall.

Ich würde auf diese Konstruktion vollkommen verzichten. Sieht m.E. auch nicht gut aus, wenn im Content ein Scrollbalken erscheint. Dazu reicht eigentlich der normale Browser-Fenster-Scrollbalken aus.
 
Die von mir gemachte Vorgabe war halt, dass die Frames rauskommen, aber das Erscheinungsbild nicht wesentlich verändert wird. Ich finde ja auch, dass Scrollbalken im Content doch recht bescheuert aussehen ;-)

Ich werde es jetzt mal nach Deinem Tipp Footer immer unten anordnen versuchen.

Danke für die Antwort.

Gruß thuemmy
 
Hilfe!!!

Was issen nu kaputt? Habe das mit dem overflow rausgemacht, habe aber nun das nächste Problem. Auf Seiten, auf den der Inhalt in #content nicht länger ist (auf den bis jetzt noch leeren Seiten) ist das ja ok, aber auf dieser hier passt es wieder irgendwie nicht.

Gruß thuemmy
 
Liegt an der absoluten Footerpositionierung.
Versuch's mal so:

Code: 
#footer 
{
width: 100%;
line-height: 1.5em;
background: #bbbbbb;
}
 
thuemmy schrieb:
Hilfe!!!

Was issen nu kaputt? Habe das mit dem overflow rausgemacht, habe aber nun das nächste Problem. Auf Seiten, auf den der Inhalt in #content nicht länger ist (auf den bis jetzt noch leeren Seiten) ist das ja ok, aber auf dieser hier passt es wieder irgendwie nicht.

Gruß thuemmy
Zum Vergrößern anklicken....

style.css (Linie 23)
Code: 
#wrapper {
background:#9FBCC5 none repeat scroll 0 0;
margin:0 auto;
overflow:auto;
position:relative;
width:780px;
}
...laut Firefox+Firebug

Ich kann dir aber aus Erfahrung berichten, dass du bestimmt Probleme mit dem Internet Explorer haben wirst. Test das mal.
 
Wenn ich die absolute Footerpositionierung rausnehme, dann ist der Footer auf "leeren" Seiten nicht mehr unten. Mein Layout habe ich nach Deiner Anleitung gemacht.

Der Unterschied zu Deinem Beispiel ist, dass ich statt des Fließtextes, wie in Deinem Beispiel 2 linksgefloatete Div-Container habe. Wenn ich die Div-Container auskommentiere und den Inhalt als Fließtext ausgebe, dann isses so, wie ich will.

Also mein Problem scheint daran zu liegen, wie ich den #content-div zum mitwachsen bekomme.

Gruß thuemmy
 
Mann braucht nicht unbedingt eine Höhe für overflow:auto.
Auch mit position:absolute + Werten für top und left lässt sich damit ein scrollbalken erzeugen.
html:
Code: 
<div id="alles">
<div id="kopf">
Kopf
</div>
<div id="spalten">
<div id="spalte1">
navigation
</div>
<div id="spalte2">
<h1>Inhalt</h1>
<p>Lorem ipsum</p>
</div>
</div>
<div id="fuss">
Fuss
</div>
</div>
css:
Code: 
  * {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
overflow: hidden;
font-size: 100%;
}

#alles {
position: relative;
height: 100%;
width: 780px;
margin: 0 auto;
}

#kopf {
height: 10em;
background-color: gray;
}

#spalten {
overflow: hidden;
position: absolute;
[B][COLOR="DarkRed"]top: 10em;[/COLOR][/B]
[B][COLOR="#8b0000"]bottom: 5em;[/COLOR][/B]
background-color: pink;
width: 100%;
[B][COLOR="#8b0000"]overflow: auto;[/COLOR][/B]
}

#spalten #spalte1,
#spalten #spalte2 {
float: left;
}

#spalten #spalte1 {
width: 200px;
background-color: darkred;
}

#spalten #spalte2 {
width: 560px;
background-color: darkgray;
}

#fuss {
position: absolute;
bottom: 0;
width: 100%;
height: 5em;
background-color: gray;
}

Leider klappt das erst ab IE7.
Ein css-Workaround ist Kompliziert wenn man die Höhe nicht kennt.
Mann könnte sie mit javascript auslesen.
Nur für IE5 - IE6 nötig:
Code: 
<!--[if lt IE 7]>
  <script type="text/javascript">
  function spaltenhoehe()
{
var fussHeight=(document.getElementById("fuss").offsetHeight);
var kopfHeight=(document.getElementById("kopf").offsetHeight);
var allesHeight=(document.getElementById("alles").offsetHeight);
var kopfFussHeight=parseInt(fussHeight)+parseInt(kopfHeight);
var spaltenHoehe=parseInt(allesHeight)-kopfFussHeight;

document.getElementById("spalten").style.height = spaltenHoehe+'px';

}
</script>
  <![endif]-->
Als Event-Handler habe ich onload und onresize verwendet.

Code: 
<body onload="spaltenhoehe();" onresize="spaltenhoehe();">

Wenn #kopf und #fuss feste Höhen in px haben funktioniert auch dieses einfache Expression:
Code: 
height: expression(document.body.clientHeight - 160 + "px");
Expression sind ebenfalls von Javascript abhängig.
Auf feste px-Höhen würde ich bei Textausgaben eh verzichten.

Mit css-Workarounds habe ich das schön öfter versucht.
Entweder mußte ich dazu den IE6 in den Quirksmodus schicken oder ich bin letztlich doch wieder bei Javascript gelandet.

Heute bin ich der Meinung, daß es sich selten lohnt Frame-Layouts nachzubauen.
 
Zuletzt bearbeitet:
neuroleptika schrieb:
Heute bin ich der Meinung, daß es sich selten lohnt Frame-Layouts nachzubauen.
Zum Vergrößern anklicken....
Uppsss...

Ich dachte ich hätte das klar genug zum Ausdruck gebracht, dass ich dann doch von den Scrollbalken, bzw. Frame-Nachbildung, im Contentbereich abgegangen bin. Dem war wohl nicht so.

Auf jeden Fall vielen Dank für Deine Mühe, neuroleptika. Irgendeine Lösung mit JavaScript zu frickeln ist ja auch nicht das wahre, denn wie wir ja alle wissen, kann JS ja abgeschaltet werden.

Ich werde für mein derzeitiges Problem dann doch ein neues Thread aufmachen.

Vielen Dank nochmal an alle die geholfen haben.

Gruß thuemmy

P.S. Thread kann geclosed werden
 
thuemmy schrieb:
Uppsss...

Ich dachte ich hätte das klar genug zum Ausdruck gebracht, dass ich dann doch von den Scrollbalken, bzw. Frame-Nachbildung, im Contentbereich abgegangen bin. Dem war wohl nicht so.

Auf jeden Fall vielen Dank für Deine Mühe, neuroleptika. Irgendeine Lösung mit JavaScript zu frickeln ist ja auch nicht das wahre, denn wie wir ja alle wissen, kann JS ja abgeschaltet werden.

Ich werde für mein derzeitiges Problem dann doch ein neues Thread aufmachen.

Vielen Dank nochmal an alle die geholfen haben.

Gruß thuemmy

P.S. Thread kann geclosed werden
Zum Vergrößern anklicken....

Nein, nein, nein!
Es gibt natürlich noch eine Möglichkeit!
Erstelle doch einen leeren Container in dieser Inhaltsbox mit height: 100%, den du floaten lässt.
 
Dein CSS und HTML verstehen sich nicht:
Ersetze in CSS den #aussenwrapper" damit, denn in HTML nimmst du auf #wrapper Bezug und nicht auf #aussenwrapper:
Code: 
#wrapper
{
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
width: 780px;
margin: 0 auto;
background: #9FBCC5;
}
 
So, jetzt hab ich es erstmal total zerschossen, und natürlich keine Sicherung :-(

Also, bitte diesen Thread schließen, und wenn ich wieder bei meinem letzten Problem bin, werde ich mich wieder in einem neuen Thread (mit passendem Titel) melden.

Gruß thuemmy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben