Footer Images "stehen sich im weg"

J0hn B0y · 9. Januar 2011

Hallo. Ich nutze seit einiger Zeit die neue Forensoftware Xenforo.
Nun passe ich das Grunddesign ein wenig an und möchte dazu eine Schattengrafik im footer "einbauen"
Dazu benutze ich eine 3 geteilte Grafik - links/rechts abgerundete Kanten und eine Grafik die ich dann in der waagerechten wiederhole.

Leider habe ich ein Problem mit den Eckgrafiken.

Ich bin neu im Umgang mit CSS und nutze für fast alles Google oder frage viel Nach um meine Wunsch dann auch in die Tat umsetzen zu können.

Ich schaffe es "problemlos" die linke Eckgrafik an die Ecke meines Forumbodys anzupassen, sobald ich aber die rechte Seite angleiche möchte, rutscht die linke Grafik eine Zeile nach unten. Viele Stunden der Suche haben leider keinen Erfolg gebracht und hoffe nun das ihr mir weiterhelfen könnt

Wie man an dem Bild (Anhang) gut sehen kann lässt dich die rechte Seite (roter Pfeil) nicht an den Body bringen, dafür rutscht links nach unten (blauer Pfeil). Live hier zu sehen.

Die CSS Anweisungen, für links und rechts, sehen, derzeit, so aus

Code:

.footerleft {
   margin: 0 123px;
   background: url(test/footerlinks.png) no-repeat;
   height: 40px;
}

.footerright {
   margin: 0 0;
   background: url(test/footerrechts.png)  no-repeat;
   height: 40px;
}

Diese Divs habe ich dann an entsprechender Stelle im Haupttemplate plaziert

<div class="footerright"></div>

<div class="footerleft"></div>

Ich habe auch versucht mit bottom right und float zu arbeiten aber ich kriege es nicht hin

Starfox2007 · 9. Januar 2011

Du hast die Div´s nicht im Float sprich im Textfluss, probier mal:

PHP:

.footerleft {
margin: 0 123px;
   background-image: url("test/footerlinks.png");
   background-repeat: no-repeat;
   height: 40px;
  float:left;
}
 
.footerright {
   margin: 0 0;
   background-image: url("test/footerrechts.png");
   background-repeat: no-repeat;
   height: 40px;
float:left;
}

Gibt bitte bei Margin genaue Anweisungen margin-left: 0px; margin-top: 0px; z.B...

Und footermiddel fehlt ja auch noch, ohne Footermiddel wird sich das auch wieder verschieben das musst du noch einfügen auch mit Float:left;

csstypo · 10. Januar 2011

Starfox2007 hat gesagt.:
Du hast die Div´s nicht im Float sprich im Textfluss

Falsch. Die float-Eigenschaft nimmt Elemente aus ihrem normalen Textfluß.

J0hn B0y · 10. Januar 2011

Stimmt leider. Ich hab jetzt erstmal den alten footer wieder drin.
Mit dem float hat´s die pngs "aus dem Bild geschoben"

Back2toxic · 11. Januar 2011

Probiers mal so:

HTML:

  <div class="footer">
    <div class="footer_br">
      <div class="footer_bl">
        Content content content
      </div>
    </div>
  </div>

CSS:

    .footer {
      width: 800px;
      height: 33px;
      background: url(bc.png) repeat-x;
    }
    
    .footer_br {
      width: 100%;
      height: 33px;
      background: url(br.png) no-repeat top right;
    }
    
    .footer_bl {
      width: 100%;
      height: 33px;
      background: url(bl.png) no-repeat top left;
    }

wobei du die Werte evtl. noch anpassen musst.
Meine Testgraphiken findest du im Anhang.

J0hn B0y · 11. Januar 2011

Das klappt schon sehr gut so, wobei ich n prob hier mit habe

.footer {
width: 800px;

Ich hab das Forum auf eine fixed Weite von 970px gesetzt. Wenn ich nun die Weite des Footers auch auf diese Weite setze, verschiebt sich alles nach links. Kann man das umgehen? Das es automatisch mittig (zentriert) sitzt?

Edit: vergesst das

Ich hab die footer Klassen einfach nur etwas zu weit oben angesetzt. Nun befinden sie sich innerhalb des .footerLegal . pageContent und jetzt sitzt das perfekt.
Vielen Dank euch allen für die Hilfe. Besonderer Dank an Back2toxic

Edit2: Ich hab leider noch ein problem. Sobald ich eine Grafik einfüge, die die seitlichen Schatten darstellt, läuft diese bis nach unten durch, obwohl die closing div an entsprechender Stelle gesetzt habe.
Hier zu sehen http://test.brainlag.eu

die Class sieht so aus
.schattenbody {
background: url('test/schattenbody.png') center repeat-y;
}

Footer Images "stehen sich im weg"

J0hn B0y

Mitglied

Anhänge

Starfox2007

Mitglied

csstypo

J0hn B0y

Mitglied

Back2toxic

Erfahrenes Mitglied

Anhänge

J0hn B0y

Mitglied

Anhänge

Neue Beiträge