Hintergrund dynamisch - möglich!?

Jewlz · 28 Juni 2008

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

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 <img> 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

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:

Code:

[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:

[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%
}

Hintergrund dynamisch - möglich!?

Jewlz

Neues Mitglied

Icy

Neues Mitglied

Jewlz

Neues Mitglied

Neueste Beiträge