div vertikal ausrichten ohne Überschneidung
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angabe
ansicht
beginnen
bereich
browser
code
ergebnis
header
http
layout
login
nennen
option
position
reihenfolge
relevante teile
sinnvoller text
url
vermutung
zaubern
-
Hallo
ich habe jetzt recht lange gegoogelt und selber versucht ohne das gewünschte Ergebnis zu erhalten.
Ich habe ein Layout was inetwa so aussieht:
[img]http://abload.de/img/layout7aa3g.jpg[/img]
Also Header und Footer (jeweils fixe Grösse) dazwischen horizontal 3 divs. (Die wurden begrenzt mit top und bottom, sodass sie immer genau auf Höhe Header Footer beginnen)
Soweit habe ich auch alles hinbekommen.
Jetzt will ich im rechten div unten einen Login Bereich machen. Der Bereich über dem Login (nennen wir es NEWS) darf das Login aber nicht überschneiden.
Ich hoffe ihr versteht was ich mir wünsche.
Das Problem das ich nun dabei habe ist scheinbar, dass der Login immer unten sein soll und der News Bereich immer oben anfängt. (nur eine Vermutung)
Lasse ich die Angabe wie unten stehen kann es sein, dass die News einfach in das DIV Login rein wandert und beide sich so überlagern.
Ich kann dem NEW-Bereich aber auch keinen Bottom Wert zuweisen, da ich diesen ja nicht kenne (jenachdem, welche Ansicht der Nutzer hat variiert das ein wenig // ausserdem wird der Login Bereich nach dem login kleiner erscheinen, da weniger Optionen)
Ich hab mir ja gedacht sowas könnte man evtl. mit einer Option wie float: bottom hinbekommen - aber sowas habe ich nicht gefunden.
Was kann bzw. muss ich ändern dass News maximal bis zu Beginn von Login geht.
Wenn das mit css direkt nicht geht (wäre schade) dann auch gern mit jquery.
Vielen Dank schonmal vorab.
css um NEWS und LOGIN herum
position: absolute; top: 100px; bottom: 60px; right: 0px; width: 200px; float: left; padding: 10px 0px 0px 0px; z-index: 100; background-color: transparent;
css NEWS
top: 0px;
css LOGIN
position:absolute; bottom: 0px; width: 200px; -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Also ich kann mit der Abbildung und den Codeschnippseln wenig anfangen, zumal sich dem dem wenigen, was an CSS zu lesen ist schon Fragen ergeben.
In solchen Fällen ist es einfach besser, irgendwo eine Demo-Seite aufzumachen.
-
Na das ist ja das geringste Problem ;)
mein-name.lima-city.de
oder anders gesagt
http://airfield-manager.lima-city.de
Da ich im moment nur an dem Layout bastel ist noch kein sinnvoller Text und keine Funktion implementiert.
Dass ich nur diesen css Teil kopiert habe ist einfach erklärt. - Es heisst immer nur relevante Teile posten. Dem dachte ich damit Rechnung zu tragen - Den alle anderen Bereiche funktionieren ja wie sie sollen.
-
Jetzt ist es anschaulicher.
Allgemeine Anmerkung:
float gibt es nur mit left,right,none
float und position:absolute bzw. relative schließen sich aus
siehe http://www.css4you.de/float.html
Eine reine CSS-Lösung gibt es meiner Meinung nach nicht, wohl deshalb, weil der Browser beim darstellen des Elementes A wissen müsste, wieviel Platz das nachfolgende Element B benötigt. Browser arbeiten aber den Code in der Reihenfolge ab, wie er im Quelltext steht.
Es gibt bestimmt eine Möglichkeit, mit JavaScript (ggf. gleich mit jQuery) so etwas zu zurechtzubasteln. da bin ich aber nicht fit genug, um da schnell mal etwas aus dem Hut zu zaubern.
-
Ok, vielen Dank für Deine Hilfe.
Dass Float und position sich ausschliessen war mir nicht bewusst. :(
Ich habe es jetzt mit einem kleinen jquery script gelöst.
Ich lese die Höhe von LOGIN aus und setze Bottom von NEWS auf den entsprechenden Wert. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
![[img]http://abload.de/img/layout7aa3g.jpg[/img]](http://abload.de/img/layout7aa3g.jpg){kind=link}