3-Spaltiges Layout: Inhalt läuft in Footer

Boogie61 · 23. August 2017

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

JR Cologne · 23. August 2017

Code ist fast immer notwendig. Also her damit!

Sempervivum · 23. August 2017

??? Der TO hat die URL seiner Seite gepostet, dort kann man alles einsehen.

MrMurphy · 23. August 2017

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

JR Cologne · 23. August 2017

Ich für meinen Teil bevorzuge zumindest meist den Code, da z.B. auf dem Smartphone ein Link einem nicht so viel bringt.

Aber recht hast du natürlich. Ein Link reicht theoretisch auch aus.

Boogie61 · 23. August 2017

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>

<head>

<title>Elke Meiners - Erziehungsberaterin</title>

</head>

<body>

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

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

var jetzt=new Date();

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

document.write(quotes[z]);

</script>

</aside>

</div>

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

MrMurphy · 23. August 2017

Hallo

Zitat

Das position:absolute habe ich schon rausgenommen.

Aber nicht auf der verlinkten Seite.

Gruss

MrMurphy

Boogie61 · 23. August 2017

Jetzt schon. Aber dann ragen bei meiner Full-HD Auflösung die Zitate in der Box rechts unten in den Footer (was vorher nicht war).

MrMurphy · 24. August 2017

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

Boogie61 · 24. August 2017

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

MrMurphy · 24. August 2017

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

Boogie61 · 25. August 2017

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

MrMurphy · 25. August 2017

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

Sempervivum · 25. August 2017

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:

Code

/* Kopfzeile, für Banner */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
header {
    display: block;
    margin:0px auto;
    }

/* Navigation, mittig, */
nav {
        font-family:Arial, Helvetica, sans-serif;
        text-align:center;
        margin-top:5px;
        font-size:1.2em;
        color:#7B4487;
    }
    
/* Fußzeile, zentriert */
footer {
        font-family:Arial, Helvetica, sans-serif;
        color:#7B4487;
        margin-top:10px;
        margin-bottom: 10px;
        padding-top:8px;
        width: 99%;
        text-align:center;
    }
    
/* Links die Kleckse */
    #kleckse {
        align-self: flex-start;
        margin:0;
        margin-top:10px;
        padding: 1% 2%;
        height:auto;
        flex-basis: 170px;
        flex-grow: 0;
        flex-shrink: 0;
}

/* Paragraphenzeichen */
    #paragraf {
        margin:0;
        margin-top:10px;
        padding: 1% 2%;
        border:0;
        width:10%;
        height:auto;
}

/* Inhalt zentriert */
    #imp {
        overflow-y:scroll;
        font-family:Arial, Helvetica, sans-serif;
        color:#7B4487;
        text-align:justify;
        margin-right:1%;
        margin-left:21%;
        padding: 2% 2%;
        border:0;
        margin-top:10px;
        margin-bottom:10px;
}


/* Inhalt zentriert */
main {
        overflow-y:auto;
        font-family:Arial, Helvetica, sans-serif;
        color:#7B4487;
        text-align:center;
        padding: 2% 2%;
        border:0;
        margin-top:10px;
        margin-bottom:10px; 
        
}

/* Zitatenbox */
    #zitate {
        font-family:"Times New Roman", Times, serif;
        font-size:medium;
        font-style:italic;
        color:#7B4487;
        text-align:center;
        margin:0;
        padding:1%;
        border-color:#7B4487;
        border-style:dotted;
        margin-top: 30px;
        overflow-y: auto;
        max-height: calc(100% - 30px);
}
        
    #wrapper {
        margin:0;
        padding:0;
        border:0;
        display: flex;
}
/* Überschriften */
h2 {
    font-size:x-large;
    color:#7B4487;
    font-family:Arial, Helvetica, sans-serif;
    text-align:center;
    margin-bottom:10px;
}

/* Inhaltstext */
h3 {
    font-family:Arial, Helvetica, sans-serif;
    color:#7B4487;
    text-align:left;
    font-size:medium;
}

/* Impressumschrift */
h4 {
    font-family:Arial, Helvetica, sans-serif;
    color:#7B4487;
    text-align:left;
    font-size:small;

    
}
/* Kleckse für Index.html */
    #klecks-l {
        margin-top:0px;
        padding: 0 1%;
        border:0;
        width:23%;
        height:auto;
}
    #klecks-r {
        margin-top:0px;
        padding: 0 1%;
        border:0;
        width:23%;
        height:auto;
}

/* Elkes Foto auf "Über mich" */
    #foto {
        margin:0;
        margin-top:10px;
        padding: 1% 2%;
        border:0;
        width:30%;
        height:auto;
}

/* Inhalt von "Über mich" */
    #ich {
        
        font-family:Arial, Helvetica, sans-serif;
        color:#7B4487;
        text-align:center;
        margin-right:47%;
        margin-left:15%;
        padding: 2% 2%;
        border:0;
        margin-top:10px;
        margin-bottom:10px; 
        width:43%;
        height:auto;
}

Alles anzeigen

Und ganz unten im HTML:

Code

<aside><div id="zitate"></div></aside>
    </div>
    <footer>
        <img src="./Elke Meiners - Erziehungsberaterin_files/verlauf.jpg" alt="Trenner" width="98%" height="98%">
        <a href="http://www.elke-meiners.de/ueber-mich.html" target="_self">Über mich</a> | <a href="http://www.elke-meiners.de/kontakt.html" target="_self">Kontakt</a> | <a href="http://www.elke-meiners.de/impressum.html" target="_self">Impressum</a>
    </footer>
    <script>
        var jetzt=new Date();
        var z=(jetzt.getSeconds())%28;
        zitate.innerHTML = quotes[z];
    </script>
    </body></html>

Alles anzeigen

MrMurphy · 25. August 2017

Hallo

Zitat

Der Kunde/Auftraggeber hat immer Recht.

Die typische Ausrede für schlechte Arbeit.

Gruss

MrMurphy

hume · 25. August 2017

Zitat von MrMurphy

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

Alles anzeigen

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).

Boogie61 · 25. August 2017

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

Sempervivum · 25. August 2017

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.

Boogie61 · 25. August 2017

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.

Sempervivum · 25. August 2017

Zitat

Auf der Startseite stehen die Farbkleckse untereinander

Ah so, ich hatte leider nur die Seite für Erziehungsberatung umgestellt und die anderen und die Startseite nicht berücksichtigt

3-Spaltiges Layout: Inhalt läuft in Footer

Jetzt mitmachen!

Teilen

Tags