tinchern06
Mitglied
Hallo zusammen,
folgendes Problem kann ich im Moment nicht lösen:
zur Seitenstruktur
- zentriertes div (wrapper)
- darin eingebunden 1. menue, 2. content , 3. foot
Momentan haben alle div die Position absolut.
die funktioniert auch soweit ganz gut, bis man das Browser Fenster verkleinert, dann werden die Inhalte aller eingebundenen divs nicht mehr vollständig angezeigt
ein Lösungsansatz ist das wrapper div mit "margin: 0 auto;" zu zentrieren (soll wohl aber nicht in allen Browsern funktionieren), zusätzlich soll das wrapper div aber größer als die Inhalt divs werden, da es eine Hintergrundgrafik enthält die rund um die Inhaltsbox läuft. Also müssen die Inhalte auch alle zentriert werden.
die Zentrierung der 3 anderen divs bekomme ich nur über einem Umweg hin.
indem ich ein zusätzliches div mit position: relative einsetze(welches ja eigentlich unnötig und leer ist)
die Struktur sieht nun folgender Maßen aus
irgendwie erscheint mir mittlerweile das ganze als Chaos... Es gibt bestimmt einfachere Lösungen, auf welche ich als Hobbyprogrammierer leider aber noch nicht gekommen bin.
Deshalb würde ich mich über andere Lösungswege oder Änderungen meines Codes freuen.
Danke im Voraus....
folgendes Problem kann ich im Moment nicht lösen:
zur Seitenstruktur
- zentriertes div (wrapper)
- darin eingebunden 1. menue, 2. content , 3. foot
Momentan haben alle div die Position absolut.
die funktioniert auch soweit ganz gut, bis man das Browser Fenster verkleinert, dann werden die Inhalte aller eingebundenen divs nicht mehr vollständig angezeigt
Code:
body {
padding: 0px;
margin: 0px;
color: rgb(255,255,255);
background-image:url(images/bg.gif);
background-repeat:no-repeat;
background-position: 50% 0px;
}
#wrapper {
width: 800px;
height: 600px;
left: 50%;
margin-left: -400px;
top: 115px;
position: absolute;
}
#menu {
width:800px;
margin:0;
padding-left:0px;
height: 30px;
padding-top:25px;
position:absolute;
}
#content{
top: 48px;
padding: 0;
width: 800px;
height: 420px;
background-color: rgb(99,95,95);
background-image:url(images/hg_content.jpg);
background-repeat:no-repeat;
background-position: 50% 0px;
position: absolute;
}
#foot{
top: 475px;
padding:0;
margin:0;
width: 800px;
height: 35px;
position: absolute;
}
<html>
<link href="format.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="menu"> <ul> <li><a href="..html">....</a></li> <li><a href="..html">....</a></li></ul>
</div><!-- Ende menu -->
<div id="content">
Inhalt
</div> <!-- Ende content -->
<div id="foot"></div>
</div> <!-- Ende wrapper -->
</body>
</html>ein Lösungsansatz ist das wrapper div mit "margin: 0 auto;" zu zentrieren (soll wohl aber nicht in allen Browsern funktionieren), zusätzlich soll das wrapper div aber größer als die Inhalt divs werden, da es eine Hintergrundgrafik enthält die rund um die Inhaltsbox läuft. Also müssen die Inhalte auch alle zentriert werden.
die Zentrierung der 3 anderen divs bekomme ich nur über einem Umweg hin.
indem ich ein zusätzliches div mit position: relative einsetze(welches ja eigentlich unnötig und leer ist)
die Struktur sieht nun folgender Maßen aus
Code:
#wrapper {
width: 1100px;
height: 718px;
margin: 0 auto;
margin-right: auto;
margin-left: auto;
background-image:url(images/bg.gif);
background-repeat:no-repeat;
background-position: 50% 0px;
}
#wrapper_content{
position:relative;
}
#menu {
width:800px;
height:20px;
top:120px;
left: 50%;
margin-left:-400px;
position:absolute;
}
#content{
width:800px;
height:420px;
top:150px;
left: 50%;
margin-left:-400px;
position:absolute;
border: 1pt solid rgb(255,255,255);
line-height: 1.5;
}
#foot{
top: 580px;
padding:0;
margin:0;
width: 800px;
left: 50%;
margin-left:-400px;
height: 35px;
position: absolute;
}
<html>
<link href="format.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="wrapper_content">
<div id="menu"> <ul> <li><a href="..html">....</a></li> <li><a href="..html">....</a></li></ul>
</div><!-- Ende menu -->
<div id="content">
Inhalt
</div> <!-- Ende content -->
<div id="foot"></div>
</div> <!-- Ende wrapper_content -->
</div> <!-- Ende wrapper -->
</body>
</html>irgendwie erscheint mir mittlerweile das ganze als Chaos... Es gibt bestimmt einfachere Lösungen, auf welche ich als Hobbyprogrammierer leider aber noch nicht gekommen bin.
Deshalb würde ich mich über andere Lösungswege oder Änderungen meines Codes freuen.
Danke im Voraus....
