Erstmal ein riesen Kompliment ...

    ... dann: Seit zwei Tagen arbeite ich mich mit sehr viel Freude durch das HTML-Seminar. Vielen Dank für diese tolle Webseite.

    Inzwischen bin ich beim Thema CSS angekommen und erstmals auf ein Problem. Ich habe mit meinem Kenntnisstand schon alles versucht, finde aber den Fehler nicht.
    Es geht um die 3. Variante der Nutzung CSS-Befehle. Ich habe den Link in einer Datei und in der der anderen Design.Datei den Befehl. Aber die Text-Seite scheint den Befehl nicht wahrzunehmen.

    Was kann ich noch tun? Wo könnte der Fehler stecken?
    Wäre klasse, wenn jemand einen Tipp für mich hätte.

    Gruß

    In der Text-Datei TestII (htm) befindet sich folgender Inhalt:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

    <head>

    <link href="design.css" type="text/css" rel="stylesheet" />

    <title>Erfolgreicher testen</title>

    </head>

    <body>

    <p>
    Bei dieser Seite befinden sich die CSS-Codes in einer Extra-Datei.
    </p>

    <h1>
    Herzlich willkommen auf
    meiner Test-Seite
    </h1>

    <h2>
    Enricos Tests
    </h2>

    <h2 id="eindeutigername" class="farberot">
    Enricos Tests
    </h2>

    <p>
    Hier finden
    Sie meine erste Homepage zum
    Lernen von HTML vom KURS <!-- m --><a class="postlink" href="http://www.html-seminar.de">https://www.html-seminar.de</a><!-- m -->
    </p>

    Auf der Design-Seite design.css (htm) befindet sich dieser Inhalt:

    h2 {
    color:red;
    letter-spacing:30px;
    }

    Zitat

    Auf der Design-Seite design.css (htm) befindet sich dieser Inhalt:

    Erstmal Willkommen hier :)

    Wenn ich davon ausgehen kann, dass das in Klammern immer die Dateiendungen sind - deine Datei muss die Endung *.css haben - sonst wirds nix ;)

    Das heißt, deine Datei heißt "design.css" und nicht "design.css.htm".

    Das ist wie mit PDF-Dateien o.Ä. die heißen ja auch .pdf und nicht .pdf.htm ;)

    LG
    Laura

    Hallo Laura,

    vielen Dank für die schnelle Antwort. Ich hatte diese Fehlerquelle schon vermutet und deshalb das Datei-Format mit angegeben :)
    Allerdings habe ich auch noch Probleme mit dem Umbennen. Wenn ich das im Büro mit den Datein mache, ist das kein Problem.
    Hier zu Hause bei Vista lässt sich aber nur der Name, nicht die Endung überschreiben ... Ich müsste eines der vorgeschlagenen Programme nehmen, aber da ist CSS nicht dabei. Muss ich es dafür "herunterladen"? Oder gibt es vielleicht einen anderen Trick?

    Enrico

    Hi Enrico,

    bei Vista müsstest du das auch umbenennen können. Du musst die Option in der Systemsteuerung aktivieren, dass die Dateiendungen angezeigt werden. Ich habe Windows 7, aber bei dir sollte das auch so oder so ähnlich aussehen:
    [attachment=0]<!-- ia0 -->Screenshot Ordneroptionen.PNG<!-- ia0 -->[/attachment]
    Da wo markiert ist (jaha.. nicht ganz so schön :wink: ) muss der Haken weg, dann werden die Dateiendungen angezeigt, dann kannst du sie auch bearbeiten. Wenn du auf umbenennen klickst, wird zwar nur der Dateiname markiert, aber du solltest mit einem Klick auch auf die Dateiendung kommen.

    Bessere Möglichkeit: Lad dir doch Weboctons Scriptly herunter - damit kannst du deine HTML, CSS, PHP etc. Dateien bequem bearbeiten und abspeichern. Das ganze geht natürlich auch im Win-Editor, ist aber unkomfortabler.. Wichtig: Die Anführungszeichen bei dem um den Dateinamen nicht vergessen, sonst hast du "desgn.css.txt" statt "design.css".

    Liebe Grüße
    Laura

    Wow, danke! Das wird sicher klappen. Den HTML-Editor Scriptly hatte ich mir schon heruntergeladen. Wollte die Übungen aber alle noch mit dem einfachen Editor machen ...

    Danke nochmals für deine schnelle Unterstützung.

    Gruß aus München
    Enrico

    Zitat von &quot;Enrico&quot;

    Wollte die Übungen aber alle noch mit dem einfachen Editor machen ...

    Ist mit Sicherheit gut, um ein Grundverständnis reinzukriegen, jedoch hilft dir Scriptly auch beim lernen, weil du viel Zeit, z.B. durch Code-Completion sparst, d.h. wenn du mit <... anfängst, zeigt er die automatisch eine mögliche Auswahl an Tags, die sich mit jedem weiteren Buchstaben den du eintipps verkleinert. So sparst du dir das Eintippen und lernst die Tag-Namen automatisch mit, wenn du z.B. mal nicht mehr ganz genau weißt wie einer war.

    Kein Problem ;)

    LG
    Laura

    Hallo Laura,

    ich kämpfe mich gerade durch class, id, div und span. Ist noch recht mühselig :)

    Dabei ist mir folgendes Problem aufgefallen: Bei diesem Beispiel wird das class-CSS-Merkmal im Zusammenhang mit dem HTML-Tag strong vergeben.
    Das Ergebnis ist ein gefetteter und zusätzlich gelb markierter Text.

    Frage:
    Kann ich das class-Merkmal tatsächlich immer nur in Zusammenhang mit einem HTML-Tag vergeben?
    Und in meinem Beispiel: Entweder ich markiere gelb oder ich fett. Wenn ich nur markieren will, eignet sich nicht
    das class-Merkmal richtig?

    <style type="text/css">
    <!--
    .textmarkergelb {
    background-color:yellow;
    }
    .textmarkerrot {
    background-color:red;
    }
    -->
    </style>

    im Beispiel wird diese
    <strong class="textmarkergelb">Stelle im Text</strong>
    mit einer Art
    <strong class="textmarkerrot">Textmarker</strong>
    hervorgehoben.

    Gruß aus dem siedend heißen München
    Enrico

    Du kannst jedem html element eine class mitgeben.

    Wenn du nur makern willst benutzt du z.B
    <span class="xyz"> TExt </span>

    <span> selbst hat keine formatierende eigenschaften, daher nutzt man diesen hierfür.


    Greetz TimTim

    Ja Tim, du verblüffst mich immer wieder durch deine wundervollen Lesekenntnisse :P
    Die frage war nicht, ob man es mit Span verwenden kann, sondern ob man immer <HTML-TAG-DEINER-WAHL class="#"> Machen muss, oder ob das sonst auch anders funktioniert ^^

    Ja, dass kannst du leider immer nur mit einem HTML Tag verwenden, wie sollte das den sonst aussehen?
    Du musst ja immer irgendetwas in der Datei ansprechen :)
    Empfehlend zur Textformatierung ist <span>, da es selbst keine Formatierungen enthält^^
    Oder evtl. andere Sachen, die schon automatisch da sind. z.B. um einen ganzen Absatz besonders dazustellen das <p> Attribut modifizzieren, in einer Überschrift das <hX>,..^^

    Nicht wichtig, kommt auch erst später, aber vielleicht nützlich :D
    Was du später aber auch machen kannst ist, keine Klassen oder IDs mehr zu verteilen, sondern Sachen direkt ansprechen, was man aber nur bedingt nutzen sollte^^
    zum beispiel

    Code
    h1 {    font-size: xx-small;    color: #ffffff;}div h1 {    font-size: xx-large;    color: #000000;}


    In dem Beispiel werden alle h1 in sehr kleiner Schrift und in Weiß dargestellt.
    Dadrunter wird dann gesgt, dass alle h1 in einer Div-Box extrem groß und in Schwarz dargestellt werden.

    om nom nom.. sollte ich mich wirklich verlesen haben.. ich fasse das immernoch so auf..

    würde meine antwort hierauf beziehen

    Code
    Frage:
Kann ich das class-Merkmal tatsächlich immer nur in Zusammenhang mit einem HTML-Tag vergeben?
Und in meinem Beispiel: Entweder ich markiere gelb oder ich fett. Wenn ich nur markieren will, eignet sich nicht
das class-Merkmal richtig?

    Dachte er wollte eben nur fett oder nur gelb oder jenes.. einfach zu lesen ist der text nicht, vielleicht liegst du ja auch falsch =)..

    Wenn nicht.. dann schieb ichs auf die 33C in meinem Zimmer... =D

    Vielen Dank an den Käfer und an den Drachen ;)

    Danke für eure Antworten, die mir BEIDE geholfen haben. Denn tatsächlich versteckten sich (so muss man es wohl nennen) zwei Fragen in meinem Beitrag.
    Die allgemeinere zur class-Verwendung und die speziellere für das Textmarkersetzen.

    Gruß
    Enrico

    Soweit bin ich zwar noch lange nicht. Aber schon mal vielen Dank! In einem halben Jahr kann ich die Infos (die dort nicht so toll erklärt sind wie beim html-seminar) vielleicht verstehen ...

    Gruß

    Hallo Laura,

    schon wieder ich. Bevor ich zumnächsten Lernpunkt gehen kann, müsste ich irgendwie folgendes Problem knacken.
    Ich habe schon alles ausprobiert, was mir eingefallen ist. Vielleicht könntest du mir einen Tipp geben? Es geht um den Bereich navi.

    In der index-Datei sieht es so aus:

    <body>
    <div class="seitenbereich">

    <div class="kopfzeile">
    XXXX
    </div>

    <div id="navi">
    <ul>
    <li><a href="ccc.htm">Konzept</a></li>
    <li><a href="abc.htm">Corporate Identity</a></li>
    <li><a href="name.htm">Ueber mich</a></li>
    <li><a href="impressum.htm">Impressum</a></li>
    </ul>
    </div>

    <div class="inhalt1">
    Test, Test, Test, Test, Test, Test, Test, Test
    </div>

    <div class="fusszeile">
    Kontakt
    </div>

    </div>

    </body>
    </html>

    In der style.css Datei sieht es so aus:

    body {
    text-align: center; /* Zentrierung IE */
    }

    .seitenbereich {
    text-align:left; /* Inhalt wieder links */
    margin: 0 auto; /* Zentrierung mitte */
    width: 780px;
    background-color:white;
    }

    .kopfzeile {
    font-family: tahoma, sans serif;
    font-size: 3em;
    background-color: lightskyblue;
    }

    .fusszeile {
    clear: both;
    font-family: tahoma, sans serif;
    font-size: 0,5em;
    background-color: lightskyblue;
    }

    #navi {
    background-color:pink;
    text-align:left;
    font-family: tahoma, sans serif;
    font-size: 1em;
    width:10%;
    height:400px;
    padding: 5px;
    float: left;
    }

    #navi ul {
    list-style:none; /* keine Aufzählungspunkte */
    }

    .inhalt1 {
    font-family: tahoma, sans serif;
    font-size: 2em;
    margin-left: 15%;
    height:400px;
    padding: 10px;
    border:1px black dashed;
    }

    Das Ergebnis ist so wie ich es möchte, außer im Navibereich. Hier bekomme ich es nicht hin, dass der Text am linken Rand des pinken Kastens
    beginnt. Egal, was ich ändere. Der Text-Abstand nach links bleibt immer gleich groß ...
    Woran könnte das liegen?

    Fragt eine HTM-Suchnase in München
    Gruß
    Enrico

    Ich bin zwar nicht lauras, aber trotdem:
    Du musst in deiner CSS-Datei bei "#navi ul" noch "margin-left" hinzufügen, dmait kannst du den Abstand von deiner ul-Liste zum linken Rand festlegen. Geht natürlich auch mit den anderen Richtungen so.

    Beispiel:

    Code
    #navi ul {
 margin-left: 1em;
 list-style:none; /* keine Aufzählungspunkte */
}

    Wenn du mehr über das Box-Modell wissen willst, schaue mal im HTML-Seminar: https://www.html-seminar.de/box-modell.htm

    Edit: Kann sein, dass ich dich falsch verstanden habe. Wenn du möchtest, dass der Text direkt am linken Rand beginnt, musst du aus "#navi" das "padding: 5px;" entfernen. Damit bestimmst du nämlich, dass der Text im Navi 10px Außenabstand zum Rand Platz lässt.

    Du kannst das auch nur für einen bestimmten Rand aufheben, dafür musst du bei "#navi" das padding lassen und es für eine bestimmte Seite wieder aufheben.
    Beispiel:

    Eine andere Möglichkeit ist, indem du alle Seiten auf einmal bestimmst und für links 0 hinschreibst:

    Code
    #navi {
