zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Header auf der rechten Seite fixieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.03.2013, 17:28
body { display: none; }
neuer user
Thread-Ersteller
 
Registriert seit: 28.11.2011
Beiträge: 21
Noobi_2.0 befindet sich auf einem aufstrebenden Ast
Beitrag 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;
da dies mir die einzige bis hier hin bekannte Möglichkeit ist Dinge zu fixieren.

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;
sich am viewport orientiert, nützt mir das relativ wenig.

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
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>
Meine Fragen:
  1. Wie bekomme ich den Header auf die rechte Seite?
  2. Gibt es noch andere Möglichkeiten Elemente zu fixieren?

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)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.03.2013, 18:00
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Wie bekomme ich den Header auf die rechte Seite?
so geht das:

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:
Gibt es noch andere Möglichkeiten Elemente zu fixieren?
Wozu? Position:fixed macht doch genau was du suchst.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.03.2013, 18:37
body { display: none; }
neuer user
Thread-Ersteller
 
Registriert seit: 28.11.2011
Beiträge: 21
Noobi_2.0 befindet sich auf einem aufstrebenden Ast
Standard Ähm ja...

Zitat:
Zitat von explanator Beitrag anzeigen
so geht das:

Code:
header {
    background: green;
    width: 250px;
    position: fixed;
    height: 100%;
    right: 0px;
}
section {
    background: orange;
    margin-right: 250px; /* Damit der Text nicht überdecht wird */
}
Sag mal hast du meinen Post gelesen?
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;
declariert wurden sich am viewport ausrichten (Fensterbreite). Was bedeutet das, wenn ich
Code:
right: 0px;
anwende mein Header am rechten rand des Fensters klebt (probiers mal aus z.B. mit Firebug).

Zitat:
Zitat von explanator Beitrag anzeigen
Wozu? Position:fixed macht doch genau was du suchst.
Ja es fixiert, hat aber eben diese positionierungs probleme.

Schade, aber trotzdem danke für deine Bemühungen.

MfG Flo
__________________
/* no comment */
Mit Zitat antworten
  #4 (permalink)  
Alt 27.03.2013, 18:47
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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 */
}
Mit Zitat antworten
  #5 (permalink)  
Alt 27.03.2013, 19:02
body { display: none; }
neuer user
Thread-Ersteller
 
Registriert seit: 28.11.2011
Beiträge: 21
Noobi_2.0 befindet sich auf einem aufstrebenden Ast
Beitrag

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 */
Mit Zitat antworten
  #6 (permalink)  
Alt 27.03.2013, 19:50
Benutzerbild von fox
fox fox ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Beiträge: 1.008
fox sorgt für eine eindrucksvolle Atmosphärefox sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Noobi_2.0 Beitrag anzeigen
Falls sonst niemand mehr andere Ideen hat, kann der Thread geschlossen werden. Mein Problem ist ja gelöst.
So was wird hier eigentlich nicht gemacht. Vielleicht hat ja mal jemand ein ähnliches Problem oder eine Frage dazu.
__________________
:)
Mit Zitat antworten
  #7 (permalink)  
Alt 28.03.2013, 00:50
body { display: none; }
neuer user
Thread-Ersteller
 
Registriert seit: 28.11.2011
Beiträge: 21
Noobi_2.0 befindet sich auf einem aufstrebenden Ast
Beitrag

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 */
Mit Zitat antworten
  #8 (permalink)  
Alt 28.03.2013, 00:57
Benutzerbild von fox
fox fox ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Beiträge: 1.008
fox sorgt für eine eindrucksvolle Atmosphärefox sorgt für eine eindrucksvolle Atmosphäre
Standard

Ja, es fühlt sich "abgeschlossen" (nicht nur im wörtlichen Sinne) an, aber es war schon ein paar mal so, dass dann noch Fragen kamen, und deswegen dann ein neues Thema aufmachen zu müssen wäre ja Unsinn. Tut ja keinem Weh.
__________________
:)
Mit Zitat antworten
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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:25 Uhr.