• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Webseite komplett zentrieren, schon alles probiert, aber nichts funktioniert

L

lkk

Neues Mitglied
Hallo,

ich habe eine Frage und mich schon durch sämtliche Foren/Hilfen gearbeitet und hab alles versucht, was ich gefunden habe, aber leider hat es nicht geklappt.
Ich bin totaler Anfänger in HTML und habe mich mal an einer einfachen Webseite versucht.
Das Problem ist, dass die Seite immer oben links am Rand klebt und ich es gerne so hätte, dass sich die Webseite an die Fenstergröße anpasst, so dass sie immer zentriert ausgerichtet ist.
Ich wäre euch für jede Hilfe dankbar!!
Mein Quelltext beruht auf divs, die aber alle einzeln für sich untereinander stehen. Hier eine Kopie des Quelltextes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body { background-color:#000033; color:#FFFFFF; }
a:link { color:#FFFFFF;text-decoration:none;}
a:visited { color:#FFFFFF;text-decoration:none; }
a:active {
color:#FC0;
text-decoration:none;
}
a:hover {
color: #FC0;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Juwelier Mersmann</title>
</head>


<body>


<div style="position:absolute; top:68px; left:341px;"> <a href="01_historie_mersmann.html" target="_parent"><img src="logo.jpg" width="341" height="58" alt="Logo"></a></div>


<div style="position:absolute; top:133px; left:483px;">
<div align="center"><img src="bild.jpg" width="59" height="13" alt="SEIT 1947"></div>
</div>


<hr style="width:660px; height:0px; color:#FFF; position:absolute; top:162px; left:182px;">


<div style="position:absolute; top:245px; left:181px;">
<img src="bild.jpg" width="317" height="170" alt="Foto"></div>


<div style="position:absolute; top:449px; left:181px;">
<img src="bild.jpg" width="317" height="170" alt="Foto"></div>


<div style="position:absolute; top:245px; left:527px; width:315px; border:0px solid #804000; padding:0px; height: 374px; font-family: Helvetica;">


<span style="font-size:12px;font-family:Helvetica;line-height:17px">Text<br>
Text


<p>Text<br>
Text</p>


Text<br>
Text
</span>
</div>


<div style="position:absolute; top:188px; left:183px; width:660px; border:0px solid #804000; padding:0px">


<span style="font-size:14px;font-family:Helvetica;line-height:17px"><a href="01_historie_mersmann.html">HISTORIE</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="02_schmuck_mersmann.html">SCHMUCK</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="03_gold_mersmann.html">GOLD, SILBER + STEINE</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="05_jobs_mersmann.html">JOBS</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="06_kontakt_mersmann.html">KONTAKT</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="07_anfahrt_mersmann.html">ANFAHRT</a></span>
</div>


<div style="position:absolute; top:204px; left:390px; width:107px; border:0px solid #804000; padding:0px">


<a href="03_gold_mersmann.html"><span style="font-size:10px;font-family:Helvetica;line-height:17px">Gold, Platin &amp; Silber </span>
</a></div>


<div style="position:absolute; top:204px; left:498px; width:660px; border:0px solid #804000; padding:0px">


<a href="04_brillanten_mersmann.html"><span style="font-size:10px;font-family:Helvetica;line-height:17px">Brillanten, Farbedelsteine &amp; Perlen </span>
</a></div>


<hr style="width:660px; height:0px; color:#FFF; position:absolute; top:654px; left:182px;">


<div style="position:absolute; top:680px; left:792px;"> <a href="09_impressum_mersmann.html"><img src="bild.jpg" width="50" height="10" alt="Impressum"></a></div>


</body>
</html>
 
Da Du quasi alles absolut positionert, wirst Du mit der Zentrierung nicht weit kommen. Das geht in dem Fall nur auf einem etwas umständlicheren Weg.

Wenn Du die absolute Positionierung behalten willst, dann versuche es mal folgendermaßen:

Code: 
body {
 position: absolute;
 top: 0;
 left: 50%;
 margin-left: -450px;
 width: 900px;
}

Hinweis: Da ich deine Wunschmaße für den zentrierten Bereich nicht erkennen kann, habe ich hier 900 Pixel angegeben. Das müsstest Du dann deinen Wünschen anpassen. Der margin-left-Wert ist die negative Hälfte der Breite, müsstest Du ggfs. auch anpassen.

Ideal wäre aber es, wenn Du auf die absolute Positionierung verzichten würdest. Wenn Du die weg hast, kannst Du auch leichter zentrieren. Dann sähe es nämlich so aus:

Code: 
body {
 margin: 0 auto;
 width: 900px;
]

Moderation: Verschoben von HTML zu CSS.
Und bitte verwende künftig Code-Tags, wenn Du Quellcode im Forum zeigen willst.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben