Benötige Hilfe / Basisformatierung

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Benötige Hilfe / Basisformatierung

    Servus,

    ich brauche dringend eure Hilfe, entweder bin ich total übermüdet oder stehe absolut auf dem Schlauch. Ich wollte anfangen eine Webseite zu formatieren. Meiner Meinung nach (aktueller Stand aufgrund CSS3/HTML5 Referenzen) habe ich alles richtig gemacht, auch habe ich mal meinen BrowserCache gelöscht und verschiedene Browser ausprobiert, doch irgendwie wird mein Stylesheet von der index.html nicht gelesen oder manchmal nur fehlerhaft ausgegeben. Es könnte sein das ich einen Flüchtigkeitsfehler drin habe und hoffe das ihr mir da helfen könnt. So folgt nun der Code:

    Quellcode

    1. <!doctype html>
    2. <html>
    4. <head>
    6. <title>Kloetzchen-Imperium</title>
    8. <meta charset="utf-8">
    9. <meta http-equiv="content-type" content="text/html; charset=utf-8">
    10. <meta name="keywords" content="Minecraft, Server, Multiplayer,
    11. Suchprogramme, RPG, Freebuild, Minigames, Events, Rootserver, Liveplay">
    12. <meta name="robots" content="noindex, nofollow">
    13. <meta name="author" content="Rene Overbeck">
    14. <meta name="creator" content="Rene Liveplay Overbeck">
    15. <meta name="publisher" content="Kloetzchen-Imperium">
    16. <meta name="description" content="Kloetzchen-Imperium ist ein Minecraft-Server Netzwerk,
    17. bestehend aus einem Freebuild, RPG und Minigames Server">
    19. <link rel="stylesheet" type="text/css" href="stylesheets/style_a.css" title="Basis-Stylesheet">
    21. </head>
    23. <body>
    24. <header>
    25. <div id="logo">
    26. <img src="" alt="Logo" width="644" height="108">
    27. </div>
    28. </header>
    30. <div id="breadcrumb">
    31. Breadcrumb
    32. </div>
    34. <section id="sidebar">
    35. Sidebar
    36. </section>
    38. <section id="content">
    39. Inhalt
    40. </section>
    42. <footer>
    44. </footer>
    46. </body>
    48. </html>
    Alles anzeigen


    Quellcode

    1. /**
    2. * @author Rene Overbeck
    3. * @email rene.overbeck@live.de
    4. * @copyright Rene Overbeck
    5. *
    6. * Kloetzchen-Imperium Exlcusive Design "ClashBoomBang"
    7. * Copyright (C) 2013 Rene Overbeck
    8. *
    9. **/
    11. /* ****************** Allgemeine Deklaration ******************
    12. ***************************************************************/
    14. *{
    15. margin: 10px;
    16. padding: 0px;
    17. }
    19. html, body{
    20. background: #FFF
    21. }
    23. /* ***************************Layout **************************
    24. ***************************************************************/
    26. #logo{
    27. background-image:url("../images/previewLogo.png");
    28. background-position: center;
    29. background-repeat: no-repeat;
    30. }
    Alles anzeigen


    Falls ihr euch wundert: Bzgl. der Images ... hbae ich verschiedene Schreibweisen, also Abweichung von der Referenz ausprobiert.
    Mit freundlichen Grüßen
    best regards

    Liv3pl4y

  • Ich habe semantische Fehler bei den MetaTags? - Ups ... aber was genau meinst du damit: Laut Validator gibt es das "Creator" Attribut nicht, welches doch eigentlich nur als Bezeichnung dient und nicht als Attribut? Sowie eben das Endtag ">" bei dem creator .... content" falsch sei, warum ist das so? - Nützliche Infos konnte ich bei der Fehlerausgabe leider nicht ausmachen. Der Endtag muss doch dahin, wo soll er denn sonst hin?

    Bzg. des Empty Source beim IMG Tag, schrieb ich bereits das ich es auch mit der Vollschreibweise versucht habe z.B.

    Quellcode

    1. <header>
    2. <div id="logo">
    3. <img src="http://localhost/mainSite/images/previewLogo.png" alt="Logo" width="644" height="108">
    4. </div>
    5. </header>


    ... allerdings wird dadurch die Source zwar angezeigt, wie erwähnt, aber die CSS Regeln dennoch ignoriert oder nicht ausgelesen, desweiteren wird das "previewLogo.png" mit der CSS Regel
    nochmal angezeigt, zwar zentriert wegen "background-position: center" aber warum wird es zweimal ausgegeben und die Grafik wird dann auch nur zu Häfte angezeigt.

    Das begreife ich eben nicht und hoffe ihr könnt mir da helfen, es muss doch ein Grund geben wieso das Stylesheet patu nicht ausgelesen wird?!
    Mit freundlichen Grüßen
    best regards

    Liv3pl4y

  • HTML5 kennt den Metatag creator nicht. Um den Autor zu kennzeichnen, gibt es halt Author.

    Wenn du eine Grafik als elementaren Bestandteil einer Website einbindest, der immer und in jeder Version angezeigt wird, nutzt du IMG. Wenn du eine Grafik via CSS einbindest (und im Grunde damit diese Grafik nur bei bestimmten Bedingungen anzeigen lassen willst, nutzt du besser einen Layer - hier solltest du ein H1-Element nutzen, da es sich anscheinend um das Logo der Website handelt, wobei ich dies wiederum als elementaren Bestandteil werten und somit nicht via CSS laden würde), gehört sie nicht in ein IMG-Tag. Du hast ja eigentlich schon den perfekten Ort dafür, nämlich den Div-Layer #logo.

    Ändere in der CSS-Datei als Test mal die Hintergrundfarbe des Bodys auf red. Du solltest dann einen roten Hintergrund erhalten. Dies zeigt dir, dass CSS geladen wird. Alternativ kannst du auch mit einem HTML-Inspektor arbeiten (Opera wäre dies Dragonfly, Firefox drückst du Q). Dieser wird dir die Styleinformationen, die einem Element zugewiesen sind, anzeigen.

    Was mir eben noch aufgefallen ist: Du sprichst mit CSS und der Grafik den Div-Layer an. Also nicht den Img-Tag. Du kannst also den Img-Tag entfernen, den CSS-Code so belassen und dann funktioniert es, vorausgesetzt die Ressourcen (das Logo) steht am angegeben Ort zur Verfügung.

    Lange Rede kurzer Sinn: Richtig (nach meiner Interpretation der Rules) ist dies:

    Quellcode

    1. <!doctype html>
    2. <html lang="de">
    3. <head>
    4. <title>Kloetzchen-Imperium</title>
    5. <meta charset="utf-8">
    6. <meta name="keywords" content="Minecraft, Server, Multiplayer,Suchprogramme, RPG, Freebuild, Minigames, Events, Rootserver, Liveplay">
    7. <meta name="robots" content="noindex, nofollow">
    8. <meta name="author" content="Rene Overbeck">
    9. <meta name="publisher" content="Kloetzchen-Imperium">
    10. <meta name="description" content="Kloetzchen-Imperium ist ein Minecraft-Server Netzwerk, bestehend aus einem Freebuild, RPG und Minigames Server">
    11. <link rel="stylesheet" type="text/css" href="stylesheets/style_a.css">
    12. </head>
    13. <body>
    14. <header><div id="logo"></div></header>
    15. <nav id="breadcrumb">
    16. Breadcrumb
    17. </nav>
    18. <aside id="sidebar">
    19. Sidebar
    20. </aside>
    21. <article id="content">
    22. Inhalt
    23. </article>
    24. <footer>
    25. </footer>
    26. </body>
    Alles anzeigen
    =O