XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Element ausserhalb seite positionieren, so daß keine scrollbar entsteht (http://xhtmlforum.de/showthread.php?t=57752)

st-SaHiB 18.07.2009 10:48

Element ausserhalb seite positionieren, so daß keine scrollbar entsteht
 
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 :icon_cry:

paracelsus 18.07.2009 23:04

Hat Du schon mal
Code:

html {overflow-x : hidden;}
probiert?

st-SaHiB 19.07.2009 10: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 :ranting:
ich hasse css ^^

heiko_rs 19.07.2009 15: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 19.07.2009 18: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 20.07.2009 09:49

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

funktioniert!

Dank Dir!!!


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:36 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020