[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.