StephanSch
Aktives Mitglied
Thread Starter
- Dabei seit
- 24.07.2006
- Beiträge
- 406
- Reaktionspunkte
- 1
Ich möchte mit Hilfe eines CSS Layers einen Container definieren, der genau zentriert vom Browser ist...habe das ganze auch realisiert. Das Problem an der Sache ist nun, dass wenn ich das Browserfenster extrem klein ziehe, schneidet er mir die linke Hälfte des Layers ab, und man kann dort hin auch nicht mehr scrollen. Lediglich die Rechte Hälfte des Layers kann man durch scrollen anschaun. Hier mein Code:
HTML Datei:
<!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="PRAGMA" CONTENT="NO-CACHE" />
<title>Stephan Schröter | portfolio</title>
<link rel="stylesheet" type="text/CSS" href="MAIN/CSS/standard.css" />
</head>
<body>
<div id="container">
<div id="content">
<img src="MAIN/JPG/PHOTOGRAPHY/faces_1.jpg" alt="Foto: Stephan Schröter" />
</div>
<div id="navigation">
Navigation
</div>
</div>
</body>
</html>
CSS-Datei:
html, body {
background: #f5f5f5;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
p, div, ul, td, li {
font-family: Verdana, Helvetica, sans-serif;
font-size: 11px;
}
#container {
position: absolute;
left: 50%;
top: 50%;
text-align: left;
width: 650px;
height: 475px;
background-color: #F2F322;
margin-left: -325px;
margin-top: -238px;
border: 0px solid;
overflow-x: hidden;
overflow-y: hidden;
}
#content {
text-align: left;
width: 650px;
height: 435px;
background-color: #CCCCCC;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0px solid;
overflow-x: hidden;
overflow-y: hidden;
}
#navigation {
text-align: left;
width: 650px;
height: 40px;
background-color: #F5F5F5;
margin: 0px 0px 0px 0px;
padding: 7px 0px 0px 0px;
border: 0px solid;
overflow-x: hidden;
overflow-y: hidden;
}
HTML Datei:
<!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="PRAGMA" CONTENT="NO-CACHE" />
<title>Stephan Schröter | portfolio</title>
<link rel="stylesheet" type="text/CSS" href="MAIN/CSS/standard.css" />
</head>
<body>
<div id="container">
<div id="content">
<img src="MAIN/JPG/PHOTOGRAPHY/faces_1.jpg" alt="Foto: Stephan Schröter" />
</div>
<div id="navigation">
Navigation
</div>
</div>
</body>
</html>
CSS-Datei:
html, body {
background: #f5f5f5;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
p, div, ul, td, li {
font-family: Verdana, Helvetica, sans-serif;
font-size: 11px;
}
#container {
position: absolute;
left: 50%;
top: 50%;
text-align: left;
width: 650px;
height: 475px;
background-color: #F2F322;
margin-left: -325px;
margin-top: -238px;
border: 0px solid;
overflow-x: hidden;
overflow-y: hidden;
}
#content {
text-align: left;
width: 650px;
height: 435px;
background-color: #CCCCCC;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0px solid;
overflow-x: hidden;
overflow-y: hidden;
}
#navigation {
text-align: left;
width: 650px;
height: 40px;
background-color: #F5F5F5;
margin: 0px 0px 0px 0px;
padding: 7px 0px 0px 0px;
border: 0px solid;
overflow-x: hidden;
overflow-y: hidden;
}