Warum funktioniert meine CSS formatierung nicht? -.- HELP :(

html.de-Forum HTML, XHTML & CSS
1

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.

Meine CSS Datei: Download: default.css | xup.in
Meine Html Datei: Download: index.html | xup.in

Jendryschik’s Site: Download: site.JPG | xup.in

Jendryschik’s Html-Quellcode: Download: index.txt | xup.in

Hab die CSS Datei auch schon auf The W3C CSS Validation Service überprüft, ein Fehler wurde mir nicht angezeigt , aber wieso sind die Gabeln und das Menu nun genau unten :((((.
Wenn die Seite erstmal so aussieht wie bei jendry, dann kann ich ja anfangen meinen Grafiken einzusetzen etc. wenn…

Hoffe einer von euch kann mir da irgendwie weiterhelfen?! :-/

Freundlichen Coder Gruß

neppa :slight_smile:

2

Auf Anhieb kann ich dir nur sagen das 2 Divcontainer nicht geschlossen wurden.

3

Du solltest dir einen kostenlosen Webspace besorgen. Irgendwelche Dateien, irgendwo hin laden, die dann erst runtergeladen und entsprechend aufgeabeitet werden müssen, das macht kaum einer in einem Forum.

4

Auch wenn der Download versucht wird, man ist ja neugierig, kommt:

/tmp/HpvdXUO5.bin.part konnte nicht gespeichert werden, weil die Quelldatei nicht gelesen werden konnte.

Versuchen Sie es später nochmals oder kontaktieren Sie den Server-Administrator.

5

Struppi, ich versteh nicht ganz was du meinst?! wenn du aufn Link klickst wird dir doch schon alles angezeigt, ohne das du was laden musst. Bis auf die css Datei.

Aber dann kann mir wohl keiner helfen? :frowning:

CSS code:

@charset „utf-8“;
/**

/**

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

/* Zurücksetzen der Innen- und Außenabstände */

  • {
    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%; }

/* Farben und Hintergründe setzen */
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;
    }

/* Kontaktfeld */
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;
}

/* Teaser */
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;
    }
6

Bitte erkläre mal genau, was falsch angezeigt wird, oder post ein Img, wie es aussehen soll und wie es bei dir derzeit aussieht.

Grüße

7

So sollte es aussehen : Download: site.JPG | xup.in

Bei mir sieht es so aus: Download: hm.jpg | 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 :frowning:

8

Mal so am Rande: Steht das nicht im Buch erklärt? Das könntest du einfach noch mal nachvollziehen.

Du hast doch offenbar sogar deinen und seinen HTML/CSS-Code zum Abgleichen…

9

Ich habe mir das Buch ja nicht gekauft. Er erklärt auch auf der Homepage wie man die Seite baut aber in einzelnen Schritten. Am Ende kann ich zwar den kompletten index.html sehen doch die css datei hat er nirgends bereitgestellt (irgendwo ja auch verständlich).

10

Ja, es ist immer ein riesiger Krampf. Das größte Problem sind die auf dem eigenen Rechner natürlich fehlenden Grafiken.

Ich fürchte, da ist nichts zu wollen, neppa. Es ist meiner Meinung nach ein zu großer Aufwand für einen zu geringen Nutzen. (Wie in: Es könnte Stunden dauern und die Lösung dürfte dich auch nicht maßgeblich weiterbringen.) Das wäre schneller neu gemacht.

PS: Du hast eine PM.

11

Ich? Hmm, die scheint nicht angekommen zu sein.

12

Ne, nicht du, sondern neppa. Ich habe noch überlegt, ob das missverständlich ist. Sorry. :slight_smile:

(Glaube, der Thread insgesamt hat sich jetzt auf eine etwas cheesy Art erledigt.)

13

Kann geclosed werden!

Mermshaus hat mir sehr sehr geholfen nun funzt alles!!!

Nochmal riiiiiesen dankeschön!!!

14

Er bietet sogar das ganze Beispiel zum Download an:
Das Buch zur Site - Anhang - Einführung in XHTML, CSS und Webdesign - Michael Jendryschik