X-Scrollbalken erscheint "ohne Grund"

[Paul]

Hallo,
Habe das Problem, dass der content meiner Webseite zentriert ist,
und obwohl kein content rechts überlappt,
ein x-Scrollbalken erscheint,
mich interessiert, welcher Fehler dafür sorgt, dass dieser Balken erscheint,
der css code sieht folgendermaßen aus:

body
{
text-align: center;
margin-top: 20px;
background-image: url(../images/background.jpg);
background-repeat: repeat-x;
background-color:white;
}

#page
{
text-align: left;
margin: auto;
width: 802px;
height: 640px;
min-height: 640px;
font-family: Verdana, sans-serif;
}

#picture
{
height: 348px;
background-color:black;
background-image: url(../images/picture.jpg);
background-repeat: no-repeat;
color: white;
font-size: 40px;
font-weight: bold;
border: 1px solid #808080;
}

#sites
{
background-color:#D3D3D3;
height: 23px;
border-top: 2px solid #808080;
border-bottom: 2px solid #808080;
padding: 10px;
}

#content
{
background-image: url(../images/picture.png);
background-repeat: no-repeat;
background-position:bottom right;
padding-left: 22px;
padding-top: 22px;
padding-bottom: 22px;
padding-right: 22px;
border: 1px solid #808080;
min-height: 600px;
height: 600px;

}  

#footer
{
background-color: #D3D3D3;
border-bottom: 3px solid #808080;
height: 22px;
font-size: 14px;
text-decoration: none;
text-align: center;
padding-bottom: 4px;
margin-bottom: 20px;
}

#valide
{
text-align: center;
}

Kann mir jemand helfen?

Gruß, Paul

[Gunnar Bittersmann]

@@Paul:

nuqneH

Habe das Problem, dass der content meiner Webseite zentriert ist,

Welcher Seite?

Qapla'

[Paul]

Von dieser Webseite ;) :

paulstrobel.de

Gruß, Paul

[Patrick Andrieu (noreg)]

Gib mal Deinem Div mit der Klasse picture_heading einen Rahmen(eg: border: 1px solid red) und schau mal...

P.

[suit]

Gib mal Deinem Div mit der Klasse picture_heading einen Rahmen(eg: border: 1px solid red) und schau mal...

Schaff' dir endlich ein Entwicklungswerkzeug an: Dragonfly, Firebug, Web Inspector oder den Developer Toolbar ;)

[Patrick Andrieu (noreg)]

Schaff' dir endlich ein Entwicklungswerkzeug an: Dragonfly, Firebug, Web Inspector oder den Developer Toolbar ;)

_Ich_ habe sowas (Firebug)... aber ich weiß nicht, ob der OP es hat ;) Wohl nicht, sonst hätte er's gemerkt und nicht fragen müssen!

P.

[apsel]

Om nah hoo pez nyeetz, suit!

so ein Rahmen ist aber trotzdem eine gute Idee, u.a. auch dafür ob ein Selektor richtig selektiert.

Der Lerneffekt ist so u.U. größer.

Matthias

[suit]

so ein Rahmen ist aber trotzdem eine gute Idee, u.a. auch dafür ob ein Selektor richtig selektiert.

Wozu? Mein Entwicklungswerkzeug erlaubt es mir schnell und bequem beliebige Elemente zum Umrahmen, mit einer Outline zu versehen oder sonstwas - und das Live (und in Echtzeit!) :p

[apsel]

Om nah hoo pez nyeetz, suit!

schon klar, pädagogisch wertvoller ist anfänglich imho dennoch der per Hand gesetzte Rahmen.

Matthias

[Gunnar Bittersmann]

@@Paul:

nuqneH

Von dieser Webseite ;) :
paulstrobel.de

Und schon wieder ist eine Copy/Paste-Orgie nötig. :-(

Verweise einbinden: paulstrobel.de

Was nicht nötig ist, ist das 'div[@id="page]'.

Welche Entwicklerwerkzeuge benutzt du? Firebug ist eine gute Wahl.

Dann schalten wir doch mal Elemente aus; fangen wir oben an: 'div[@id="picure"]' bekommt 'display: none'. Oh, der Scollbalken ist weg! Also muss es irgendwas in diesem 'div' sein, was ihn herhorruft.

'display: none' wieder weg und selbiges für 'div[@class="pinnwand"]' gesetzt: Scollbalken bleibt. Das war’s also nicht.

'display: none' wieder weg und selbiges für 'div[@class="picture_heading"]' gesetzt: Scollbalken weg. Na klar, an was anderem konnte es ja nicht mehr liegen.

'display: none' und die anderen Eigenschaften angeschaut: 'left: 400px', 'position: relative'. Aha! Wie funtioniert doch gleich nochmal relative Positionierung?

„Relativ positionierte Boxen behalten ihre normale Flussgröße bei, inklusive der Zeilenumbrüche *und dem Platz, der ursprünglich für sie reserviert wurde*.“ [CSS2 §9.4.3] (*Hervorhebung* von mir)

Wie breit ist denn die Box? Umgeschaltet auf "Layout" zeigt’s: 800px. Die Breite wird ja berechnet, bevor die Box verschoben wird. Wenn sie dann um 400px nach rechts geschoben wird, behält sie ihre Breite und ragt rechts raus.

Von wegen „ohne Grund“ – da ha’m wa’n doch!

Qapla'

[Paul]

Vielen Dank für die Lösung =)

Gruß, Paul