zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Fusszeile einfuegen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.12.2011, 12:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.12.2011
Beiträge: 17
joernschulz befindet sich auf einem aufstrebenden Ast
Standard Fusszeile einfuegen

Hallo zusammen,

ich habe versucht, in dieses dreispaltige Layout einen Footer zu intergrieren, der sich immer am unteren Rand der Seite befindet:

Code:
HTML:

<!DOCTYPE HTML>
<html>
<head>
 <title> Fotografie </title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <link href="../Homepage/layout_mit_rahmen.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<div id="links">
  <div id="links_innen">
    </div>
</div>

<div id="mitte">
</div>
 
<div id="rechts">
  <div id="rechts_innen"></div>
 </div>
 
 <div id="fusszeile">
 </div>
 
</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */

  body {
	margin:0;
	padding:0;
    min-width:760px;
  }  

  p {
	padding:20px;
  }

  #links , #rechts {
    width:50%;
  }

  #links {
	float:left;
	height: 736px;
	background-image: url(Webseite_Layout_mitte_ein_block_01.png);
	background-color: #0F0;
	background-repeat: repeat-x;
  }

  #rechts {
	float:right;
	height: 736px;
	background-image: url(Webseite_Layout_mitte_ein_block_03.png);
	background-color: #00F;
	background-repeat: repeat-x;
  }

  #links_innen {
	margin-right:490px;
  }

  #recht_innen {
	margin-left:490px;
  }  

  #mitte {
	position:relative;
	margin-left:-490px;
	margin-right:-490px;
	width:980px;
	float:left;
	height: 736px;
	background-image: url(Webseite_Layout_mitte_ein_block_02.png);
	background-repeat: no-repeat;
	background-color: #FF0;
  }
#fusszeile {
	clear:both;
	position:fixed;
	bottom:0px;
	margin-top:0px;
	text-align:left;
	padding:30px;
	background-image: url(Webseite_Layout_mitte_ein_block_04.png);
	background-repeat: repeat-x;
	background-color: #F00;
	padding-left: 20px;
}


}


  /* Für IE 6 */
 * html #links, * html #rechts {
   width:49.9%;
   float:left; 
 }

  /* Für IE 7 */
 *+ html #links, *+ html #rechts {
    width:49.9%;
    float:left; 
 }

 </style>
Leider erscheint der Footer (Class fusszeile) nur am linken unteren Eck der Seite als Quadrat und der Inhalt des divs 'Mitte' wird auch nicht unter dem Footer geloescht.

Kann mir bitte jemand einen Tip geben, wie ich das umsetzen muss ?

Vielen Dank und Gruss
Joern
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.12.2011, 12:33
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

Mit Link zum Problem gehts einfacher;
geraten --> #fusszeile braucht eine Breite
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.12.2011, 15:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.12.2011
Beiträge: 17
joernschulz befindet sich auf einem aufstrebenden Ast
Standard

Treffer ! Das war's. Vielen Dank !
Mit Zitat antworten
  #4 (permalink)  
Alt 22.12.2011, 15:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.12.2011
Beiträge: 17
joernschulz befindet sich auf einem aufstrebenden Ast
Standard

Ich habe jetzt eine so grosse Breite fuer die Fusszeile definiert, dass sie breit genug fuer alle Viewport-Groessen ist. Jetzt muss ich innerhalb des Footers Text so plazieren, dass er links- und rechtsbuendig zu dem drueber befindlichen DIV 'Mitte' steht. Die beiden divs 'Rechts' und 'Links sollen nur zum Fuellen dienen, wenn das Browserfenster breiter als der Mitte-DIV ist.

Wie stelle ich das am besten an ?

Vielen Dank und Gruss
Joern
Mit Zitat antworten
  #5 (permalink)  
Alt 22.12.2011, 18:59
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

Zitat:
Zitat von joernschulz Beitrag anzeigen
Ich habe jetzt eine so grosse Breite fuer die Fusszeile definiert, dass sie breit genug fuer alle Viewport-Groessen ist. Jetzt muss ich innerhalb des Footers Text so plazieren, dass er links- und rechtsbuendig zu dem drueber befindlichen DIV 'Mitte' steht. Die beiden divs 'Rechts' und 'Links sollen nur zum Fuellen dienen, wenn das Browserfenster breiter als der Mitte-DIV ist.

Wie stelle ich das am besten an ?

Vielen Dank und Gruss
Joern
Endlich einen Testcase online stellen?

Glaskugel meint:
fusszeile --> 100%
fusszeile_innen --> width und margin auto
Mit Zitat antworten
  #6 (permalink)  
Alt 22.12.2011, 19:53
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.378
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von Manfred62 Beitrag anzeigen
Endlich einen Testcase online stellen?
Aber Manfred, kannst du nicht auch alles vor deinem inneren Auge sehen? *scnr*
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #7 (permalink)  
Alt 23.12.2011, 11:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.12.2011
Beiträge: 17
joernschulz befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank fuer die Antwort von Manfred62. Wenngleich ich noch nicht ganz verstanden habe. Ich setze also fusszeile auf 100 %. Und dann erzeuge ich fusszeile_innen mit width und margin auto ?
Ich bitte um etwas Nachsicht, dass ich den Hinweis nicht sofort verstehe.


Ich habe eine Testseite auf

Testseite

online gestellt.

Vielen Dank und Gruss
Joern
Mit Zitat antworten
  #8 (permalink)  
Alt 23.12.2011, 17:24
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

In die Fusszeile einen Container rein packen.
Dieser bekommt die gewünschte Breite (980px?),
und wird mit margin 0 auto zentriert.
Mit Zitat antworten
  #9 (permalink)  
Alt 23.12.2011, 19:04
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von joernschulz Beitrag anzeigen
Ich habe eine Testseite auf
Testseite
online gestellt.
Und in deiner CSS-Datei -- bei #fusszeile noch etwas verändern so:
Code:
}   
#fusszeile {
  padding: 30px 0;
  text-align: left;
  width: 100%;
}
______________
Gruß,
Roland
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.12.2011, 19:28
Benutzerbild von jnv
jnv jnv ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 07.07.2010
Beiträge: 152
jnv befindet sich auf einem aufstrebenden Ast
Standard

Und wenn du schon dabei bist, kannst du auch
Code:
<div id="links_innen"
richtig schließen.
__________________
#m { f : g } /* jnv */
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
Fusszeile spezial! kasi CSS 8 25.06.2009 14:05
Fußzeile CL90 CSS 5 10.04.2009 18:03
IE: div-Box rutscht in die Fußzeile mux CSS 12 06.11.2008 20:59
fusszeile im html file ohne frame berndw CSS 6 10.11.2006 12:56
Positionierung einer nicht scrollbaren Fusszeile hyperterminal CSS 2 14.09.2005 21:41


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:39 Uhr.