Menüleiste 100% und Scrollfähig

ChristianW · 26. Oktober 2014

Hey Community,

Ich danke erstmal für jede Hilfbaren beitrag ...

Ich versuche seit gestern eine Menübar zu realisieren, welche anfangs 100% Breite hat und wenn man zoomt oder den Browser verkleinert, sollte man nach rechts scrollen können. Mein Problem ist halt aktuell, dass sich der Inhalt auf der Menübar verschiebt

Bsp:

http://prntscr.com/501tsx
zu => http://prntscr.com/501tzo

Ich danke jeden Mithelfer

Nico

Diverse · 26. Oktober 2014

Meinst du das hier?
http://www.css4you.de/overflow.html

CSS

overflow-x: scroll;

bsp:

ChristianW · 26. Oktober 2014

Zitat von Diverse

Meinst du das hier?
http://www.css4you.de/overflow.html

Genau nur ich hab die leiste auf min-width: 100%; gesetzt wenn es jetzt grösser wird sagen wir 110% ( 100% bildschirm + 10 % Bildschirm für die die meinen 110% gibt es nicht). Das Problem ist er verschiebt den Inhalt nach unten sobald der Broswer zu klein ist

Diverse · 27. Oktober 2014

Hm...
Gute Frage wie man das macht.
Ich werde mich ggf morgen hinsetzten und an einer Lösung arbeiten.
Jetzt schaue ich noch eine Folge Navi CIS und geh schlafen.

ChristianW · 27. Oktober 2014

Zitat von Diverse

Jetzt schaue ich noch eine Folge Navi CIS und geh schlafen.

Ich danke dir, setze mich gleich evtl. auch nocheinmal dran, bin aktuell an meiner Cloud

Danke im vorraus und gute Nacht

EinfachMax · 27. Oktober 2014

CSS

#userPanel {
    background: none repeat scroll 0% 0% #4C4C4C !important;
    max-width: 100%;
    min-width: 100%;
    width: 100%;
    height: 24px !important;
}

@NicoWiss: Aufpassen das Rocky deinen Thread nicht löscht, er meint es wäre eine Woltlab Frage.

ChristianW · 27. Oktober 2014

Zitat von m4a_X

er meint es wäre eine Woltlab Frage.

Ist es nicht ist was komplett eigenes, wenn Rocky sehen will das es nichts mit WBB zutun hat soll er sich bitte per PN melden

Edit: schaumal http://jsfiddle.net/sckmn44n/1/ der Hintergrund ist immernoch nicht länger, ich versuche aber mal damit was zu versuchen

EinfachMax · 27. Oktober 2014

#alter code entfernt

Was sagt er jetzt?

/edit
Genau... left: 0;

CSS

#userPanel {
    position: absolute;
    background: none repeat scroll 0% 0% #4C4C4C !important;
    max-width: 100%;
    min-width: 100%;
    width: 100%;
    height: 24px !important;
    left : 0;
}

Kaliber · 27. Oktober 2014

Mach es mal so:

CSS

#userPanel {
    background: #4C4C4C !important;
    width: 90%;
    height: 100%;
    overflow-x: scroll;
}

mfg.

ChristianW · 27. Oktober 2014

Zitat von Kaliber

Mach es mal so:

CSS

#userPanel {
    background: #4C4C4C !important;
    width: 90%;
    height: 100%;
    overflow-x: scroll;
}

mfg.

Danke dafür schonmal, ich möchte aber das man unten scrollen kann, am besten sieht man den Effekt auf FB, zieh das Fenster mal ganz klein dann sieht man das sich aus der Leiste iwann ne Scrollbar unten bildet

http://prntscr.com/5040tt

Kaliber · 27. Oktober 2014

Zitat von NicoWiss

Danke dafür schonmal, ich möchte aber das man unten scrollen kann, am besten sieht man den Effekt auf FB, zieh das Fenster mal ganz klein dann sieht man das sich aus der Leiste iwann ne Scrollbar unten bildet

Ja..ups

Ich habe die y Seite vergessen xD

Hier, mach es so, dann funzt es:

#userPanel {
background: #4C4C4C !important;
width: 100%;
height: 100%;
overflow-x: scroll;
overflow-y: scroll;
}

mfg.

ChristianW · 27. Oktober 2014

Zitat von Kaliber

Ich habe die y Seite vergessen xD

Sorry ich gklaub ich bin zu unverstädnlich, Entschuldige den Umständen

http://prntscr.com/5044fm so meinte ich das

Kaliber · 27. Oktober 2014

Zitat von NicoWiss

so meinte ich das

Nimm den Code mal auf einer echten Seite, dann funktioniert er

Da wird dir nur nicht richtig das % angezeigt

Wenn du den Code bei js-Fiddle richtig haben willst musst du mit px Arbeiten..z.B. so:

#userPanel {
background: #4C4C4C !important;
width: 90%;
height: 430px;
overflow-x: scroll;
overflow-y: scroll;
}

mfg.

ChristianW · 27. Oktober 2014

Zitat von Kaliber

Nimm den Code mal auf einer echten Seite, dann funktioniert er

Da wird dir nur nicht richtig das % angezeigt

Wenn du den Code bei js-Fiddle richtig haben willst musst du mit px Arbeiten..z.B. so:

#userPanel {
background: #4C4C4C !important;
width: 90%;
height: 430px;
overflow-x: scroll;
overflow-y: scroll;
}

mfg.

Alles anzeigen

Okay wusste ich nicht ich teste es mal eben

breadfish.de 12. März 2022