3-Spaltiges Layout: Inhalt läuft in Footer

  • Hallo zusammen, bin neu hier in Neuling in Sachen HTML5 und CSS3. Ich habe für eine gute Bekannte eine Homepage gebastelt (mit Hilfe eines Buches und dem Inet), allerdings kriege ich es nicht hin, dass der Inhalt der mittleren Spalte nicht in den Footer reinragt, wenn die Auflösung in der Höhe kleiner wird als meine Full-HD-auflösung. Damit ihr seht, was ich meine, hier der Link:

    http://www.elke-meiners.de

    Dort mal auf Erziehungsberatung klicken und das Browserfenster evtl. verkleinern. Sollte für euch nicht jetzt schon klar sein, was ich falsch gemacht habe, kann ich gerne die CSS-Datei und/oder die html-Datei hochladen. Vielen Dank schon mal , Gruß Boogie

  • Hallo


    Nimm das position: absolute; aus dem footer.


    Zusätzlicher Tip: Investier dein Geld in ein aktuelles HTML-/CSS-Buch. Wenn Layouts mit position und / oder float erstellt werden - Finger weg.


    Gruss


    MrMurphy

  • Vielen Dank zunächst für die bisherigen Antworten. Was das Buch betrifft: Ich dachte eigentlich, dass dies ein aktuelles Buch sei. Es ist von Jürgen Wolf aus dem Rheinwerk Verlag und ein ziemlicher Wälzer ("HTML5 und CSS3 - Das umfassende Handbuch"). Aber vielleicht habe ich darin auch nicht genug gesucht und probiert. Hier nun die wesentlichen Teile der CSS und html-Dateien:


    Style.css:

    /* Fußzeile, zentriert */

    footer {

    clear:both;

    font-family:Arial, Helvetica, sans-serif;

    color:#7B4487;

    margin-top:10px;

    bottom: 10px;

    padding-top:8px;

    width: 99%;

    text-align:center;

    }

    /* Inhalt zentriert */

    main {

    bottom:10%;

    overflow-y:auto;

    font-family:Arial, Helvetica, sans-serif;

    color:#7B4487;

    text-align:center;

    line-height:150%;

    float:left;

    margin-right:45%;

    margin-left:27%;

    padding: 2% 2%;

    border:0;

    margin-top:10px;

    margin-bottom:10px;

    width:42%;

    max-height:22em;

    }


    #wrapper {

    position:auto;

    bottom:8%;

    max-height:50%;

    max-width:98%;

    margin:0;

    padding:0;

    border:0;

    }


    Das position:absolute habe ich schon rausgenommen.


    Die html-Datei:


    <!DOCTYPE html>

    <html lang="de">


    <head>


    <meta charset="UTF-8">

    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <meta name="robots" content="index, follow">

    <meta name="keywords" content="Erziehungsberatung, Umgangspflege, Berufsvormund, Verfahrensbeistand, Kindererziehung">

    <meta name="description" content="Erfahren Sie hier mehr über mich als Erziehungsberaterin, Umgangspflegerin, Berufsvormundin und Verfahrensbeiständin.">

    <title>Elke Meiners - Erziehungsberaterin</title>

    <link rel="stylesheet" type="text/css" href="style.css">

    <link rel="icon" sizes="36x36" href="images/ikon.ico">

    <link rel="apple-touch-icon" sizes="120x120" href="images/touch-icon.png" type="image/png">

    <script src="zitate.txt"></script>


    </head>

    <body>

    <header>

    <img src="images/banner.jpg" alt="Banner" width="100%" height="100%"/>

    </header>


    <nav>

    <a href="index.html">Startseite</a> |

    <a href="erziehungsberatung.html">Erziehungsberaterin</a> |

    <a href="verfahrensbeistand.html">Verfahrensbeiständin</a> |

    <a href="berufsvormund.html">Berufsvormundin</a> |

    <a href="umgangspflege.html">Umgangspflegerin</a>

    </nav>

    <div id="wrapper">

    <aside id="kleckse">

    <img src="images/rot-e.jpg" alt="Erziehungsberatung" width="98%" height="98%"/>

    </aside>

    <main>

    <h2> Erziehungsberaterin</h2><p></p>



    <h3>Meine besonderen Kompetenzen zeigen sich in der Begleitung strittiger Trennungsfamilien.<p></p>


    Vielen Familien gelingt es, nach einer Trennung oder Scheidung einvernehmliche Umgangs- und Sorgerechtsregelungen zu treffen.

    Leider kommt es in einigen Familien aber zu manchmal eskalierenden Konflikten, die für die Kinder eine weitaus größere Belastung darstellen,

    als die Trennung selbst (vergl. Walper und Langmeyer, 2008).<p></p>


    Als Eltern stehen sie in einer lebenslang „unkündbaren Beziehung“. Ich kann Sie dabei unterstützen, Wege heraus aus der Hochstrittigkeit zu finden,

    um insbesondere für die Kinder neue, positive Rahmenbedingungen zu schaffen.<p></p>


    „... weg vom Streit – hin zum Kind...“

    </h3>

    </main>


    <aside id="zitate">

    <script>

    var jetzt=new Date();

    var z=(jetzt.getSeconds())%28;

    document.write(quotes[z]);

    </script>

    </aside>

    </div>

    <footer>

    <img src="images/verlauf.jpg" alt="Trenner" width="98%" height="98%">

    <a href="ueber-mich.html" target="_self">Über mich</a> | <a href="kontakt.html" target="_self">Kontakt</a> | <a href="impressum.html" target="_self">Impressum</a>

    </footer>



    </body>

    </html>


    Soweit dazu. Wenn ihr mehr braucht, lasst es mich wissen. Ich bin für jeden Tipp sehr dankbar.

  • Hallo


    Du hast noch jede Menge anderer Probleme in deine Webseite mit eingebaut, die zum einen das Layout betreffen und zum anderen die Besucherfreundlichkeit.


    Da du danach aber nicht gefragt hast wollte ich dich damit nicht belästigen. Um es gleich mal ganz deutlich zu schreiben: Du hast eine typische Anfängerseite erstellt. Von gewerblichen Seiten, mit denen Geld verdient werden soll, solltest du noch lange die Finger lassen. Zudem hast du offensichtlich eine zumindest in die Jahre gekommene Anleitung erwischt.


    Der wichtigste und meist sehr schwierig auszuräumende Knackpunkt wird hier erkennbar


    Zitat

    meiner


    Machst du die Webseiten für dich? Oder doch für eher für die Besucher, die dann bestenfalls auch Kunden werden sollen?


    Zitat


    ragen ... die Zitate in der Box rechts unten in den Footer


    Das liegt daran, dass sich in dem Footer nur Inline- und Inline-Block-Elemente befinden. Die stehen immer nebeneinander, wenn der Platz dafür ausreichend ist.


    Der Grafik hast du eine Breite von 98 Prozent gegeben. Sobald das Wort "Über" (aus "Über mich") nur noch 2 Prozent der Fensterbreite beträgt rutscht es deshalb neben die Grafik. Das ist das ganz normale vorgesehene Verhalten deines HTML-Codes und deiner CSS-Angaben.


    Gruss


    MrMurphy

  • Vielen Dank für die umfassende und ehrlich Antwort. In der Tat bin ich Anfänger, was das Erstellen von modernen Webseiten angeht und deshalb für jeden Tipp mehr als dankbar. Hast du denn noch weitere Ideen, wie ich die Seite verbessern kann, gerade im Hinblick auf Benutzerfreundlichkeit?

    Die Prozentangabe resultierte aus meiner Überlegung (und Ausprobieren), dass bei kleineren Auflösungen alles proportional verkleinert wird. Denkfehler meinerseits?


    Gruss Burkhard

  • Hallo


    Schwierig. Alleine die Aufzählung der Probleme ist bereits eine lange Liste. Die Erklärung, warum es sich überhaupt um Probleme handelt und die Lösung würde bereits ein kleines Buch füllen.


    Grundsatz: Die Besucher wollen Informationen, und zwar ohne Aufwand und leicht auffindbar.


    Bilder als Text sind zum Beispiel keine Informationen.


    Den "Text" auf den Farbklecksen können wahrscheinlich selbst auf Desktopmonitoren 10% der Besucher überhaupt nicht nicht lesen. Auf Tablets oder gar Smartphones werden selbst Besucher ohne Farbsehprobleme den Text nicht mehr lesen können.


    Zudem werden viele Besucher die Farbkleckse überhaupt nicht als Links erkennen. Zumal andere Farbkleckse (zum Beispiel im header-Bild) keine Links sind. Links sollten aber immer eindeutig erkennbar sein - für alle Besucher.


    Ähnlich verhält es sich mit den Kontaktinformationen, die auf einer Unterseite versteckt sind und aus einem Bild bestehen, welches sich bei schmalem Fenster zudem verkleinert.


    Weiterhin nervt es Besucher, wenn sie auf Webseiten kaum Informationen finden und dafür noch endlos klicken müssen. Für die gesamten Informationen reicht eine einzige Webseite aus, nur das Impressum kann auf eine extra Seite.


    Die Weisheiten rechts wirken nur arrogant, dadurch abschreckend und haben mit dem Webauftritt nichts zu tun - weg lassen.


    Bestimme Symbole wirken grundsätzlich negativ, zum Beispiel das §-Zeichen. Die sollten deshalb nur verwendet werden, wenn auch Paragraphen zitiert werden, aber niemals zur "Verschönung" eines Textes.


    Auf Webseiten sollte es nur einen Scrollbalken geben. Zumal wenn zusätzliche Scrollbalken von der Textlänge her überhaupt nicht erforderlich sind. Und wenn Text überhaupt nur erreichbar ist, wenn das Browserfenster hoch genug ist.


    Längerer Text gehört auch niemals in h-Elemente (h1 bis h6). Die sind nur für Überschriften gedacht, nicht aber um Text hervorheben zu können.


    Durch willkürlich gesetzte br-Elemente wird Text deutlich schwerer lesbar.


    p-Elemente haben in h-Elementen nichts verloren.


    Die Seite ist nicht für Kinder sondern für Besucher, die seriöse Informationen suchen. Für die ist das Layout insgesamt viel zu bunt und zu kindlich. Sie wirkt deshalb unseriös.


    Auf der Startseite sollten wichtige Informationen stehen die den Besuchern direkt weiterhelfen. Die fehlen aktuell völlig.


    Und, und, und, ...


    Zitat

    Denkfehler meinerseits?


    Ja. Die Besucher (die bösen Leute) können auf kleineren Bildschirmen doch nicht besser sehen. Deshalb sollten alle Elemente eine Mindestgröße behalten und besser ihre Position ändern. Dazu ist responsive Design eine Grundlage.


    Gruss


    MrMurphy

  • Danke für die ausführliche Antwort. Leider wird das meiste davon trotzdem so bleiben, da es der ausdrückliche Wunsch meiner Bekannten ist, die das ganze nach wochenlangem hin- und her abgesegnet hat. Ich werde mir aber deine Tipps zu Herzen nehmen, falls ich nochmal in die Verlegenheit komme, jemandem beim Internetauftritt behilflich sein zu sollen.


    Meinst du, ich kann die ursprüngliche Frage (Text bleibt nicht in eigener Box) durch studieren eurer html-Seminare lösen oder hast du abschließend einen Tipp dazu?


    Gruß Boogie

  • Hallo


    Zitat

    da es der ausdrückliche Wunsch meiner Bekannten ist


    Solche Sprüche kenne ich zu genüge. Willst du ernsthaft erzählen, du hast deiner Bekannten für einen gewerblichen Webauftritt eine aktuelle, responsive, barrierefreie, besucherfreundliche Seite vorgestellt und die fordert so eine Problemseite?


    Du kannst viel erzählen, aber niemand kann mich zwingen dir alles zu glauben.


    Gruss


    MrMurphy

  • Zitat

    da es der ausdrückliche Wunsch meiner Bekannten ist

    Kenne ich aus meiner Berufstätigkeit: Der Kunde/Auftraggeber hat immer Recht.

    Zitat


    Meinst du, ich kann die ursprüngliche Frage (Text bleibt nicht in eigener Box) durch studieren eurer html-Seminare lösen oder hast du abschließend einen Tipp dazu?

    Ich nehme an, Du meinst die rechte Box mit dem punktierten Rand? Das habe ich nur hin bekommen, indem ich alles floating, die meisten Maßangaben etc. heraus geworfen und auf Flexlayout umgestellt habe:

    Und ganz unten im HTML:

  • Hallo MrMurphy,


    habe den Beitrag zufällig gelesen, woher nimmst du die Information dass mit Position und float keine Layouts mehr erstellt werden (Quelle). Woher sollte man wissen ob die aktuellen Standards behandelt werden, wenn in einem Buch HTML 5 und CSS3 steht, muss man sich gewissenweise auf dass Buch verlassen. Man kann die Qualität des Buches vorher nicht erraten. Design ist Ansichtssache und kann nie grundsätzlich bewertet werden, da jeder einen anderen Geschmack hat. Bitte gib ein paar vertrauenswürdige Quellen an (wenn möglich).

  • Ich möchte hier weder eine Diskussion auslösen noch mich rechtfertigen, nur so viel:

    1. bin ich kein Profi, der das gelernt hat und damit seine Brötchen verdient. Von so einem kann man sicher mehr erwarten.

    2. Ich weiß erst seit gestern, dass die Seite problembehaftet ist und nicht benutzerfreundlich, responsiv und barrierefrei. Wie hätte ich ihr das also vorher sagen sollen???

    3. Die Grafik und das Design hat sie mir so gegeben und mich lediglich gebeten, dass in eine Webseite zu integrieren, die sie sich so vorgestellt hat, inklusive der Farbkleckse und Zitatebox (auf die sie großen Wert legt). Und das Design findet sie für ihren Beruf sehr passend, denn nicht nur die Eltern, sondern eben auch viele Kinder sind ihre Klientel (so ihre Aussage).

    4. Sie ist mit der Seite so zufrieden, wie sie geworden ist, lediglich MICH hat gestört, dass manche Texte auslaufen, wenn die Auflösung kleiner wird. Deshalb habe ich hier um Hilfe gebeten. Natürlich bin ich auch dankbar, dass mir weitere Fehler aufgezeigt wurden, nur werde ich die nicht einfach so ändern, da erstens der "Auftraggeber" zufrieden ist und ich zweitens keine Zeit dafür habe, das ganze wieder von vorn anzufangen. Die Seite wird sicherlich nicht überlaufen sein, dafür ist ihr Angebot lokal begrenzt und sie wollte den Auftritt nur, um auch im Internet präsent zu sein. Deshalb auch nur die spärlichen Informationen zu den einzelnen Bereichen. Sie geht nicht davon aus, dass sie durch die Seite mehr Aufträge bekommt, da diese in der Regel vom Vormundschafts- und/oder Jugendgericht erteilt werden (und vom Jugendamt).


    Sempervivum: Vielen Dank für deine Mühe, ich werde es jetzt mal nach und nach einbauen und anpassen.


    Gruß


    Boogie

  • Zitat

    nach und nach einbauen und anpassen

    Warum nicht gleich das ganze CSS übernehmen? Ich habe es getestet und es funktioniert. Die Seite sieht genau so aus wie vorher, nur ohne die negativen Begleiterscheinungen, Überläufe etc.

  • Tut mir leid. Wenn ich nur die CSS austausche, sieht es ganz und gar nicht so aus wie früher: Auf der Startseite stehen die Farbkleckse untereinander und auch sonst ist das Design durcheinander geraten. Ich baue es Stück für Stück - auf Grundlage deiner Änderungen - in die einzelnen Seiten ein. Trotzdem vielen Dank.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!