forum-user
Mitglied
Hallo Leute.
Wahrscheinlich habe ich einen kleinen Denkfehler, aber hier mal mein Fall.
Die Seite hat ein festes Hintergrundbild 1240x:850px (Grafik besteht aus mehreren Bildern die transparent sind), dies muss immer mittig zentriert sein. Auf diesem Bild wird die Navigation und der Content per DIV aufgebaut.
Soweit so gut das funktioniert auch soweit, auch wenn ich das Fenster reduziere. Aber.... Wenn ich die Auflösung am PC ändere oder ein Notebook nutze für den Seitenaufruf, wird nicht mehr alles angezeigt, geschweige denn Scrollbars. Ich weis das diese Dinger keiner will aber bei der kleineren Auflösung sollte doch die Möglichkeit sein.
Hier mal die CSS File:
und hier mal der HTML Part
Wahrscheinlich habe ich einen kleinen Denkfehler, aber hier mal mein Fall.
Die Seite hat ein festes Hintergrundbild 1240x:850px (Grafik besteht aus mehreren Bildern die transparent sind), dies muss immer mittig zentriert sein. Auf diesem Bild wird die Navigation und der Content per DIV aufgebaut.
Soweit so gut das funktioniert auch soweit, auch wenn ich das Fenster reduziere. Aber.... Wenn ich die Auflösung am PC ändere oder ein Notebook nutze für den Seitenaufruf, wird nicht mehr alles angezeigt, geschweige denn Scrollbars. Ich weis das diese Dinger keiner will aber bei der kleineren Auflösung sollte doch die Möglichkeit sein.
Hier mal die CSS File:
Code:
@charset "utf-8";
/* CSS Document */
html{
height:100.1%;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
text-align:center;
background:#000000;
}
#preload {
display: none
}
#preload img {
height: 0; width: 0; border: none;
position: absolute;
bottom: 0;
left: 0;
z-index: -30;
}
#wrapper_index{
background:url(../image/index.jpg) no-repeat fixed top #000000;
position:fixed;
left:50%;
margin-left:-620px;
display:block;
width:1240px;
height:850px;
text-align:left;
}
#content_head{
position:absolute;
left:50%;
top:101px;
margin: 0 0 0 -180px;
padding:5px;
display:block;
width:384px;
height:190px;
}
#content_head p {
color:#FFFFFF;
text-align:left;
line-height:19px;
margin-bottom:4px;
}
#content_head h1{
color:#FFFFFF;
text-align:left;
font-variant:small-caps;
padding-bottom:15px;
font-size:18px;
}
#content_wrapper{
position:absolute;
top:305px;
left:50%;
margin: 0 0 0 -180px;
padding:5px;
width:650px;
height:382px;
display:block;
overflow:auto;
}
#content_wrapper p{
text-align:left;
line-height:23px;
margin-bottom:15px;
}
#main_navi{
position:absolute;
top:241px;
left:142px;
width:277px;
height:458px;
display:block;
}
#main_navi ul {
margin:0;
padding:0;
list-style:none;
}
#main_navi li{
text-align:center;
font-size:20px;
color:#FFFFFF;
width:277px;
display:block;
line-height:67px;
margin-top:6px;
}
#main_navi ul li a:link,#main_navi ul li a:visited, #main_navi ul li a:active {
font-weight:normal;
text-decoration:none;
color:#ffffff;
}und hier mal der HTML Part
HTML:
<!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" />
<title>Unbenanntes Dokument</title>
<link href="design/css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="design/css/design.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper_index">
<div id="content_head">
<h1>BlaBla</h1>
<p>BlubBlub</p>
</div>
<div id="content_wrapper">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div>
<div id="main_navi">
<ul>
<li><a href="index.php">Startseite</a></li>
<li><a href="ueber_uns.php">Über Uns</a></li>
<li><a href="leistung.php">Unsere Leistungen</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
<li><a href="partner.php">Unsere Partner</a>
<li><a href="impressum.php">Impressum</a>
</ul>
</div>
</div>
</body>
</html>
