nicht angemeldet
Abstand Text zu Scrollbalken
Hallo,
seit über zwei Stunden brüte ich über folgendem Problem:
Ich habe einen div-Bereich "Container_Anzeigebereich" mit festgelegter Höhe und Breite 494px. Innerhalb dieses div-Bereiches ist der div "Anzeigebereich" eingebettet, der ebenfalls eine feste Breite hat (Abstand rechts und links jeweils 10px, somit 474px):
+------------------------------------------+
| |
| div "Interface" |
| |
| +--------------------------------+ |
| | | |
| | div "Container_Anzeigebereich" | |
| | | |
| | +----------------------+ | |
| | | | | |
| | | | | |
| | | div "Anzeigebereich" | | |
| | | | | |
| | | | | |
| | +----------------------+ | |
| | | |
| +--------------------------------+ |
| |
+------------------------------------------+
Der div-Bereich "Interface" enthält die grafische Aufmachung der Seite inkl. linksseitiger Navigation, im div-Bereich "Anzeigebereich" werden die eigentlichen Seiten (Gästebuch, Kontakt, Disclaimer,...) angezeigt, der div-Bereich "Container_Anzeigebereich" dient der Ausrichtung des div-Bereiches "Anzeigebereich" zur Grafik des div-Bereiches "Container_Anzeigebereich".
Nun zu meinem Problem:
Solange die Seiten kürzer als die Höhe des div-Bereiches "Anzeigebereich" ist, ist alles in Ordnung.
Wenn allerdings ein vertikaler Scrollbalken angezeigt wird, ist die Optik insofern nicht mehr stimmig, weil der Text am Scrollbalken klebt, obwohl hier ein Abstand zum Scrollbalken UND zum rechten Rand des div-Bereiches "Container_Anzeigebereich" sein sollte.
Hier habe ich euch folgende Screenshots hochgeladen:
- Layout ohne angezeigter Seite (http://img190.imageshack.us/img190/5422/layoutohneangezeigterse.png)
- Zustand ohne Scrollbalken (http://img851.imageshack.us/img851/3316/zustandohnescrollbalken.png)
- Zustand mit Scrollbalken (http://img69.imageshack.us/img69/1796/zustandmitscrollbalken.png)
Hier der entsprechende Code:
div#Interface
{
background: url(../../GRAFIKEN/Interface.png);
height: 588px;
left: 50%;
margin: -294px 0px 0px -368px;
position: absolute;
top: 50%;
width: 736px;
}
div#Container_Anzeigebereich
{
background-color:red;
bottom: 15px;
height: 539px;
right: 2px;
position: absolute;
width: 494px;
z-index: 30;
}
div#Anzeigebereich
{
background-color:yellow;
bottom: 0px;
left: 0px;
margin-right: -10px;
overflow: auto;
padding-right: 10px;
position: absolute;
right: 10px;
top: 0px;
z-index: 30;
}
Die background-Angaben habe ich lediglich zu dem Zweck eingebaut, um die Abstände und Ausrichtungen sichtbar kontrollieren zu können.
Was muss ich ergänzen/welche Angaben muss ich ändern, damit der rechte Abstand der Seiten (div "Anzeigebereich") immer 10px beträgt, sowohl wenn kein Scrollbalken angezeigt wird, als auch, wenn einer angezeigt wird?
Vielen Dank im Voraus für eure Unterstützung.
Gruß
Enrico
PS: Ich hatte hier schon mal angefragt (http://forum.de.selfhtml.org/archiv/2010/9/t200293/#m1349507), leider habe ich aufgrund eines Festplatten-Crashs aber alle Daten verloren und mich erst kürzlich dazu entschlossen, nochmals neu anzufangen.
-
Om nah hoo pez nyeetz, Enrico!
Wenn du dir die Beispiele zu overflow im SELFHTML-Wiki anschaust, stellst du fest, dass die Scrollbalken über dem Inhalt liegen. Imho bleibt dir nur, mit JavaScript abzufragen, ob es Scrollbalken gibt und dann entsprechend einen Wert für padding-right zu setzen. Zum besseren Verständnis hilft vielleicht ein Beitrag zum Boxmodell.
Matthias
--
1/z ist kein Blatt Papier.
-
Hallo Matthias,
danke für Deine Antwort.
Hmm, auf Javascript würde ich gerne komplett verzichten, da eine Umsetzung über Javascript natürlich nur solange "hält", wie die Unterstützung von Javascript auch eingeschaltet ist.
Zu dumm, dass meine ursprünglichen Daten weg sind, denn da hatte ich es irgendwie über eine reine css-Lösung bewerkstelligt.
Mist, dann muss ich hier weitersuchen.
Gruß,
Enrico
-