nicht angemeldet
XHTML-Site mittig zentrieren
Hallo,
ich habe folgende Webisite in XHTML:
index.htm
-------------
<!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" xml:lang="en" lang="en">
<head>
<title>Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="all">@import "master.css";</style>
</head>
<body text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<div class="head">
<div id="startseite" class="navibutton"><a href="index.htm" class="navitext">Startseite</a></div>
<div id="seite2" class="navibutton"><a href="seite2.htm" class="navitext">Seite 2</a></div>
<div id="seite3" class="navibutton"><a href="seite3.htm" class="navitext">Seite 3</a></div>
</div>
<div style="position:absolute; top: 67px; left:16px; z-index : 6;"><a href="index.htm"><img src="images/xxgico1a.gif" width="32" height="32" alt="Startseite" border="0"></a></div>
<div style="position:absolute; top: 67px; left:142px; z-index : 6;"><a href="seite2.htm"><img src="images/xxgico2a.gif" width="32" height="32" alt="Seite 2" border="0"></div>
<div style="position:absolute; top: 67px; left:268px; z-index : 6;"><a href="seite3.htm"><img src="images/xxgico3a.gif" width="32" height="32" alt="Seite 3" border="0"></a></div>
<div id="content_oben"><img src="images/xxgconoa.gif" width="761" height="30" alt="" /></div>
<div id="content_links">
<img src="images/00gheada.gif" width="66" height="293" alt="" /><br />
<img src="images/xxgverla.gif" width="75" height="1" alt="" /><br />
<img src="images/xxgconla.jpg" width="75" height="339" alt="" /></div>
<div id="content_mitte">
<div id="content_text" style="height: 630 px;">
Hier steht der eigentliche Inhalt
</div>
</div>
<div id="content_rechts">
<img src="images/xxgverra.gif" width="11" height="293" alt="" /><br />
<img src="images/xxgconra.jpg" width="11" height="339" alt="" /></div>
</body>
</html>
-------------
master.css
-------------
body, td {
margin:0;
color:#000000;
font:11px/1.3em Verdana;
text-decoration:none;
}
a {
color:#000000
}
form {
margin-top:0;
}
h1 {
font:15px/1.3em Verdana;
font-weight:bold;
margin-bottom:0;
color:#D42223
}
h2 {
font:11px/1.3em Verdana;
font-weight:bold;
margin-bottom:0;
}
.head {
background: url(images/xxgbacka.gif) no-repeat;
width : 760px;
height: 100px;
}
.navibutton {
position:relative;
float:left;
background-image : url(images/xxbnnava.gif);
top:64px;
width:136px;
height:34px;
}
.rollover {
background-image : url(images/xxbrnava.gif);
}
.navitext {
font:13px/1.5em Frutiger,Verdana;
text-decoration:none;
font-weight:bold;
color:#ffffff;
position:relative;
top: 13px;
left:50px;
}
.small {
font:9px/1.5em Frutiger,Verdana;
}
.unterstrichen {
text-decoration:underline;
}
.impressum {
font: 11px/normal Verdana;
text-decoration:none;
color:#000000;
}
.rot {
color:#D42223;
}
#startseite {
left: 0px;
z-index : 5;
}
#seite2 {
left: -10px;
z-index : 4;
}
#seite3 {
left: -20px;
z-index : 3;
}
#content_oben {
position:relative;
float:top;
top: 23px;
}
#content_links {
position:relative;
float:left;
top: 23px;
}
#content_mitte {
position:relative;
float:left;
background: url("images/xxgconha.gif") repeat-x bottom;
width : 674px;
top:24px;
border-bottom : 1px solid #CC0000;
}
#content_rechts {
position:relative;
float:left;
top:23px;
}
#content_text {
position:relative;
float:left;
top: 23px;
left: 28px;
width: 560px;
}
#foot {
color:#CC0000;
position:relative;
width : 760px;
height: 26px;
background: url("images/xxgfoota.gif") no-repeat;
top: -48px;
}
-------------
Ich möchte das Ganze nun im Broswer horizontal mittig zentrieren?
Einige DIVS (z.B. #content_links) werden mit float:left ausgerichtet. Sie werden nun trotzdem links angezeigt, auch wenn ich ein mittig zentriertes DIV aussen um die Website mach.
Wie löse ichd as Problem am besten?
Vielen Dank fuer Euere Hilfe
Maresa
-
Hallo,
eine Menge Text zum lesen. Was mir auffällt, du hast Elemente absolute positioniert. Werden die nicht aus dem normalen Textfluss rausgenommen?
Weiter bin ich noch nicht vorgestoßen.
Mit freundlichen Grüßen
André
--
http://forum.de.selfhtml.org/archiv/2003/10/60651/
Und denkt dran - lieber um fünf zuhause als um halb im Zinksarg ... -
Hi,
Ich möchte das Ganze nun im Broswer horizontal mittig zentrieren?
und wie? Wenn du schon den kompletten Code hier postest, hättest Du das auch angeben sollen.
Einige DIVS (z.B. #content_links) werden mit float:left ausgerichtet. Sie werden nun trotzdem links angezeigt, auch wenn ich ein mittig zentriertes DIV aussen um die Website mach.
Wie schon gesagt wurde, verwendest Du durchgängig absolute Positionierung sowie auch relative Positionierung. Das kann in Verbindung mit float problematisch werden. Versuche die position-Angaben soweit wie möglich zu ersetzen.
freundliche Grüße
Ingo