[HTML/CSS] Absolut pos. Elemente ohne horiz. Scrollbalken

[Matze]

Hallo zusammen,

ich nutze Code wie diesen:

Code:

<div style="width: 900px; position: relative; margin: auto">
    <span style="position: absolute; width: 200px; left: -150px; z-index: 3"></span>
</div>

Der Sinn dahinter ist egal, ich brauche das so.

Bei einer Auflösung von 1024 x 768 führt das zu einem horizontalen Scrollbalken. Kann man das span-Element irgendwie so einstellen, dass es keinen horizontalen Scrollbalken erzeugt?
Ein "overflow: hidden" beim div-Element verhindert die Scrollbalken, allerdings auch dann, wenn das Browserfenster kleiner als 900 Pixel breit ist. Ich hätte es gerne so, dass das div-Element immer komplett erreichbar ist, ggf. mit Scrollbalken. Nur für das span-Element soll dieser nicht auftauchen.
Wenn ich das span- zum div-Element mache mit "overflow: hidden" funktioniert es auch nicht.

Grüße, Matze

[s.h.a.r.k]

Ich hatte auch mal so ein ähnliches Problem, wobei ich das dann quick-and-dirty so gelöst hatte, dass ich innerhalb des divs noch ein div positioniert habe, mit minimalster Breite (1px oder 0px). Diesem div habe ich dann overflow:hidden gegeben und darin alle Elemente platziert, in deinem Fall die spans.

Zusätzliches Vorteil der Lösung ist, dass du dem "Container-div" auch noch eine ID/Klasse geben kannst und die Elemente darin noch etwas mehr kapselst, wobei das Geschmackssache ist.

So meine ich das ganze:

Code:

<div style="width: 900px; position: relative; margin: auto">
    <div style="width: 1px; position: absolute; left: 0; top: 0; overflow: hidden;">
        <span style="position: absolute; width: 200px; left: -150px; z-index: 3"></span>
    </div>
</div>

[Matze]

Hm, danke für den Trick. Allerdings sehe ich vom span-Element dann nichts mehr, sobald ich "overflow: hidden" in das div-Elementschreibe.

[s.h.a.r.k]

Gin mir einen Moment, muss nach meiner Lösung suchen :zwinker:

Habe folgendes gerade im FF, Chrome und Opera getestet:

Code:

<div style="width: 900px; position: relative; margin: auto; background-color: #f00;height: 20px;">
    <div style="width: 1px; position: absolute; left: 0; top: 0; background-color:#ff0;height: 20px;">
        <span style="position: absolute; width: 200px; left: -150px; z-index: 3; background-color: #0ff;">Test</span>
    </div>
</div>

Das overflow:hidden war das Problem. Jedenfalls passiert es nun, dass erst dann Scrollbalken erscheinen, wenn auch wirklich nur das äußere div betroffen ist. Das span-Element wird ignoriert.

[Matze]

Wenn ich versuche, das ganze links und rechts zu machen, funktioniert es jedoch nicht mehr und genau den Fall habe ich:

Code:

<div style="width: 900px; position: relative; margin: auto; background-color: #f00;height: 20px;">
    <div style="width: 1px; position: absolute; left: 0; top: 0; background-color:#ff0;height: 20px;">
        <span style="position: absolute; width: 200px; left: -150px; z-index: 3; background-color: #0ff;">Test</span>
    </div>
   
    <div style="width: 1px; position: absolute; right: 0; top: 0; background-color:#ff0;height: 20px;">
        <span style="position: absolute; width: 200px; right: -150px; z-index: 3; background-color: #0ff;">Test</span>
    </div>
</div>

Könntest du da bitte nochmals drüber gucken? :)

[s.h.a.r.k]

Ich werde schauen, was ich tun kann, denn das hatte ich noch nicht :mrgreen:

[edit] ich muss mich für den Moment geschlagen geben, da mir nichts mehr einfällt, was ich probieren könnte. Es erscheint einfach immer eine Scrollbar.

[Matze]

Schade. Dennoch vielen Dank.

[s.h.a.r.k]

Wozu genau brauchst du das denn? Habe auf deiner Website die Palme gesehen, aber wüsste ich keinen Anwendungsfall, außer man nimmt ein Bild. Und das kann man dann wiederrum als Hintergrundbild irgendwie platzieren.

[Matze]

Jo genau die Palmen sind es (Header + Footer). ;)

[s.h.a.r.k]

Hätte da glaub schon eine andere Idee :zwinker: einen Moment bitte... gleich wieder da :mrgreen:

[edit] selbst wenn man einiges mit margin spielt bekomme das nicht hin. hier aber meine idee:

Code:

<div style="position: absolute; left: 50%; top: 0; width: 50%;height: 100px; border: 1px solid #f00; border-right: 0; border-left: 0; z-index: 3; overflow:hidden;">
    <div style="position: absolute; left: 400px; top: 0px; width: 100px; height: 100px; background-color: #0ff;"></div>
</div>

Das Problem dabe ist, dass man nicht durch das Div klicken kann, was echt bescheiden ist :wall:

Eine ganz andere Idee wäre es, ein Hintergrundbild dafür einzusetzen und das auf den body zu klatschen. Dann hast du auch keinerlei Problem damit. Allerdings kannst du dann keine Überlagerungen machen, wie du das bisher hast.

