div-container und externe css-datei

  • So das ist mein code und ich hab folgendes problem:

    Ich möchte die seite mit externen stylesheets formatieren.
    Wo muss ich die datei einfügen damit sie nur in einem div container berücksichtigt wird?
    Ich brauch nämlich für navigation und inhalt verschiedene...

    Und dann hab ich noch ein anderes Problem und zwar in der navi erscheinen die links immer eingerückt und passen nicht in den div container. Was muss ich machen dass sie linksbündig oder zentriert erscheinen??

    Ich hoffe ich habs einigermaßen verständlich erklärt
    thx schonmal,
    noa

  • In den head-Bereich, zusammen mit dem Anfang sollte der dann z.B. so aussehen:

    HTML
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="de">
    <head>
    <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
    <meta name="generator" content="Adobe GoLive 5">
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    Die style.css liegt in diesem Fall im gleichen Verezeichnis wie deine html-Dateien.
    Diese style.css kannst du mit einem gewöhnlichen Editor generieren und packst darein alle Formatierungs- und Style-Angaben.

    Bei diesen Code-Beispielen kommt der obere Teil in die CSS-Datei und der jeweilige untere Teil (unter den drei Punkten ...) in die HTML-Datei innerhalb des body-Bereichs.

    Lies dir hierzu auch nochmal diese Erläuterungen bzw. die weitergehenden Infos auf diesen Seiten durch
    http://css.fractatulum.net/css_html.htm#a3
    http://www.css4you.de/wscss/css01.html

    Passe dann deinen Code dann erst mal an, dann sieht man weiter. Einige Grundkenntnisse sind schon erforderlich.

  • Hm, mein Stylesheet wird dann einfach ignoriert...
    Was mach ich denn falsch??


    css stylesheet:

    die seite:

  • Das sind nur ein paar Kleinigkeiten:

    #header:
    float:top kannst du löschen, gibt's nicht.

    #navi:
    nimm hier das position: absolute raus und ersetze es durch

    Code
    float:left;


    left und top-Werte kannst du eigentlich auch weglassen, oder spezifiziere sie mit margin-left und margin-top
    Bei der Farbangabe lass das Schlusszeichen weg und ersetze es durch einen Strichpunkt.

    #content:
    Hier fehlt die öffnende geschweifte Klammer
    Ersetze position:absolut wieder durch float:left;
    und lass top und left weg oder spezifiziere es.
    Insgesamt sollten navi und content dann wohl die gleiche Pixelbreite haben wie der header.

    Ganz unten in der CSS ist noch eine schließende Klammer zuviel.
    Mit diesen Änderungen sollte es dann schon besser aussehen.

  • Ich hab die änderungen gemacht, aber die ganzen texteigenschaften und so ignoriert er immer noch...

  • Die Text-Eigenschaften, die überall gleich sind, brauchst du nicht jedesmal anzugeben. Die packst du in den body:

    Code
    body
    {
    font-family: Arial, Verdana, Hevetica;
    color:#000000;
    font-size:100.01%
    }

    Wenn die Schrfitgröße in einem Container größer oder kleiner sein soll, gibst du diese für den jeweiligen Container wie folgt an:

    Code
    font-size:0.8 em;

    (beachte: Punkt statt Dezimalkomma) - Schrift kleiner

    Code
    font-size:1.3em;

    Schrift größer

    Da du die Schriftformatierungen jetzt im body hast, kannst du sie bei den einzelnen Containern, evtl. bis auf die Schriftgröße) rausnehmen.

    Bei der navi muss es so heißen:

    Code
    background-color:#6495ED;

    Beim content mach mal bei fffloat noch die überflüssegen "f's" raus.

    Das müsste so klappen. Falls nicht, überprüf mal den Link bzw. die Linkangabe zu deiner css-Datei.
    Stell ggf. mal einen Link zu deiner HP oder den gesamten Quelltext rein.

  • also jetzt bin ich mal so weit dass er nur noch die hintergrundfarbe und die schriftformatierungen nicht anzeigt...
    und die hover effekte auch nich

    das ist mal der code von der hp:

    und noch der von der css-datei:

    was ist denn dadran noch falsch??
    weil das header bild zeigt er ja an, und das ist auch in der css datei

  • Im HTML-Teil sind noch einige body-Tags zuviel. Mach mal diesen Teil so:

    In der CSS ist das menue nicht richtig codiert. Ersetze es damit:

    Code
    #menu{ 
    list-style-type: none; 
    text-decoration: none; 
    }

    Bei mir ist die Schrift jetzt so formatiert.

  • soo...jetzt kommen wir der sache schon näher^^

    hab leider noch 2 probleme :?

    In der navi erscheinen alle links eingerückt also passen sie nicht ganz in den div-container

    Und der background vom content-div wird auch noch nicht angezeigt

    Ich bin aber auch schwierig xD

  • no problem, nicht du bist schwierig, sondern "aller Anfang".

    Background content: Da fehlt die öffnende Klammer.
    Die Navi hab ich dir nochmal neu geschrieben. Hat mit deiner Konstruktion irgendwie nicht hingehauen.
    Mit folgender CSS müsste das jetzt deinen Vorstellungen entsprechen:

    HTML (body-Bereich):

    edit:
    noch ne kleine "Schönheitsoperation":
    Nimm bitte im HTML-Teil noch bei den einzelnen Links jeweils das

    Code
    text-decoration:"none"

    raus. Das ist hier überflüssig und hat eh' keine Wirkung.

  • was hast du denn für nen browser??

    bei mir wird mit safari der content-div background nicht angezeigt und mim IE der header und der navi hintergrund...

  • ja guckst du hier:

  • Da bin ich jetzt leider auch mit meinem Latein am Ende. Wie du siehst führte der letzte Code von mir doch wohl zum richtigen Ergebnis, und zwar sowohl im IE als auch FF.
    Und wenn der Rest bei dir o.k. ist, muss auch die Navi da sein. Hast du wirklich beide Teile von mir so übernommen? Der div von der Navi hat ja jetzt ne andere Bezeichnung als vorher.
    Musst du vielleicht unten noch etwas nach links scrollen?
    Sonst fällt mir jetzt wirklich nichts mehr ein.

  • okay
    der ist jetzt noch ein bisschen ausgebaut und ich hab statt dem container einfach die <ul> farbig gemacht das geht auch...

    Jetzt hab ich aber noch ein anderes problem, und zwar die Schriftart...
    Wenn ich nämlich jetzt die home seite kopier und dann anderen text reinschreib ist der auf einmal nich mehr arial sondern irgendwas anderes...
    :?
    Aber eig müsste es doch gleich sein weil beide haben die selbe css datei