css design centern

Status
Nicht offen für weitere Antworten.

freakcx

Erfahrenes Mitglied
Hi, ich möchte nun endgültig den Sprung zu css schaffen. Ich habe jetzt das Problem das ich mein Design zerstückelt habe und per div tags ins HTML über eine CSS-Datei eingebunden habe... das funktioniert alles blendent gefällt mir so auch. Ich würde jedoch jetzt die einzelnen DIV-Tags "margin:auto" zu weisen... geht ja aber nicht weil sie dann alle oben links in der Ecke kleben, gibt es eine Möglichkeit das ganze irgend wie automatisch in die Browsermitte zu centern? Oder ist meine Designaufteilung viel zu aufwendendig?


PHP:
body
{
margin:0px;
padding:0px;
}

.banner
{
position:absolute;
top:25px;
left:81px;
background-image: url(assets/design-thorsten_01.gif);
border: 0px;
width: 773px;
height: 86px;
}
.sax
{
position:absolute;
top:111px;
left:81px;
background-image: url(assets/design-thorsten_02.gif);
border: 0px;
width: 213px;
height: 153px;
}
.unterricht
{
position:absolute;
top:111px;
left:294px;
background-image: url(assets/design-thorsten_03.gif);
border: 0px;
width: 181px;
height: 153px;
}
.guestbook
{
position:absolute;
top:111px;
left:475px;
background-image: url(assets/design-thorsten_04.gif);
border: 0px;
width: 178px;
height: 153px;
}
.gallerie
{
position:absolute;
top:111px;
left:653px;
background-image: url(assets/design-thorsten_05.gif);
border: 0px;
width: 160px;
height: 153px;
}
.gallerie_spacer
{
position:absolute;
top:111px;
left:813px;
background-image: url(assets/design-thorsten_06.gif);
border: 0px;
width: 41px;
height: 153px;
}
.spacer
{
position:absolute;
top:264px;
left:81px;
background-image: url(assets/design-thorsten_07.gif);
border: 0px;
width: 773px;
height: 41px;
}
.content1
{
position:absolute;
top:306px;
left:81px;
background-image: url(assets/design-thorsten_08.gif);
border: 0px;
width: 627px;
height: 299px;
}
.content2
{
position:absolute;
top:605px;
left:81px;
background-image: url(assets/design-thorsten_13.gif);
border: 0px;
width: 773px;
height: 400px;
}
.right_top
{
position:absolute;
top:305px;
left:708px;
background-image: url(assets/design-thorsten_09.gif);
border: 0px;
width: 146px;
height: 33px;
}
.bio
{
position:absolute;
top:338px;
left:708px;
background-image: url(assets/design-thorsten_10.gif);
border: 0px;
width: 146px;
height: 33px;
}
.audio
{
position:absolute;
top:371px;
left:708px;
background-image: url(assets/design-thorsten_11.gif);
border: 0px;
width: 146px;
height: 28px;
}
.counter
{
position:absolute;
top:399px;
left:708px;
background-image: url(assets/design-thorsten_12.gif);
border: 0px;
width: 146px;
height: 205px;
}
 
Verpack alles in einem zusätzlichen Element:
Code:
body {
	text-align:	center;
}
#zusaetzliches-element {
	position:	relative;
	margin:		0 auto;
	width:		773px;
	text-align:	left;
}
 
thx für den schnellen post... Prima


HTML:
<div id="zusaetzliches-element">

<div class="bsp.design1"></div>
<div class="bsp.design2"></div>
<div class="bsp.design3"></div>

</div>

kleine Erläuterung falls das nochmal per Search gefunden wird :-(

Dank dir!
 
Status
Nicht offen für weitere Antworten.
Zurück