Seite, Header, Inhalt, Footer

  • Guten Tag zunächst mal,


    da ich hier noch neu bin, weiß ich nicht, ob ich mit der richtigen Tür ins Haus falle. Ich sitze nun seit zwei Tagen an einem (für mich) scheinbar unlösbaren Problem, obwohl das ganze (sogar für mich) recht einfach klingt.


    Ich habe hier drei Dateien vor mir: 1 *.html-Datei, 1 dazugehörige *.css-Datei und ein *.jpg in der Größe 1024 x 768 Pixels. Im folgenden hänge ich die beiden ersteren Dateien mal an (hoffentlich mach ich es richtig).


    Mein Wunsch wäre folgender: In der #seite sollte das komplette Hintergrundbild im gen. Format erscheinen. Der #header sollte immer oben stehen. Der #fussbereich sollte permanent unten angeheftet sein, wobei der #inhalt wegen variierenden Datenmengen scrollbar sein.


    Stehe ich tatsächlich vor einem unlösbaren Problem, oder stelle ich mich nur wieder zu dusselig an? Als kleine Info kann ich noch sagen, daß ich mir alles beim "Sticky-Footer am unteren Rand" abgeguckt habe


    Hier mal die HTML:




    Und hier noch die CSS:



    Für Hilfe bin ich stets dankbar... Was mach ich nur falsch?

  • Hallo


    Zitat

    Was mach ich nur falsch?


    Leider sehr viel. Die Erklärung zu allen Problemen würde ein ganzes Buch füllen. Deshalb nur ein paar Beispiele.


    Zunächst hat


    Zitat

    Sticky-Footer am unteren Rand


    nichts mit


    Zitat

    Der #header sollte immer oben stehen. Der #fussbereich sollte permanent unten angeheftet sein, wobei der #inhalt wegen variierenden Datenmengen scrollbar sein.


    zu tun. Das sind zwei unterschiedliche Techniken, die aber beide heutzutage nicht mehr verwendet werden sollten und brauchen.


    Der Sticky-Footer ist bei Webseiten mit Inhalt meist schlicht überflüssig, da der Inhalt in der Regel mehr als eine Bildschirmseite füllt.


    Die angehefteten und stets sichtbaren header und footer nehmen unnötig Platz weg und stören deshalb bei der Darstellung auf kleinen Bildschirmen. Zudem sollte in das normale Scrollverhalten von Browsern nicht eingegriffen werden.


    HTML
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">


    XHTML wurde bereits 2008 offiziell begraben und sollte seitdem nicht mehr verwendet werden, auch wenn die Browser es noch unterstützen. Neue Webseiten sollten mit HTML5 erstellt werden.


    Code
    1. body { font-family: Verdana, sans-serif, Arial} {font-size: 14px }


    Die Klammern sind falsch gesetzt, hier darf nur ein Klammerpaar stehen.


    Code
    1. <!-- a { padding: 3px; } a:focus { background-color: yellow; color: black;} -->


    Im CSS darf nicht mit HTML-Mitteln auskommentiert werden.


    Zitat

    text-decoration: blink


    Mal abgesehen davon, dass grundsätzlich auf blinkende Elemente verzichtet werden sollte, muss und wird blink nicht von allen Browsern unterstützt. Siehe zum Beispiel


    https://wiki.selfhtml.org/wiki…matierung/text-decoration


    Code
    1. <body bgcolor="grey" oncontextmenu="return false">


    Attribute wie bgcolor oder align sind bereits seit der Einführung von CSS2 im Jahr 2000 veraltet und sollten bereits seitdem nicht mehr vewendet werden.


    Gleiches gilt für überflüssige JavaScript-Befehle.


    Code
    1. <div id="seite">


    Den ganzen Inhalt umschließende Container waren immer schon überflüssig, deshalb weglassen.


    Code
    1. <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber3" height="38">


    Das table-Element darf nicht zum Layouten mißbraucht werden. Zumal Tabellen verschiedene Verhaltensweisen aufweisen, die für andere Inhalte unerwünscht sind.


    Code
    1. height="19"


    Die Höhe von Elementen wird von deren Inhalt bestimmt. Die meisten height-Angaben sind deshalb überflüssig und sollten so weit wie möglich vermieden werden.


    Code
    1. <font ...


    Das font-Element ist veraltet und sollte nicht mehr verwendet werden.


    Code
    1. <center>


    Gleiches gilt für das center-Element. Und natürlich alle anderen veralteten Elemente.


    Code
    1. <p>Inhalt1</p>


    Auch zum Üben sollte sinnvoller Inhalt verwendet werden, da sich Webseiten mit Inhalt meist anders verhalten als mit solchen künstlichen Inhalten.


    Bei deinen Farbkombinationen ist der Text kaum noch lesbar.


    Code
    1. background-image: url(bg-04.jpg)


    Gleiches gilt für Bilder hinter Text.


    Code
    1. opacity: 0.5;


    Durch opacity werden auch alle Kindelemente, zum Beispiel der Text, transparent und deutlich schlechter lesbar.


    Deine Webseite ist weder flexibel noch responsive. Das wird von heutigen Webseiten aber erwartet.


    Der HTML-Quelltext könnte mit aktuellem HTML zum Beispiel folgendermaßen aussehen: Wobei ich als Testtext Texte aus Wikipedia verwende, da er sich ähnlich wie der spätere Inhalt verhält:



    Der Rest dann mit aktuellem CSS.


    Gruss


    MrMurphy

  • Hallo,


    ich stecke seit ein paar Tagen in einem ähnlichen Problem. Seit gestern habe ich meine Seite von <div> in responsive geändert (dank der hilfe von Axel Pratzner).


    Aber leider komme ich jetzt beim weiteren, inneren Layout nicht weiter, hier fehlt mir ein Gedankensprung.


    Die Seite (meine Testseite) liegt unter: http://steinhanse.eu/test.html

    Die dazugehörige CSS unter: http://www.steinhanse.eu/styles/test.css


    Die aktuelle Seite, die ich ersetzen möchte ist diese: http://www.steinhanse.eu/index.php


    Probleme machen mir:

    1. inneres Layout: Wie mache ich es in HTML und CSS korrekt, damit ich den Ticker links und den Termin-Header rechts habe? Und wie analog den Rest, verglichen mit der aktuellen Seite?

    2. Die Farbe der einzelnen Elemente: hier erhalte ich teilweise andere als erwartet. Habe das Gefühl, das diese vermixt werden.

    3. Schatten: ich hätte gerne, das links und rechts der gesamten Seite, wie im original, ein Schatten zu sehen ist. Leider bekomme ich es nur so hin, das der ringsum ist, anstatt recht/links.


    Bin über schnelle Hilfe sehr Dankbar.


    Viele Grüße

    Jürgen

  • Hallo,


    bin jetzt doch ein paar Schritte weiter gekommen. Ob es so ok ist weiß ich nicht genau, aber es sieht besser aus.


    Fragen jetzt noch:

    1. Ticker und Termin-Header sind nicht in jedem Browser auf gleicher höhe: mal ist Termine tiefer (Safari, Vivaldi), mal korrekt (IE, Edge). Andere Browser habe ich gerade nicht zur Hand.

    2. Wie schaffe ich es, dass die Blöcke, die ich "Tabellen" nenne, immer direkt am oberen kleben, wenn der Nachbar größer ist?


    Viele Grüße

    Jürgen

  • Zu 1.: Gib der section.subright ein vertical-align: top, dann sollte es funktionieren. Den Grund für diesen Effekt habe ich noch nicht richtig verstanden, es hängt damit zusammen, dass der Defaultwert für vertical-align baseline ist. Vielleicht kann MrMurphy es erklären.

  • Zu 2,: Im Moment werden die Blöcke in der Reihenfolge links, rechts, links, rechts, links, rechts, usw. angeordnet. Dann sehe ich die Möglichkeit, Flexlayout zu verwenden, damit der erste Block links auf die Höhe des rechten erweitert wird. Oder ein Zweispaltenlayout, dann werden die Blöcke allerdings anders angeordnet, erst linke Spalte von oben nach unten, dann rechte Spalte von oben nach unten. Zweispaltenlayout kannst Du mit mit colomn-count anlegen, siehe z. B . hier:

    https://css-tricks.com/almanac/properties/c/columns/

  • Hallo,


    danke, Tipp 1 war genau richtig.


    zu 2: da habe ich es jetzt so geändert, das es einen linken und einen rechten Bereich gibt, und in jedem davon dann die Blöcke. Damit sollte es jetzt gehen (hoffe ich).


    Gruß

    Jürgen

  • Da ich selbst leider nicht halb so viel Ahnung hätte wie ich gerne hätte und selbst wenn ich diese im gewünschten Umfang hätte, ich nicht halb so viel Wissen würde wie Mr.Murphy oder JR traue ich mich nicht Vorschläge zum Code zu machen, aber einen Rat hätte ich. Es ist blöd, dass man keine "Fehlermeldungen" bekommt weil etwas nicht funktioniert, aber ich pers. finde die Helferlein die es gibt ganz gut und hilfreich.


    Z.b. Mal den Code validieren sowohl html als auch css.


    Dann z.B. Beim Firefox die Entwicklerwerkezuge vor allem auch wenn man sehen will welche Stilelemente sich auf bestimmte Abschnitte wirklich auswirken.


    Nichts desto trotz bin ich ständig an Punkten, wo ich nicht weiter komme.... leider, aber die validatoren und Entwicklerwerzeuge helfen viel, mir zumindest. :)

  • Hallo,


    das Problem konnte ich jetzt auch lösen: die Höhe der Parent-Section war nicht gegeben. Nachdem ich diese gesetzt hatte war es überall ok.


    Dann aber war der Ticker in Safari plötzlich zweizeilig, aber das konnte ich dann mit white-space:nowrap lösen.


    War viel gegoogle und geteste, aber es läuft endlich *freu*


    Gruß

    Jürgen

  • Ich arbeite z.Zt. mit Hilfe von joomla! (letzte und aktuelle Version 3.7.3) an der Neuerstellung einer Seite mit Kochrezepten. Alles ist soweit gut bis auf den folgenden Punkt: Im Ergebnis der Validation erhalte ich folgende Meldung "Error: Der Content-Type des Dokuments ist nicht HTML: undefined". Gleichwohl steht im Quelltext:

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

    Was ist zu tun?

    Vielen Dank vorab für alle Antworten und Hilfen.

    offermann





  • Hallo zusammen,

    das gestern geschilderte Problem hängt offensichtlich mit dem Add-On "Html Validator" von Marc Gueury für Firefox zusammen. Ein neuer Test ohne Änderungen an dem bestehenden HTML-Code mit dem W3C Markup Validator, v.13+hg ergab im Check mit Validate by direct input: Document checking completed. No errors or warnings to show.

    Warum? Keine Ahnung. Aber das Ziel ist erreicht.

    Also alles bestens, ich kann dann weiter "basteln".:)

    Das Firfox Add-On habe ich entfernt, weitere Validierungen mache ich nur noch direkt mit dem W3C Markup Validator.

    Ich rate von dem Firefox Add-On ab!

    offermann