Stehe auf dem Schlauch

darkdevel · 11.12.2012

Ich habe ein Problem mit dem Footer. Den Header hab ich über eine Class angepasst, so das er auf der kompletten Seite sitzt. Jetzt wollte ich das mit dem Footer genauso machen hab aber das Problem sobald ich noch etwas Text in den Content setzte das sich der Footer nach oben schiebt. Wo habe ich wieder mal meinen Denkfehler.
so habe ich den Header eingebunden:

Code:

.branding {
    background:url(image/header_bg.png) repeat-x;
    height:280px;
footer {
    background:url(image/footer_bg.png) repeat-x;
    height:280px;
}

Myhar · 11.12.2012

AW: Stehe auf dem Schlauch

Ohne das dazugehörige HTML ist das CSS relativ sinnfrei. Auch ist es interessant zu wissen, wie das ganze aussehen soll. Unter "Auf der kompletten Seite sitzen" kann ich mir nicht wirklich etwas vorstellen. Ein HTML Element hat keine Beine und kann deshalb weder sitzen noch stehen?
Btw (weil ich gerade am Anmerken bin): Der Threadtitel ist etwas ungünstig gewählt, hier eröffnet keiner einen Thread weil er gerade den kompletten Durchblick hat

hub · 11.12.2012

AW: Stehe auf dem Schlauch

Moin moin,
das sind aber arg wenig Infos ... gibts einen Link?

Gruß Ulli

darkdevel · 11.12.2012

AW: Stehe auf dem Schlauch

Die CSS

Code:

@charset "utf-8";
/* CSS Document */
* {
    margin:0px;
    padding:0px;
}
html, body {
    background:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#000;
}
.branding {
    background:url(image/header_bg.png) repeat-x;
    height:280px;
}

.wrapper {
    margin:0px auto;
    width:947px;
}
.trenner {
    background:url(image/hr1.png) no-repeat;
    height:28px;
     width: 994px;
    margin: 22px -646px;
}
    
.logo {
    font-family:Tahoma, Geneva, sans-serif;
    font-size:20px;
    color:rgb(204,204,204);
    margin-top:-180px;
    
}
.nav {
    float: right;
    font-family: 'Gudea',sans-serif;
    height: 40px;
    margin: -30px;
    width: 640px;
    margin: 0 0 0 0;

    
}
nav ul {
    display: inline;
}
.nav ul li {
    background:#4a75ce;
    border-radius:5px;
    display: block;
    float: left;
    height: 40px;
    list-style-type: none;
    margin: 0 0 0 10px;
    padding: 0;
    text-align: center;
    width: 138px;
    color:#CCC;
}
.nav ul li a {
    display: block;
    height: 40px;
    text-decoration:none;
    color:rgb(255,255,255);
    margin:10px;
}

.slider {
    margin:20px;
}

hr {
    background:url(image/trenner.png) no-repeat;
    margin:30x;
    width: 949px;
    height: 90px;
    border: none;
}
#eins, #zwei, #drei {
 float: left;
  width: 280px;
  padding: 10px;
  margin: 5px;
  }
  #eins, #zwei, #drei li a {
      text-decoration:none;
      
      }
  #box1, #box2, #box3 {
 float: left;
  width: 285px;
  padding: 10px;
  margin: 5px;
  font-family:Tahoma, Geneva, sans-serif;
  font-size:12px;
  color:rgb(102,102,102);
  text-decoration:none;
  }

  #box1 ul {
  text-decoration:none;
list-style-type:none;
}
    #box1 li {
    list-style-type:none;
    line-hight:20px;
    margin-top:20px;
    }
    #box1 a {
    list-style-type:none;
    line-hight:20px;
    text-decoration:none;
    }
    #box2 p {
    line-hight:20px;
    margin-bootm:20px;
    }
    #box3 p {
    line-hight:20px;
    margin-bootm:20px;
    }
 .footertg {
    width:100%;
    height: 120px;
     margin:50px;
     clear:both;
     font-family:Tahoma, Geneva, sans-serif;
     font-size:12px;
     color:rgb(102,102,102);     
 }

