• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

pr-agentur

J

jsgreenhorn

Guest
hallo,

habe ne seite für eine freundin erstellt. sie ist vom layout her fertig. sie ist damit zufrieden und will es auch nicht anders haben.
also kommentare zum layout bringen nicht mehr viel sind aber dennoch erwünscht.

ich habe in der seite footer stick alt angewand, damit der footer immer am unteren ende der seite liegt.
mein verständnis von css, insbesondere float/clear ist noch nicht so weit fortgeschritten und mit der problematik, mit der ich mich nun konfrontiert sehe, bin ich etwas überfordert.

das problem kann man am besten auf der seite "zur person" sehen. body hat die hintergrundfarbe #eee; .
der wrapper hat einen abstand zum footer. mir wurde gesagt, das der nonfooter nicht alle floatenden elemente umschließt.
ich verstehe das allerdings nicht!
im html ist der nonfooter wohl richtig verschachtelt.

danke fürs feedback

dickepr
 
Hallo,

nein, dein non-footer umschließt tatsächlich nicht alle floatenden Elemente, aber auch wenn du ihm ein "overflow:hidden;" mitgibst (damit er auch den langen content einschließt), ist dein Problem nicht gelöst, denn der #wrapper ist zu kurz. Du hast ihm eine Höhe von 100% gegeben, der Content darin ist aber länger (wenn du dem wrapper mal einen farbigen Rand gibst, siehst du das). Du könntest statt "height" "min-height" angeben, dann kann er auch höher als 100% werden. Mit min-height hat aber der IE wohl Schwierigkeiten, du hast ja ohnehin eine Extra-css-Datei für den IE, die hab ich mir jetzt aber nicht angeschaut, hab's nur im Firefox 2 ausprobiert.

planet4.
 
hallo planet4,

erstmal danke für deine Antwort!

Diesen Gedankengang hatte ich auch schon. Bei min-height schließt der #wrapper auf der "Zur Person-Seite" an #footer nahtlos an. Alle anderen Seiten, weil weniger Inhalt, ist #footer dann nicht mehr am Fensterende sondern dort wo der Inhalt aufhört.

screenshot

Könntest du mir erklären warum nicht alle floatenden Elemente vom #nonfooter umschlossen sind?

es floatet: #content u. #navi beide left und beim #footer wird gecleart. Was floatet denn noch?
Mir ist dieses "Umschließen" nicht klar? Soll der #nonfooter floaten?
 
Hallo,

also es gibt mehrere Möglichkeiten, eine gefloatete Box "sicher" von der umgebenden einzuschließen ("sicher" soll heißen: auch in anderen Browsern als dem IE, der macht das 'automatisch', was aber ein Fehler ist):
1. ein zusätzliches HTML-Element am Ende des divs, das gecleart wird
2. das umgebende Element ebenfalls floaten
3. das div bekommt die Eigenschaft "overflow: hidden"
4. das "Clearing im 21. Jahrhundert": Einschließen von Floats ohne zusätzliches Markup - easyclear

das mit dem "overflow: hidden" hab ich ja weiter oben schon erwähnt: wenn du dem #non-footer ein overflow: hidden gibst, schließt er die Elemente ein.


Es gibt auch irgendwo Beispiele für solche Layouts, wo der footer immer unten sitzt, fällt mir jetzt gerade nicht ein, wo.

Es müsste eigentlich klappen (kann das jetzt aber nicht in verschiedenen Browsern und mit verschiedenen Aufl. ausprobieren :) ), wenn du dem non-footer

background: #fff;overflow: hidden;

gibst; das mit dem background ist wichtig, sonst sieht man den grauen Hintergrund.

planet4.
 
ich hätte aufzählen sollen was ich alles schon probiert habe.
easyclearing habe ich versucht aber es funktioniert bei mir nicht.

kann sein das ich dabei ein fehler mache, ich weiß es nicht.

ich habe nonfooter background: #fff;overflow: hidden; und im css
noch .clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
im markup habe ich vor dem abschliessenden </div> von #wrapper ein zusätzliches div <div id="clearer">.</div>.
Egal wo ich dieses clearer <div> hinsetze es ändert nichts.

