css Problem mit Zentrierung der Seite

[CodecrusaderSJJ]

Hi,

ich hab vor einer Woche mit CSS angefangen und hab jetzt ein Problem welches ich einfach nicht hinbekomme. Ich habe eine Seite gebaut, die ich dann im Nachhinein zentrieren wollte (abhängig von der Browsergröße...).

Diese Definitionen habe ich:


<style type="text/css">
div.bg {

padding: 0px;
background-image: url(../img/bg_sa.jpg);
margin:0px auto;
background-color:black;
position:relative;
background-repeat:no-repeat;
}


#divid
{
position:relative;
background-color:black;
margin:0px auto;width:80%
}

Das Problem ist nun, dass ich rechts einen schwarzen Rand habe, der sich aber beim Verkleinern des Browsers ÜBER den Inhalt meiner Seite schiebet... Das soll natürlich nicht der Fall sein... Weiß jemand woran das liegt?

Vielen Dank!
cc

P.S.: die Seite wo ich das Problem habe ist diese hier: www.show-the-time.de/saindex.html

[wipeout]

Zentrieren tust du mit:

margin-left: auto;
margin-right: auto;

[CodecrusaderSJJ]

Zentrieren tust du mit:

margin-left: auto;
margin-right: auto;

danke. Aber der schwarze Balken ist immernoch da?

[zilVerGFX]

Moin,


du benötigst noch eine neue Klasse, in der di definierst, dass die Ausrichtung zentriert sein soll.

.main {
    text-align:center;
}


div.bg {

padding: 0px;
background-image: url(../img/bg_sa.jpg);
margin:0px auto;
background-color:black;
position:relative;
background-repeat:no-repeat;
}


#divid
{
position:relative;
background-color:black;
margin:0px auto;
width:80%;
}

Der Rest kann so bleiben. Die mein Klasse muss dann halt deine anderen <div> umschließen.

Also:

<div class="main">

anderer Code...

</div>


Gruß
zilVer