Die HTML

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<title>Wordpress Template </title>
</head>
<div class="branding"></div>

<body>
    <div class="wrapper">
      <div class="logo">
        <h1>Dein Portfolio</h1>
      </div>
      <div class="nav">
        <ul>
          <li><a href="#">Startseite</a> </li>
          <li><a href="#">Startseite</a> </li>
          <li><a href="#">Startseite</a> </li>
          <li><a href="#">Startseite</a> </li>
        </ul>
      </div>
      <div class?slider?=""><img src="image/slider.jpg" width="947" height="364" /> </div>
      <div class="content">
        <div class="article">
          <h2>Startseite</h2>
          <p>Startseite N irres Gar gehorchen, Ben stanzt Dottern Bankgesellschaften, Den, Hiroshima via Umschlag antut Geo Mitautor bei was Donner. Tabak weist triefende, hat zugewandte, eisig ca Beo G&uuml;te Einbrechen hohlen, Br&uuml;hen, vern&uuml;nftige Croix vorgibt vager, Big es bestrebtet. Aas an wohnenden Des herausgerissener Blocks wird alte betratet, tov verscherze um Lust doch seh herzzerreissenden Retters lau Kerns hub Neulingen was Alf gem Landung Fachwoche. Reh Cham&auml;leone geben filmst, Geo Knastes Geo Berlin so ausl&ouml;sten. Ist Fels bedingt Bauauflagen, gasartiges hoi Skepsis rar, her Parole wache liebende u.a Nacht wicht Eden Synonyme st&uuml;lpe. Nr zur &ouml;le Satane zig Bordflugzeuge ihn Diskus wacht Rabat Abo Geschirr rietet bzw vertrank warme trollt Axt wisperten geb Aas Die. Unruh Also Bea bat Arm Fr Guido. Mc gesch&auml;ndetes foppt elf Dom Des &Auml;rzte dreckige unersch&ouml;pflichster Banner bzw Alp Cha Mich&auml;lis, milchig kW explodierte la via, fuhr mir Axiom Gedecke Cha Wirrnis Dom wo herauszuangeln Eli aufzuopfern blind wandeltet C walze Flaute B Don Pr&auml;senz in elf rufend foltert Freuden, Dr wog Pfand eng Kronzeuge oho Kuwait. Sodom quotierten Hofrat Adolf was Nylons, per agil Rinden dient Notiz Die Kolumnen Agency pr&auml;parieren, out Auster zig is Werk t&uuml;chtigem Draht oho fix Beo Final Netto ans Germanien beharre. No Braucht Der Cliq&uuml; steinigere Scheiche Apparats ab fix zerknittertestes, Akt hakte aufz&auml;hlt begutachtest so hohlere Fan H&uuml;ne Anm wetterfestes, Bzw war Air Dali Deiches fl&auml;chendeckende Passfoto kW ins cm Cannes, dich sagt oh log C. Extra kautet euch Bunde. As et. Spionin hier weiter lesen </p>
        </div>
        <hr />
        <div id="eins"><img src="image/thumb.png" width="280" height="201" /> 
          <h4>Aktueller Artikel</h4>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, </p>
          <li><a href="#">weiter lesen ...</a> </li>
        </div>
        <div id="zwei"><img src="image/thumb.png" width="280" height="201" /> 
          <h4>Aktueller Artikel</h4>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, </p>
          <li><a href="#">weiter lesen ... </a></li>
        </div>
        <div id="drei"><img src="image/thumb.png" width="280" height="201" /> 
          <h4>Aktueller Artikel</h4>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, </p>
          <li><a href="#">weiter lesen ...</a> 
            <div class="trenner">&nbsp;</div>
          </li>
        </div>
        <div class="footer">
          <div id="box1">
            <h3>Navigation</h3>
            <ul>
              <li><a href="#">Startseite</a> </li>
              <li><a href="#">Startseite</a> </li>
              <li><a href="#">Startseite</a> </li>
              <li><a href="#">Startseite</a> </li>
            </ul>
          </div>
          <div id="box2">
            <h3>Letzter Tweet</h3>
            <p>hier kannst du noch ein paar Informationen rein packen oder gerne auch etwas anderes.Beschreibung deines Templates </p><br />
            <p>hier kannst du noch ein paar Informationen rein packen oder gerne auch etwas anderes.Beschreibung deines Templates </p><br />
            <p>hier kannst du noch ein paar Informationen rein packen oder gerne auch etwas anderes.Beschreibung deines Templates </p>
          </div>
          <div id="box3">
            <h3>Kontakt</h3><br />
            <p>Dein Name </p><br />
            <p>Stra&szlig;e und Nummer </p><br />
            <p>Ort </p><br <p="" />Telefon 
            <p>&nbsp;</p><br />
            <p>Fax</p><br />
          </div>
        </div>
      </div>
      <div class="footertg">&copy;  &middot; D.2012 &middot;  </div>
    
  </body>
  
</html>

Myhar · 11.12.2012

AW: Stehe auf dem Schlauch

Bitte füge deinen Code mithilfe der Code-Tags ein. Sonst ist es zu mühsam, sich da durchzuwurschteln

Und zusätzlich zum Code ist auch eine bessere Fehlerbeschreibung wünschenswert.
Dein Footer wird größer, wenn du zusätzlich zu deinem Copyright Text einfügst? Habe ich das richtig verstanden?
Edit: Editiere deinen letzten Beitrag einfach, du brauchst nich noch eine Antwort zu schreiben.

darkdevel · 11.12.2012

AW: Stehe auf dem Schlauch

Das Problem daran ist wenn ich dem Footer einen BG gebe dann nur auf die Breite des Content. Ich brauche aber die Farbe bzw das png auf die Breite wie der Header also von komplette Breite. So wenn ich den Footer außerhalb des Content anlege dann muss ich mit margin- arbeiten. Das ist ja auch ok nur wenn ich im Content den Blindtext erweitere dann schiebt sich das PNG des Footers nach oben und schiebt sich in den Content.

hub · 11.12.2012

AW: Stehe auf dem Schlauch

Moin,
das eigenwillige Verhalten deines Codes ist möglicherweise auf deine fehlerhaften Code in der Html-Datei zurückzuführen.
Da sind Div-Tags nicht geschlossen, Listelemente falsch eingesetzt und auch einige Attribute sind falsch ...
manche Tags sind auch komplett falsch, wie z.B.

HTML:

<div class?slider?="">
<!-- oder: -->
<p>Ort </p><br <p="" />Telefon

Wenn der Code aufgeräumt und stimmig ist, kommst du wohl weiter ...

Gruß Ulli

cebito · 11.12.2012

AW: Stehe auf dem Schlauch

Beschäftige dich auch mal mit den Eigenschaften von Inline- und Blockelementen. Letztere erzeugen selbstständig einen neuen Absatz, benötigen also nicht noch ein zusätzliches <br /> nachdem sie geschlossen wurden. Falls dieser für einen Abstand zum nächsten sorgen soll - den stellt man sinnigerweise per margin(-bottom) ein.

allkar · 11.12.2012

AW: Stehe auf dem Schlauch

Moin,
... und sonst, wo bleibt in dem geposteten css class footer???
in html : <div class="footer">
in css kann ich nicht finden.
Gruß
Definiere in css und schiebe es nach hinten

<div class="footer"/>
</body>

ManfredH · 11.12.2012

AW: Stehe auf dem Schlauch

Wenn ich das Problem richtig verstanden habe, ist footer der Container für die Boxes
box1, box2 und box3.
Ein hinzufügen in der CSS-Datei bei .footer mit
overflow: hidden;
sollte das Problem lösen.

Zeusfeld · 14.12.2012

AW: Stehe auf dem Schlauch

Versuche mal folgendes für deinen Footer:

{
position:relative;
float:left;
}

evt. noch die Maximalbreite mit "width" hinzufügen.

BG
Benjamin