✔ Footer-Stick-Alt + backgroundrepeat

P

princeps

Grünschnabel
Moin moin tutorials.de Forum,

ich habe ein riesen Problem und ich komm einfach nicht mehr weiter... Hab schon so einiges versucht, doch irgendwie will es nicht funktionieren, daher mein Hilferuf an euch ;)

Wie der Titel schon sagt, möchte ich, dass das mitm Footer klappt und links und rechs das Hintergrundbild sich der Seite entsprechend wiederholt...

http://www.seda-backwaren.de

Wenn ihr kurz ein Blick drauf werfen könnten - sollte für euch doch eher ken Problem darstellen. Wundert euch bitte nicht beim Aufbau, bin noch relativ neu im Segment :D

Bis dahin bestand Dank für eure Mühen.

greetz,
princeps
 
Hi,

auf den ersten Blick fallen mir im Footerbereich direkt zwei Fehler auf:

HTML: 
	<div id="content_footer"></div>
            	<div id="foot">

            	  <div id="leftcolumn_c"></div>
                  <div id="content_footer"></div>
                  <div id="rightcolumn_c"></div>
            	</div>
     </div>


Eines der schliessenden </div>-Tags ist da zuviel und fehl am Platze, und ein ID-Bezeichner (#content_footer) darf im Dokumentbaum nicht mehrmals vergeben werden, sondern muß darin eindeutig sein.

mfg Maik
 
Vielleicht schwebt dir das ja so vor:

Code: 
<body>
<div id="nonFooter">
   <!-- Begin Wrapper -->
   <div id="wrapper" class="clearfix">
       ...
   </div>
   <!-- End Wrapper -->
</div>
<!-- End nonFooter -->

<div id="foot">
     <div id="leftcolumn_c"></div>
     <div id="rightcolumn_c"></div>
     <div id="content_footer"></div>
</div>
</body>
CSS: 
#wrapper {
        margin-left: 0;
        margin-top: 0;
        width: 950px;
        position: relative;
        min-height: 100%;
        height: auto !important;
        height: 100%;
        background: #fff;
}

.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */


#foot {
         clear:both;
         width: 950px;
         background: #CCC;
         position: absolute;
         bottom: 0;
         height: 24px;
         position: relative;
         margin-top: -24px;
}

/* Dieser Regelblock ist auskommentiert, und somit deaktiviert */
/*#content_footer { 
        width: 100%;
          position: absolute;
          bottom: 0;
          bottom: -1px;
          height: 40px;
}*/

/* Neue Regel für #content_footer */
#content_footer {
         margin:0 78px 0 72px;
}

#rightcolumn_c {
        color: #333;
        min-height: 24px;
        width: 78px;
        float: right; /* anstelle von float:left */
        position: relative;
        background: url(../img/bg_re_bottom.jpg);
}

Übrigens kannst du den Umfang deines HTML- und CSS-Codes erheblich reduzieren, indem du die drei benachbarten Grafiken in einer Grafik vereinst, und diese in einem übergeordneten Element einbindest - das Stichwort lautet hier: Faux Columns.

mfg Maik
 
Sooo,

hab deine tips mal zu Herzen genommen und ich bin ehrlich gesagt erstaunt, dass es jetzt funktioniert! Merci... Eine Sache gibt es da noch, bzw. 2.... Background-repeat funktioniert bei beiden Spalten nicht und das Hintergrundbild für den Footer nimmt er auch net an!

Die 2 Sachen noch, dann haste mir wirklich das Wochenende gerettet ;)

greetz,
princeps
 
Was die beiden äußeren Hintergrundbilder im mittleren Seitenabschnitt betrifft, die nicht nach unten wiederholt werden, wenn der Inhalt zunimmt, und die Seite gescrollt werden kann, so liegt auch hier die Lösung in meinem Tipp:
Maik hat gesagt.:
Übrigens kannst du den Umfang deines HTML- und CSS-Codes erheblich reduzieren, indem du die drei benachbarten Grafiken in einer Grafik vereinst, und diese in einem übergeordneten Element einbindest - das Stichwort lautet hier: Faux Columns.
Zum Vergrößern anklicken....
Denn diese Blöcke besitzen keinerlei Bezug zum Inhaltsumfang im mittleren Block, und verharren in der Höhe, die du ihnen mit auf dem Weg gegeben hast.

Du kannst hierzu gerne mal mein Tutorial CSS-Layout mit 100%-Höhe und die vier Beispiele im Attachment http://www.tutorials.de/forum/attachments/css-tutorials/44505d1258280199-3cols_height100-fixed-.zip studieren, in denen jeweils ein dreispaltiges Layout vorliegt, und die drei Spaltenhintergründe mit einer einzigen Grafik im übergeordneten DIV #wrapper erzeugt werden - eben "Faux Columns".

Die Beispielvariante "Modell mit Header und Footer" (3cols_header_footer.htm) dürfte dir da entgegenkommen.

Da in deinem Seitenkonzept die äußeren Spalten jedoch keinen Inhalt aufnehmen, sondern lediglich den seitlichen "Rahmen" erzeugen sollen, würden sie mit Hilfe der "Faux-Columns-Technik" gänzlich aus dem HTML-Code fallen. Im Gegenzug erhält entweder der umschliessende Block einen linken und rechten Innenabstand, oder der Inhaltsbereich einen entsprechenden Außenabstand, damit sich der Text / Inhalt nicht über die Randbereiche legt.

mfg Maik
 
Dann müsste ich aber so ziemlich viel ändern, zudem kann ich die gezippten Dateien nicht öffnen (kein Datei-typ)!
Gibt es da nicht eine Notlösung für die Spalten und Footer?

background-repeat: repeat-x;
oder
margin: 0px;

Mir ist natürlich bewusst geworden, wie "unnötig" kompliziert das Ganze geworden ist, da wie du schon gesagt hast die Spalten außer dem Hintergrundbild keinen Inhalt haben. Doch denke ich, dass ich sicherlich ne halbe Ewigkeit benötigen würde, um das ganze wieder vom Grundaufbau her ändern müsste. Bin ja erst seit wenigen Monaten am Bastelm (Video2Brain sei Dank)!
 
princeps hat gesagt.:
Dann müsste ich aber so ziemlich viel ändern, zudem kann ich die gezippten Dateien nicht öffnen (kein Datei-typ)!
Gibt es da nicht eine Notlösung für die Spalten und Footer?
Zum Vergrößern anklicken....
Die Notlösung wäre dann, dafür Sorge zu tragen, dass der Umfang des Seiteninhalts die Fensterhöhe nicht überschreiten möge.

Ein wenig Zeit und ein paar Handgriffe zur Modifikation deines vorgestellten Quellcodes sollte es dir eigentlich und mindestens wert sein, um dein erkorenes Layout-Konzept in ein Lauffähiges um- bzw. auszubauen.

Wenn dir meine empfohlene "Faux Columns"-Technik nicht zusagt, kannst du dich auch mit alternativen CSS-Techniken beschäftigen, die ebenfalls solch sog. "Equal-Height-Columns" erzeugen, also Spaltenblöcke, die ihre Höhe automatisch angleichen:

Obwohl ja mein Vorschlag für deinen Anwendungsfall (Layout mit absoluten Breiten) prädestiniert ist, und der Arbeitsaufwand sich in einem überschaubaren Rahmen abspielt:
  1. Die DIV-Blöcke #leftcolumn und #rightcolumn werden komplett aus dem HTML- und CSS-Code entfernt. Gleiches gilt für #content_header_1, sowie #leftcolumn_c und #rightcolumn_c.

  2. Stattdessen werden die jeweils benachbarten Grafiken in einer Datei vereint, und einem übergeordneten DIV-Block als Hintergrundbild zugewiesen:

    • "bg_li_top.jpg" + "bg_main_top.jpg" + "bg_re_top.jpg" = "main_top.jpg" (für #content)
    • "bg_li_main.jpg" + "bg_re_main.jpg" = "main_middle.jpg" (für #wrapper)
    • "bg_li_bottom.jpg" + "bg_re_bottom.jpg" = "main_bottom.jpg" (für #foot)

  3. Durch den Wegfall der beiden äußeren Spaltenblöcke erhält der übrig gebliebene Block #content einen entsprechenden Innenabstand zur linken und rechten Seite, damit sein Inhalt nicht in die Randbereiche hineinreicht.
Mal ganz ehrlich: Sind diese Arbeitsschritte nun mit viel Aufwand verbunden? Ich glaube kaum :)

Zum Schluß noch eine Anmerkung zu deinen bemängelten Tutorial-Attachments. Nach über 2000 Downloads wärst du wohl einer der ersten Benutzer, der die ZIP-Dateien nicht nutzen kann. Seit Veröffentlichung meines Tutorials im Sommer '07 hab ich bislang keine derartige Rückmeldung erhalten.

Für einen zweiten Anlauf deinerseits häng ich sie hier am Ende aber nochmal an :-)

Sollte sich die ZIP-Datei unerwarteter Weise wieder nicht öffnen lassen, vielleicht hast du ja bei einem dieser individuellen und facettenreichen Lösungsbeispielen mehr Erfolg, die ich in der Vergangenheit für andere Mitglieder zu dieser Thematik entwickelt hatte, und der Anstoß zum Verfassen des besagten Tutorials waren :-)

  1. Content Div nach unten automatisch vergrößern
  2. Automatische Größenanpassung von DIV
  3. IE Height 100%
  4. div container gleiche größe?
  5. Design schlicht
  6. height:100%
  7. 3 Spalten Layout mit variablen Bereichen
  8. Höhe von Divs - Problem
  9. Kleine Fehler IE-Firefox
  10. Anfängerfragen
  11. Layout ohne Tabelle möglich?

mfg Maik
 

Anhänge

Hi,

zum morgigen 4. Advent leg ich dir hier ein schmuckes Päckchen unter den Christbaum :)

Vielleicht findest du ja zwischen Weihnachten und Neujahr etwas Zeit, dich mit meinem Lösungsansatz näher zu beschäftigen ;)

Achja, mein Zeitaufwand belief sich auf knappe 30 Minuten, um drei neue Grafiken zu schnippeln, und anschliessend den HTML-/CSS-Code auf Vordermann zu bringen :-)

Ich wünsche dir viel Spaß auf der Entdeckungstour, und wenn sich da Fragen ergeben sollen, immer her damit :)

mfg Maik
 

Anhänge

nur kurz zu deinem archiv und meinem rechner:

also mit vista lässt sich die datei problemlos öffnen, aber entpackt ist es nur eine Datei mit keinem Dateityp! Mitm meinem Mac hats einwandfrei funktioniert - seltsam!

Ich danke dir vielmals - damit hätte ich wirklich nicht gerechnet 1. für deine ausführliche Antwort und dann auch noch für dein Demo-Script!! Waht goes around comes back around! Danke dir nochmal und ein frohes und besinnliches Weinachtsfest

greetz,
princeps
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück