Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 12

Thema: DIV ganz unten "anpinnen"?

  1. #1
    Teeny Avatar von Kurikinton
    Registriert seit
    16.02.2009
    Ort
    Augsburg
    Alter
    30
    Beiträge
    32
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard DIV ganz unten "anpinnen"?

    Hallo zusammen,

    hab schon in anderen Foren und Communitys gesucht nur keine passende
    Antwort gefunden.

    Ich würde gern den <div id="footer"> so anpinnen das dieser immer am
    unteren Rand (bottom) angepinnt ist. Die einzige Lösung die ich gefunden
    habe ist mit position: absolute ...

    Da entsteht nur das Problem das die einzelnen <div> sich überlappen. Mit
    z-index hab ichs auch schon versucht, dann überlappt halt was anderes.

    Kennt jemand sonst eine Lösung wie man einen <div> ganz unten anpinnen
    kann? Mit dem header z.B. gehts ja auch, also ganz oben.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: DIV ganz unten "anpinnen"?

    position: absolute ist schon der richtige Weg
    inkl. Hack für den IE < 7
    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>
    	<title>Footer</title>
    	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    	<meta name="generator" content="Geany 0.16" />
    	<style type="text/css" media="all">
    		* {
    			margin: 0;
    			padding: 0;
    		}
    		
    		html {
    			height: 100%;
    		}
    		
    		body {
    			height: 100%;
    		}
    		
    		#main {
    			position: relative;
    			width: 100%;
    			min-height: 100%;
    		}
    				
    		#head {
    			height: 150px;
    			background: red;
    		}
    		
    		#menu {
    			height: 50px;
    			margin-top: 15px;
    			background: yellow;
    		}
    		
    		#content {
    			margin-top: 15px;
    			padding: 0 15px;
    			height: 1000px;
    		}
    		
    		#footer {
    			position: absolute;
    			width: 100%;
    			bottom: 0px;
    			margin-top: 15px;
    			background: #ccc;
    		}
    			
    	</style>
    	
    	<!--[if lt IE 7]>
    		<style type="text/css">
    			#main {
    				height: 100%;
    			}
    		</style>
    	<![endif]-->		
    </head>
    
    <body>
    	<div id="main">
    		<div id="head">
    			<h1>Header</h1>
    		</div>
    			
    		<div id="menu">
    			<h2>Menu</h2>
    		</div>
    			
    		<div id="content">
    			<h2>Content</h2>
    			<p>Lorem Ipsum</p>
    			<p>Lorem Ipsum</p>
    			<p>Lorem Ipsum</p>
    			
    		</div>
    		
    		<div id="footer">
    			<h3>Footer</h3>
    		</div>
    	</div>
    </body>
    </html>
    Wenn du davon was nicht verstehst => nachfragen.

    Gruß,
    jojo

  3. #3
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: DIV ganz unten "anpinnen"?

    Vielleicht ist auch das eine Lösung.

  4. #4
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: DIV ganz unten "anpinnen"?

    Zitat Zitat von sejuma Beitrag anzeigen
    Vielleicht ist auch das eine Lösung.
    Quasi dasselbe Prinzip
    Durch das
    Code:
    height: auto !imprtant;
    kann man sich halt den CC sparen, womits allerdings ne bessere Lösung ist als meine

    Grüße,
    jojo

  5. #5
    Interessierte/r
    Registriert seit
    11.03.2008
    Beiträge
    127
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: DIV ganz unten "anpinnen"?

    Hallo zusammen!
    Mich kämpfe mit dem gleiche Problem, mein Footer will einfach nicht nach unten, obwohl ich alle Angaben in dem link befolgt habe!

    Könnt ihr mal schaun ob ihr meinen Fehler findet?

    Hier meine CSS-Datei:

    Code:
    * {
    margin: 0;
    pading: 0;
    }
    html {
    height : 100%;
    }
     
    body {
    background-color : #b3aeab;
    font-family : Verdana;
    color : #555555;
    font-size : 0.8em;
    height : 100%;
    }
     
    #wrapper {
    position: relative;
    border : 0 ;
    width : 1024px;
    top : 0px;
    margin-left : -512px; 
    left : 50%; 
    overflow : no;
    background-color : #b3aeab;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    }
     
    #start { 
    position : absolute; 
    border : 0; 
    left : 0px; 
    top : 506px; 
    width : 1024px; 
    overflow : no;
    background-image : url(dateien/design/start.jpg); 
    background-color : #ffffff; 
    padding: 0em 0em 2.5em 0em;
    } 
     
    #header { 
    position : absolute; 
    border : 0; 
    left : 22px; 
    top : 0px; 
    width : 980px; 
    height : 110px; 
    background-image : url(dateien/design/header.jpg); 
    background-color : #ffffff; 
    } 
     
    #links { 
    position : absolute; 
    border : 0; 
    left : 0px; 
    top : 0px; 
    width : 22px; 
    height : 506px; 
    background-image : url(dateien/design/links.jpg); 
    background-color : #b2adaa; 
    } 
     
    #rechts { 
    position : absolute; 
    border : 0; 
    left : 1002px; 
    top : 0px; 
    width : 22px; 
    height : 506px; 
    background-image : url(dateien/design/rechts.jpg); 
    background-color : #b2adaa; 
    } 
     
    #bild { 
    position : absolute; 
    border : 0; 
    left : 22px; 
    top : 126px; 
    width : 980px; 
    height : 380px; 
    background-image : url(dateien/design/bild7.jpg); 
    background-color : #ffffff; 
    } 
     
    #balken { 
    position : absolute; 
    border : 0; 
    left : 22px; 
    top : 110px; 
    width : 980px; 
    height : 16px; 
    background-image : url(dateien/design/balken.jpg); 
    background-color : #ffffff; 
     
    #footer { 
    position : absolute; 
    border : 0px; 
    left: 0px;
    bottom : 0; 
    width : 1024px; 
    margin-top: 15px;
    background-image : url(dateien/design/start.jpg); 
    background-color : #ffffff;

    und meine HTML Datei:

    Code:
    <?xml version="1.0" encoding="ISO-8859-1" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
    <html xmlns="http://www.w3.org/1999/xhtml">
     
    <head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <meta name="description" content="stage-technics Homepage" />
    <meta name="author" content="Patrick Allinger" />
    <meta name="date" content="2009-05-10" scheme="DCTERMS.W3CDTF" />
    <meta name="language" content="de" scheme="DCTERMS.RFC3066" />
    <meta name="rights" content="Alle Rechte liegen beim Autor" />
    <meta name="robots" content="index, follow" />
    <meta http-equiv="content-type" content="text/css; charset=ISO-8859-1" />
     
    <title>stage-technics</title>
     
    </head>
    <body>
     
    <div id="wrapper">
    <div id="links"></div>
    <div id="rechts"></div>
    <div id="header"></div>
    <div id="balken"></div>
    <div id="bild"></div>
    <div id="start">
    <br>
    Test Test Test Test Test
    </div>
    <div id="footer">Footer Test</div>
    </div>
     
    </body>
    </html>
    Schonmal vielen Dank!
    Wer kämpft kann verlieren, wer nicht kämpft hat schon verloren!

  6. #6
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: DIV ganz unten "anpinnen"?

    Das Problem liegt vermutlich daran, dass du auch noch diese Elemente absolut positioniert hast:
    Code:
    <div id="links"></div>
    <div id="rechts"></div>
    <div id="header"></div>
    <div id="balken"></div>
    <div id="bild"></div>
    <div id="start">
    Damit erhält der #footer einen anderen Bezugspunkt.
    Lass mal bei den genannten Div's die absoluten Positionierungen weg. Du kannst sie ebenso mit float und margin-Angaben an die richtige Stelle setzen.

  7. #7
    Interessierte/r
    Registriert seit
    11.03.2008
    Beiträge
    127
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: DIV ganz unten "anpinnen"?

    Bringt leider nichts!
    Auch das Hintergrundbild es Footers wird nicht angezeigt
    Wer kämpft kann verlieren, wer nicht kämpft hat schon verloren!

  8. #8
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: DIV ganz unten "anpinnen"?

    Dann wäre es nicht schlecht, wenn du mal einen Link zur Seite posten könntest.

  9. #9
    Interessierte/r
    Registriert seit
    11.03.2008
    Beiträge
    127
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Geändert von Allpa (16.06.2009 um 23:58 Uhr)
    Wer kämpft kann verlieren, wer nicht kämpft hat schon verloren!

  10. #10
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: DIV ganz unten "anpinnen"?

    Bei #balken fehlt im CSS die schließende Klammer.
    Dann müsstest du nochmal die margins/paddings überprüfen.

    Horizontal zentrieren (z.B. #wrapper) mach besser so: http://www.ohne-css.gehts-gar.net/0001.php

Ähnliche Themen

  1. In ICQ ist bei "unsichtbar" die Blume weiß, bei "sichtbar" rot
    Von makemyday77 im Forum Computer - Internet Forum
    Antworten: 7
    Letzter Beitrag: 01.06.2010, 03:10
  2. Border-Bottom: noch "zarter" als "1px dashed"?
    Von Mütze im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 19.09.2008, 18:10
  3. Probleme mit "width" und "height"
    Von chris90night im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 14.10.2006, 20:59
  4. php: "bitte warten" oder "login läuft"
    Von phore im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 05.04.2006, 18:18
  5. Text immer "unten" und "rechts" am Frame
    Von Valdyn im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 25.05.2004, 19:14

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •