Footer in style.css?

Andreas84

Hallo,

ich möchte gerne eine Grafik als Footer meiner Seite definieren. Wie mache ich das in der style.css am klügsten?

Danke schon mal!

Gruß,
Andreas

Elvis

In der style.css gehört es nur als Background-image rein.

AppeL

es gäbe da ne lösung, ich weiß nur nicht, ob das so elegant ist

wenn dein footer bereich n div ist:

Code

HTML:
<div id="footer">
<span>Hier ist ein Footer</span>
</div>


CSS:
#footer {
background: url(footer_bild.jpg) no-repeat top left;
width: breite_des_bildes px;
height: höhe_des_bildes px;
}


#footer span {
display: none;
}

Alles anzeigen

Andreas84

was meinen die anderen dazu? ist das so ok?

Andreas84

also es stimm ja fast. Aber der Footer soll nur nicht ganz nach oben, sondern immer ganz nach unten irgendwo lieht der fehelr...

des-man

mach es so, wie Elvis es dir gesagt hat...
einfach als

Code

background: url(footer_bild.jpg)

einfügen...

desman

Andreas84

Hab ich doch. In meiner style.css steht folgendes:

Code

#footer 
{ 
background: url(http://www.modenio.de/pictures/modenio_14.gif) no-repeat top center; 
width: 762px; 
height: 29px; 
} 


#footer span 
{ 
display: none; 
}

Alles anzeigen

sejuma

Der Footer muss im Gesamtzusammenhang mit den anderen Elementen gesehen werden.
Wenn er bei dir "oben" angezeigt wird, dann stimmt was nicht mit der Reihenfolge im HTML-Teil und/oder mit den Definitionen im CSS-Teil.
Wenn die vorhergehenden Elemente z.B. gefloatet sind, reicht meist beim Footer ein "clear:both;" aus, damit er nach unten wandert.

Siehe Beispiele 3ff
http://css.fractatulum.net/sample/layout_zum_mitnehmen.htm
http://css.fractatulum.net/vorlagen/v5/index.htm
http://css.fractatulum.net/vorlagen/v4/index.htm

Andreas84

also der code meiner hauptseite ist gar nicht groß:

Code

Hier war ein Code

Normal müsste das doch alles stimmen oder?

Andreas84

Was muss ich denn jetzt in der style.css ändern, damit er auch am Ende der Seite angezeigt wird?

sejuma

Setz ihn mal vor das body-Ende:

Code

</table>
<div id="footer">
      <span>Hier ist ein Footer</span>
      </div>
</body>

Andreas84

Es funktioniert Wie krieg ich das ganze noch in die Mitte der Seite?

sejuma

Füge beim #footer in der CSS mal noch

Code

text-align: center;

ein.

Evtl. Alternativ: Integriere den Footer in eine Tabellenzeile/-zelle bevor du die Tabelle schließt.

Andreas84

das sieht nun so in meiner style.css aus:

Code

#footer 
{ 
background: url(http://www.modenio.de/pictures/modenio_14.gif) no-repeat top left; 
width: 762px; 
height: 29px; 
text-align: center;
} 


#footer span 
{ 
display: none; 
}

Alles anzeigen

der footer ist allerdings immer noch genau am gleichen platz

sejuma

poste bitte nochmal den Gesamtcode

Andreas84

den der style.css?

sejuma

Ja und den HTML-Code.

Andreas84

style.css

Code

html, body
{
  padding:0;
  margin:0;


  height: 100%;
}


body 
{
  font-family: Verdana,sans-serif;
  font-size:12px;


  color: #000;
  background-color: #fff;
}


a
{
  background-color: transparent;
  color: #000;


  font-weight: bold;  
  text-decoration: none;
}


a:hover
{
  background-color: transparent;
  color: #000;
}


#footer 
{ 
background: url(http://www.modenio.de/pictures/modenio_14.gif) no-repeat top left; 
width: 762px; 
height: 29px; 
text-align: center;
} 


#footer span 
{ 
display: none; 
}

Alles anzeigen

html:

Code

<body>
<table id="Tabelle_01" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="6">
			[img]pictures/modenio_01.jpg[/img]</td>
	</tr>
	<tr>
		<td>
			[img]pictures/modenio_02.jpg[/img]</td>
		<td>
			[img]pictures/modenio_03.jpg[/img]</td>
		<td colspan="4">
			[img]pictures/modenio_04.jpg[/img]</td>
	</tr>
	<tr>
		<td colspan="3">
			[img]pictures/modenio_05.gif[/img]</td>
		<td>
			[url='http://www.rucksack-center.de/'][img]pictures/modenio_06.gif[/img][/url]</td>
		<td colspan="2">
			[img]pictures/modenio_07.gif[/img]</td>
	</tr>
	<tr>
		<td colspan="3">
			[img]pictures/modenio_08.gif[/img]</td>
		<td colspan="2">
			[url='http://www.dealer-shop.de/'][img]pictures/modenio_09.gif[/img][/url]</td>
		<td>
			[img]pictures/modenio_10.gif[/img]</td>
	</tr>
	<tr>
		<td colspan="6">
			[url='http://www.rucksack-center.de/forum/'][img]pictures/modenio_11.jpg[/img][/url]</td>
	</tr>
	<tr>
		<td>
			[img]pictures/spacer.gif[/img]</td>
		<td>
			[img]pictures/spacer.gif[/img]</td>
		<td>
			[img]pictures/spacer.gif[/img]</td>
		<td>
			[img]pictures/spacer.gif[/img]</td>
		<td>
			[img]pictures/spacer.gif[/img]</td>
		<td>
			[img]pictures/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td colspan="6">



[img]pictures/modenio_01.jpg[/img]</p>



[img]pictures/modenio_01.jpg[/img]</p>



[img]pictures/modenio_01.jpg[/img]</p>
		</td>
	</tr>
</table>


<div id="footer"> 
<span>Hier ist ein Footer</span> 
</div> 

</body>

Alles anzeigen

sejuma

Füge mal noch das in den #footer:

Code

width:700px;
margin: 0 auto;

und nimm dabei als width-Wert den von der Hintergrundgrafik.

Andreas84

hat funktioniert. danke

Tags