|
|||
Wie bekommt man dieses Layout hin?
Ich bin gerade auf folgende Seite gestossen:
StartSeite - Pilgerer Die gefällt mir weil sie einen wirklich schlichten, übersichtlichen Aufbau hat. Nun habe ich schon ein wenig probiert, aber irgendwie bekomme ich das nicht. Wie macht man das, dass die Navigation links bleibt, dann der vertikale Strich folgt und dann der Inhalt dargestellt wird? Über Hinweise, wie ich auch sowas realisieren kann, würde ich mich freuen. |
Sponsored Links |
|
|||
Hi,
schau ins Stylesheet der Seite: Code:
border-right: 1px solid #ccc; Hier findest du das komplette CSS-File: KLICK MfG Matze
__________________
|
Sponsored Links |
|
|||
Zitat:
#container_content ist ein r-float von 100% Breite, ja, hat aber links einen negativen margin von margin-left:-16em; Die nachfolgende l-float Sidebar von 16em Breite flutscht dann nach oben rutschend rein, schießlich ist oben ja ein r-float mit genügend Platz nach links. |
|
|||
Zitat:
Was ist die Firebug-Extension? Hat das was mit Firefox zu tun (jedenfalls bringen mich die Suchergebnisse von Google zu der Annahme)? HTML und CSS kenne ich soweit. Es hapert nur wenn es um die Umstellung von Tabellenlayout an das CSS-Layout geht. Zitat:
Flutscht nach oben rutschend rein??? |
|
|||
Also ich habe das mal versucht:
Der HTML-Teil: Code:
<div id="content"> Inhalt </div> <div id="navi"> Navigation </div> Code:
#content { width: 100%; float: right; margin-left: -16em; border: 1px solid; } #navi { width: 16em; float: left; border: 1px solid; } |
|
|||
Mit firebug kannst du Seiten analysieren. Es ist ein Zusatz zu Firefox.
Dein Testcode berücksichtigt nicht die border. Wenn oben nur 16em Platz freigehalten werden, von unten aber 16em plus 2x1px border kommen, kann da nichts von unten nach oben rutschen. Da flutscht dann nichts. Der Kopf passt nicht durch den Ausschnitt des Pullis. Nimm die border weg und guck dir das Ergebnis bitte im Firefox an. Die zärtlich #navi genannte div rutscht nach oben. Der Text oben muss natürlich noch nach rechts rücken, um eben diese 16em. Guck dir im Originalcode an, wie die diese Einrückung vornehmen. |
|
||||
[OT]
Zitat:
"Die Nachfolgende Sendung ist für Zuschauer unter 16 Jahre nicht geeignet" ((@IChao: Deine Infos sind ja ok... ich konnte aber nicht anders: Tschuldigung ))
__________________
To attain knowledge, add things everyday. To obtain wisdom, remove things everyday. (Lao Tzu) Links : Some needfull links (Delphi, XHTML...) Tools : Arpoon Freeware (Checksum...) |
|
|||
Ok, ich komme langsam vorwärts.
Ohne border "flutscht" der Inhalt von #navi tatsächlich nach oben. Das Problem ist dann aber immer noch, dass der Inhalt von #content ganz links steht. Also steht derzeit der Text von #navi und #content übereinander. Das ist dann ein wenig schwer zu lesen... Ich bedanke mich jedenfalls schon mal an der Stelle für die Geduld und die Hilfe, die mir angeboten wird. |
|
|||
Deswegen müssen die inneren Elemente von #content ja auch nach rechts ausweichen. Es geht mir darum, dir das Prinzip zu erklären, wie die Sidebar überhaupt nach links oben kommt, wenn sie doch im Quellcode nach dem Inhalt erst startet. Hast du einmal das Prinzip verstanden, geht es weiter mit den anderen Problemen. Als nächsten Tipp würd ich dir gerne auf den Weg geben, dass du in #centent etwas mehr Platz als 16em lässt (für die border, die du planst). Das muss ja nicht alles haargenau nebeneinander passen.
|
Sponsored Links |
|
|||
Die Sidebar "flutscht" nach oben, da content links die margin-left: -16em; hat und weil #navi mit float: left; und entsprechender Breite genau dort hinein passt. Das habe ich verstanden.
Dann gebe ich da als margin-left: -17em; an, um auch noch die border dort anzulegen? |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Wie bekommt man das sooo hin ?! | exxon | CSS | 17 | 16.11.2010 21:26 |
2worx - CMS/Baukasten mit Chancen? | AndreasMueller | Barrierefreiheit | 14 | 09.11.2010 14:06 |
Liquides Layout ohne logische Struktur zu zerstören | sas | (X)HTML | 17 | 22.03.2010 10:35 |
menü will nicht da hin wo es hin soll... | Freetoast | CSS | 2 | 25.01.2008 14:08 |
Komplexes CSS Layout - kann man das so machen? Browserproble | jensemuc | CSS | 5 | 03.03.2005 10:24 |