divs so positionieren, dass sie nicht horizontal gescrollt werden

CrashOverwrite · 29.03.2010

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:

code:

HTML:

<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

Tattoomaus78 · 29.03.2010

AW: divs so positionieren, dass sie nicht horizontal gescrollt werden

ach du lieber Himmel...was is das denn... :eek:

zentriere einfach dein 1000px breites Layout mit einem wrapper und margin: 0 auto...den 2farbigen Hintergrund definierst du über den body mit einer Grafik und repeat-y und BG-Farbe

guckst du hier:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
* {margin:0; padding:0}

body {
background-image:url(bg.jpg); 
background-repeat:repeat-y; 
background-color:#E80A00; 
height:100% }

#wrapper {width:1000px; margin:0 auto; background:blue; height:800px;}

</style>

</head>

<body>

<div id="wrapper">
hier kommt dann noch dein Header, Navi, Inhalt, Footer usw. rein
</div>


</body>
</html>

BG-Grafik:

edit:

insofern du Geschnörkels rechts und links haben willst dann:

body {background-image:url(bg1.jpg); background-position:center;background-repeat:repeat-y; background-color:#fff; height:100% }

mit BG-Grafik in dieser Art:

Kecko · 29.03.2010

AW: divs so positionieren, dass sie nicht horizontal gescrollt werden

Ich verstehe dein Problem nicht. Bei mir funktioniert die Beispiel-Seite wunderbar.
Hast dus schon mit floats versucht ?
("float :left;" / "float: right;")

CrashOverwrite · 29.03.2010

AW: divs so positionieren, dass sie nicht horizontal gescrollt werden

Ach du lieber Himmel? Nein, denke du verstehst nicht was ich will

Also nochmal: der wichtige Inhalt der Seite ist in der Beispiel Seite in dem großen roten Block. Die kleinen Divs (oragen und blau) sind nur unwichtige Verziehrungen, die die Seite noch breiter machen. Diese sind absolut positionierte Überlagerungen.

Natürlich "funktioniert" die Seite, aber ich will, dass der Browser erst bei 999px breite horizontal zu scrollen beginnt und die kleinen Boxen für das scrolling ignoriert. Das funktioniert bei der linken box richtig, weil wenn man den Browser kleiner macht, dann verschwindet die orange box im linken Bildrand und man kann sie auch nicht wieder herscrollen. Bei der rechten Box funktioniert der Trick komischerweise nicht.
Floats bringen nix, Hintergrundbild ist auch nicht die Lösung die ich suche.

Hab meinen Code dahingehend geändert, damit man besser sieht, dass es Überlagerungen sind

Tattoomaus78 · 29.03.2010

AW: divs so positionieren, dass sie nicht horizontal gescrollt werden

hä? wieso Überlagerung? Ich denke der Kram ist nur rechts und links drangepappt... :uhm:

meinst du so?

edit: und mit ach du lieber Himmel war dein Seitenaufbau gemeint....bitte html und css trennen

CrashOverwrite · 29.03.2010

AW: divs so positionieren, dass sie nicht horizontal gescrollt werden

nein, es ist wie gesagt eine überlagerung

dein Beispiel würd ich auch mit Background lösen, klare Sache

Aber bei mir isses leider ne Überlagerung von einem transparenten PNG

wie gesagt, ich raff halt nicht wieso es links mit negativem Margin funzt, aber rechts ned *grummel*

Tattoomaus78 · 29.03.2010

AW: divs so positionieren, dass sie nicht horizontal gescrollt werden

ah...na sag das doch gleich

Code:

#wrapper {[B][COLOR="Red"]position: relative;[/COLOR][/B] width:1000px; margin:0 auto; background:red; height:800px;}

#sonnelinks {
	position:absolute;
	top:10px;
	left:-100px;
}
#sonnerechts {
	position:absolute;
	top:10px;
	right:-100px;
}

HTML:

<div id="wrapper">
  <div id="sonnelinks"><img src="sonne.png" width="115" height="94" border="0"  /></div>
  <div id="sonnerechts"><img src="sonne1.png" width="115" height="94" border="0"  /></div>

</div>

sokie · 29.03.2010

AW: divs so positionieren, dass sie nicht horizontal gescrollt werden

da bekommst du bei kleineren Auflösungen allerdings scrollbars, weil diese Lösung deine Gestaltung auf 1200px verbreiterst.
wenn die zusätzlichen grafiken ausserhalb (vorzugsweise 'nach') des wrappers notiert würden, könnte man das so machen:

Code:

#wrapper {[B][COLOR=Red]position: relative;[/COLOR][/B] width:1000px; margin:0 auto; background:red; height:800px;}

#sonnelinks {
    position:absolute;
    top:10px;
    left:0;
}
#sonnerechts {
    position:absolute;
    top:10px;
    right:0;
}

HTML:

<div id="wrapper">
wrapperinhalte
</div>
<img id="sonnelinks" src="sonne.png" width="115" height="94" border="0"  />
<img id="sonnerechts" src="sonne1.png" width="115" height="94" border="0"  />

und die grafiken würden sich bei kleineren Fenstergrössen einfach unter den wrapper schieben.

CrashOverwrite · 29.03.2010

AW: divs so positionieren, dass sie nicht horizontal gescrollt werden

ui jetz wirds wild

hilft alles nix, die verziehrung soll bleiben wo sie ist und muss innerhalb des wrapper sein. Sonst wirds ja mit der Positionierung nix

Tattoomaus78 · 29.03.2010

AW: divs so positionieren, dass sie nicht horizontal gescrollt werden

erst solln se verschwinden....jetzt solln se bleiben wo sie sind...na was nu?

CrashOverwrite · 29.03.2010

AW: divs so positionieren, dass sie nicht horizontal gescrollt werden

ich will natürlich dass sie da sind, aber nicht gescrollt werden ^^
was ja links auch wunderbar funktioniert, aber nun mal rechts nicht.

Tattoomaus78 · 29.03.2010

AW: divs so positionieren, dass sie nicht horizontal gescrollt werden

die Lösung hat dir sokie doch schon geschrieben...die funktioniert genau so wie du es haben willst

CrashOverwrite · 29.03.2010

Tattoomaus78 schrieb:
...die funktioniert genau so wie du es haben willst

nein, ist zudem auch noch unsinn weil die absolute positionieren da gar nicht funktionieren kann, weil es sich die objekte - im genannten beispiel sonnelinks / sonnerechts - dann am body orientieren würden. spricht die würden links und rechts außen am fensterrand kleben.
ich brauche element die IM wrapper etwas überlagern UND darüber hinausragen, wobei das hinausragen nicht gescrollt werden soll.

Nochmal: funktioniert links wunderbar mit negativem Margin, rechts aber nicht. Einfach mal mein Beispiel öffnen und den Browser klein schieben, dann sieht man dass die linke box rausgeschoben wird ohne dass man sie wieder herscrollen kann, die rechte box hingegen schon.

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*