Irgendwie komm' ich hiermit nicht klar. Hab schon einiges an Tipps und Hinweisen, die ich hier und im I-Net gefunden hab' probiert, aber es ändert sich nix.
Der gesamte Content soll in einem div-Bereich - in dem andere div-Bereiche untergebracht sind - zentriert im Browser dargestellt werden. Aber das einzige was ich erreiche, ist, dass ich absolute Werte in Pixel angeben kann. Was mach' ich falsch?
Hier ist mal der HTML-Quelltext:
und hier die CSS:
Ich hoffe, dass mir einer von euch helfen kann und mir erklärt, wo mein Fehler liegt.
Der gesamte Content soll in einem div-Bereich - in dem andere div-Bereiche untergebracht sind - zentriert im Browser dargestellt werden. Aber das einzige was ich erreiche, ist, dass ich absolute Werte in Pixel angeben kann. Was mach' ich falsch?
Hier ist mal der HTML-Quelltext:
Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Willkommen bei Blumen Schildgen </title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link href="../css/screen.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="hintergrund">
<div id="logo"></div>
<div id="navleiste">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Home</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">Galerie</a>
<ul>
<li><a href="../hochzeit.htm">Hochzeit</a></li>
<li><a href="../trauer.htm">Trauer</a></li>
<li><a href="../deko.htm">Dekorationen</a></li>
<li><a href="../tischdeko.htm">Tischdekorationen</a></li>
</ul>
</li>
<li><a href="../tipps.htm">Tipps</a> </li>
<li><a href="../angebote.htm" class="MenuBarItemSubmenu">Angebote</a>
<ul>
<li><a href="../angebote.htm">Angebote</a></li>
<li><a href="../neuheiten.htm">Neuheiten</a></li>
</ul>
</li>
<li><a href="../ueberuns.htm">Über uns</a></li>
<li><a href="../kontakt.htm">Kontakt</a></li>
<li><a href="../impressum.htm">Impressum</a></li>
</ul>
</div>
<div id="bildplatzhalterobenrechts"></div>
<div id="bildlinks"></div>
<div id="textfeld"></div>
<div id="filmstreifen"></div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
Code:
body {
}
#hintergrund {
position:absolute;
width:900px;
height:550px;
z-index:1;
background-image: url(../bilder/schildgen.jpg);
text-align: left;
margin:auto;
margin-left: 30px;
}
#logo {
position:absolute;
width:450px;
height:70px;
z-index:1;
}
#navleiste {
position:absolute;
width:900px;
height:25px;
z-index:2;
top: 71px;
}
#bildplatzhalterobenrechts {
position:absolute;
width:440px;
height:70px;
z-index:3;
left: 451px;
}
#bildlinks {
position:absolute;
width:450px;
height:432px;
z-index:4;
left: 0px;
top: 97px;
}
#textfeld {
position:absolute;
width:439px;
height:262px;
z-index:5;
left: 451px;
top: 97px;
}
#filmstreifen {
position:absolute;
width:439px;
height:156px;
z-index:6;
left: 451px;
top: 360px;
}
(bzw ist)