background-color:pink;
text-align:left;
font-family: tahoma, sans serif;
font-size: 1em;
width:10%;
height:400px;
padding: 5px 5px 5px 0; /* oben: 5px, rechts: 5px, unten: 5px, links: 0 (Reihenfolge wie bei einer Uhr, oben anfangen und dann im Uhrzeigersinn) */
float: left;
}

    Richtig.
    Das liegt daran, dass jedes Element vom Browser vorgegebene, voreingestellte Werte hat, unter anderem auch für margin und padding.

    Folgender Codeschnipsel ganz am Anfang deiner CSS-Datei hilft dir darüber hinweg:

    Code
    * {
    margin: 0;
    padding: 0;
}

    Wahrscheinlich kriegt ein Listenelement automatisch einen margin-Wert, um z.B. eine Einrückung darzustellen.
    * ist der Universalselektor, d.h. die Angaben gelten für ein belibiges Element.

    Empfehlung: Pack den Code an den Anfang jeder CSS-Datei, so umgehst du dieses Problem. Wichtig, dass es am Anfang steht, sonst überschreibt es die vorhergehenden Angaben im Sinne der Kaskadierung :)

    Liebe Grüße
    Laura

    PS: Wenn du Komma-Werte hast, z.B. 0,5 em, dann schreibst du 0.5 em (in der Regel), weil das die englische Form der Kommas in Komma-Zahlen ist.

    Hallo Sören, hallo Laura,

    danke für eure Tipps. Ich vermute mal, dass die Browsereinstellung der entscheidende Hinweis gewesen sein wird, denn die die anderen Sachen hatte ich eigentlich schon ausprobiert. Ich gehe das aber nochmal systematisch an, um zu lernen, zu lernen und zu ... :)

    Ich wünsche euch ein schönes Wochenende!

    Danke und Gruß
    Enrico

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden