zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Fixer "Footer"-Div an dynamische "Content-Höh

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.08.2005, 23:39
Benutzerbild von methodfive
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.05.2005
Beiträge: 200
methodfive befindet sich auf einem aufstrebenden Ast
Standard Fixer "Footer"-Div an dynamische "Content-Höh

Hi Liebe Members,

Hier meine Herausforderung (erst einmal ein bischen Erklärung, da ich zwei Code-Varianten habe...) Ihr könnt auch gleich erstmal auf die Page sehen, dann fällt die Erklärung verdaulicher aus:

http://method5.de/bailer/public/index.php4



Der Header-DIV geht über die gesamte Breite des "Viewports" und hat eine fixe Höhe für die Inhalte sowie das Visual..dieses geht soweit noch gut.

DANACH, also optisch umgebrochen, fängt der Sub-Navi-Bereich an. Dieser hat eine fixe Breite und ist per Float links gefloatet , rechts davon, d.h. mit einigem Abstand fängt der dunkelgrau hinterlegte Content-Bereich an; dort ist der Text und die nötigen Grafiken....dieser hat immer eine Breite von 50%.

DARUNTER ist das eigentliche Problemkind (!): der Footer-Div.

Dieser soll eigentlich "nur" folgende Features erfüllen:

Er soll IMMER direkt am unteren Browserrand "kleben" d.h. im Falle von wenig Content (also wenn man nicht scrollen muss) soll er unmittelbar direkt am unteren sichtbaren Browserrand "kleben" und im Falle wenn man scrollen muss - auch - Nur eben nicht FIX! also nicht Permanent sichtbar und womöglich noch über dem Content! Das sage ich deshalb doppelt, weil man ja mit dieser Anforderung schonmal das Ding nicht aus dem Dokumentenfluss nehmen und absolut positionieren kann, ich habe es zuerst mit absoluter Positionierung versucht, was im Grunde ja funktioniert...aber hier besteht wie gesagt die Gefahr, dass der Footer (fixe Höhe sowie 100% Breite) über den Content läuft...deshalb muss man wohl mit floats arbeiten.

Sehe ich das soweit richtig oder gibt es noch einen anderen Ansatz?

Ich habe das jetzt auf diese zwei Arten versucht (absolute Positionierung sowie Floating/Liquid)...beides erfüllt die Anforderungen NICHT...bzw. ich hab es nicht richtig gemacht!

Anbei jetzt endlich mal drei Links um die Sachen verständlicher zumachen.

- http://method5.de/bailer/public/index.php4 ("ursprüngliche" Page so wie es sein soll (bei ausreichender Browsergrösse):

- http://method5.de/bailer/public/absicherung.php4 (hier ist das Problem sichtbar (bitte entsprechend Browserfenster umskalieren, hier sieht man dass man mit absoluter Positionierung leider nicht weit kommt)

- http://method5.de/bailer/public/test.html
(hier mein neuer Ansatz mit floatings nur mit dem Sch***, dass ich das Ding nie ganz an den unteren rand bekomme)

CSS für die test.html: http://method5.de/bailer/public/bailer_test.css

die wichtigsten elemente sind hier:

Zitat:
body, html
{
height : 100%;
}
#visual
{
/*position : absolute;*/
width : 100%;
height : 140px;
/*top : 0px;
left : 0px;*/
}

#sub_navi
{
float : left;
/*position : absolute; top : 140px;*/
width : 164px;

/*height : 65%;*/
}

#content
{

float : left;
margin: 65px 0px 50px 37px;
/*position : absolute;
left : 198px;
top : 207px;*/
width : 50%;

background-color : #707070;
padding : 18px 22px 40px 13px;
}

#footer
{
clear : both;

/* left : 0px;left : 0px;
*/
width : 100%;
background-color : #ffffff;
}

#container
{
background : url( pix/dummy.gif ) repeat-y;
}

sowie für die anderen Links!: http://method5.de/bailer/public/bailer.css

Zitat:
body
{
height : 100%;
margin : 0px;
padding : 0px;
}

html
{
height : 100%;
}

#content
{
position : absolute;
left : 198px;
top : 207px;
width : 50%;
background-color : #707070;
padding : 18px 22px 40px 13px;
}

#footer
{
position : absolute;
bottom : 0px;
background-color : #ffffff;
width : 100%;
}
#sub_navi
{
position : absolute;
top : 140px;
width : 164px;
height : 75%;
}
Es kann doch nicht sein, dass man dass was früher mit Tabellen (dynamische Höhe über den Viewport hinaus) jetzt mit soviel neuer toller Technik nicht irgendwie gebacken bekommen sollte oder was meint Ihr? Bin echt am vErZWEifelN

Falls nötig geb ich hier noch Screenshots mit rein, ich weiss ja jetzt nicht 100% ob ihr es so sieht wie ich...ich habe es auf IE, Opera sowie Firefox (alles Win) gleichermaßen hinbekommen, eigentlich sogar Pixelgenau...

lg
timo
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.08.2005, 11:41
Neuer Benutzer
neuer user
 
Registriert seit: 16.08.2005
Beiträge: 8
Hoppelchen befindet sich auf einem aufstrebenden Ast
Standard

und wie siehts aus, wenn du anstelle von absolute relativ positionierst?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.08.2005, 11:43
Benutzerbild von methodfive
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.05.2005
Beiträge: 200
methodfive befindet sich auf einem aufstrebenden Ast
Standard yo

hi...
ich hab ja in meinem beispiel test.html die divs floaten lassen also nicht mehr absolut positioinert...das problem ist dass so einfach der footer nicht immer direkt unten "dranklebt"...das ist ja auch das einzige problem das ich habe der footer MUSS immer unten drankleben ABER auch dynamisch mit der höhe gehen...also nicht über den content schweben...etc...

nur eine einfache anfoderung die mit tabellen seit 10 jahre geht
Mit Zitat antworten
  #4 (permalink)  
Alt 19.08.2005, 11:56
Neuer Benutzer
neuer user
 
Registriert seit: 16.08.2005
Beiträge: 8
Hoppelchen befindet sich auf einem aufstrebenden Ast
Standard

ja ich hab ja auch nichts von floaten gesagt, du sollst einfach mal probieren, was er macht, wenn du anstelle von position:absolute; position:relative; schreibst.
Mit Zitat antworten
  #5 (permalink)  
Alt 19.08.2005, 13:08
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.06.2004
Beiträge: 172
beeviz befindet sich auf einem aufstrebenden Ast
Standard

ist recht einfach möglich. du musst dazu alles in nen div packen welches min-height: 100% und width: 100% UND position: relative; hat.
Das FooterDiv kannste dann innerhalb des "rahmens" position: absolute; positionieren, und in der regel sollte das dann so funktionieren.

hab ich unter www.kneipengui.de ebenfalls so gemacht.
Mit Zitat antworten
  #6 (permalink)  
Alt 19.08.2005, 13:11
Benutzerbild von methodfive
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.05.2005
Beiträge: 200
methodfive befindet sich auf einem aufstrebenden Ast
Standard

hi hoppelchen

du meinst Footer-Div? Also dieses Snipe:

Code:
#footer
{
 clear : both;
/* left : 0px;left : 0px;
*/
 width : 100%;
 background-color : #ffffff; 
}
das hatte ich einmal so:

Code:
#footer
{
 clear : both;
 position : relative;
/* left : 0px;left : 0px;
*/
 width : 100%;
 background-color : #ffffff; 
}
und einmal so:

Code:
#footer
{
 position : relative;
/* left : 0px;left : 0px;
*/
 width : 100%;
 background-color : #ffffff; 
}
hat sich aber NICHTS geändert...das kann doch einfach nicht sein liebe members es muss doch gehen so eine anforderung heutzutage per liquid-css-methodik hinzubekommen was meint ihr??? das ist doch ne standard-anforderung wein...wenn es bis montag nicht klappt muss ich alles in tables umbauen...da der kunde das nunmal so bekommen soll und auch sein recht ist! aber damit stürzt für mich dann schon eine welt zusammen abedr naja don juan (carlos castaneda) lehrt ja auch das anhalten der welt hehe
Mit Zitat antworten
  #7 (permalink)  
Alt 19.08.2005, 13:19
Neuer Benutzer
neuer user
 
Registriert seit: 15.08.2005
Beiträge: 12
schdeffan befindet sich auf einem aufstrebenden Ast
Standard

Also ich hab hier was, das funktioniert im FF (min-height) aber nicht im IE. Den Content anklicken, dann wird der weiter gefüllt.

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="de" lang="de">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 </head>
 
 <style type="text/css">
 
  *
  {
   margin: 0;
   padding: 0;
  }
  
  body
  {
   background-color: #aaa;
  }
  
  #head
  {
   height: 100px;
   background-color: #bbb;
  }
  
  #wrapper
  {
   position: absolute;
   min-height: 100%;
   left: 50%;
   width: 760px;
   margin-left: -380px;
   background-color: #daa;
   margin-bottom: 100px;
  }
  
  #content
  {
   background-color: #ccc;
   margin-bottom: 100px;
  }

  #footer
  {
   position: absolute;
   bottom: 0;
   height: 100px;
   width: 760px;
   background-color: #ddd;
  }

   
 
 </style>
   
 <body>
  
  <div id="wrapper">
   <div id="head"><h1>Kopf</h1></div>
    
   <div id="content" onClick="con(450)">
    <script type="text/javascript"> 
     function con(c)
     {
      var td = document.getElementById("content");      
      var text = td.innerHTML;
      for (var i = 0; i < c; i++) 
       text += "Lorem ipsum. ";
      td.innerHTML = text;
     }
     con(50);
     </script>
   </div>  
   <div id="footer">Footer</div>
  </div>
  
 
 </body>
</html>
Vielleicht kann das ein Auskenner hier so anpassen, dass es auch im IE und anderen Browsern klappt die ich momentan nicht austesten kann.

Gruß,

Stephan
Mit Zitat antworten
  #8 (permalink)  
Alt 19.08.2005, 13:22
Benutzerbild von methodfive
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.05.2005
Beiträge: 200
methodfive befindet sich auf einem aufstrebenden Ast
Standard

hi beviz

danke erstmal! also das sieht jetzt schon etwas besser aus. ich verwende min-height übrigens auch für die body und html-angaben. sehe ich das korrekt? und dann noch eben für den umgebenen "container"-div. das css sieht jetzt so aus:

Code:
#container
{
 position : relative;
 min-height : 100%;
 height : 100%;
 width : 100%;
 background : url( pix/dummy.gif ) repeat-y;
}

#footer
{
 margin-top: 10px;
 position : absolute;
 bottom : 0px;
 left : 0px;
 width : 100%;
 background-color : #ffffff; 
}

#content
{
 float : left;
 margin: 65px 0px 50px 37px;
 width : 50%;
 background-color : #707070;
 padding : 18px 22px 40px 13px;
}
Rest ist korrekt...allerdings scheint es irgendwie noch nicht ganz sauber zu funktionieren..im ie siehts auf Link 1 ganz gut aus aber sobald man den browser etwas zusammenschiebt schiebt sich der "footer" in den content bereich (unteres ende) rein, das sieht man bei Link 2 (mehr content) noch deutlicher! und im firefox gibts irgendwie auch probleme da bleibt der unten ausgerichtete footer einfach im sichtbaren bereich "kleben" er passt sich gar nicht der länge des contents an..zum verrückt werden. Opera macht denselben "fehler"...eventuell noch ein paar tricks? vielen dank aber erstmal das ist schon ein erster schritt.

Link 1: http://method5.de/bailer/public/test.html
Link 2: http://method5.de/bailer/public/test2.html
Mit Zitat antworten
  #9 (permalink)  
Alt 19.08.2005, 13:46
Benutzerbild von methodfive
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.05.2005
Beiträge: 200
methodfive befindet sich auf einem aufstrebenden Ast
Standard GESCHAFFT (?)

UI! Hurra! ja das beispiel war super..ich habe es stellenweise integriert. vor allem der min-height-wert ist wichtig UND das die reine height-angabe darf nur dem IE gezeigt werden: ich nehme da jetzt mal testhalber den ]-Hack..später bau ich das um, damit das CSS auch noch valide ist..ich glaube die validatoren erlauben diesen hack im css-dok nicht, aber es geht jetzt auf jeden fall! hurra gerettet! aber bitte nochmal - ich hab keinen mac hier. geht es denn soweit auch am mac oder muss ich da noch für ie am mac noch etwas anderes beachten - wie siehts im safari und ff aufm mäc aus, bin zutiefstem dank verpflichtet!!!

Code:
#content
{
 float : left;
 margin: 65px 0px 50px 37px;
 width : 50%;

 background-color : #707070;
	padding : 18px 22px 40px 13px;
}

#footer
{
 position : absolute;
 bottom : 0;
 clear : left;
 width : 100%;
 background-color : #ffffff; 
}

#container
{
 position : absolute;
 min-height : 100%;
 ]height : 100%; /* ONLY FOR IE */
 width : 100%;
 background : url( pix/dummy.gif ) repeat-y;
}
Link: http://method5.de/bailer/public/test3.html
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 19.08.2005, 14:08
Benutzerbild von methodfive
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 17.05.2005
Beiträge: 200
methodfive befindet sich auf einem aufstrebenden Ast
Standard NACHTRAG

hi leutz

also ich hab grad am telefon erfahren dass es am mac (os x) ff sehr gut aussieht und funzt nur dass der (denke neueste) safari macken macht..und im alten ie zerhauts...der ist nicht gar so wichtig der kunde könnte auf den verzichten (hurra raus mit billy) aber im safari muss ich es noch hinbekommen...vielleicht leg ich mir echt nochmal nen mac zu! aber danke für weitere tipps!

lg

timo
Mit Zitat antworten
Sponsored Links
Antwort

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
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 20:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
Header entfernen tripple CSS 17 15.06.2010 16:41
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 11:59
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 20:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:50 Uhr.