[SubData]

Habt ihr mal overflow: auto probiert?

[Matze]

@Armin: Ja das geht nicht. Ich weiß im Vornherein auch nicht, auf welcher Höhe das span-Element sitzt.
@Ronny: Ich habe schon sehr viel versucht und auch mit "overflow: auto" habe ich es nicht hinbekommen.

[TurboMartin]

Also laut dem VisualStudio gibt es auch die CSS-Eigenschaft min/max-width, die soweit auch bei meinen Browsern zu funktionieren scheinen tut, aber ich weiß nicht wie weit das genormt ist. Vielleicht hilft dir das weiter ;)

[Matze]

Ich wüsste nicht, wieso mir das helfen soll. ;)
Es geht nicht darum, die Breite einzustellen, sondern die Elemente in den Hintergrund zu setzen bzw. so zu manipulieren, dass keine Scrollbalken entstehen.

[SubData]

Dann halt so:

Code:

BODY { width: 100%; max-width: 100%; overflow: hidden !important; }

Edit: "Quote" => "Code" :)

[Matze]

Und was soll mir das bringen? :gruebel:

"body" und "overflow: hidden" wäre komplett falsch, da so sämtliche Scrollbalken, auch die vertikalen, unterdrückt werden.
Aktuell nutze ich "body" und "overflow-x: hidden". Aber auch hier habe ich das Problem, das bei einer Breite des Fensters kleiner als 900 Pixel kein Scrollbalken angezeigt wird.

[s.h.a.r.k]

Du wirst nicht drum herum kommen, dir einen "dirty-Fix" zu überlegen. Du hast folgende Möglichkeiten eine Scrollbar zu unterdrücken:

• Ein Hintergrundbild, wobei das dann wieder nicht überlagern kann. (außer du machst den Container auch als Bild, was aber eher naja ist :zwinker: )
• Du lässt ein div den main-container überlagern, so wie ich es in meinem letzten Post gezeigt habe, aber da tritt dann das Problem auf, dass du nicht mehr durchklicken kannst.
• Negative left-Eigenschaft in Verbindung mit position:relative/absolute, wobei das halt nur für den linken Rand funktioniert.

Ich überlege im Moment schon die ganze Zeit, wie ich den mittleren Vorschlag umbauen kann, dass das funktioniert. Du brauchst halt einen Container, der overflow:hidden hat und folgendes kann: es müsste eine Kombination aus der Eigenschaft left und width geben, die folgendes ergeben: der Container startet bei einem festen x-Wert und läuft *genau* bis zum rechten (oder auch linken) Rand. Wenn ich das Fenster kleiner mache, so wird auch das div kleiner, u.U. wird width halt negativ, aber das sehen die User ja nicht, da das Fenster dann zu klein ist. Jedenfalls war das die Idee dahinter. Aber ich kenne keine Möglichkeit für eine passende Angabe der Breite...

[Namenloser]

Ich bin nicht ganz sicher, ob ich richtig verstanden habe, was du vorhast.

XML-Code:

<div style="min-width:900px; overflow:hidden">
   <div style="width: 900px; position:relative; margin: auto; background-color: #f00; height: 20px;">
      <span style="position: absolute; width: 200px; left: -150px; z-index: 3; background-color: #0ff;">Test</span>
      <span style="position: absolute; width: 200px; right: -150px; z-index: 3; background-color: #0ff;">Test</span>
   </div>
</div>

Ist es das, wonach du suchst?

[Matze]

Ich habe eine Demo angehängt. Vielleicht wird es dann klarer.

Der HTML-Code ist gekürzt, CSS habe ich so gelassen. Relevant sind die Bereiche der HTML-Datei, die mit einem Kommentare versehen sind (das sind 2 Kommentare).

Wenn das Browserfenster breiter ist als der mittlere Container, sollen keine Scrollbalken angezeigt werden, auch wenn der rote und blaue Kasten nicht ins Browserfenster passen.
Wird das Fenster so weit verkleinert, dass der mittlere Container nicht mehr vollständig dargestellt werden kann, sollen Scrollbalken für diesen Container angezeigt werden.

[Namenloser]

Ich find das eigentlich nicht so toll, wenn ich Hirnschmalz dafür aufwende, anderer Leute Probleme zu lösen, und man meine Lösung dann anscheinend nicht mal ausprobiert. Mein Beispiel war genau, wonach du gesucht hast :roll:

[Matze]

Da kennst du mich aber ganz schlecht.
Ich habe das Beispiel versucht, aber vermutlich einen Fehler gemacht. Denn das Verhalten blieb unverändert.
Ich schaue mir mal an, wie du das nun im konkreten Beispiel umgesetzt hat. Danke.

[Namenloser]

Solange ich kein Feedback erhalte, gehe ich davon aus, dass es nicht ausprobiert wurde...

[Matze]

Gut, dann gebe ich da zukünftig Feedback. *g*

Es funktioniert. Ich verstehe zwar noch nicht, wieso ich nun einen weiteren Container benötige, aber vermutlich war mein Fehler, dass ich die Breite von <body> auf 900px gesetzt habe.

Also danke nochmals.