HTML Probleme bei tabellenlosen Layout

[FuXxMiTdOpPeLX]

Hallo,

ich bin dabei mein erstes tabellenloses Layout zu erstellen und habe nun ein paar Probleme.

Hier der Link zum Layout: http://christoph-schiffer.de/khs/


Ich habe den Footer und die Spiegelung (am Ende der Navigation) absolut positioniert, weil ich nicht wusste wie ich die Elemente anders ans Ende der Seite bekommen sollte. Nun habe ich natürlich das Problem, dass der Footer überlagert wird, wenn der Inhalt länger ist oder dass die Navigation von der Spiegelung überlagert wird, wenn man eine niedrigere Auflösung hat oder das Fenster kleiner macht.

Der Footer und die Spiegelungen sollen die anderen DIVs berücksichtigen und nicht mehr überlagern, gleichzeitig aber immer am Ende der Seite stehen. Leider weiß ich nicht, wie ich das hinbekommen soll.

Ich hoffe mir kann da jemand weiterhelfen.

MfG

 

[ManOki]

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow ... mehr gibts da nicht zu sagen

 

[Zimon]

eine andere gute quelle ist noch css4you...
http://www.css4you.de/wslayout1/index.html

 

[FuXxMiTdOpPeLX]

Danke für die Links aber die bringen mich glaube ich auch nicht wirklich weiter. Ich habe es auch schon mit float versucht, dann berücksichtigen der Footer und die Spiegelung zwar die anderen DIVs aber klatschen immer direkt unter den anderen DIVs und nicht am Ende der Seite. Ich habe es einmal hinbekommen, dass der Footer im FF/Opera usw funktionierte aber im IE hat der das komplett anders dargestellt. Mir fehlt auch ein wenig das Verständnis dafür...

 

[SirTwist]

du willst also, dass der Footer immer parallel zum Textende des Haupttextest läuft, richtig?


offtopic: nettes Design!

Gruß

 

[Sparta8]

Ich würde die Seite mit floats gestalten.
Nav wird links gefloatet, Nav-Spiegelung auch float links und clear left, Inhalt wird rechts gefloatet und der footer schließt am Ende mit clear:both ab.

 

[SirTwist]

@sparta: das habe ich mir auch gedacht, wollte aber erst auf eine Antwort warten

 

[Antoniker]

Hi,
zu allererst: ich wollte mich eigentlich schon früher melden, jedoch konnte ich mich von der Arbeit aus nicht einloggen, egal. - Gehört hier nicht her, sry

Zu deinem Problem:
Navigation:

position: fixed;
width: xx px;
​

Inhalt:

margin-left: xx px; <-- Hier die Breite deiner Navigation + Abstand eingeben (logisch )
position oder so, brauchst du nicht
​

Footer:

position: fixed;
Breite, Höhe, ggf. Z-Index angeben!
​

Wenn du den Footer so setzt, solltest du (theoretisch) keine Probleme mit Überlappungen vom Text deines Inhalts bekommen.

position: absolute braucht man eigentlich so gut wie nie, es scheint nur immer leichter damit

Ich möchte dir auch ans Herz legen, die Navigation umzuschreiben!
Divs für Links? Semantisch inkorrekt... Es wäre eine Aufzählung, also eine Liste.
Sprich:

<ul>
<li class="button_active">Startseite</li>
<li class="button_inactive">Konzept</li>
...
</ul>

So, hoffe ich konnte helfen.
Ich bastle aber an einer ähnlichen Seite seit ein paar Tagen (leider komme ich nicht so gut voran, da mich nebenbei meine Arbeit und Freundin ein wenig stressen ).

Wenn du möchtest schicke ich dir das ganze und du blätterst den Code einmal durch

mfg Michael

 

[FuXxMiTdOpPeLX]

So, ich habe mich mal wieder dran versucht, komme aber auch mit den Lösungsvorschlägen von Sparta8 und Antoniker nicht weiter.

Vielleicht findet sich hier ja jemand der das für mich machen könnte. (Falls es nicht zu großer Aufwand ist)

Hier nochmal der Link: http://christoph-schiffer.de/khs/

 

[Crizzo]

Wäre es für dich eine Alternative die Methode: Footer Stick Alt zu nutzen?
Dort steht der Footer immer unten am Rand und wird vom Inhalt weiter nachunten gedrückt, sobald dieser zu groß wird.

Beispiel Footer Stick Alt: http://www.themaninblue.com/writing/perspective/2005/08/29/

Seite kurz: http://www.themaninblue.com/experiment/footerStickAlt/good_example_short.htm
Seite lang: http://www.themaninblue.com/experiment/footerStickAlt/good_example_long.htm

 

[Boffo]

Ich bin mir nicht sicher, ob ich dich richtig verstanden habe, vermutlich eher nicht, also nicht übel nehmen

Aber so wie ich das sehe, liegts an folgenden Zeilen in der stylesheetkhs.css:

body {
background-image: url(../gfx/footerbg.png);
background-position: bottom;
background-repeat: repeat-x;
margin: 0px;
height: 100%;
height:auto !important;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #003e7c;

ersetze diese einfach durch:

height: 1000px;
min-height: 100%;

und nimm das "height:auto !important;" ganz raus.

Der Footer ist damit wie bisher immer am unteren Rand, aber macht bei 1000 Pixel Abstand zum oberen Browserrand halt. Wird das Bild kleiner als 1000px+Footer-Höhe, kommt der Scrollbalken.
Meinste das?

 

[Crizzo]

Dieser Code ist der Kern von Footer Stick Alt:

html {
height:100%;
}
body {
height:100%;
}
#nonFooter {
min-height:100%;
position:relative;
}
* html #nonFooter {
height:100%;
}
#footer {
margin:-7.5em auto 0;
position:relative;
}
* html #footer {
margin-top:-7.4em;
}
* html #footer {
margin-top:-7.4em;
}

Das musst du nach bauen. "margin-top" von #footer entspricht seiner Höhe.