Warum funktioniert meine CSS formatierung nicht?

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Der Koobold, 20. Oktober 2010 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 20. Oktober 2010
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    Hi!

    Ich habe mir auf der HP von http://jendryschik.de/wsdev/einfuehrung/ das Tut mal durchgelesen und wollte dann diese Homepage schreiben und dann später halt für meine Bedürfnise abändern.
    Soweit so gut, mein HTML Dokument hab ich glaub ich soweit fertig nur irgendwie sieht das garnicht so aus wie bei ihm. Ich denke ich habe irgendwas in meiner CSS Datei falsch gemacht?! Denn die Formatierung sieht wie ne Katastrophe aus -.- Hab euch mal den Quellcode gepostet und n Bild wie die Seite eigentlich aussehen soll.

    CSS Datei: No File | www.xup.in

    Jendryschik's Site: Download: site.JPG | www.xup.in

    Jendryschik's Html-Quellcode: No File | www.xup.in


    Hoffe ihr könnt damit was anfangen und mir irgendwie weiterhelfen :-/



    BW gibts natürlich wie immer für jede Hilfe!


    Greetz
     
  3. 20. Oktober 2010
    AW: Warum funktioniert meine CSS formatierung nicht? -.-

    Naja es wäre schon gut auch deine *.html zu sehen, vieleicht hast du ja "ID" und "Klassen" irgendwie vertauscht.

    Und wie sieht denn deine Seite aus. Ich meine man muss ja irgendeinen Vergleich haben damit man ungefähr sieht was anders ist.
     
  4. 20. Oktober 2010
    AW: Warum funktioniert meine CSS formatierung nicht? -.-

    zeile 91 in deiner css fehlt ein }
     
  5. 20. Oktober 2010
    AW: Warum funktioniert meine CSS formatierung nicht? -.-

    http://jigsaw.w3.org/css-validator/validator

    Allgemein sinnvoll, gibt auch einen (X)HTML-Validator von/vom (?) W3C, aber Murdoc hat es ja schon beantwortet eigtl
     
  6. 20. Oktober 2010
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Warum funktioniert meine CSS formatierung nicht? -.-

    okay die Klammer hat schon mal viel bewirkt! Nur warum zur Hölle sind meine Button nun unterhalb und die Gabeln ? auch -.-

    hab hier mal mein Bild geuppt.

    Download: hm.jpg | www.xup.in
     
  7. 20. Oktober 2010
    AW: Warum funktioniert meine CSS formatierung nicht? -.-

    Wie schon erwähnt wäre es nicht schlecht wenn du auch mal deinen html code zeigen würdest. Am besten alles (css, bilder, js, html etc.) packen und hochladen sonst wirds schwer dir zu helfen.
     
  8. 20. Oktober 2010
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Warum funktioniert meine CSS formatierung nicht? -.-

    index.html hochgeladen. Danke schonmal!

    No File | www.xup.in
     
  9. 21. Oktober 2010
    AW: Warum funktioniert meine CSS formatierung nicht? -.-

    hat denn niemand ne idee?
     
  10. 21. Oktober 2010
    AW: Warum funktioniert meine CSS formatierung nicht? -.-

    Ich wollte es mir angucken, aber dann muss ich ja alle Schritte durchgehen um alle bilder und alles zusammen zu bekommen.


    Bist du nochmal alle Schritte selber durchgegangen und hast überprüft ob du da ein Fehler gebaut hast?
     
  11. 22. Oktober 2010
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Warum funktioniert meine CSS formatierung nicht?

    Ja also ich hab die CSS auch nochmal komplett neu geschrieben. Leider mit gleichen erfolg.
    Hab ihn hier im Spoiler nochmal reingepackt.

    Spoiler
    <link rel="stylesheet" href="default.css"
    type="text/css" media="screen, projection" />

    @charset "utf-8";
    /**
    * Einführung in XHTML, CSS und Webdesign. Kochbar.
    *
    * @Link http://kochbar.jendryschik.de
    * @package kochbar
    * @version 2.0
    */

    /**
    * Globale Einstellungen und Bugfixes
    *
    * @section Browser-Reset
    */


    * {
    margin: 0;
    padding: 0;
    }

    /**
    * Schriftgröße kontrollieren
    */
    body, td, th { font: normal 75%/167% Georgia, Palatino, "Times New Roman", serif; }

    td, th { f\ont-size: 100%; }


    html, body {
    color: #3b2b20;
    background-color: white;
    }
    body {
    background: url(images/vertaefelung.gif) top center repeat-x;
    }

    /**
    * Regeln für allgemeine Elemente
    *
    * @section Überschriften
    */
    h1 {
    color: #9F0F00;
    background-color: white;
    font-size: 3em;
    line-height: 1.1;
    margin: .8em 0;
    }
    h2 {
    color: #3C6331;
    background-color: white;
    font-size: 1.5em;
    line-height: 1.1;
    margin: .8em 0;
    text-transform: uppercase;
    }

    /**
    * @section Absätze
    */
    p { margin: .8em 0; }

    /**
    * @section Links und Anker
    */
    a:link {
    color: #980c02;
    background-color:transparent;
    }
    a:visited {
    color: #999;
    background-color: transparent;
    }
    a:hover, a:focus {
    color: #FF7700;
    background-color: transparent;
    }
    a:active {
    color: white;
    background-color: #980c02;
    }

    /**
    * Regeln für besondere Bereiche
    *
    * @section Kopfbereich
    */
    div#head {
    width: 932px;
    margin: auto;
    }
    #head h1 {
    margin: 0;
    padding: 0;
    width: 288px;
    }

    /**
    * @section Hauptmenü
    */
    #head ul {
    position: absolute;
    bottom: 0;
    right: 30px;
    }
    #head ul li {
    float: left;
    list-style: none;
    margin: 0 8px 0 0;
    }
    #head ul a,
    #head ul strong {
    color: #352545;
    background:#FBFBFB url(images/nav_bg.gif) bottom left repeat-x;
    display: block;
    padding: .8em;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    }
    #head ul a:hover,
    #head ul a:focus,
    #head ul a:active,
    #head ul strong {
    color: white;
    background: #638F56 url(images/nav_bg_hover.gif) bottom left repeat-x;
    }

    /**
    * @section Hauptbereich
    */
    div#main {
    color: inherit;
    background: white url(images/gabeln.jpg) top center repeat-x;
    }
    #main div#main-inner {
    color: inherit;
    background: transparent url(images/illustration.jpg) top center no-repeat;
    width: 932px;
    margin: 0 auto;
    padding: 348px 0 0 0;
    }

    /**
    * @section Sidebar
    */
    div#sidebar {
    color: inherit;
    background: #F5F5F9 url(images/sidebar_rahmen.gif) top left repeat-y;
    float: left;
    border-bottom: 6px solid #CBB8BA;
    width: 276px;
    padding: 0 6px;
    margin: 0 0 26px 0;
    }
    div#sidebar-inner {
    color: inherit;
    background: #F5F5F9 url(images/sidebar_bg.gif) bottom left repeat-x;
    padding: 0 0 24px 0;
    }


    div#contact {
    color: white;
    background-color: #E8AD47;
    padding: 0 24px 16px 24px;
    }
    #contact h2 {
    color: inherit;
    background-color: transparent;
    margin: 0;
    }
    #contact p.tel {
    color: #9F0F00;
    background-color: transparent;
    font-size: 2.2em;
    font-weight: bold;
    margin: .3em 0;
    }
    #contact p.address {
    font-weight: bold;
    font-size: .9em;
    }


    div#teaser {
    color: #333;
    background: #fbfbfd url(images/teaser_bg.gif) top left;
    margin: 12px 12px 0 12px;
    padding: 12px;
    }
    #teaser h2 {
    color: #FF7700;
    background: transparent url(images/teaser-h2_bg.gif) bottom center no-repeat;
    font-size: 2.2em;
    text-align: center;
    font-weight: normal;
    padding: 0 0 12px 0;
    margin: 0;
    text-transform: none;
    }
    #teaser h3 {
    margin: 12px 0 19px 0;
    padding: 0;
    }
    #teaser p {
    margin: 14px 0 0 0;
    padding: 0;
    font-size: 11px;
    font-weight: bold;
    line-height: 18px;
    }

    /**
    * @section Content
    */
    div#content {
    margin: 0 0 0 288px;
    padding: 0 12px 0 36px;
    }
    #content h1 { margin-top: 0; }

    #content img {
    float: left;
    margin: .5em .5em .5em 0;
    }

    /**
    * @section Footer
    */
    div#footer {
    color: #7F6063;
    background-color: #F3F2FA;
    padding: 24px 0;
    font-family: Tahoma, Arial, sans-serif;
    font-size: .9em;
    clear: both;
    margin: 24px 0 0 0;
    }
    #footer p {
    width: 932px;
    margin: 0 auto;
    }

    Und so sollte die Seite aussehen: Download: site.JPG | www.xup.in
    Meine sieht so aus: Download: hm.jpg | www.xup.in

    Wie gesagt, der Inhalt und die Bilder ist nicht die Welt, es geht mir nur darum, warum Gabel und Menuleiste nun unten verankert sind {bild-down: http://www.html.de/images/smilies/icon_sad.gif}
     
  12. 22. Oktober 2010
    AW: Warum funktioniert meine CSS formatierung nicht?

    upp doch mal deinen ganzen ordner wo du die htmls,css und bilder drin hast ... dann können wir uns das mal gescheit anschauen ...

    dann kriegste sicherlich auch ne lösung ;-)
     
  13. 22. Oktober 2010
    AW: Warum funktioniert meine CSS formatierung nicht?

    Download.
    Ordner 19 entpacken und glücklich werden. ^^




    @ TE du solltest deinen Ordner mit Bildern und allem hochladen, damit man sich das auf seiner Testumgebung einmal komplett anschauen kann. Ohne die Bilder hat die Formatierung sowieso vorne und hinten nicht gestimmt somit konnte man da nur schwer gucken was los ist.
     
  14. 22. Oktober 2010
    AW: Warum funktioniert meine CSS formatierung nicht?

    Hacker5! mein Mann!!

    Besten dank! BW raus und du hast ne pm^^
     
  15. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.