Jewlz
28. Juni 2008 um 20:10
1
Hallo liebe Community,
bin momentan dabei, eine Schulsubpage für einen Fachbereich einzurichten.
Da ich aber selber nur HTML und ein wenig Css in der Schule hatte, komme ich einfach nicht voran!
habe anfangs mit Framesets gearbeitet, bin jedoch auf Css Boxenmoddel umgestiegen,nachdem ein Lehrer mir dazu riet!
Habe Menü/Header soweit angepasst, jedoch schaffe ich es einfach nicht, das Hintergrundbild dynamisch anzupassen (sprich height/width= 100%).
Gibt es irgendeinen Befehl dafür? q.q
So far
Icy
28. Juni 2008 um 20:32
2
Hallo,
leider gibt es meines Wissens keinen „Befehl“ speziell für diesen Fall.
Ich würde einfach eine DIV-Ebene unter alle anderen legen und dort deinen Hintergrund per einbinden. Du kannst ihn dann per style=„width: 100%; height; 100%;“ ausrichten. Da diese Box unter allen anderen liegt, wirkt sie wie ein Hintergrund.
MfG Icy
Jewlz
28. Juni 2008 um 21:10
3
Habe es mal probiert, jedoch habe ich denke ich einen Fehler im Quelltext, da ich jetzt zwar das Hintergrundbild gestreckt sehe, jedoch kein Menü/header mehr:
[U]index.html[/U]
<html>
<head>
<link rel="stylesheet" type="text/css" href="boxmodell.css">
</head>
<body>
<div id="bgIMG">
<img id="bgImg" src="hintergrund.jpg" width="100%" height="100%">
</div>
<div id="oben">
</div>
<div id="menu">
<br>
<br>
<table border="0">
<tr>
<a href="list.html" target="_blank">Home</a></font></td></tr>
<tr><td align="left"><font size="2" face="verdana">
</tr>
<tr>
<a href="list2.html" target="list">Aktuelles</a></font></td></tr>
<tr><td align="left"><font size="2" face="verdana">
</tr>
<tr>
<a href="list3.html" target="list">Lehrer/innen</a></font></td></tr>
<tr><td align="left"><font size="2" face="verdana">
</tr>
<tr>
<a href="list4.html" target="list">Fachkonzept</a></font></td></tr>
<tr><td align="left><font size="2" face="verdana">
</tr>
<tr>
<a href="list5.html" target="list">AG's</a></font></td></tr>
<tr><td align="left"><font size="2" face="verdana">
</tr>
<tr>
<a href="list6.html" target="list">Veranstaltungen</a></font></td></tr>
<tr><td align="left"><font size="2" face="verdana">
</tr>
<tr>
<a href="list7.html" target="list">Impressionen aus dem Unterricht</a></font></td></tr>
<tr><td align="left"><font size="2" face="verdana">
</tr>
<tr>
<a href="list8.html" target="list">Kontakt</a></font></td></tr>
</table>
<br>
</font></td></tr>
</table>
</body>
</html>
</tr>
</table>
</div>
<div id="inhalt">
</div>
</body>
</html>
[/code][code]
[U]css datei:[/U]
* { margin: 0;
padding: 0;}
/* Höhen- und Breitenanpassung zu 100%; Scrollbar ausblenden */
body, html{ width: 100%;
height: 100%;
overflow: hidden;}
/* BG-Image auf unterste Ebene anordnen */
#bgImg{ position: absolute;
top: 0;
left: 0;
border: 0;
z-index: 1;}
#oben{
background: transparent url("header2.gif") no-repeat;
padding:5px;
height:10.5%;
width:100%
z-index: 2;
}
#menu{
width:12%;
height:85%;
float:left;
color:black;
background:transparent url("navigation1.jpg") no-repeat;
padding:10px;
border-top:0px solid #837C6B;
border-right:0px solid #E4D9C0;
border-bottom:0px solid #E4D9C0;
border-left:0px solid #837C6B;}
#menu a{
color:white;
font:bold 12px verdana, sans-serif;
margin:9px;
padding:1px 3px 5px 4px;
text-decoration:none;
background:transparent;
display:block;
border-top:1px solid #99917d;
border-right:1px solid #e4d9c0;
border-bottom:1px solid #e4d9c0;
border-left:1px solid #99917d;
}
#menu a:hover{
color:white;
background:transparent;
border-top:1px solid #e4d9c0;
border-right:1px solid #837c6b;
border-bottom:1px solid #837c6b;
border-left:1px solid #e4d9c0;}
#inhalt {
padding:5px;
margin-top:5px;
width:70%;
float:left;
height:85%
}