zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wie bekommt man dieses Layout hin?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.08.2007, 12:23
-
neuer user
Thread-Ersteller
 
Registriert seit: 26.01.2005
Ort: 76000
Beiträge: 44
ComLar befindet sich auf einem aufstrebenden Ast
Standard 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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.08.2007, 12:33
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 07.04.2007
Beiträge: 311
ct2oo4 befindet sich auf einem aufstrebenden Ast
Standard

Hi,
schau ins Stylesheet der Seite:
Code:
border-right: 1px solid #ccc;
(unter "Sidebar" -> #sidebar zu finden)
Hier findest du das komplette CSS-File: KLICK

MfG Matze
__________________
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.08.2007, 12:35
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Zitat:
Wie macht man das, dass die Navigation links bleibt, dann der vertikale Strich folgt und dann der Inhalt dargestellt wird?
Es ist nicht so. Nutze die Firebug extension, und guck dir HTML samt CSS an.

#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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #4 (permalink)  
Alt 12.08.2007, 12:46
-
neuer user
Thread-Ersteller
 
Registriert seit: 26.01.2005
Ort: 76000
Beiträge: 44
ComLar befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von IChao Beitrag anzeigen
Es ist nicht so. Nutze die Firebug extension, und guck dir HTML samt CSS an.

#container_content ist ein r-float von 100% Breite, ja, hat aber links einen negativen margin von margin-left:-16em;
Kein Wort verstanden...

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

Flutscht nach oben rutschend rein???
Mit Zitat antworten
  #5 (permalink)  
Alt 12.08.2007, 12:56
-
neuer user
Thread-Ersteller
 
Registriert seit: 26.01.2005
Ort: 76000
Beiträge: 44
ComLar befindet sich auf einem aufstrebenden Ast
Standard

Also ich habe das mal versucht:

Der HTML-Teil:
Code:
    
<div id="content">
Inhalt
</div>
<div id="navi">
Navigation
</div>
Der CSS-Teil:
Code:
#content {
  width: 100%;
  float: right;
  margin-left: -16em;
  border: 1px solid;
}

#navi {
  width: 16em;
  float: left;
  border: 1px solid;
}
Aber das klappt nicht... Also liegt da noch irgendwo ein Fehler. Oder hängt das mit diesem Firebug-Teil zusammen?
Mit Zitat antworten
  #6 (permalink)  
Alt 12.08.2007, 13:15
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #7 (permalink)  
Alt 12.08.2007, 13:16
Benutzerbild von Loïs Bégué
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2007
Ort: Freiburg (D)
Beiträge: 779
Loïs Bégué wird schon bald berühmt werden
Standard [OT]

Zitat:
Zitat von IChao Beitrag anzeigen
...
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.

"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...)
Mit Zitat antworten
  #8 (permalink)  
Alt 12.08.2007, 13:24
-
neuer user
Thread-Ersteller
 
Registriert seit: 26.01.2005
Ort: 76000
Beiträge: 44
ComLar befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 12.08.2007, 13:32
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 12.08.2007, 13:41
-
neuer user
Thread-Ersteller
 
Registriert seit: 26.01.2005
Ort: 76000
Beiträge: 44
ComLar befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:17 Uhr.