✔ Boxen Positionierung fehlerhaft

M

Merbi

Guten Morgen,

sitze gerade in der Schule und muss ein kleines Ein-Seiten-Projekt machen mit HTMl und CSS und finde meinen Fehler bzw. meinen Denkfehler nicht.

1. Sollte der Footer immer unten stehen, jedoch passt er sich nicht den davorigen Boxen an sondern richtet sich nach der Browserhöhe aus.
2. Sollten die Div's Head, Left und Right auch wiederholt undeinander stehen da ich mehrere Unterkategorien erstelle und sobald ich diese Kopiere und Einfüge verschachtelt er sie ineinander anstatt untereinander.

Ich hoffe Ihr findet den Fehler bzw. könnt mir meinen Denkfehler nennen denn ich bin mir sicher das ich den Seitenaufbau viel Leichter haben könnte.

LG Daniel

P.S. Die Dateien im Anhang zum besseren Verständnis
 

Anhänge

Hi,

KingOfRap hat gesagt.:
Die Dateien im Anhang zum besseren Verständnis
Zum Vergrößern anklicken....

zum tatsächlich besseren Verständnis, wäre hier eine Skizze des erwünschten Sollzustands, sowie der Hinweis, in welchem Browser die Positionierung fehlerhaft ist, ganz hilfreich, da sie sich in den gängigen Browsern grundlegend voneinander unterscheidet.

Zum Footer kann ich aber schonmal sagen, dass dieser, wie auch der übrige Inhalt in einen übergeordneten Block eingebettet gehört, der relativ positioniert ist - siehe hierzu meinen Webmaster-FAQ-Artikel CSS Wie richte ich eine Box am unteren Rand der Elternbox aus? oder auch mein CSS-Tutorial CSS-Layout mit 100%-Höhe, das u.a. Beispiele bereithält, in denen sich der Footer am unteren Fensterrand befindet, und bei zunehmenden Inhalt nach unten verschoben wird.

mfg Maik
 
So dürfte es wohl dem gewünschten "Sollzustand" entgegenkommen:

Code: 
<body>
<div id="wrapper">
<div id="header">...</div>

<div id="main">
        <div id="content" class="clearfix">
                        ...
                        ...
                        ...
        </div>
</div>

<div id="footer"></div>
</div><!-- // #wrapper -->
</body>
Code: 
html,body {
height:100%;
}

#wrapper {
position:relative;
min-height:100%;
height:auto !important;
height:100%;
}

.head {
        width: 600px;
        height: 20px;
        background-color: #FF0000;
        color: #FFFFFF;
        clear:both;
}

.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
 
Danke Dir vielmals, das rettet meinen Zeitplan enorm. Hätte bestimmt noch lange dran herum probiert. :)
 
KingOfRap hat gesagt.:
sitze gerade in der Schule und muss ein kleines Ein-Seiten-Projekt machen mit HTMl und CSS und finde meinen Fehler bzw. meinen Denkfehler nicht.
Zum Vergrößern anklicken....

KingOfRap hat gesagt.:
Danke Dir vielmals, das rettet meinen Zeitplan enorm. Hätte bestimmt noch lange dran herum probiert. :)
Zum Vergrößern anklicken....

Hoffentlich fällt dem Lehrerkollegium nicht auf, dass du von mir abgeschrieben hast, denn sonst hagelt's für deinereiner eine "6", und meinereiner muß bei zukünftigen Klausuren mit-an-Wahrscheinlichkeit-grenzender-Sicherheit im Klassenraum mind. zwei Tische von dir getrennt Platz nehmen :suspekt::-)

mfg Maik
 
Maik hat gesagt.:
Hoffentlich fällt dem Lehrerkollegium nicht auf, dass du von mir abgeschrieben hast, denn sonst hagelt's für deinereiner eine "6", und meinereiner muß bei zukünftigen Klausuren mit-an-Wahrscheinlichkeit-grenzender-Sicherheit im Klassenraum mind. zwei Tische von dir getrennt Platz nehmen :suspekt::-)

mfg Maik
Zum Vergrößern anklicken....

:-) Neenee die Lehrer waren selber überfordert und wissen das ich hier nachgefragt habe, so falsch lag ich garnicht mit der Annahme das es an der Positionierung liegt :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück