Zeilenumbruch im Main/Layout verhindern - horizontal scrollen?

[sade]

Hallo zusammen,

habe ein kleines Layout-Verständnisproblem .

Und zwar hat das gewünschte Layout eine feste Breite und Höhe.

Nun würde ich gerne den Inhalt im "main"-Content horizontal scrollen lassen. Es handelt sich dabei um mehrere Bilder in der gleichen Größe die einfach horizontal gescrollt werden sollten.
Doch leider wird immer automatisch ein Zeilenumbruch eingefügt bzw. maximal so viele Bilder in einer Zeile angezeigt, wie es von der Breite des Layouts möglich ist und die restlichen fangen in der nächsten Zeile an.

Kann man dies irgendwie umgehen? ScrollPane setzt mir das zumindest nicht so richtig um.

Vielen Dank im Voraus!

LG Sarah

[MacKP]

Hallo sade,
dem Umgebenden div mal ein overflow:scroll-x geben -> http://www.css4you.de/example/overflow-y.html

Viele Grüße

[sade]

Hey MacKP,

löst das Problem leider nicht ...

LG Sarah

[MacKP]

Hmm hast mal nen Link zu der Seite?
Ist schwierig so auf dem Trockenen ;-)

Viele Grüße

[sade]

aber ja ... Link

[MacKP]

So kann man arbeiten ^^

Versuchs mal so:

#overflow {
height: 585px;
overflow-y: scroll;
width: 2000px;
}

Das Element braucht auch noch ne passende Breite (weil es sonst nicht breiter wird als das Umgebende Element) und ne Höhe, damit der Scrollbalken auch noch an der Passenden Stelle liegt ;-)

Hoffe, das ist das, was du gewollt hast?

Viele Grüße

[sade]

Hey

ja theoretisch so... aber es funkt noch nicht.
Ich hab es nun mal so eingebaut, aber der Scrollbalken funktioniert nicht bzw. verschwindet im Nirvana... hm.. überseh ich was?

LG

[MacKP]

Ah... sorry.. gerade eben zu viel rumgespielt...
Das unheimlich beliebte .block spielt dir jetzt einen Streich...
Gib mal dem book-i ein overflow:scroll und mach das bei dem #overflow raus. Das sollte dann schon reichen ^^

Viele Grüße

[sade]

hey

ne so gehts auch nicht ... aber ich glaube ich hab generell ne Layouteinstellung falsch...

Wenn ich beim #overflow "position:absolute;" hinzfüge... gehts... ich glaube nur das ich mich mit dem ganze Designrumgefummle bei den "position"-Angaben ganz verwirrt hab.
Irgendwie hab ich nun im IE und Firefox kleine Probleme was die Zentrierung des Designs angeht...

Also das Scrollen funktioniert nun bei folgendem CSS ... und im Safari wird es auch alles richtig angezeigt... nur nicht mehr im IE und Firefox...

#header
{
    border-bottom:2px solid #c6c6c6;
}

#wrapper
{
    height:720px;
    top:50%;
    position:relative;
    margin-top:-360px;
}

#main
{
    width:1000px;
    height:620px;
    overflow:auto;
    margin:0;
    padding:0;
}

#left
{
    margin-top:150px;
}

#footer
{
    border-top:2px solid #c6c6c6;
}

#overflow
{
    width:2500px;
    height:600px;
    position:absolute;
}

[MacKP]

Hmm bei mir gings auch ohne position.. keine Ahnung warum das nur ne position braucht.
Aber: was geht dir da flöten? Wo soll das Zentriert sein? War bei mir (FF) bisher nicht anders zu sehen als jetzt.

Viele Grüße

[sade]

Im IE und FF wird das ganze Layout um 50% nach oben verschoben, statt vertikal zentriert.


LG

[MacKP]

Ach LoL
Ich dachte das soll so ^^
Oh man... das sieht natürlich dann auch gleich wie ne Internetseite aus ;-)

Dein Wrapper hat nen margin-top von -360px. Wenn ich das raus nehme passt das super im FF.

Viele Grüße

[sade]

Lach*.... Scherzkeks ))

Ja wenn ich die -360 rausnehme, ist die vertikale Zentrierung futsch... (in Safari klappt das ja problemlos und sollte -eigentlich- auch in allen anderen gängigen problemlos laufen).
Hm... muss ich mir was anderes einfallen lassen.

Auf jedenfall vielen vielen lieben Dank, MacKP!

LG Sarah

[MacKP]

Ich hab mir das noch mal kurz angeschaut. Dein Problem ist eher Grundsätzlicher Natur... war schon lange her, das ich mal ne Seite so zentriert habe aber mir kam das irgendwie zu einfach vor wie du das gemacht hast *g*

Hier mal ne kleine Anleitung: http://www.manuel-bieh.de/blog/verti...seiten-mit-css
Du wirst einen <div> vor dem eigentlichen Wrapper brauchen um den Abstand von oben zu bekommen. Dazu wirst du die fe_page bearbeiten müssen. Also nen neues Seitentemplate erstellen müssen.

Infos dazu findest du hier und im contao-wiki ;-)

Viele Grüße

[Andreas]

Diese Seite hier http://two-some.de/ hatte ich mal nach dieser Anleitung vertikal zentriert. fe_page Anpassung Ist nur ein zusätzliches leeres Element über dem #wrapper: #center.

Auf deiner Seite bekomme ich das horizontale Scrollen hiermit hin

#overflow {
  overflow-x: auto;
  white-space: pre;
}
#overflow p {
  display: inline;
}

Nachdem ich außer der contao.css und dem framework alles CSS entfernt hatte. Müsste man sogar mit ner Galerie hinbekommen, wenn man alle TABLE-Elemente auf display:inline; setzt.

[ChrisT]

Ich habe eine Seite, bei der die Bilder horizontal aneinandergereiht werden und die gesamte Bildschirmbreite ausfüllen sollen.
Zudem soll mit dem Scrollrad durch die Bilder hindurch (horizontal) gescrollt werden können.

Hat jemand eine Ahnung, wie ich da den Scrollbalken an den unteren Fensterrand bekomme?
Und wie ich es schaffe, die Bilder so zu integrieren, dass sie hintereinander zu liegen kommen und immer soviel zu sehen ist, wie das Fenster hergibt? Die Bilder liegen bereits schön nebeneinander, aber immer nur ganze Bilder – das nächste springt erst "hoch", sobald das Fenster ausreichend vergrössert wird.

Chris

[Andreas]

So wie in meinem Post davor.

[ChrisT]

Danke – aber das funktioniert nicht, weil ich keine p's habe, die inline dargestellt werden könnten. Mit den Bildern, dem .image_container oder dem .ce_image funktioniert es auch nicht.

Zudem werden Bilder, die keinen Platz haben, auf eine nächste Zeile gestellt.

Was habe ich falsch gemacht?

[Andreas]

Du kannst jedem Element die Eigenschaft display:inline; zuweisen. white-space:nowrap; nicht vergessen, das verhindert den Zeilenumbruch.

[ChrisT]

Danke – ich hab's irgendwie hinbekommen. Zusammen mit Scrollside funktioniert es absolut genial!