|
|||
Header auf der rechten Seite fixieren
Hallo liebe Community,
ich war lange nicht mehr hier, brauch nun aber eure Hilfe. Mein Ziel: Ich möchte das Headerelemnt auf der rechten Seite fixieren. Was dar ist: Ich habe einen Wrapper der 1024px breit ist und durch margin zentriert ist. Im Wrapper habe ich eine Sectionelement und ein Headerelement. Per CSS bekommt der Header eine fixe Breite (250px), die Section hat keine Breite damit sie flexibel bleibt (wichtig für responsiv design später). Meine Vorgehensweise: Da ich einen fixen Header haben möchte, gebe ich ihm per CSS die Declaration Code:
position: fixed; Soweit ist alles in ordnung, beide Element sind zentriert und das eine ist fixiert das ander nicht. Das Headerelemnt hat durch das Positinieren einen höheren z-index bekommen und klebt in der linken oberen Ecke des Wrappers. Per CSS wird jetzt noch 100% Höhe vergeben und nun möchte ich dass das Header Element nicht links im Wrapper ist sondern rechts. Mit Top|Right|Bottom|Left kann ich zwar den Header verschieben aber da Code:
position: fixed; So ein Testcase ist eingerichtet (Sorry für die üblen Fraben) Falls Ihr den Code direkt haben wollt, bitte schön: CSS Code:
* { margin: 0; } body { background: red; } #wrapper { background: red; width: 1024px; margin: 0 auto; max-width: 98%; min-height: 100%; } header { background: green; width: 250px; position: fixed; height: 100%; } section { background: orange; margin-left: 250px; /* Damit der Text nicht überdecht wird */ } HTML-Code:
<body> <div id="wrapper"> <header> <ul> <li>Punkt</li> <li>Punkt</li> <li>Punkt</li> </ul> </header> <section> <article> <h1>Lorem Ipsum</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </article> <article> <h1>Lorem Ipsum</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </article> <article> <h1>Lorem Ipsum</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </article> </section> </div> </body>
Ich würde mich freuen wenn jemand sich erbarmen würde mir einen Ratschlag zu geben MfG Flo
__________________
/* no comment */ Geändert von Noobi_2.0 (27.03.2013 um 17:32 Uhr) |
Sponsored Links |
|
|||
Zitat:
Code:
header { background: green; width: 250px; position: fixed; height: 100%; right: 0px; } section { background: orange; margin-right: 250px; /* Damit der Text nicht überdecht wird */ } Zitat:
|
Sponsored Links |
|
|||
Ähm ja...
Zitat:
Falls nein möchte ich nur freundlich darauf hinweisen, dass ich bereits erwähnt habe das ich das Elemnt zwar mit Top|Right|Bottom|Left bewegen kann, aber ganau dass nützt mir nichts, weil alle Elemnte die mit Code:
position: fixed; Code:
right: 0px; Ja es fixiert, hat aber eben diese positionierungs probleme. Schade, aber trotzdem danke für deine Bemühungen. MfG Flo
__________________
/* no comment */ |
|
|||
ok, dann dreh die Schreibrichtung um.
Code:
#wrapper { background: red; width: 524px; margin: 0 auto; max-width: 98%; min-height: 100%; direction:rtl; } header { background: green; width: 250px; position: fixed; height: 100%; direction:ltr; } section { direction:ltr; background: orange; margin-right: 250px; /* Damit der Text nicht überdecht wird */ } |
|
|||
Aha..
einmal schnell ausprobiert und es funktionier einwandfrei. Diese Methode scheint mir zwar etwas ungewöhnlich, aber es klappt. Wow Danke! Falls sonst niemand mehr andere Ideen hat, kann der Thread geschlossen werden. Mein Problem ist ja gelöst. Danke nochmal. MfG Flo
__________________
/* no comment */ |
|
|||
Dann halt nicht ist auch in Ordnung (macht ja auch irgendwie ein bisschen Sinn). Ich kenn das aus anderen Foren, wenn man das nicht macht gibt es immer mecker.
MfG Flo
__________________
/* no comment */ |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Header über die ganze Seite laufen lassen! | steve46 | CSS | 11 | 14.07.2011 00:39 |
Header mit img, h1 und form | Uwe_B | CSS | 22 | 02.10.2008 12:07 |
Probleme mit dem Layout: divanordnung | Muckel | CSS | 8 | 29.06.2008 12:28 |
header wächst mit schriftvergrösserung nicht mit | Pascolo | CSS | 2 | 11.05.2008 20:22 |
Verhindern dass FF beim Druck die Seite Zerstückelt/verteilt | cre-aid | CSS | 0 | 18.04.2008 11:23 |