XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   problem mit dem footer (http://xhtmlforum.de/showthread.php?t=33761)

johnpatcher 28.11.2004 16:10

problem mit dem footer
 
Ich bin gerade dabei, meine seite mit css zu gestalten und bin dabei auf folgendes problem gestossen.

ich habe bis jetzt 4 bereiche, die untereinander stehen, wobei alle 4 fest defeniert sind. die unterste box ist die content box, welche ja variabel sein kann, von der höhe. jetzt habe ich zwei fragen dazu:

ich habe folgenden code für den contentbereich:

Code:

#content {
position: absolute;
top: 128px;
width: 700px;
height: 350px;
text-align: left;
background: #CECECE;
padding: 5px 10px;
}

wenn mein text bzw. inhalt länger ist, also 350px, wird die box dann automatisch verlängert?
wie kann ich jetzt unter die box einen footer setzen? ich habe es mit clear: both versucht, jedoch wird die box dann oben angezeigt.

Code:

#footer {
clear: both;
background: url(images/footer.gif) no-repeat;
width: 720px;
height: 12px;
text-align: center;
margin-top: 0px;
}

was muss ich hier ändern, damit die box immer unter dem content steht, welcher ja variabel ist, d.h. ich kann keine pixelangaben machen.

danke im voraus,

johnpatcher

johnpatcher 28.11.2004 18:29

immer noch nicht,
 
ich hab es immer noch nicht geschafft, habe mir ein paar tutorials angeschaut, aber es klappt einfach nicht,

danke im voraus

RoToRa 29.11.2004 11:53

HTML/CSS ist ja default-mässig flexibel, d.h. normalerweise passen sich die Elemente automatischen ihrem Inhalt an. Erst dardurch, dass du feste Größen angibst wird alles unflexibel. Dazu kommt auch noch das, da du alles (oder zumindest den Content) absolut positionierst. Absolut positionierte Elemente ignorieren alle andere Elemente und werden auch von den anderen ignoriert, dass heißt selbst wenn sich den Content-Element an die Größe seines Inhaltes anpassen würde, würde es alles was darauf folgt überdeckt.

Außerdem hast Du die Funktion von "clear" misverstanden. "Clear" bezieht sich nur auf Elemente, die zuvor mit "float" positioniert wurden, bei absolut positionierten Element hat es keine Auswirklung.

Mein Vorschlag wäre folgendes: Da du schreibst alle vier Bereiche sollen untereinander liegen, brauchst du keine absolute Positionierung. Block-Elemente wie DIV (die ich vermute, die du verwendest) werden automatisch hinterander positioniert. Gib am besten den Elementen keine feste Höhe (und am besten auch keine feste Breite) .

Die Fußleiste dagegen, soll ja unten plaziert werden, dafür kannst Du die absolute Positinierung benutzen. Mit "bottom: 0" bleibt sie unten. Damit es nicht vom Content überdeckt wird (oder umgekerrt), gibst du dem Content einem "margin-bottom" mit dem selben Wert wie die "height" des Fußes, den du in diesem Fall angibst, und zwar am besten im "em" und nicht "px"

johnpatcher 29.11.2004 15:10

danke für die antwort, habe es nun geschafft, naja fast. also ich habe jetzt alles ohne positionsangaben gemacht, einfach nur die entsprechenden stilregeln festgelegt, funktioniert auch ganz gut, nur habe ich jetzt noch eine frage.

ich hab jetz height: 350px zu min-height: 350px gemacht, nur das problem ist das es im mozilla jetzt ausschaut wie es soll, nur im IE ganz und garnicht, es wird einfach nach textmenge angepasst, wie kann ich das fixen? soll ich beides reinschreiben?

danke im voraus

johnpatcher

RoToRa 30.11.2004 14:02

IE unterstützt kein min-height. Interesanterweise hat er aber einen Bug wodurch er aber height wie min-height interpretiert. Am besten fütterst Du dem IE die height per CSS-Hack, damit andere Browser es nicht bekommen. Ich benutzt für einen solchen fall den Selector "* html". Das heißt "für alle HTML-Elemente, die innerhalb eines beliebigen anderen Elements liegt". Da aber der HTML-Element nie in einem anderen Element liegt, trefft es nie zu, der IE aber akzeptiwert ihn trotzdem. Also:

Code:

#content { min-height: 20em; }
* html #content { height: 20em; }



Alle Zeitangaben in WEZ +2. Es ist jetzt 17:08 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023