Hallo Community
ich wollte meinen hrml Stil verbessern und auf Div Container umstellen (sprich alles über css definieren)
Folgendes Problem tritt dabei auf:
bei dem Code:
HTML Quellcode:
das Problem auf, dass der DIV mit der Klasse repeat sich nach ganz oben in den Hintergrund schiebt. Sie soll aber sich 500 px von oben absetzen, damit der weisse Hintergrund in der oberen Hälfte sichtbar wird. Gebe ich dem DIV Container allerdings ein margin von top 500px schieben sich alle Container nach unten.
Z-Index habe ich probiert und es klappt iwie nicht. Für alle anregungen dankbar
Achja: Die CSS Klassen:
Code:
ich wollte meinen hrml Stil verbessern und auf Div Container umstellen (sprich alles über css definieren)
Folgendes Problem tritt dabei auf:
bei dem Code:
HTML Quellcode:
<form action="">
<body>
<div style="position:absolute;"><!--Der Hauptcontainer für den weissen Hintergrund -->
<!--Die Kopfzeile -->
<div align="center" class="whitespace" style="margin-top:170px; margin-left:200px;">
<div class="whitespace" align="left" style="float:left" >
<input type="image" src="img/prev.png" name="previous"/>
</div>
<div class="whitespace" align="center" style="float:left; margin-left:130px;">
<img src="img/logo.png" />
</div>
<div class="whitespace" align="right" style="float:left; margin-left:130px;">
<input type="image" src="img/next.png" name="next" />
</div>
<div style="clear:both;">
</div>
</div>
<!-- Hier der 2te Hauptcontainer mit dem Bild und dem Text -->
<div align="center" style="width:960">
<div style="float:left; margin-top:50px; z-index:1"> <!--Der Div mit dem Bild -->
<img src="img/magazin01.png" />
</div>
<div style="float:left">
<div style="margin-top:150px"><!--Der Div mit den TExt Containern -->
<font style="color:#00a8eb; text-align:left"><b>Überschrift</b></font>
</div>
<div style="margin-top:50px; text-align:left">
Weiterer Textblock
</div>
<div style="margin-top:50px; text-align:left">
<input type="image" src="img/open.png" name="open"/>
</div>
</div>
<div style="clear:both">
</div>
</div>
</div>
<div style="z-index:5;" class="repeat">
</div>
<div align="center" style="margin-top:-200px;">
<div class="footer" >
Fusszeile mit Links
</div>
</div>
</body>
</form>
<body>
<div style="position:absolute;"><!--Der Hauptcontainer für den weissen Hintergrund -->
<!--Die Kopfzeile -->
<div align="center" class="whitespace" style="margin-top:170px; margin-left:200px;">
<div class="whitespace" align="left" style="float:left" >
<input type="image" src="img/prev.png" name="previous"/>
</div>
<div class="whitespace" align="center" style="float:left; margin-left:130px;">
<img src="img/logo.png" />
</div>
<div class="whitespace" align="right" style="float:left; margin-left:130px;">
<input type="image" src="img/next.png" name="next" />
</div>
<div style="clear:both;">
</div>
</div>
<!-- Hier der 2te Hauptcontainer mit dem Bild und dem Text -->
<div align="center" style="width:960">
<div style="float:left; margin-top:50px; z-index:1"> <!--Der Div mit dem Bild -->
<img src="img/magazin01.png" />
</div>
<div style="float:left">
<div style="margin-top:150px"><!--Der Div mit den TExt Containern -->
<font style="color:#00a8eb; text-align:left"><b>Überschrift</b></font>
</div>
<div style="margin-top:50px; text-align:left">
Weiterer Textblock
</div>
<div style="margin-top:50px; text-align:left">
<input type="image" src="img/open.png" name="open"/>
</div>
</div>
<div style="clear:both">
</div>
</div>
</div>
<div style="z-index:5;" class="repeat">
</div>
<div align="center" style="margin-top:-200px;">
<div class="footer" >
Fusszeile mit Links
</div>
</div>
</body>
</form>
das Problem auf, dass der DIV mit der Klasse repeat sich nach ganz oben in den Hintergrund schiebt. Sie soll aber sich 500 px von oben absetzen, damit der weisse Hintergrund in der oberen Hälfte sichtbar wird. Gebe ich dem DIV Container allerdings ein margin von top 500px schieben sich alle Container nach unten.
Z-Index habe ich probiert und es klappt iwie nicht. Für alle anregungen dankbar
Achja: Die CSS Klassen:
Code:
@charset "utf-8";
/* CSS Document */
a:link
{
font-family:Verdana, Geneva, sans-serif;
font-size:9px;
color:#000;
text-decoration:none;
}
a:hover
{
font-family:Verdana, Geneva, sans-serif;
font-size:9px;
color:#06F !important;
text-decoration:none;
}
a:visited
{
font-family:Verdana, Geneva, sans-serif;
font-size:9px;
color:#000;
text-decoration:none;
}
body
{
font-family:Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
border:none;
}
.whitespace
{
background:#fff;
}
.magazin
{
position:absolute;
width:615;
height:695;
background:none;
left: 8px;
top: 419px;
}
.repeat
{
background-image:url(../img/verlauf_unten.png);
background-repeat:repeat-x;
height:490px;
width:100%;
overflow:hidden;
}
.footer
{
font-family:Verdana, Geneva, sans-serif;
font-size:9px;
background-repeat:repeat-x;
background-image:url(../img/verlauf_footer.png);
width:900px;
border:solid 1px #d6d6d6;
-moz-border-radius:4px;
-khtml-border-radius:10px;
}
/* CSS Document */
a:link
{
font-family:Verdana, Geneva, sans-serif;
font-size:9px;
color:#000;
text-decoration:none;
}
a:hover
{
font-family:Verdana, Geneva, sans-serif;
font-size:9px;
color:#06F !important;
text-decoration:none;
}
a:visited
{
font-family:Verdana, Geneva, sans-serif;
font-size:9px;
color:#000;
text-decoration:none;
}
body
{
font-family:Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
border:none;
}
.whitespace
{
background:#fff;
}
.magazin
{
position:absolute;
width:615;
height:695;
background:none;
left: 8px;
top: 419px;
}
.repeat
{
background-image:url(../img/verlauf_unten.png);
background-repeat:repeat-x;
height:490px;
width:100%;
overflow:hidden;
}
.footer
{
font-family:Verdana, Geneva, sans-serif;
font-size:9px;
background-repeat:repeat-x;
background-image:url(../img/verlauf_footer.png);
width:900px;
border:solid 1px #d6d6d6;
-moz-border-radius:4px;
-khtml-border-radius:10px;
}