Code: 
</head>
<body>
<div id="wrapper">
<!-- header -->
<div id="nonfooter">
<h1 id="header"><a href="index.html" title="Zurück zur Startseite"><img src="images/logo2.jpg" alt="Logo DICKEPR" /><span>dickepr public relations agentur berlin</span></a></h1>
<!-- end header -->
<!-- content -->
<div id="content">
<h5><span class="blau">DICKE</span><span class="gruen">PR</span></h5> <p class="startseite">wurde von <strong>Anita Dicke M.A.</strong> als Agentur mit dem Schwerpunkt politische Kommunikation gegründet.</p>
<h5><span class="blau">DICKE</span><span class="gruen">PR</span></h5> <p class="startseite">unterstützt ihre Kunden in allen Phasen von internen und externen Kommunikationsprozessen.</p>
<h5><span class="blau">DICKE</span><span class="gruen">PR</span></h5> <p class="startseite">setzt effiziente und kompetente Teams zusammen, um den individuellen Bedürfnissen und Erfordernissen der Kunden gerecht zu werden.</p>
</div>
<!-- end content -->
<!-- navigation -->
<ul id="navi">
<li id="aktuell"><a href="index.html">startseite</a></li>
<li><a href="person.html">zur person</a></li>
<li><a href="referenz.html">referenzen</a></li>
<li><a href="leistung.html">leistungen</a></li>
<li><a href="teamarbeit.html">teamarbeit</a></li>
<li><a href="kontakt.html">kontakt</a></li>
</ul>
<!-- end navigation -->
</div> <!-- end nonfooter -->
<!-- footer -->
<ul id="footer">
<li><a href="mailto:" title="Fragen zur Webseite?">webmaster</a></li>
<li><a href="datenschutz.html" title="Datenschutzerklärung">datenschutz</a></li>
<li><a href="impressum.html" title="Persönliche Daten des Webseiteninhaber">impressum</a></li>
</ul>
<!-- end footer -->
<div id="clearer">.</div></div> <!-- end wrapper -->
</body>
</html>
 
jsgreenhorn schrieb:
habe ne seite für eine freundin erstellt. sie ist vom layout her fertig. sie ist damit zufrieden und will es auch nicht anders haben.
also kommentare zum layout bringen nicht mehr viel sind aber dennoch erwünscht.
Zum Vergrößern anklicken....
Nur mal so nebenbei:
Wenn Du keinen Sitecheck wünscht, dann solltest Du das auch nicht im Sitecheck-Forum posten.
Da Du offenbar ein CSS-Problem hast, wäre dieses besser im entsprechenden Forum aufgehoben...
Aus diesem Grunde verschiebe ich das auch!
 
also kommentare zum layout bringen nicht mehr viel sind aber dennoch erwünscht.

sollte schon ein sitecheck sein. soll ich jetzt 2 threads aufmachen?
 
Hallo,
ich will versuchen, noch mal kurz zu erklären, wie ich vorgegangen bin:

Ich nehme die index.html und die Seite person.html, so wie du sie jetzt hier online verlinkt hast, gebe als erstes dem non-footer einen roten Rahmen, damit ich die Veränderungen beobachten kann, füge dann im Stylesheet hinzu:

HTML: 
.clearfix:after {
    content: "."; 
    display: block; 
    height: 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 */
gebe dem non-footer zusätzlich

HTML: 
class="clearfix"

und siehe da: er schließt den #content mit ein.

Der hellgraue Raum rechts unten ist auf der person.html immer noch vorhanden, daher gebe ich dem non-footer noch ein background: #fff; und schon sieht es so aus, wie es wahrscheinlich aussehen soll. Auch auf der kürzeneren index.html sitzt der footer unten. Das alles im Firefox 2.0.0.2

Guck ich's jetzt im IE 6 an:
kurze Seite okay, bei der längeren person.html fehlt unten was vom content. warum?

weil der footer relativ positioniert und hochgezogen wird und der IE das anders interpretiert als der FF?
wenn ich auf der längeren (person-html) Seite das Extra-Style-Sheet für den IE rausnehme und beim footer auch das hier:

HTML: 
position: relative;
clear: both;
margin: -2em auto 0 auto;

lösche, dann sieht's richtig aus.

Ich sehe eigentlich keinen Grund, warum der Footer per minus-margin hochgezogen werden sollte. Ich muss jetzt auch frühstücken und kann die IE-Style-Sheets nicht noch angucken :) , außerdem müsste man ja auch noch sehen, was der IE 7 damit macht, kann ich nicht testen.

planet4.
 
Hallo planet4,

danke für deinen geistigen Frühsport vor dem Frühstück. :)
Jetzt funktioniert es wohl mit FF/Opera so wie es sein soll. Fehler war auch von mir #wrapper eine Hintergrundfarbe zu geben und #footer nicht.

also das ist jetzt das Umschließen der floatenden Elemente?
Code: 
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}
?

Ich hatte dies auch schon mal versucht aber es hat nicht funktioniert.
Allerdings hatte ich
Code: 
.clearfix {display: inline-block;}
nicht im CSS.

Ich finde das schon eine recht knifflige Technik mit dem nonfooter! Float muß ich auch richtig verinnerlichen, denn so richtig verstanden habe ich die Gesetzmäßigkeiten von Float und Clear noch nicht.

Der footer muß nach oben gezogen werden sonst ist er nicht am unteren Ende des Fensters zu sehen.

Der IE zeigt aber den Inhalt von Zur Person nicht komplett an. Leider reicht das Löschen der Angaben :
Code: 
position: relative;
clear: both;
margin: -2em auto 0 auto;
nicht aus. Der #content. schiebt sich unter den #footer.

Vielen Dank so weit für deine Hilfe!
 
Hallo,

also das mit dem IE kann ich nicht nachvollziehen, ich habe hier nur den IE6 und wenn ich es da wie beschreiben verändere zeigt er es richtig an.

Ich sehe, dass du auch noch immer
position: relative;
clear: both;
margin: -2em auto 0 auto;
in deiner css-Datei stehen hast, aber vielleicht hast du es nur wieder eingefügt, nachdem es mit dem IE nicht geklappt hat?

Das Beispiel, von dem du ursprünglich ausgegangen bist: FooterStickAlt, beinhaltet das überhaupt gefloatete Divs?
Ich meine, wenn du deinen #non-footer mit .clearfix clearst, dann sitzt der nachfolgende footer immer unterhalb dieses non-footers, es sei denn, du schiebst ihn absichtlich hoch oder positionierst ihn absolut.
Weshalb das jetzt in deinem IE nicht funktioniert, kann ich leider nicht sagen.

Was ich noch sagen möchte:
Das erste Foto, in der ersten Version von person.html, gefällt mir wesentlich besser (es ist zwar oben am Kopf so doof abgeschnitten, aber das könnte man ja vielleicht noch ändern). Das zweite sieht im Vergleich dazu aufgetakelt aus - aber das nur nebenbei, darum geht's ja gar nicht :)

planet4.
 
planet4 schrieb:
Hallo,

also das mit dem IE kann ich nicht nachvollziehen, ich habe hier nur den IE6 und wenn ich es da wie beschreiben verändere zeigt er es richtig an.
Ich sehe, dass du auch noch immer
position: relative;
clear: both;
margin: -2em auto 0 auto;
in deiner css-Datei stehen hast, aber vielleicht hast du es nur wieder eingefügt, nachdem es mit dem IE nicht geklappt hat?
Zum Vergrößern anklicken....
ich habe auch den IE 6 und ohne

position: relative;
clear: both;
margin: -2em auto 0 auto; funktioniert es weder im FF noch im IE.

Das Beispiel, von dem du ursprünglich ausgegangen bist: FooterStickAlt, beinhaltet das überhaupt gefloatete Divs?
Zum Vergrößern anklicken....
Nein
Ich meine, wenn du deinen #non-footer mit .clearfix clearst, dann sitzt der nachfolgende footer immer unterhalb dieses non-footers, es sei denn, du schiebst ihn absichtlich hoch oder positionierst ihn absolut.
Zum Vergrößern anklicken....
deshalb muß ich den footer doch hochziehen! der #footer ist außerhalb von #content.
Was ich noch sagen möchte:
Das erste Foto, in der ersten Version von person.html, gefällt mir wesentlich besser (es ist zwar oben am Kopf so doof abgeschnitten, aber das könnte man ja vielleicht noch ändern). Das zweite sieht im Vergleich dazu aufgetakelt aus - aber das nur nebenbei, darum geht's ja gar nicht :)
Zum Vergrößern anklicken....
Was soll ich dazu sagen...Frauen halt. Sie will dieses Foto haben.

