Zum Inhalt springen

footer anpassen (unten fixieren)

Erstellt am 30. August 2011 · 1 Antwort · letzte Antwort am 1. September 2011

Tags: HTML & CSS, Frage

Unbekannter Benutzer ·

hallo zusammen
ich bin wie andere auch neu mit typo3!
ich arbeite an einem template das ich mit html und css realisiert habe. eigentlich funktioniert alles wie ich es will(hier), jedoch nicht mit typo3(hier) #paralyzed#
der footer der eigentlich am unteren rand sein sollte, erscheint ca. 500px ober dem rand.mit dem IE muss ich noch einiges ändern, aber das schaffe ich dann schon! ^^

meine frage ist also folgende:
wie kann ich dieses Problem lösen?

hier die relevanten script:

# Template content object:

temp.mainTemplate = TEMPLATE

temp.mainTemplate {

  template = FILE

  template.file = fileadmin/template/stream.html

}

# Default PAGE object:

page = PAGE

page.typeNum = 0

page.10 < temp.mainTemplate

# Default CSS
page.includeCSS {
  file1 = fileadmin/template/styles/style.css
  file1.title = Standardansicht
  file1.media = screen
<div id="bb-shadow">
</div>

<div id="bottom-banner">
  <p class="copyright" align="center">© 2011 <a href="#">Interenvi</a></p>
</div>
#bb-shadow {
	position:relative;
	background-color:#3D83EB;
	width:100%;
	height:20px;
	/*margin-bottom:-8px;*/
	margin-left:-8px;
	padding-right:16px;
}

#bottom-banner {
	position:absolute;
	z-index: 1000;
	background-color:#4084F2;
	width:100%;
	height:40px;
	margin-bottom:-8px;
	margin-left:-8px;
}

.copyright { 
	margin-top:0px;
	color:F1F1F1;
	font-style:helvetica,arial; 
	text-align:center;
}

ich bin dankbar für jegliche hilfe! 🙂

Chrissli · · Beste Antwort

Hallo Interveni,

im Firefox (6.0) sieht bei mir alles OK aus,
lediglich der IE zickt, würde das aber mal auf's HTML/CSS schieben

Einige kleine Tipps für dich:

- Tags wie <link> oder <script> sollten im Idealfall in den <head>-Bereich

- Wenn du deinen Footer schon absolut positionierst, verwende doch für die Ausrichtung nach unten die CSS-Eigenschaft bottom: 0;

- Absolut positionierte Elemente sollten sich in einem als 'relative' positionierten Bereich befinden. Diesen solltest du explizit im CSS auszeichnen, da nicht alle Browser dies bei allen Elementen von Haus aus gleich machen

- Ist vermutlich nur Geschmackssache, aber ich würde negatives margin prinzipiell vermeiden, soweit möglich.