mizekatze: Links,Umlaute und weitere Probleme

Hallo, Ich bin am verzweifeln. Nichts funktioniert was ich möchte. Ich habe verschiedene Links die ich ganz gerne unterschiedlich formatieren möchte. Jedoch erkennt dies mein Browser nicht (Mozilla Firefox). Außerdem möchte das der Link auf dem man sich gerade befindet z.B. Grün angezeigt werden soll,jedoch wenn ich bei a:active es ändere zeigt er es nur für einen kurzen Moment,wie mache das richtig das der Link auf dem man sich gerade befindet Gründ gemacht wird bis man auf einen anderen klickt. Ich habe auf meiner rechten Navigationsleiste verschiedene Icons die sich beim drüber gehen ändern die auch gleichzeitig Links sind. Habe zwar in CSS reingeschrieben das sie nichts machen sollen,jedoch werden die Icons mit schwarzen Hintergrund angezeigt was man auf dem Bild sehr gut erkennen kann. Bildbeschreibung

Aufjedenfall, Das größte Problem das sich die verschiedene Links nicht formatieren lassen. Das die ä,ö,ü nicht angezeigt werden. Und ich habe die Seite in verschiedene Bereiche eingeteilt,aber da jeder PC-bildschirm unterschiedlich ist,wie mache ich das die Seite automatisch sich an den Bildschirm anpasst.

Wäre nett wenn ihr mir helfen könntet,und nicht so streng sein zu mir lerne das erst alles in der Schule. Und falls ihr es nicht verstanden habt oder ich mich nicht richtig ausgedrückt habe lasst es mich wissen.

Habe die Datein mal als .rar Datei bereit gestellt,damit ihr die ganze Seite sehen könnt. ( http://workupload.com/file/XSewbJNF )

Aber falls ihr die CSS Datei und eine Seite sehen wollt:

body { font-size: 12pt; color: black; background-color: #FFFFFF; font-family: verdana; /* cursor: url(bilder/cat.ani), progress; */ } h1 { font-size: 16pt; } h2 { font-size: 14pt; } h3 { font-size: 14pt; color: #0066FF; } h4 { font-size: 13pt; } h5 { background-color: darkred; color: FFFFFF; padding: 8px; } a:link { text-decoration: none; color: #C0C0C0; text-underline: none; font-size: 18pt; } a:active { text-underline: none; color: #C0C0C0; background-color: #008800; } a:visited { text-decoration: none; text-underline: none; color: #C0C0C0; } a:hover { cursor: url(bilder/finger.cur), progress; background-color: #000000; } /* Nicht mehr wichtig da a:hover .mauszeiger body, a:hover {cursor: url(bilder/mittelfinger.cur), progress;} */ /* a.Tabelle ist die Klasse für die Tabelle */ a.tabelle:link { text-decoration: none; text-underline: none; } a.tabelle:active { text-decoration: none; text-underline: none; } a.tabelle:visited { text-decoration: none; text-underline: none; } a.tabelle:hover { cursor: url(bilder/finger.cur), progress; } /* a.links ist die Klasse für die Navi links */ a.links:link { text-decoration: none; text-underline: none; } a.links:active { text-decoration: none; text-underline: none; font-weight: bold; } a.links:visited { text-decoration: none; text-underline: none; } a.links:hover { cursor: url(bilder/finger.cur), progress; background-color: #D2D2D2; } a.icon:hover { cursor: url(bilder/finger.cur), progress; text-decoration: none; text-underline: none; } ul { list-style-type: circle; } .mitte { text-align:center; } .rechts { text-align:right; } table { width: 85%; border-width: 3pt; border-style: solid; border-color: #000000; background-color: #C0C0C0; } th { background-color: #99FFFF; } td { border-width: 1pt; border-style: solid; border-color: #000000; } .spalte1 { background-color: #C0C0C0; width: 15%; } .farbe1 { background-color: #99CCFF; } .farbe2 { background-color: #FFFF00; } .farbe3 { background-color: #FFFFFF; } .farbe4 { background-color: #FF0000; } .farbe5 { background-color: #00CC00; } .farbe6 { background-color: #FF00FF; } .farbe7 { background-color: #FFCCFF; } .farbe8 { background-color: #800080; } .farbe9 { background-color: #FFCC00; } .titel { width: 1300px; height: 100px; background-color: #FFFFFF; } .navioben { width: 1300px; height: 45px; background-color: #494949; color: #D2D2D2; padding-bottom: 15px; padding-top: 15px; } .navilinks { width: 140px; height: 1800px; background-color: #E0E0E0; color: #000000; float: left; } .inhalt { text-algin: left; width: 1010px; height: 1800px; background-color: #FFFFFF; overflow: auto; float: left; } .navirechts { width: 150px; height: 1800px; background-color: #FFFFFF; color: #000000; float: left; } /* KONTAKTFORMULAR */ form { background-color: #d9d9d9; width: 370px; /* Breite des Formulars */ padding: 20px; border: 1px solid #8c8c8c; } label { /* Beschriftung auf eigener Zeile */ display: block; cursor: pointer; /* Mauszeiger wird zur Hand */ } input#besuchername, input#besuchermail, textarea { width: 300px; border: 1px solid #8c8c8c; margin-bottom: 1em; } textarea { height: 7em; } input:focus, textarea:focus { background-color: #C0C0C0; } <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="formatindex.css" /> <meta chraset="UTF-8"> <title> BKWI - Schulplan </title> <link href="bilder/favicon.ico" rel="shortcut icon"> </head> <body> <div class="titel"> <img src="bilder/bkwi.png" alt="BKWI" width="200" height="90" /> </div> <div class="navioben"> <a href="index.html"><img src="bilder/930.png" alt="BKWI" width="43" height="43"/></a> <a href="schulplan.html">Schulplan</a> <a href="informatik.html">Informatik</a> <a href="anmeldeformular.html">Anmeldeformular</a> <a href="kontakt.html">Kontakt</a> </div> <div class="navilinks"> <a href="#haupt" class="links"><h3>Hautpfächer</h3></a> <a class="links" href="#neben"><h3>Nebenfächer</h3></a> <a class="links" href="#pru"><h3>Prüfungen</h3></a> </div> <div class="inhalt"> <table> <colgroup> <col class="spalte1" /> <col class="spalte1" /> <col class="spalte1" /> <col class="spalte1" /> <col class="spalte1" /> <col class="spalte1" /> </colgroup> <tr> <th> Zeit </th> <th> Montag </th> <th> Dienstag </th> <th> Mittwoch </th> <th> Donnerstag </th> <th> Freitag </th> </tr> <tr> <td> 7:45-8:30 </td> <td rowspan="2"> - </td> <td class="farbe5" rowspan="3"><a class="2" href="#haupt">BWL</a></td> <td class="farbe5" rowspan="2"> BWL/IKT </td> <td class="farbe3" rowspan="2"> WI </td> <td class="farbe8" rowspan="2"> GW </td> </tr> <tr> <td> 8:30-9:15 </td> </tr> <tr> <td> 9:35-10:20 </td> <td class="farbe3" rowspan="2"> WI </td> <td class="farbe7" rowspan="2"> GGK </td> <td class="farbe5" rowspan="2"> BWL </td> <td class="farbe9" rowspan="2"> BM </td> </tr> <tr> <td> 10:20-11:05 </td> <td class="farbe6"> Religon </td> </tr> <tr> <td> 11:20-12:05 </td> <td class="farbe1" rowspan="2"> Mathe </td> <td class="farbe2" rowspan="2"> Deutsch </td> <td class="farbe5" rowspan="2"> BWL </td> <td class="farbe4" rowspan="2"> Englisch </td> <td class="farbe3" rowspan="2"> WI </td> </tr> <tr> <td> 12:15-13:00 </td> </tr> <tr> <td> 13:00-13:45 </td> <td colspan="5"> M I T T A G S P A U S E </td> </tr> <tr> <td> 13:50-14:35 </td> <td class="farbe2", rowspan="2"> Deutsch </td> <td> </td> <td> </td> <td> </td> <td class="farbe4", rowspan="2"> Englisch </td> </tr> <tr> <td> 14:45-15:20 </td> </tr> </table> <h3> Hautpfächer </h3> <a id="haupt" </a> </br> Betriebswirtschaftslehre <a id="bwl" </a> </br> 6. Arbeiten im Jahr. </br> Deutsch </br> 4. Arbeiten im Jahr. </br> Englisch </br> 4. Arbeiten im Jahr. </br> Mathe </br> 3. Arbeiten im Jahr. </br> <h3>Nebenfächer</h3> <a id="neben" </a> </br> Büromangment </br> 2. Arbeiten im Jahr. </br> Gesamtwirtschaft </br> 2. Arbeiten im Jahr. </br> Geschichte </br> 2. Arbeiten im Jahr. </br> IKT </br> 2. Arbeiten im Jahr. </br> Religon </br> 2. Arbeiten im Jahr. </br> Wirtschaftsinformatik </br> <a id="wi" </a> Ihr arbeitet euch zu einem Programmierer an. Die ersten Schritte werdet ihr in EXCEL tätige. Danach kommen Datenbanken tran,wie sie überall zu finden sie wie z.B. bei Amazon. Falls ihr das abgearbeitet habt kommt HTML mit PHP. Und im zweiten Jahr witmet ihr euch nur noch den Programmieren. 6. Arbeiten im Jahr. <h3>Prüfung</h3> <a id="pru" </a> Abschlussprüfung Fachhochschulreife in den schriftlichen Prüfungsfächern: <p> Deutsch,Englisch, Betriebswirtschaftslehre,Mathematik und einem mündlichen Prüfungsfach. </p> </div> <div class="navirechts"> <br /><br /><br /><br /><br /> <a href="hausaufgaben.html" class="icon"><img src="bilder/ha1.png" alt="Hausaufgaben" onmouseover="src='bilder/ha2.png'" onmouseout="src='bilder/ha1.png'" width="35" height="35" /></a> <a href="information.html"><img src="bilder/info1.png" alt="Informationen" onmouseover="src='bilder/info2.png'" onmouseout="src='bilder/info1.png'" width="35" height="35" /></a> <a href="kontakt.html"><img src="bilder/mail.png" alt="E-Mail" onmouseover="src='bilder/mail2_1.png'" onmouseout="src='bilder/mail.png'" width="35" height="35" /></a> </div> </body> </html>
  1. Hallo mizekatze,

    möchtest du deine Seite nicht kurz auf einem kostenlosen Webspace wie z.B. http://www.bplaced.net/ hochladen, alternativ auch http://jsfiddle.net/ das würde die Fehlersuche für alle extrem erleichtern.

    Ich gehe mal davon aus, dass sich keiner eine RAR Datei herunterlädt, sich diese entpackt und dann lokal die Seite aufruft.

    1. Hallo mizekatze,

      möchtest du deine Seite nicht kurz auf einem kostenlosen Webspace wie z.B. http://www.bplaced.net/ hochladen, alternativ auch http://jsfiddle.net/ das würde die Fehlersuche für alle extrem erleichtern.

      Ich gehe mal davon aus, dass sich keiner eine RAR Datei herunterlädt, sich diese entpackt und dann lokal die Seite aufruft.

      Okay,danke für den Tipp. :)

      Hier ist die Seite: http://mizekatze.bplaced.net/

      1. Hallo mizekatze,

        Hier ist die Seite: http://mizekatze.bplaced.net/

        da bekomme ich derzeit noch die Meldung "Diese Seite ist leider nicht mehr verfügbar oder noch nicht aktiv." Aus eigener Erfahrung kann ich sagen, dass es immer ein paar Minuten geht, bis die Seite vollständig online verfügbar ist.

        1. Ist jetzt oben :)

          http://mizekatze.bplaced.net/index.html

          1. Liebe Mitdenker, liebe Wissende, liebe Neugierige,

            http://mizekatze.bplaced.net/index.html

            wegen der Umlaute: das sieht irgendwie doppelt codiert aus.

            61 6c 74 65 6e 64 65 20 54 ef bf bd 74 69 67 6b

            Ich weiß aber leider nicht, wie ich das hier darstellen kann...

            Spirituelle Grüße
            Euer Robert
            robert.r@online.de

            -- Möge der wahre Forumsgeist ewig leben!
    2. @@Jnnbo

      alternativ auch http://jsfiddle.net/

      Für HTML/CSS gibt es bessere Alternativen: Codepen, Dabblet.

      Das würde die Fehlersuche für alle extrem erleichtern.

      LLAP

      -- „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. Hallo mizekatze,

    bevor du verzweifelst schau dir deinen Quelltext mit einem Validator an: zB für Firefox den html Validator und deine Seite mit der Browserkonsole [Strg Shift K], damit hast du zwei sehr hilfreiche Tools in der Hand die dir unter die Arme greifen und deine Schnurrhaare auf die Fehler im Quellcode der html-Datei und der formatindex.css stupsen.

    Nur so findest du ohne zu verzweifeln die offensichtlichsten Ungereimtheiten wie zB: <meta chraset="UTF-8"> das kann nicht funktionieren, <meta charset="UTF-8"> funktioniert. Oder in der .css zB: „text-underline:none“ nie davon gehört.

    Hoffe dich wieder zum Schnurren gebracht zu haben... lg quincunx

    1. Erstmal lieben dank für den Rechtschreibfehler.Aber wieso zeigt mir FireFox dann noch immer kein ä an ? :( jedoch klappt es hier mit dem Umlauten http://jsfiddle.net/5v5erwk5/ und textunderlinde bedeutet das der link nicht unterstrichen werden soll,habe das mal im internet wo aufgegriffen

      1. Aloha ;)

        und textunderlinde bedeutet das der link nicht unterstrichen werden soll

        Hmm... Die alten Hasen kennen dazu aber eher text-decoration:none... quincunx wollte dich darauf hinweisen, dass text-underline (noch?) nicht implementiert ist.

        Selbst wenn es text-underline in Zukunft geben würde (worauf zumindest der Eintrag in unserem Schnellindex hinweist, oder ist das ein Fehler?), wäre es sicherer, noch eine Weile die "alte" Methode zu nutzen, da diese in aktuellen Browsern sicher unterstützt wird.

        Vielleicht kann jemand mit besserer Quellenlage kurz was dazu sagen, ob es text-underline offiziell geben wird?

        Grüße,

        RIDER

        -- Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
        Erreichbar meist Mittwochs ab 21 Uhr im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de).

        # Facebook # Twitter # Steam # YouTube # Self-Wiki #

        ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
        1. Hallo

          Selbst wenn es text-underline in Zukunft geben würde

          Vielleicht kann jemand mit besserer Quellenlage kurz was dazu sagen, ob es text-underline offiziell geben wird?

          Ganz ohne Kenntnis der Quellenlage kommt mir text-underline komisch vor. Die Aufgabe wird doch von text-decoration: underline; ausreichend erschlagen. Google gibt mir als einziges Ergebnis auf der ersten Seite, das eben nicht auf text-decoration verweist, die MDN-Seite zu text-underline-position aus.

          Tschö, Auge

          -- Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war. Terry Pratchett, “Wachen! Wachen!
        2. Hallo Camping_RIDER,

          und textunderlinde bedeutet das der link nicht unterstrichen werden soll

          Müßte es nicht textunterderlinde heißen?

          Selbst wenn es text-underline in Zukunft geben würde (worauf zumindest der Eintrag in unserem Schnellindex hinweist, oder ist das ein Fehler?), wäre es sicherer, …

          Fehler. Korrigiert.

          Vielleicht kann jemand mit besserer Quellenlage kurz was dazu sagen, ob es text-underline offiziell geben wird?

          Es gibt text-underline-position. Daraus hat wohl irgendjemand geschlossen, dass es die anderen underlines auch geben müssse.

          Bis demnächst
          Matthias

          -- Signaturen sind bloed (Steel) und Markdown ist mächtig.
      2. Liebe Mitdenker, liebe Wissende, liebe Neugierige,

        Aber wieso zeigt mir FireFox dann noch immer kein ä an ? :(

        Weil der Bytestream immer noch doppelt codiert ist?

        Spirituelle Grüße
        Euer Robert
        robert.r@online.de

        -- Möge der wahre Forumsgeist ewig leben!
        1. Weil der Bytestream immer noch doppelt codiert ist?

          Ich habe keine Ahnung was das ist. Vielleicht wäre eine Erklärung angebracht. Google wirft nur noch mehr Fragen auf :)

          1. Tach!

            Weil der Bytestream immer noch doppelt codiert ist?

            Ich habe keine Ahnung was das ist. Vielleicht wäre eine Erklärung angebracht.

            Dann bitte einmal Grundlagen zur Zeichenkodierung lernen.

            dedlfix.

            1. @@dedlfix

              Dann bitte einmal Grundlagen zur Zeichenkodierung lernen.

              Den Artikel finde ich zum Lernen nicht besonders gelungen: Begrifflichkeiten erst am Ende statt gleich am Anfang, viel Info auf einen Haufen anstatt verdauliche Häppchen. (Ein Wiki bietet ja die Möglichkeit, Abschnitte auf mehrere Seiten aufzuteilen.)

              Da finde ich Zeichencodierung für Anfänger gelungener. (Der hässliche gelbe Kasten in der deutschen Übersetzung wird in den nächsten Tagen verschwinden. Bis dahin schonmal vorab die Aktualisierung.)

              Danach kann man sich Zeichencodierungen: grundlegende Konzepte und Angabe der Zeichencodierung in HTML zu Gemüte führen.

              LLAP

              -- „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
              1. @@Gunnar Bittersmann

                Da finde ich Zeichencodierung für Anfänger gelungener. (Der hässliche gelbe Kasten in der deutschen Übersetzung wird in den nächsten Tagen verschwinden…)

                Jetzt waren’s am Ende nur Stunden.

                LLAP

                -- „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          2. Liebe Mitdenker, liebe Wissende, liebe Neugierige,

            Weil der Bytestream immer noch doppelt codiert ist?

            Ich habe keine Ahnung was das ist. Vielleicht wäre eine Erklärung angebracht. Google wirft nur noch mehr Fragen auf :)

            Du weißt aber, was Codierung bedeutet?
            ASCII, Windows 1252, ISO-8859-1, UTF-8, usw.

            Mit welchem Editor arbeitest Du?
            Wie speicherst Du die Dateien ab? Wie sieht denn die Datei aus, wenn Du sie mit dem Editor wieder öffnest?
            Welche Codierungseinstellung hat der dann?

            Spirituelle Grüße
            Euer Robert
            robert.r@online.de

            -- Möge der wahre Forumsgeist ewig leben!
          3. mit welchem Editor erstellst du deine html-Datei?

            Beim Speichern musst du darauf achten welche Kodierung du verwendest. In deinem Fall, da du <meta charset="UTF-8"> gewählt hast, was die richtige Wahl ist, musst du selbstverständlich die Datei auch in UTF-8 abspeichern, ansonsten gibt es diese Ersetzungszeichen �.

            gruesse qx

            1. mit welchem Editor erstellst du deine html-Datei?

              Notepad++

              Beim Speichern musst du darauf achten welche Kodierung du verwendest. In deinem Fall, da du <meta charset="UTF-8"> gewählt hast, was die richtige Wahl ist, musst du selbstverständlich die Datei auch in UTF-8 abspeichern

              Und wie speichere ich die in UFT-8 ab? habe keine Ahnung davon,ist ein Schulprojekt eigentlich und das alles lernen wir in der Schule xd

              1. Tach!

                Notepad++
                Und wie speichere ich die in UFT-8 ab?

                Schau dir mal deinen Editor genauer an, besonders das Menü und die Ecke rechts unten.

                dedlfix.

              2. Hallo mizekatze,

                Notepad++

                In deinem Fall, da du <meta charset="UTF-8"> gewählt hast, was die richtige Wahl ist, musst du selbstverständlich die Datei auch in UTF-8 abspeichern

                Und wie speichere ich die in UFT-8 ab?

                In der Menüleiste Kodierung, dort Konvertiere zu UTF-8 ohne BOM

                Bis demnächst
                Matthias

                -- Signaturen sind bloed (Steel) und Markdown ist mächtig.
              3. Notepad++

                gut!

                Im Menue **Kodierung **„UTF-8 ohne BOM“, oder „Konvertiere zu UTF-8 ohne BOM“ auswählen, speichern und im Browser ansehen.

                Für den Firefox gibt es das Add-on HTML-Validator, welcher, wenn du den Quelltext anzeigst [Strg-U] die Seite überprüft und wie gesagt die Ungereimtheiten offenlegt ... (<a id="haupt" </a>) und da sind einige vorhanden... sehr, sehr Hilfreich selbst für alte Hasen, da es immer passieren kann, dem einen oder anderen Nonsens schnell auf die Schliche zu kommen. gr qx

                1. Vielen,vielen Dank! Hat geklappt! :) Brauche nur noch Hilfe zu den anderen Sachen :b Die Naviagtionsleisten sollten wie hier am Ende ausschauen: http://www.w3schools.com/tags/ref_colorpicker.asp

                  1. <nav id="navioben" role="navigation"> <a href="#">BKWI</a> <a href="#">Schulplan</a> <a href="#">Informatik</a> <a href="#">Anmeldeformular</a> <a href="#">Kontakt</a> </nav> body { font-size:1rem; font-family:'Verdana',Sans-Serif; } a { text-decoration:none; font-size:1.5rem; } a:link { color:Silver; } a:active { color:Red; } a:visited { color:Gold; } a:hover { background-color:Black; } #navioben { background-color:Dimgray; } #navioben a { display:inline-block; padding:15px 8px; } #navioben a:focus { color:Green; background-color:Lightgrey; } @media screen and (max-width:450px) { #navioben a { display:block; } }

                    Damit kannst du spielen...

                    gruese qx

                    1. Hi,

                      a:link { color:Silver; } a:active { color:Red; } a:visited { color:Gold; }

                      meist ist die Reihenfolge :link, :visited, :focus, :hover, :active die sinnvolle. Bei Deiner Reihenfolge wird der :active-Effekt bei bereits besuchten Links nicht wirksam.

                      cu,
                      Andreas a/k/a MudGuard

  3. Tach!

    Ich greif mir mal einen Punkt raus:

    Außerdem möchte das der Link auf dem man sich gerade befindet z.B. Grün angezeigt werden soll,jedoch wenn ich bei a:active es ändere zeigt er es nur für einen kurzen Moment,wie mache das richtig das der Link auf dem man sich gerade befindet Gründ gemacht wird bis man auf einen anderen klickt.

    Der Link ist nur für kurze Zeit :active, dann wird die Seite neu geladen und es gibt nichts aktives mehr. Ein Link der auf dieselbe Seite verweist ist ungefähr so sinnvoll wie ein Wegweiser zum Rathaus direkt an dessen Eingangstür. Dass man in der Navigation anzeigen möchte, wo man ist, ist sinnvoll, aber nicht als Link. Jedenfalls wirst du nicht umhinkommen, das zur aktuellen Seite gehörende Element anders zu kennzeichnen als mit :active. Eine Klasse active wäre beispielsweise eine Möglichkeit.

    dedlfix.