Hier muß einer von uns einen Fehler machen. Die gleichen Browserversionen und unterschiedliche Darstellungen kann nicht sein.

Womit änderst du denn die Dateien? FF mit firebug oder hast du dir die Dateien runtergeladen? Ich bin jetzt zu müde um noch richtig nachdenken zu können.
 
Hallo,

ich hab's mir jetzt noch mal angesehen, das ganze Rumgefiesel gründet einfach darin, dass IE kein min-height kennt (der IE7 vielleicht jetzt schon??)

Der Fehler im Moment:
längere Seite wird im IE6 abgeschnitten
das liegt an irgendeiner 100%-Einstellung (100% vom Bildschirm und der Inhalt ist länger)
wenn ich dem #wrapper die Höhe "100%" wegnehme, ist der Fehler (fast) behoben;
nur der #footer überdeckt unten noch geringfügig den #content, das beseitigt man, indem man dem #footer den negativen margin wegnimmt, ich lösche also diese zeile: "margin: -2em auto 0 auto;"

durch das Entfernen der Höhe für den #wrapper sind jetzt die kürzeren Seiten "zu kurz", d.h.: sie gehen nicht ganz bis nach unten, der #footer sitzt nicht unten.

Ich glaube, das Problem löst man am einfachsten, indem man für kürzere Seiten eine Extra-Css-Anweisung definiert, und zwar würde ich da nicht 100% Höhe nehmen, sondern die Höhe mit dem #footer abstimmen, z.B. die Höhe des #wrappers 96% und die des footers 4% oder so, muss man ausprobieren (sonst bekommt man einen unnötigen Scrollbalken)

dem body-tag auf der Startseite(=kurzeSeite) verpasst man eine id="start" und schreibt in die css-Datei:

HTML: 
#start #wrapper {
	height: 96%;
}

der #footer bekommt eine Höhe von 4%, auch in der ie.css (bzw. könnte es hier wegfallen, da genau so wie in der main.css definiert)

soweit alles paletti, aber wenn ich die Bildschirmgröße verkleinere, fehlt im IE auf der kurzen Seite wieder ein Stück vom Content. Das liegt an der Anweisung in der ie.css:

HTML: 
#nonfooter
{
 height: 100%;
}

Da kann man wohl nix machen. Du könntest mal testen (lassen), wie es im IE7 aussieht, der ist ohnehin schon weit verbreitet.
Vielleicht hat noch jemand eine bessere Lösung. Ich würde mich nicht so daran festbeißen, dass die Seite nun unbedingt und immer bis unten gehen soll. Moderne Browser, die "min.height" kennen, stellen sie so dar, wie du möchtest, in anderen Browsern sieht es eben etwas anders aus, macht ja nix, wichtig ist, dass man den Inhalt lesen kann.

planet4.
 
schade das deine notlösung nicht funktioniert. das geht absolut nicht wenn die fenstergr. verkleinert wird verschwindet auch auf den kurzen seiten der inhalt teilweise komplett.
so ein mist!
da muß ich ja ein kompellt anderes konzept entwerfen. der ie 6 ist immer noch der am meißten benutzte ie.

wenn ich dem #wrapper die Höhe "100%" wegnehme, ist der Fehler (fast) behoben;
meinst du aus dem main.css? das geht garnicht, weil ich dann die nonfooter-technik außer kraft setzte und margin: -2em auto 0 auto; rausnehmen geht auch nicht.

es liegt definitiv am #wrapper 100%; erhält der ie keine angabe darüber wird der #content immer angezeigt.
 
Zuletzt bearbeitet:
ICH HAB DIE LÖSUNG!!!

es lag an

Code: 
#nonfooter {overflow: hidden;}

der IE schneidet durch overflow: hidden ; alles ab was nach #nonfooter folgt. oder was versteht der IE da falsch?

er braucht also einfach:

Code: 
overflow: visible;
oder aber ich lass overlow: hidden; im main.css einfach weg. ich sehe jedenfalls keine veränderung im ff u. opera.

allerdings ist dein workaround für den IE dennoch unabdingar um den footer immer am ende des fensters zu positionieren.

