Florian01
Mitglied
Registriert: 05.05.2008
Beiträge: 3
|
|
Heyho... Als Beispiel:
Ich würde gern als Hintergrund ein Bild haben, wie kann ich jetzt in dem bereich (Haupseite) ein Bild einfügen, der durch die Seiten begrentzt ist?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fixierte Navigation nur für moderne Browser</title>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: white;
min-width: 40em;
}
p {
margin: 3em 0 0 3em;
}
p a {
color:black;
}
html {
padding: 0;
}
body {
margin: 0; padding: 0;
}
#fixiert {
position: absolute;
top: 2.8em; left: 2em;
width: 18em;
background-color: white;
border: 1px solid silver;
}
html>body #fixiert {
position: fixed;
}
#fixiert img {
height: 6.8em; float: right;
}
#Inhalt {
margin-left: 22em; padding: 0 1em;
border-left: 2px ridge gray; border-top: 2px ridge gray;
}
* #Inhalt {
background-color: #ffffe0; /* HIER würd ich gern ein Bild einfügen, statt der Farbe */
}
#Inhalt h2 {
font-size: 1.2em;
margin: 2em 5% 2em;
color: maroon;
border-bottom: 1px solid silver;
}
#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
#Inhalt #Fusszeile {
font-size: 0.9em;
margin: 200em 0 0; padding: 0.1em;
text-align: center;
background-color: #fed; border: 1px solid silver;
}
h1 {
font-size: 1.5em;
margin: 0.5em; padding: 0.3em;
text-align: center;
background-color: #fed;
border: 2px ridge gray;
}
#Navigation {
font-size: 0.83em;
margin: 0 0 1.2em; padding: 0;
}
#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: black; background-color: #eee;
}
ul#Navigation a:visited {
color: #666; background-color: #eee;
}
ul#Navigation a:hover {
color: black; background-color: white;
}
ul#Navigation a:active {
color: white; background-color: gray;
}
</style>
</head>
<body>
<div id="Scrollbereich"> <!-- erst fuer den folgenden Workaround benoetigt -->
<h1>Fixierte Navigation</h1>
<div id="Inhalt">
<h2>Beispiel nur für moderne Browser</h2>
<p>In diesem Beispiel ist die linke Navigation zunächst absolut positioniert
und wird anschließend über eine Browserweiche nur für moderne Browser fixiert.
Hierdurch kommt es in älteren Browsern zu keinen Fehldarstellungen und auch
diese setzen die erst am Ende des Quelltextes notierte Navigation nach oben.</p>
<p>Für dieses Beispiel ist das "mehrspaltige Layout mit Kopf-
und Fußzeile" der vorherigen Seite etwas modifiziert worden.
Es passt sich der Fenster- und Schriftgröße an und sogar
das SELFHTML-Logo 'wächst' durch die Höhenangabe in <strong>em</strong>
mit einer Schriftvergrößerung.</p>
<p>Beachten Sie, dass der fixierte Bereich teilweise unzugänglich wird,
wenn die Höhe des Browserfensters sehr stark verringert
und/oder die Schriftgröße heraufgesetzt wird!</p>
<p id="Fusszeile">Sie haben tatsächlich bis hierhin gescrollt? ;-)</p>
</div>
</div>
<div id="fixiert"> <!-- verhindert auch Anzeigefehler einer fixierten ul -->
<ul id="Navigation">
<li><a href="einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
<li><a href="mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
<li><a href="fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
<li><a href="navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
<li><a href="browserweichen.htm">CSS-Browserweichen</a></li>
</ul>
<img src="../../../src/logo.gif" alt="SELFHTML">
<p><a href="../fixbereiche.htm#definieren">zurück</a></p>
</div>
</body>
</html>
Mfg Florian01
|
|
| 06.05.2008 16:37:50 |
|
dkdenz
Administrator
Ort: Lübeck
Registriert: 25.04.2005
Beiträge: 636
|
|
Hi
Ich verstehe die Frage leider nicht wirklich, aber ein Hintergrundbild fügt man mit
Code:
background:url(pfad-zum-bild); |
ein.
Ansonsten gibt es im Internet genügend Quellen zum Nachschlagen, bevor man ein Forum konsultiert.
Viel Spaß noch...
_______________________________________
Mozilla/5.0 (X11; U; Linux i686; de; rv:1.9.0.3) Gecko/2008092510 Ubuntu/8.04 (hardy) Firefox/3.0.3
|
|
| 06.05.2008 17:09:32 |
| http://dkmd.de | http://dkdenz.de |
 |
|
Wechsel zu
Die letzten Beiträge aus diesen Forum
|
|
