|
|||
Zentrierter Content + Navigation links daneben
Hallo erstmal,
ich möchte ein Layout wie folgt aufbauen: Content soll zentriert sein und links daneben eine Navigation. Ich habe mal eine Zeichnung erstellt, die verdeutlichen soll wie ich das meine: Zitat:
Ich hoffe jemand von euch hat ne geniale Idee oder kann meine Gedanken in die richtige Richtung stupsen falls ich gerade einfach auf dem falschen Dampfer bin! Freundliche Grüße CreativeGeek |
Sponsored Links |
|
|||
Das einfachste dürfte sein, die Navigation als Unterteil des Contents zu begreifen und so ins HTML einzubauen. Dann kannst Du leicht horizontal zentrieren ( 50% und um die Hälfte der Breite oder dem gewünschten Wert mit negativem Margin nach links verschieben.)
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
Sponsored Links |
|
|||
Insofern ich dich richtig verstanden habe, würde die Navigation beim verkleinern des Browserfensters aber irgendwann links aus dem Browser in den nicht sichbaren Bereich wandern (was bei Netbooks etc. natürlich sehr unpassend wäre)!
|
|
|||
Nein. Probiers aus:
Du kannst Dir mal friccas Beispiel ansehen, das es gut darstellt: CSS vertical center using float and clear aus: Vertikale und horizontale Zentrierung
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
|
|||
Dann versteh ich dich einfach nur falsch, kannst du, falls du Zeit hast mal eben das HTML-Gerüst mit CSS aufsetzen?
Friccas Beispiel ist ja komplett zentriert, das will ich ja eben nicht, der Content soll zentriert sein und die Navigation außerhalb der Zentrierung rechts oder links neben dem zentrierten Content. |
|
|||
Zitat:
Siehe auch die Hinweise für Fragende. [Ich kann im Moment auch nicht nachvollziehen, worauf andir hinaus will.] Ich habe vor langer Zeit mal so einen asymmetrischen Zentrier-Versuch gemacht. Außer im IE6 sollte es keinen verfrühten Scrollbalken geben, ich weiß nicht, ob du damit leben kannst. Browserkompatibilität musst du testen, ist schon älter und ich hab's nie gebraucht. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <style type="text/css"> * { margin:0; padding:0; } body { margin-right:200px; /* Einschraenkung Body-Breite gemaess Mass der Asymmetrie; kein Padding, sonst verfruehter Scrollbalken in IE7; IE6 immer */ } #wrap { margin:0 50% 0 auto; } #wrap2 { margin-right: -400px; /* 300 (Haelfte der Breite des zentr. Elements) + 100 (Haelfte der Breite des ueberstehenden Elements) */ margin-left:auto; background:red; width:600px; border-left:200px solid green; /* Simuliertes asymmetrisches Element */ height:400px; } </style> </head> <body> <div id="wrap"> <div id="wrap2"> </div> </div> </body> </html>
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Das ist exakt das, was ich wollte! Vielen Dank für deine Hilfe und natürlich auch ein dickes Danke an alle anderen die ihr Hirn für mich angestrengt haben
Jetzt würde ich das ganze gerne noch ein wenig erweitern/verkomplizieren: In deinem Beispiel soll wrap2 immer 300px hoch sein und am unteren Rand des Browsers kleben (selbst wenn ein vertikaler Scrollbalken da ist). Ursprünglich wollte ich das div (in deinem Fall wrap2) im Body-Tag haben, da man es so leicht an den unteren Rand des Browsers bekommt. Also wenn ihr dafür auch noch ne Lösung findet... das wär klasse |
|
|||
Ich versteh kein Wort, tut mir leid.
Bitte formulier neu, was du willst. Zeig es am besten an deinem Code.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
Ich hab noch keinen Code, andernfalls würde ich ja nicht fragen.
Einfach formuliert: die Navigationsbox so wie sie jetzt ist an dem unteren Browserrand verschieben und fixieren (soll horizontal schon seine Position ändern beim verkleinern des Fensters). |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Content richtet sich NICHT nach Navigation | poffi | CSS | 1 | 15.10.2010 18:23 |
Falsche Darstellung im Internet Explorer | rw1981 | CSS | 3 | 06.02.2009 13:51 |
Unerklärlicher Abstand zwischen Listen im IE6 | ven | CSS | 4 | 10.06.2008 10:03 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 16:29 |
Navigation Links Hover | child | CSS | 3 | 25.02.2005 22:00 |