HTML Probleme bei tabellenlosen Layout

FuXxMiTdOpPeLX

Commander
Dabei seit
Mai 2007
Beiträge
2.335
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
 

FuXxMiTdOpPeLX

Commander
Ersteller dieses Themas
Dabei seit
Mai 2007
Beiträge
2.335
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

Ensign
Dabei seit
Nov. 2006
Beiträge
184
du willst also, dass der Footer immer parallel zum Textende des Haupttextest läuft, richtig?


offtopic: nettes Design!

Gruß
 

Sparta8

Lieutenant
Dabei seit
Juli 2008
Beiträge
845
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.
 

Antoniker

Lt. Junior Grade
Dabei seit
Nov. 2006
Beiträge
290
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 :rolleyes:

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:

HTML:
<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

Commander
Ersteller dieses Themas
Dabei seit
Mai 2007
Beiträge
2.335
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

Commander
Dabei seit
Juli 2005
Beiträge
2.096

Boffo

Lt. Junior Grade
Dabei seit
Jan. 2008
Beiträge
496
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?
 
Zuletzt bearbeitet:

Crizzo

Commander
Dabei seit
Juli 2005
Beiträge
2.096
Dieser Code ist der Kern von Footer Stick Alt:
Code:
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.
 
Top