bild nach ganz unten?

Status
Nicht offen für weitere Antworten.

metaxy

Grünschnabel
html datei
HTML:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta **********="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
    <style type="text/css"> 
    /* Fügen Sie CSS-Box-Modell-Korrekturen für IE 5* in diesen bedingten Kommentar ein. */
    .twoColFixLtHdr #sidebar1 { width: 230px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css"> 
    /* Fügen Sie CSS-Korrekturen für alle IE-Versionen in diesen bedingten Kommentar ein. */
    .twoColFixLtHdr #sidebar1 { padding-top: 30px; }
    .twoColFixLtHdr #mainContent { zoom: 1; }
    /* Mit der obigen proprietären Zoom-Eigenschaft wird IE die Eigenschaft hasLayout zugewiesen, die zur Verhinderung verschiedener Fehler erforderlich ist. */
    </style>
    <![endif]--></head>

<body >

<div id ="top">
    <div id="container">
      <div id="header">
     
      <!-- end #header --></div>
      
      <div id="sidebar1">
      
        <h3>Sidebar1-Inhalt</h3>
        <p>Die Hintergrundfarbe für dieses div wird nur für die Länge des Inhalts angezeigt. Sollten Sie eine Trennlinie bevorzugen, fügen Sie der CSS-Regel des entsprechenden Divs (#sidebar oder #mainContent) eine Rahmen-Eigenschaft hinzu.</p>
        <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend  sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
      <!-- end #sidebar1 --></div>
      
      <div id="mainContent">
        <h1> Hauptinhalt </h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
        <h2>H2-Überschrift </h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
    	<!-- end #mainContent --></div>
    	<!-- Dieses clear-Element sollte direkt auf das #mainContent-div folgen, um das #container-div anzuweisen, alle untergeordneten Floats aufzunehmen. -->
        <br class="clearfloat" />
      <div id="footer">
      
      <!-- end #footer --></div>
    <!-- end #container --></div>
   </div>

    </body>
</html>
css datei
HTML:
@charset "utf-8";
body  {
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
    	background: #baf2ff;
    	margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
    	padding: 0;
    	text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
    	color: #000000;
    }
   #container { 
    	width: 836px;  /* Mit einer Breite, die 20 Pixel unter der vollen Breite von 800 Pixel liegt, können Sie dem Browser-Chrome Rechnung tragen und gleichzeitig eine horizontale Bildlaufleiste vermeiden. */
    	background-image:url(images/metaxy-k_05.jpg);
    	margin: 0 auto; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
    	/*border: 1px solid #000000;*/
    	text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
    } 
    #header { 
    	background: #DDDDDD; 
		height:159px;
    	background-image:url(images/metaxy-k_02.jpg);
    } 
     #header h1 {
    	margin: 0; /* Wenn Sie den Rand des letzten Elements im #header-div auf 0 einstellen, können Sie das Auftreten unerwarteter Abstände zwischen divs vermeiden. Wenn das div einen Rahmen hat, ist dies unnötig, weil dieser Rahmen die gleiche Wirkung hat. */
    	padding: 10px 0; /* Durch die Verwendung der Auffüllung anstelle von Rändern lässt sich gewährleisten, dass das Element die Kanten des div nicht berührt. */
    }
    #sidebar1 {
    	float: left; /* Da es sich hier um ein floatendes Element handelt, muss eine Breite angegeben werden. */
    	width: 200px; /* Die tatsächliche Breite dieses div umfasst in standardgerechten Browsern bzw. im Standardmodus von Internet Explorer außer der Breite auch die Auffüllung und den Rahmen. */
    	padding: 15px 10px 15px 20px;
    }
     #mainContent { 
    	margin: 0 0 0 250px; /* Durch den linken Rand dieses div-Elements entsteht die Spalte am linken Seitenrand. Der Spaltenbereich bleibt unabhängig von der Inhaltsmenge des sidebar1-div immer gleich. Sie können diesen Rand entfernen, falls der Text des #mainContent-div den Bereich von #sidebar1 füllen soll, wenn der Inhalt in #sidebar1 endet. */
    	padding: 0 20px; /* padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div -Box. */
    } 
    #footer { 
    	padding: 0 10px 0 20px; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. */
		height:85px;
    	background-image:url(images/metaxy-k_07.jpg);
    	
    } 
     #footer p {
    	margin: 0; /* Wenn Sie die Ränder des ersten Elements in der Fußzeile auf 0 einstellen, können Sie unerwartete Abstände zwischen divs vermeiden. */
    	padding: 10px 0; /* Durch die Verwendung der Auffüllung bei diesem Element entsteht genau wie bei einem Rand ein Leerraum, aber ohne die potenziellen Abstandsprobleme. */
    }
	 #top { 
    	background-image:url(images/oben.jpg);
		background-repeat:no-repeat;
    	
    } 
		
    .fltrt { /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das floatende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* Diese Klasse sollte in einem div- oder break-Element platziert werden und das letzte Element vor dem Schließen eines Containers sein, der wiederum einen vollständigen Float enthalten sollte. */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
ich möchte jetzt ein bild einfügen das ganz unten ist und hinter <div id="container"> angezeigt wird.Wie kann ich das machen?Ich habe es schon mit
HTML:
position:absolute; bottom:0px;
probiert aber es geht irgendwie nicht!
 
Zuletzt bearbeitet:
Hi,

hier die erforderlichen Regelerweiterungen:

Code:
#container {
            width: 836px;  /* Mit einer Breite, die 20 Pixel unter der vollen Breite von 800 Pixel liegt, können Sie dem Browser-Chrome Rechnung tragen und gleichzeitig eine horizontale Bildlaufleiste vermeiden. */
            background-image:url(images/metaxy-k_05.jpg);
            margin: 0 auto; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
            /*border: 1px solid #000000;*/
            text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
            background:yellow;
            position:relative;
            z-index:10;
    }

#top {
   background-image:url(images/oben.jpg);
   background-repeat:no-repeat;
   min-height:100%;
   height:auto !important;
   height:100%;
   position:relative;
}

img#test { 
  position:absolute; 
  bottom:0; 
  left:0; 
  z-index:1; 
  width:100%; 
  height:100px;  /* von mir frei gewählt */
}

Das Grafikelement mit der ID #test notierst du nach dem schliessenden </div>-Tag des DIV #container:

Code:
 <!-- end #container --></div>
    <img src="..."  alt="..." id="test">
   </div>
Bin mir jetzt nicht sicher ob's beim Kopieren geschehen ist, aber in deinem gezeigten HTML-Code fehlt bei der Doctype-Deklaration zu Beginn die öffnende "<"-Klammer.
 
Status
Nicht offen für weitere Antworten.
Zurück