XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   footer stick alt tut nicht wirklich, was es soll (http://xhtmlforum.de/showthread.php?t=38108)

E|H 30.12.2005 21:37

footer stick alt tut nicht wirklich, was es soll
 
Servus,

ich hock hier gerade an meiner Seite und versuche, das Menü links oben zu platzieren. Gleichzeitig soll es aber im HTML-Code vor dem footer stehen, als an vorletzter Stelle.

Nun könnte ich mit relativer Positionierung des „wrappers“ und absoluter Positionierung des Menüs und des footers erreichen, daß das Menü da oben links sitzt und der footer immer ganz unten klebt.

Dann ragt aber das Menü bei kurzen Seiten (wenig Inhalt) und bei kleinen Auflösungen (800×600 Pixel) nach unten über den footer.

Ich dachte, daß der blaue Mann das Problem gelöst hätte, aber abgesehen davon, daß der noch nie was von Semantik gehört hat, besteht da das gleiche Problem, wenn man das Menü mal ordentlich verlängert. Dann ragt die Liste auch nach unten raus.

Kennt jemand eine Lösung, möglichst nur mit float, den Seitentitel, Klickpfad und Inhalt nach rechts und das Menü nach links zu setzen, so daß der footer immer unten sitzt, und sowohl vom Inhalt als auch vom Menü nach unten geschoben wird, wenn gescrollt werden muß?

Das Menü sollte eine fixe Breite haben. Dann muß allerdings der Inhalt gut gefüllt sein, sonst wird er zu schmal.

E|H 31.12.2005 17:05

Niemand ne Idee?

fricca 31.12.2005 17:17

Wo ist dein Code? :roll:

Bei der footerStickAlt-Methode gibt es die von dir geschilderten Probleme nicht, wenn du nicht mit absoluter Positionierung arbeitest.

E|H 31.12.2005 17:49

Mein Code ist ja erstmal egal.

Mir geht es darum, daß ich bei footerstickalt einfach die Liste auf der rechten Seite, also das Menü, verlängert hab’. Die Liste ragte dann unten raus.

Und wenn ich den footer nicht absolut positioniere, hat sich das erledigt, oder wie? Dann klebt er doch aber nicht immer ganz unten, oder?

EDIT: Ich seh’ grad, der footer ist bei footerstickalt relativ positioniert.

Code:

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>Home</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="The Man in Blue" />
<meta name="robots" content="all" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<style type="text/css" media="all">
        @import "css/main.css";
        @import "css/product_features.css";
        /* The CSS that's required to position the footer */

        html
        {
                height: 100%;
        }

        body
        {
                height: 100%;
        }

        #nonFooter
        {
                position: relative;
                min-height: 100%;
        }

        * html #nonFooter
        {
                height: 100%;
        }

        #footer
        {
                position: relative;
                margin: -7.5em auto 0 auto;
        }

        /* A CSS hack that only applies to IE -- specifies a different height for the footer */

        * html #footer
        {
                margin-top: -7.4em;
        }
</style>
</head>
<body>
        <p class="hidden">Skip to content</p>

        <div id="page">
                <div id="nonFooter">
                        <div id="header">
                                <p id="logo">

                                        <a href="#">
                                                <span class="linkText">XXXX</span>
                                        </a>
                                </p>

                               

                        </div>

                        <div id="content">
                                <div id="contentMain">
                                        <h1>Product X</h1>
                                       


                                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros. Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar purus, vel hendrerit ipsum tellus at ante.
                                        </p>
                                </div>

                                <div id="contentSub">
                                        <ul id="quickLinks">
                                                <li class="first on">
                                                        <span>Feature</span> tour
                                               
                                                [*]
                                                        <span>Try</span> a demo

                                               
                                                [*]
                                                        <span>Buy</span> online
                                               
                                                [*]
                                                        <span>Buy</span> online
                                               
                                                [*]
                                                        <span>Buy</span> online
                                               
                                                [*]
                                                        <span>Buy</span> online
                                               
                                                [*]
                                                        <span>Buy</span> online
                                               
                                                [*]
                                                        <span>Buy</span> online
                                               
                                                [*]
                                                        <span>Buy</span> online
                                               
                                                [*]
                                                        <span>Buy</span> online
                                               
                                                [*]
                                                        <span>Buy</span> online
                                               
                                                [*]
                                                        <span>Buy</span> online
                                               
                                                [*]
                                                        <span>Buy</span> online
                                               
                                                [*]
                                                        <span>Buy</span> online
                                               
                                                [*]
                                                        <span>Buy</span> online
                                               
                                                [*]
                                                        <span>Buy</span> online
                                               
                                                [*]
                                                        <span>Buy</span> online
                                               
                                                [*]
                                                        <span>Buy</span> online
                                               
                                                [*]
                                                        <span>Buy</span> online
                                               
                                                [*]
                                                        <span>Buy</span> online
                                               
                                        [/list]                                </div>

                                <div class="clearer"></div>
                        </div>
                </div>
        </div>

        <div id="footer">
                <ul id="bottomLinks">
                        <li class="first">

                                Support
                       
                        [*]
                                Employment
                       
                        [*]
                                Contact Us

                       
                [/list]
               

&copy; 2005 XXXX. All rights reserved.</p>

        </div>

</body>
</html>

Das ist meine Vereinfachung von footerstickalt, aber immer noch ordentliche div-Suppe.

fricca 31.12.2005 17:52

Zitat:

Zitat von E|H
Mein Code ist ja erstmal egal.

Nein.

Zitat:

Mir geht es darum, daß ich bei footerstickalt einfach die Liste auf der rechten Seite, also das Menü, verlängert hab’. Die Liste ragte dann unten raus.
Dann hast du vermutlich etwas falsch gemacht.

Zitat:

Und wenn ich den footer nicht absolut positioniere, hat sich das erledigt, oder wie? Dann klebt er doch aber nicht immer ganz unten, oder?
Der footer wird bei der Methode footerStickAlt nicht absolut positioniert.


edit: Aha, doch mit Code.
Zitat:

Das ist meine Vereinfachung von footerstickalt, aber immer noch ordentliche div-Suppe.
Was hindert dich, die div-Suppe zu vereinfachen. Ist alles hausgemacht. Du brauchst keinen "#nonfooter" wenn du ein #page hast.

Ich glaube, du hast das Prinzip noch nicht verstanden.
Die ganze Kunst liegt darin, den footer um seine eigene Höhe mit negativem margin nach oben zu verschieben.
Zusätzliche Elemente brauchst du nicht.

E|H 31.12.2005 18:41

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">

<head profile="http://gmpg.org/xfn/11">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Startseite</title>
</head>

<body id="blog-front">

<div id="hauptkasten">
<div id="floater">

<h1 id="seitentitel">Startseite</h1>

<div id="wobinich">
    <span>zum Men&uuml; | </span>
    Startseite
</div>

<div id="inhalt">
    <h2 class="center">Keine Einträge vorhanden</h2>
    <p class="center">
          Es gibt derzeit keine Einträge, die hier angezeigt werden könnten.

          Entweder gibt es momentan gar keine Einträge,
          oder alle Einträge sind älter, als die normalerweise hier angezeigten.
    </p>
</div>
</div>

<div id="menuekasten">
    <h2 class="menueweg">Menü</h2>
    zum Inhalt

    <ul class="navlist">[*]Startseite
[*]Audio|HiFi
[*]Webkrauts
[*]Das Ü[*]Links[*]Sitemap[/list]
</div>


<div id="fuszzeile">
        nach oben

        E|H::Homepage, Generation 4.2, erstellt mit WordPress

</div>
</div>
</body>
</html>

Im Moment floate ich den #floater nach rechts, den #menuekasten gar nicht, footer hat clear:both;.

Ich könnte jetzt #floater rausschmeißen (ein div weniger), #hauptkasten relativ positionieren, min-height:100%; #footer absolut mit bottom:0;.

Wenn das Menü zu lang wird, steht es unten raus.

Das Konzept von footerstickalt hab’ ich anscheinend absolut nicht geblickt …

EDIT: Ich habe oben bei meiner Vereinfachung keinen Code hinzugefügt, #nonfooter und #page waren beide schon drin.

Ich mach das Menü dort nochmal so kurz wie es ursprünglich war, da funktionierte es nämlich noch.

fricca 31.12.2005 18:48

Aha, wieder ein völlig anderer Quelltext - ohne CSS. Was willst du damit jetzt sagen?

Zitat:

Zitat von E|H
Das Konzept von footerstickalt hab’ ich anscheinend absolut nicht geblickt …

Und warum schaust du dir das Original dann nicht nochmal ganz genau an und liest die zugehörige Erklärung?
Der footer muss außerhalb des "Hauptcontainers" liegen (wie auch immer der heißt), das clear aber innerhalb des Elements, in dem gefloatet wird!

E|H 31.12.2005 18:54

Dieser neue Code ist der von meiner Seite.

Der, den ich davor gepostet hab’, ist footerstickalt, bzw. was ich daraus gemacht hab’ (zum Experimentieren).

Ich hab’ da nur etliche "replacement"-spans rausgeworfen.

Es hat mir schon nicht sonderlich getaugt, bei mir ein #floater einzufügen, aber ein clear-div ist mir der absolute Graus.

Ich hab’ mir footerstickalt schon angeschaut. Aber wenn ich da das Menü wachsen lasse, dann steht es unten raus.

Wenn ich das richtig kapier’, dann setzt footerstickalt alles bis auf den footer auf 100% und zieht dann den footer, der außen/unten dranhängt, genau um seine Höhe hoch.

Was aber, wenn das Menü mehr als 100% hoch ist?

fricca 31.12.2005 18:55

Zitat:

Zitat von E|H
Was aber, wenn das Menü mehr als 100% hoch ist?

Dann wandert der footer nach unten - schließlich wird min-height verwendet.
Vorausgesetzt, das Menü ist nicht absolut positioniert.

E|H 31.12.2005 19:15

So sieht’s bei mir aus (footerstickalt).
Das Menü ist nicht absolut positioniert, sondern floatet nach rechts.


http://krautblogmuenchen.wordpress.c.../screen_01.gif[/b]


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:08 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2022, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020