tausend dank für deine mithilfe!
 
der netscape 7 macht leider Probleme! Er zeigt den inhalt von Zur Person nicht an und die Links im #footer sind nach rechts und untereinander verrutscht. :icon8:

Nehme ich overflow raus, ist der inhalt da aber die Links im #footer immer noch verschoben.
overflow: hidden; scheint mir eher eine Notlösung für das "Umfließen" zu sein. Bei anderer Hintergrundfarbe als #fff; und ohne overflow: hidden; ist in allen Browsern noch zu sehen, das die floatenden Elemente nicht ganz umschlossen sind, bzw die container unterschiedlich lang sind.

Da alle anderen Browser keine Problem damit haben (FF,Opera, IE 6/7, Safari) weiß ich nicht ob ich das einfach ignorieren soll?
 

Anhänge

  • netscape.jpg
    netscape.jpg
    35,2 KB · Aufrufe: 7
Problem gelöst!

Änderung im Markup: class="clearer" rausgenommen und den workaround von planet4 <body id="start">

Im CSS:

Code: 
 #nonfooter:after
content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

overlow: hidden; bei #nonfooter raus!

der Fehler lag wohl hier clearfix:after da ich den #nonfooter nicht angesprochen habe
 
Zuletzt bearbeitet:
Hallo,

ich weiß jetzt gar nicht mehr genau, wie der Quelltext und css aussah bzw. jetzt aussieht, nur mal kurz:
wenn du es so in deine css-Datei schreibst:
HTML: 
 #nonfooter:after
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
kannst du genausogut schreiben:
HTML: 
 .clearfix:after
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
und diese Klasse immer dann benutzen, wenn du sie brauchst, beim footer hier dann class="clearfix".

Um Netscape würde ich mich nicht mehr kümmern, aber da gibt's ja verschiedene Meinungen.
Wäre mal interessant zu wissen, wie viele Leute damit noch surfen.

planet4.
 
planet4 schrieb:
Um Netscape würde ich mich nicht mehr kümmern, aber da gibt's ja verschiedene Meinungen.
Wäre mal interessant zu wissen, wie viele Leute damit noch surfen.
Zum Vergrößern anklicken....
Wart's mal ab...
Im Herbst irgendwann kommt die neue Version mit Gecko-Engine raus.
Ich jedenfalls bin freudig gespannt.
Und ein Browser mehr oder weniger für den man sich verbiegen muss, ist auch egal...
 
planet4 schrieb:
Hallo,

ich weiß jetzt gar nicht mehr genau, wie der Quelltext und css aussah bzw. jetzt aussieht, nur mal kurz:
wenn du es so in deine css-Datei schreibst:
HTML: 
 #nonfooter:after
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
kannst du genausogut schreiben:
HTML: 
 .clearfix:after
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
und diese Klasse immer dann benutzen, wenn du sie brauchst, beim footer hier dann class="clearfix".

Um Netscape würde ich mich nicht mehr kümmern, aber da gibt's ja verschiedene Meinungen.
Wäre mal interessant zu wissen, wie viele Leute damit noch surfen.

planet4.
Zum Vergrößern anklicken....

das clearfix im Marup ist keine elegante Lösung und auch irgendwie unsinnig wenn ich das im CSS regel für die modernen Browser.

wenn ich nicht #nonfooter: after sonder .clearfix:after nehme, macht der Netscape eben Probleme.
Ich denke so ist es die korrekteste Lösung.

Um Netscape würde ich mich nicht mehr kümmern, aber da gibt's ja verschiedene Meinungen.
Wäre mal interessant zu wissen, wie viele Leute damit noch surfen.

Ich denke das der Netscape in der Statistik auf dieser Seite nicht vorkommen wird. ABER da dies eine Geschäftsseite ist sollte es in möglichst vielen Browser keine Probleme geben.
Was ich hier wirklich nicht berücksichtige ist der IE Mac!
 
dkdenz schrieb:
Wart's mal ab...
Im Herbst irgendwann kommt die neue Version mit Gecko-Engine raus.
Zum Vergrößern anklicken....

was hat der denn jetzt für eine Engine? Ich finde den Netscape garnicht so schlecht muß ich sagen. Wenn da nicht dieses dämliche registrieren nach der Installation wäre.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben