✔ <DIV> an dynamisches Menü anpassen

A

Arndtinho

Erfahrenes Mitglied
Hallo zusammen,

ich habe ein Problem bei dem ich nicht weiterkomme.
in einer Seite habe ich folgendenen Aufbau:

HTML: 
<div id="header"></div>

<div id="content">
    <div id="middle"></div>
    <div id="left"></div>
    <div id="right"></div>
</div>

<div id="footer"></div>

Im left-DIV befindet sich ein ausklappbares Menü. Sobald eine Subcategory aufgeklappt wird, verschiebt
sich der "darunter liegende" Inhalt nach unten. Soweit so gut, nur dass alles hinter dem footer-DIV verschwindet und
nicht mehr zu sehen ist.
Mein Ziel ist es, dass sich der footer ebenfalls nach unten verschiebt, so dass der Inhalt wieder zu sehen ist. Wie
kann ich das lösen?

Viele Grüße und schönes WE
Arndtinho
 
Zuletzt bearbeitet von einem Moderator:
Hi,

wenn du dich mit einem CSS-Problem an uns wendest, versteht es sich eigentlich von selbst, neben dem Markup auch das dazugehörige Stylesheet vorzustellen, denn darin ist die Ursache zu erkunden, und nicht im HTML-Code.

Mit deinem "nichtssagenden" Code-Schnipsel ist es für uns Außenstehende überhaupt nicht möglich, eine fundierte Aussage zu der Fehlerursache und ihre Korrektur abzugeben.

Es sei denn, du gibst dich hier mit wilden Spekulationen zufrieden, und möchtest die Benutzer zum heiteren Fischen im trüben Wasser einladen, in der Hoffnung, dass einer der Vorschläge schon ins Schwarze treffen wird.

Gut, dann eröffne ich hier jetzt mal die Raterunde, und werfe diese denkbaren Szenarien in den Raum, weshalb der Footer nicht nach unten rückt, wenn die Untermenüs der Navigation aufgeklappt werden (alle Angaben ohne Gewähr!):

  1. Es handelt sich hier um ein fliessendes Spalten-Layout, dessen drei innere DIV-Blöcke durch entsprechende float-Deklarationen aus dem normalen Dokumentfluß genommen werden, und dem Footerblock fehlt die clear-Eigenschaft, um diesen Umfluß abzubrechen.

  2. Anstelle der float-Eigenschaft sind die einzelnen DIV-Blöcke mittels absoluten top / left-Positionsangaben im Viewport angeordnet.

  3. Der mittlere Bereich #content oder seine Kinderelemente besitzen eine absolute height-Angabe.

  4. In deiner Seite kommt ein sog. "Sticky-Footer" zum Einsatz (siehe z.B. http://www.tutorials.de/forum/webma...footer-am-unteren-fensterrand-ausrichten.html), und den vorangegangenen DIV-Blöcken fehlt eine padding-bottom-Deklaration, die der Höhe des Footers entspricht, damit ihr Inhalt den Footerbereich nicht unterwandert.

Du siehst, hier kommen gleich mehrere technische Gründe in Betracht, die zu diesem Darstellungsfehler führen können, wenn man nur den HTML-Code kennt.

Ebenso wäre es von großer Interesse, das konkrete Markup (HTML-Code) deines Menüs einsehen zu können.

Ein Link zu deiner Seite wäre hier nicht verkehrt, damit deine Seite in ihrem vollständigen Umfang studiert werden kann, denn der Fehlerteufel steckt oft im Detail, und könnte unentdeckt bleiben, wenn du hier nur Auszüge deines Quellcodes vorstellst.

Eines kann ich ohne Sichtung deines CSS-Codes aber schon mal mit an-Wahrscheinlichkeit-grenzender-Sicherheit sagen, warum beim Einblenden der Unterkategorie, der nachfolgende Inhalt nach unten verschoben wird ;-)

Das Untermenü ist nicht mit einer absoluten Positionierung aus dem normalen Textfluß genommen worden.

Dies ist als unverbindlicher Hinweis zu verstehen, falls dieses Verhalten beim Öffnen der Unterkategorien überhaupt nicht erwünscht sein sollte.

mfg Maik
 
Moin,

ich hab mal aus Neugierde einen Blick in deine CSS-Themen aus der Vergangenheit geworfen, und mich beschleicht gerade das Gefühl, dass dein Beitrag hier die Neuauflage eines dieser Themen sein könnte:


Sollte dem tatsächlich so sein, hätte es eigentlich vollkommen genügt, diese Themen nochmal aufzuschlagen, und darin die Lösungsansätze nachzulesen, anstatt den kalten Kaffee wieder aufzuwärmen.

Naja, ist jetzt eine Vermutung von mir, aber nach deiner Antwort bin ich schlauer ;-)

mfg Maik
 
Moin Maik,

sorry, dass ich den Code der CSS-Datei "evrschwiegen" habe. Das ist mir auch erst aufgefallen, als ich den Rechner schon runtergefahren hatte.
Hier ist er nun:
Code: 
#header {
	height: 		185px;
	background: 	#fff;
	border-left:	2px solid #039;
}

#footer {
	height: 50px; 
	margin: 0;
 	padding: 0;
	text-align: center;	
	border-left:	2px solid #039;
}

#content {
	position: relative;
	width: 100%;
	border-left:	2px solid #039;	
}

#middle {
	margin: 0px 220px 0px 200px;
}

#left {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 200px;
	padding-top: 25px;
}

#right {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 220px;
	padding-top: 30px;
}
Die Lösungsansätze meiner bisherigen Posts werde ich mir nochmal anschauen.

Viele Grüße
Arndtinho
 
Bingo :)

Maik hat gesagt.:
  1. ... Trifft nicht zu

  2. Anstelle der float-Eigenschaft sind die einzelnen DIV-Blöcke mittels absoluten top / left-Positionsangaben im Viewport angeordnet

  3. ... Trifft nicht zu

  4. ... Trifft nicht zu
Zum Vergrößern anklicken....

Durch die absoluten Positionsangaben werden die beiden Blöcke #left und #right aus dem normalen Dokumentfluß genommen, und so besteht kein Bezug mehr zwischen ihrem Inhalt und dem Footerbereich, will heißen, deren Inhalt läuft über den Footer hinaus, anstatt ihn nach unten zu verrücken. Lediglich beim Inhalt des mittleren Blocks ist dies der Fall.

Lösung: die absoluten Positionsangaben durch entsprechende float-Regeln ersetzen, und den Umfluß der drei Blöcke beenden, indem für #footer clear:both festgelegt wird :)

CSS: 
#footer {
        height: 50px;
        margin: 0;
         padding: 0;
        text-align: center;
        border-left:        2px solid #039;
        clear:both; /* Umfluß abbrechen */
}

#left {
        /*position: absolute;*/  /* auskommentiert = deaktiviert */
        /*top: 0px;*/ /* auskommentiert = deaktiviert */
        /*left: 0px;*/ /* auskommentiert = deaktiviert */
        width: 200px;
        padding-top: 25px;
        float:left; /* Element wird rechtsseitig umflossen */
}

#right {
        /*position: absolute;*/ /* auskommentiert = deaktiviert */
        /*top: 0px;*/ /* auskommentiert = deaktiviert */
        /*right: 0px;*/ /* auskommentiert = deaktiviert */
        width: 220px;
        padding-top: 30px;
        float:right; /* Element wird linksseitig umflossen */
}

mfg Maik
 
Hallo Maik,

danke.
Jetzt muss ich nur noch schauen, warum die beiden Elemente (left und right) unterhalb des Elements middle angeordnet werden.
Ich denke, dass liegt an der Definition für content und middle.

Viele Grüße
Arndtinho
 
Nö, du mußt lediglich im HTML-Code die Reihenfolge der DIVs tauschen, sprich #middle ans Ende setzen, denn die zu umfließenden Elemente (mit float formatiert) werden im Markup grundsätzlich an erster Stelle genannt :)

HTML: 
<div id="content">
    <div id="left"></div>
    <div id="right"></div>
    <div id="middle"></div>
</div>


mfg Maik
 
Hab den Code eben mal in den Browsern geladen, und mußte feststellen, dass das "Clearing" schon vor dem Footer stattfinden muß, damit der Rahmen von #content nach unten verlängert wird.

CSS: 
.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 */


Die Klasse .clearfix wird hierfür in #content aufgerufen:

HTML: 
<div id="content" class="clearfix">
    <div id="left"></div>
    <div id="right"></div>
    <div id="middle"></div>
</div>


mfg Maik
 
Ob du's glaubst, oder nicht, in meinem Bücherregal findet sich kein einziges Fachbuch zu CSS & Co. ;-)

Ich nutze da ausschließlich die einschlägigen Quellen im Netz (in alphabetischer Reihenfolge genannt):


... um hier mal die deutschsprachigen Vertreter erwähnt zu haben.

In meinen Bookmarks tümmeln sich dann noch unzählige Links zu Seiten mit spezifizierten CSS-Anwendungen, -Beispielen, -Themen, u.ä.

Nach knapp 10 Jahren hat sich darin so einiges angesammelt ;-)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück