Element ausserhalb seite positionieren, so daß keine scrollbar entsteht

st-SaHiB · #1 (**permalink**) 18.07.2009, 09:48

Hallo zusammen,

habe hier ein kleines Prolem, an dem ich mir irgendwie die Zähne ausbeise.

Habe eine zentrierte Seite mit fixer breite.

HTML-Code:

#seite{
    width:990px;
    margin:0 auto;
}

Rechts von der Seite möchte ich eine Grafik ausgeben.
Dazu stecke ich das Bild in den div #seite, lasse ihn dann nach rechts fließen und verschiebe das Bild dann um seine eigene breite nach rechts. Somit schließt es rechtsbündig an die Seite an.

HTML-Code:

    #bild rechts{
        float:right;
        position:relative;
        left:55px;
    }

jetzt stellt sich nur folgendes Problem: Skaliere ich das Browserfenster kleiner als 1045px (990+55px) Breite, wird ein horizontaler Scrollbalken eingeblendet.
Mache ich das ganze analog auf der linken Seite, schiebt es die Grafil links aus dem sichtbaren Bereich raus und die Scroll-leiste kommt erst wie gewünscht bei < 990px.

Frage: wie kann ich diesen Effekt auch auf der rechten Seite hinbekommen?
Das ganze als Hintergrundgrafik einzubinden geht leider nicht sinnvoll wegen dem background-alignment-bug (zentrierter Hintergrund wird bei ungeraden Fensterbreiten um 1px gegenüber zentrierten elementen verschoben) und weil das obige Beispiel eben nur ein Beispiel ist, die echte Seitenstruktur is da deutlich komplexer.

Mit absoluter positionierung hab ich es auch schon probiert - gleicher effekt. Auch mit negativen margins. Overflow wäre eine Lösung, allergings fällt mir da keine HTML-Struktur ein, in der der #seite Div, dann trotzdem einen scrollbalken produziert...

bin für jede Anregung dankbar

paracelsus · #2 (**permalink**) 18.07.2009, 22:04

Hat Du schon mal

Code:

html {overflow-x : hidden;}

probiert?

st-SaHiB · #3 (**permalink**) 19.07.2009, 09:24

ne, das bringt nichts - das würde die horizontale scrollbar ja komplett deaktivieren, dh ich hätte auch keine scrollbar, wenn das fenster kleiner als 990px (seitenbreite) ist - die seite an sich soll ja aber noch scrollbar sein, nur eben das element das ich rechts ausserhalb der seite positionieren möchte, soll keine scrollbar erzeugen.

schiebe ich ein element irgendwo zB 10000px (übertrieben!!!) nach links (oder nach oben), verschwindet es einfach ausserhalb der seite. schiebe ich es 10000px nach rechts (oder nach unten), bekomme ich eine scrollbar die bis zu dem element scrollt - und genau die möchte ich nicht

ich hasse css ^^

heiko_rs · #4 (**permalink**) 19.07.2009, 14:35

Das Problem ist nicht CSS, sondern wie die Browser damit umgehen. Ich habe auf die Schnelle eine Lösung gefunden, die in IE 8, FX 3.5 und Safari funktioniert, aber z.B. IE < 7 und Opera zeigen dennoch einen horiz. Scrollbalken.

Die erwähnte 1px-Verschiebung ist oft ein Problem, aber meist lässt es sich lösen. Zeige doch mal ein JPG Deines Designs (d.h. wie es werden soll).

heiko_rs · #5 (**permalink**) 19.07.2009, 17:28

Was überall zu gehen scheint (nur der IE 6 braucht noch einen min-width-Hack):

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">

* {
	margin: 0;
	padding: 0;
	}

html,
body {
	width: 100%;
	min-width: 650px;
	}

body {
	overflow: hidden;
	overflow-y: auto;
	}

#n1 {
	background: red;
	height: 200px;
	width: 600px;
	position: relative;
	margin: 0 auto;
	}

#n2 {
	background: green;
	width: 2000px;
	position: absolute;
	right: 0;
	top: 0;
	}

</style>
</head>

<body>

<div id="n1">text
	<div id="n2">text</div>
</div>

</body>

</html>

st-SaHiB · #6 (**permalink**) 20.07.2009, 08:49

min-width - mensch, warum bin ich nich auf die idee gekommen

funktioniert!

Dank Dir!!!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Inhalt von float: right wird in Firefox unten angerechnet	Sukkulent	CSS	5	16.09.2005 22:43
csss seite in frame horiz. scrollbar	Holger (HMR)	CSS	0	15.09.2005 15:05
<div> immer am Ende der Seite positionieren?	timo123	CSS	2	15.04.2005 11:04
Layer am "Schluss" der Seite positionieren	lavitto	CSS	3	13.04.2005 13:47
Leiste am Ende einer Seite positionieren?	chris2001	CSS	0	28.12.2004 15:20