Klassisches Layout und doch komplex?
0 0 
rfb
0
Klassisches Layout und doch komplex?
Hallo,
ich arbeite gerade an einem Layout für eine Homepage. Zugegebenermaßen bin ich kein CSS-Profi, möchte es aber lernen und dennoch versuchen, die von vielen gehassten Table- und Framelayouts zu vermeiden.
Ich möchte gerne das Layout, welches Ihr als Skizze unter folgender Adresse findet, in CSS schreiben.
Hier findet ihr die Skizze:
http://www.bilder-hosting.de/show/IPFTG.html
Nun habe ich hierzu eine spezielle Frage. Der Header ist kein großes Problem. Den habe ich einfach als align="center" deklariert - problemfrei. Allerdings sollen die zwei Teile "Menü" und "Content" darunter auch im Center sein. Sie sollen also nicht direkt am linken Bildschirmrand angrenzen, sondern sich insgesamt in der Mitte befinden.
Mich würde nun interessieren, wie das möglich ist. Der linke Rand des Menüs soll also nicht über den linken Rand des Headers und der rechte Rand des Contents soll nicht über den rechten Rand des Headers hinausgehen. Beide teile sollen direkt unter dem Header und nebeneinander im Center der Seite stehen.
Könnte mir jemand nur mal grob die Struktur des CSS-Codes für dieses Layout posten?
Vielen Dank im Voraus und viele Grüße,
Rise.
-
Hi
Könnte mir jemand nur mal grob die Struktur des CSS-Codes für dieses Layout posten?
Nein, dann wäre das hier kein SELF-Forum mehr.
Eine Lösung wäre, beide #content und #menu zusammen in einen Bereich <div> zu packen. Den kannst du dann genauso breit machen wie dein header, und mit align=center mittig platzieren.
Pass auf bei übergroßem Inhalt!!Tussi
-
Moin
Eine Lösung wäre, beide #content und #menu zusammen in einen Bereich <div> zu packen. Den kannst du dann genauso breit machen wie dein header, und mit align=center mittig platzieren.
aber keine gute Lösung, denn wozu gibts CSS?
der Abstand links ergibt sich aus margin-left, der rechts entsprechend margin-right, wenn du beide für ein Element angibst liegt es dazwischen, wenn beide den gleichen Wert haben ist es logischerweise zentriert. Also kein align=center.
Eine Kombination von width und margin-right bzw. -left sowie bei 2 Elementen nebeinander zusätzlich float sollte genügen.Gruß
rfb--
Man kann einen Menschen nichts lehren, man kann ihm nur helfen, es selbst zu entdecken.
(Galileo Galilei)-
Hallo,
ich habe nun die Lösung gefunden.
#container { position:absolute;
left:50%;
width:900px;
margin-top:0px;
margin-left:-450px;
padding:0px;
}
#menu { float:left;width:150px;}
#content {float:right;width:750px;}<div id="container">
<div id="header">Platz für das Logo</div>
<div id="menu">Hier kommt das Menü hin</div>
<div id="content>Hier steht der Inhalt.</div>
</div>Der Container wird mittels eines kleinen Tricks (left 50% und dann margin-left dem negativen Wert der Hälfte der Breite der zu zentrierenden Box zugewiesen) zentriert und enthält alles weitere. Scheint im IE und Firefox zu laufen.
Könnte mir nun, da ich ja den Code habe, jemand sagen, wie sicher obiges ist? Wenn es nicht sicher ist würde ich mich sehr über Verbesserungsvorschläge hoffen. Die andere Lösung mit text-align: center; funktioniert im Übrigen nicht im Firefox :(. Ich möchte ungerne, dass es auf anderen Rechnern damit wegen des Codes zu Komplikationen kommt.
Vielen Dank im Voraus und einen schönen Sonntag,
Rise.
-
Der Container wird mittels eines kleinen Tricks (left 50% und dann margin-left dem negativen Wert der Hälfte der Breite der zu zentrierenden Box zugewiesen) zentriert und enthält alles weitere. Scheint im IE und Firefox zu laufen.
Das geht auch einfacher mit "margin:0 auto;" für den #container.
Dann funktionierts auch besser bei kleinen Fensterbreiten.-
Das geht auch einfacher mit "margin:0 auto;" für den #container.
Dann funktionierts auch besser bei kleinen Fensterbreiten.Vielen Dank! Dann wäre ja jetzt alles geklärt :).
Danke für eure Unterstützung und bis bald!
-
-
-
-
-
Ich möchte gerne das Layout, welches Ihr als Skizze unter folgender Adresse findet, in CSS schreiben.
Grundlagen für Spaltenlayout mit CSS enthält einige Beispiele, die du dir ansehen solltest.
Könnte mir jemand nur mal grob die Struktur des CSS-Codes für dieses Layout posten?
Siehe ebenda.
Roland
