✔ divs so positionieren, dass sie nicht horizontal gescrollt werden

[CrashOverwrite]

Hi zusammen,

hab hier ein verzwicktes Problem:
Ich habe eine Seite, die ist z.B. 1000px breit und hat links und rechts auch noch überstehende Verziehrungen.
Da es nur Verziehrungen sind, will ich, das die nicht gescrollt werden, sondern einfach verschwinden wenn das Fenster zu klein ist.
Mit Overflow hidden gehts natürlich nicht, dann wirds ja nie angezeigt, also hab ich mit negativem Margin rumprobiert und links klappt das auch recht gut, aber rechts nicht. Verstehe ich aber nicht warum. Hab ich da einen Fehler drin, oder geht das einfach nicht?
Den linken Div kann ich wegschieben, aber der rechte wird immer gescrollt

Hier eine Beispielseite:
http://www.crash-design.de/temp/overlayproblem.html

code:

<div style="
	width: 1000px; 
    height: 200px;
    margin: auto; 
    position: relative; 
    background: #900;
">
	<div style="
    	height: 100px;
        width: 200px;
        position: absolute;
        left: 0;
        bottom: 0;
        margin-left: -100px;
        background: #F60;
    "></div>
    <div style="
    	height: 100px;
        width: 200px;
        position: absolute;
        right: 0;
        bottom: 0;
        margin-right: -100px;
        background: #66C;
    "></div>
</div>

thx 4 help

 

[Maik]

Hi,

du kannst dir den negativen Effekt dieses Beispiels http://d-graff.de/selfhtml/center1.html zunutze machen, wonach der obere und linke Randbereich der vertikal- u. horizontal-zentriert positionierten Box aus dem Fenster verschoben wird, wenn es deren Dimension unterschreitet, wo sie nicht mehr zugänglich sind - und das ohne jegliches overflow:hidden.

Die zu ergänzende overflow:hidden-Regel kümmert sich dann um die gegenüberliegende Seite

/* Zuerst wird html und body auf 100% Höhe gesetzt 
und eventuell vorhandene störende Abstände eliminiert. */
html, body{
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}

mfg Maik

 

[CrashOverwrite]

Danke, aber links hab ich bereits auch hinbekommen. Es geht um rechts.
//edit: Und overflow hidden aufn Body is mir ja mal echt zu krass. Scrollen sollte schon möglich sein wenn nötig.

 

[Maik]

Jo, und dafür ist overflow:hidden vonnöten, genauer overflow-x:hidden, um den horizontalen Scrollbalken zu unterbinden.

mfg Maik

 

[Maik]

//edit: Und overflow hidden aufn Body is mir ja mal echt zu krass.

Seitenbereiche unerreichbar abschneiden zu wollen, wenn der Viewport des Browsers nicht ausreicht, sie vollständig anzuzeigen, ist nicht minder zu krass

Ich hab dir die Möglichkeit genannt, die dafür in Frage kommt. Wenn sie dir nicht zusagt, auch gut, und dein "verzwicktes Problem" löst sich eben so in Luft auf.

mfg Maik

 

[CrashOverwrite]

Seitenbereiche unerreichbar abschneiden zu wollen, wenn der Viewport des Browsers nicht ausreicht, sie vollständig anzuzeigen, ist nicht minder zu krass

ne seh ich ned so, weil ich nur an sich nur verziehrungen abschneiden will, die nett sind wenn platz ist, aber an sich keinen informationsgehalt liefern.
overflow-x hidden aufn body unterbindet ja jeglichen scrollbalken und das ist ned gut

 

[Maik]

overflow-x:hidden unterbindet nicht jeglichen, sondern lediglich den horizontalen Scrollbalken.

Aber wenn du das nicht gut findest, hat sich das Thema erledigt, wie Elemente zu positionieren sind, damit sie nicht horizontal gescrollt werden können.

mfg Maik

 

[CrashOverwrite]

so, ich habs endlich hinbekommen. Sag noch einer dass das ned geht...

Ich leg um das ganze einen Div der min-width 1000px, width 100% und overflow-x hidden hat *gnhihihi*