zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Seitenhöhe 100% und unten 80px Footer

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.11.2011, 15:36
Held des Scrum
neuer user
Thread-Ersteller
 
Registriert seit: 07.04.2009
Ort: Nähe Bonn
Beiträge: 37
OscarWilde1024 befindet sich auf einem aufstrebenden Ast
Standard Seitenhöhe 100% und unten 80px Footer

Hallo zusammen,

ich versuche eine Seite mit 100% Höhe hinzubekommen und unten einen Footer von 80px Höhe einzubauen. Ich kann den Footer leider nicht drüber legen, da in den großen DIV obendrüber eine Google Map rein soll, somit kann ich da nix verdecken.

Eine Links/Rechts Aufteilung bekomme ich hin aber den Footer bekomme ich einfach nicht rein. Ich hab mal eine Skizze angehangen damit das was ich will etwas klarer wird.

Wer kann mir helfen oder mir einen Tipp geben? Bei Google oder hier habe ich einfach nichts gefunden.

Danke!

Frank
Angehängte Grafiken
Dateityp: png Basislayout.png (26,6 KB, 12x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.11.2011, 16:45
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.135
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Google nach "sticky footer"

Manfred
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.11.2011, 17:39
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Hallo,

habe mir mal deine Skizze angeschaut.

So vieleicht?,
Anhang 4422
oder doch ganz anders?

Hier hast du Code dazu:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Spalten-Layout</title>

<style type="text/css" media="screen">
/* CSS Reset Start */
html, body, div { 
   margin: 0; padding: 0;
}
html, body, .pagediv { 
   height: 100%;
}
body {
   font: 100.1% Verdana, Geneva, Arial, Helvetica, sans-serif;
   text-align: center; /* fuer IE 5 */
}
/* AussenContainer */
.pagediv {
   position: relative;
   text-align: left;
}
/* Container für die Spalten */
.container {
   overflow: hidden;
   height: 100%;
}
/* Wrapper für mittlere Spalte */
.wrapper {
   width: 100%;
   float: left;
   display: inline;
}
/* mittlere Spalte */
.content {
   background-color: #ccc; /* Hintergrundfarbe mittlere Spalte */
}
.content-zweispalter-left {
   margin: 0 0 0 320px;
}
/* linke Spalte */
.left {
   width: 320px;
   float: left;
   margin-left: -100%;
   background-color: #ffd700;
   border-right: 1px solid #a0522d;
   display: inline;
}
/* Extraanweisung für IE <= 6, 1pixel border */
* html .left {
   width /**/: 321px;
}
/* Anweisung für gleich hohe Spalten */
.wrapper, .content, .left {
   margin-bottom: -16000px;
   padding-bottom: 16000px;
}
.footer {
   position: absolute;
   bottom: 0;
   left: 0;
   background-color: #b0d75f;
   border-top: 1px solid #a0522d;
   text-align: center;
   width: 100%;	
}
</style>

</head>
<body>

<!-- Start Container aussen --> <!-- Zweispalter -->
<div class="pagediv">

<!-- Start Container der die Spalten zusammen hält -->
<div class="container">

<!-- Start mittlere Spalte -->
<div class="wrapper">
<div class="content content-zweispalter-left">
<strong>CONTENT</strong> <br />Sie können gleichzeitig ein Hintergrundbild und eine Hintergrundfarbe innerhalb eines Elements definieren. Beides wird von den Browsern angezeigt. Voraussetzung hierfür ist, dass die Wiederholund des Hintergrundbildes nicht auf background-repeat: repeat; gesetzt wurde, denn dann wird die Hintergrundfarbe vom Bild überdeckt.
</div>
</div>
<!-- Ende mittlere Spalte -->

<!-- Start linke Spalte -->
<div class="left"> 
<strong>Linke Spalte</strong> <br />Sie können gleichzeitig ein Hintergrundbild</div>
<!-- Ende linke Spalte -->

</div>
<!-- Ende Container der die Spalten zusammen hält -->

<!-- Start Footer -->
<div class="footer">Footer</div>
<!-- Ende Footer -->

<!-- Ende Container aussen -->
</div>

</body>
</html>
___________
Gruß,
Roland

Geändert von K.Roland (03.06.2012 um 12:43 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 07.11.2011, 19:53
Held des Scrum
neuer user
Thread-Ersteller
 
Registriert seit: 07.04.2009
Ort: Nähe Bonn
Beiträge: 37
OscarWilde1024 befindet sich auf einem aufstrebenden Ast
Reden

Danke!!!

Ja, genau so habe ich mir das vorgestellt. Ich muss mir den Quelltext mal im Detail ansehen, genau so habe ich es gesucht.

Gruß,

Frank
Mit Zitat antworten
  #5 (permalink)  
Alt 08.11.2011, 10:53
Held des Scrum
neuer user
Thread-Ersteller
 
Registriert seit: 07.04.2009
Ort: Nähe Bonn
Beiträge: 37
OscarWilde1024 befindet sich auf einem aufstrebenden Ast
Unglücklich

Zitat:
Zitat von K.Roland Beitrag anzeigen
Hallo,

habe mir mal deine Skizze angeschaut.

So vieleicht?,
Hi Roland,

sah auf den ersten Blick wirklich super aus, sobald ich allerdings etwas in der rechten Spalte "absolute" positionieren will, geht es nicht mehr, die linke Spalte ist dann weiß und verschwindet irgendwo hin.

Da ich ja eine Goolge Map da rein bringen will und die leider "absolute" positioniert ist (von Google aus) geht es also nicht mehr.

Noch andere Ideen?

Gruß,

Frank
Mit Zitat antworten
  #6 (permalink)  
Alt 08.11.2011, 11:30
Held des Scrum
neuer user
Thread-Ersteller
 
Registriert seit: 07.04.2009
Ort: Nähe Bonn
Beiträge: 37
OscarWilde1024 befindet sich auf einem aufstrebenden Ast
Standard

Ich hab mal noch ein wenig gebastelt, es scheint an dem rechten Border der linken Spalte zu liegen. Ich habe noch überall 'position' Angaben ergänzt und den Border weg genommen, dann geht es scheinbar. Tests stehen noch aus aber macht einen guten Eindruck.

Gruß,

Frank
Mit Zitat antworten
  #7 (permalink)  
Alt 08.11.2011, 14:53
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.990
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Warum willst du denn überhaupt etwas in der Spalte absolut positionieren? Schon einmal etwas von Floats gehört?
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #8 (permalink)  
Alt 08.11.2011, 14:55
Held des Scrum
neuer user
Thread-Ersteller
 
Registriert seit: 07.04.2009
Ort: Nähe Bonn
Beiträge: 37
OscarWilde1024 befindet sich auf einem aufstrebenden Ast
Standard

Ich will das nicht aber die Karte von Google will das wohl. Ich würde es ja floaten lassen aber es will nicht. Aber ich habe es jetzt hinbekommen wie gesagt. Danke Dir.

Frank
Mit Zitat antworten
Antwort

Stichwörter
footer

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
element an footer 'festbinden' bei dynamischer seitenhöhe keinplan CSS 2 12.08.2010 02:49
Footer container werden untereinander dargestellt... Ntracks CSS 10 07.08.2010 19:24
cssstickyfooter.com | horizontales Scrollen --> Footer verschwindet daigo CSS 0 19.05.2009 11:56
Footer Problem (3 spaltiges Layout, variable Höhe) Lofesto CSS 2 23.07.2007 17:13
Footer Problem blub19 CSS 6 25.01.2005 12:46


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:23 Uhr.