• hallo ihr


    wie schafft man es, das links nicht lila werden wenn sie einmal angeklickt wurden und blau wenn sie noch nicht angeklickt wurden


    vielen dank für eure hilfe


    mfg


    carli

  • Dafür musst du einfach in deiner CSS-Datei, oder im CSS-Bereich, wenn du keine ausgelagerte Datei hast folgenden Code verwenden:


    a:link, a:visited
    {
    color: #123456
    }


    a:active, a:hover
    {
    color:#654321
    }


    a:link steht für einen normalen Link, wenn er noch nicht angeklickt wurde, und a:visited ist ein Link, wenn man ihn schon benutzt hat.
    a:active ist der Zustand, wenn man den Link anklickt und a:hover der, wenn man mit der Maus über dem Link ist.
    Darüber hinaus kannst du natürlich noch mit anderen Eigenschaften rumexperimentieren:


    font-family: Arial;
    font-size: 20px;
    display:block;
    text-decoration: none/underline/overline;
    color: #FFFFFF;
    background-color: #405090;
    border: 4px solid #007700;


    HF und wenn noch was unklar ist einfach fragen!

  • vielen dank


    ich hab da noch ne andere frage .... :)


    wenn ich eine Html seite mit einer tabelle, welche 2 spalten hat (eine navi eine text bzw. bilder oder anderer inhalt) kann ich ja den hintergrund der tabelle per css ändern was dann so aussieht


    table { background-image: url(...); ]


    dazu kommen noch eineig befehle die das scrollen usw. verhindern.


    jetzt zur frage:
    wie kann ich den hintergrund 2. spalte separat ändern?
    ich habs schon mit extra css-files versucht, auch mit ausklammern dieses bereichs aber nichts hat funktioniert.


    vielen dank für die hilfe


    mfg
    carli

  • so meine css file sieht jetzt folgendermaßen aus.


    body {background-color: #FFFFFF;
    background-attachment: fixed;
    background-repeat: no-repeat;}
    border {color: #FFFFFF; }
    table { background-image: url(...) ;
    background-attachment: fixed;
    background-repeat: no-repeat;}
    a:link, a:hover {color: #FFFFFF; border: 2px solid #FFFFFF;}
    a:visited, a:active {color: #FFFFFF border: 2px solid #FFFFFF; }


    wenn ich mit der maus jetzt über einen link (ich habe grafiken als lnks benutzt) fahre bekommt der einen weißen rand, der standard lila bzw. blaue rand der bei jedem link erscheint ist aber immer noch da.
    was ist falsch?


    mfg carli

  • Also um bei Tabellen den einzelnen Spalten extra Eigenschaften zuzuordnen, musst du das CSS nicht für die ganze table, sondern einfach für ein inzelnes td definieren.
    Ich weiss ja nicht, wie du das CSS einbindest, aber so wie es aussieht, machst du es direkt mit ins HTML-Document, was aus meiner Sicht absolut nicht empfehlenswert ist.
    Mein Tipp also: am besten mal hier (unter dem Punkt 3) anschauen, wie man CS-Sheets auslagert.
    Wenn du nun deine CSS-Angaben in eine ausgelagerte Datei schreibst, kannst du nicht mehr schreiben
    <table style="background-color: #FA15....">
    denn ein guter und sauberarbeitender HTMLer schreibt kein CSS in seine HTML-Dateien :)
    Du musst die einzelnen Elementen also Klassen bzw. IDs zuordnen. Das geht, in dem du schreibst
    <table id="tabelle1" class="tabellen">
    Nun wird unsere Tabelle der Klasse der Tabellen zugeordnet (Klassen fassen mehrer Elemente (sinnvollerweise) ähnlicher Art zusammen) und noch mit der ID tabelle1 definiert. Dabei ist zu beachten, dass IDs nur einmalig in einem HTML-Document vergeben werden können. Eine andere Tabelle hätte dann beispielsweise die ID="tabelle2". So können Tabellen allgemein etwa eine breite von 200px haben. Für unsere tabelle1 können wir dann noch bestimmen, dass sie 150px breit ist. Tabelle2 wäre dann vielleicht 250px breit (Zuordnen in Klassen spart kurzgesagt Zeit und Arbeit :) ) (siehe auch: CLASS und ID - Bezeichner für CSS-Elemente)
    .
    Nun mal zu deinem Code aus der CSS-Datei:



    Damit bei einem Bildlink kein Rahmen angezeit wird, musst du die Rahmenbreite extra immer noch auf 0 stellen.
    Am besten wäre es da, wenn du jeden Bildlink der Klasse class="bildlink" zuordnest.
    In der CSS-Datei müsste dann folgendes stehen:


    a.bildlink:link, a.bildlink: visited
    {
    border: 0px solid #000000;
    }


    /*vielleicht würde auch schon ausreichen:*/
    .bildlink
    {
    border: 0px solid #000000;
    }


    /* was nun wie zuverlässig funktioniert, musst du am besten selbst ausprobieren */




    mfg Foster :)

  • hallo nochmal


    also mein mein style-sheet ist bei mir eine ausgelagerte datei genannt wie in punkt 3: design.css
    es ist mit der befehlszeile aus punkt 3 in meine seite eingebunden


    nun noch eine frage:
    wie genau weise ich diese id zu? muss ich sie in den html einbinden und was hat es mit dem befehl "class" auf sich?


    danke für die ausführliche hilfe


    mfg carli

  • Zuweisen:
    In der HTML-Datei:
    <table id="tabelle1"><tr><td>.....
    <div id="hauptdiv" class="div">.....


    In der CSS-Datei:
    #tabell1
    {
    width: 200px;
    ......
    }


    .div
    {
    border: 0px solid #000000;
    }


    Dont forget: <!-- m --><a class="postlink" href="http://www.html-seminar.de/class_und_id.htm">http://www.html-seminar.de/class_und_id.htm</a><!-- m -->


    Und class Ordnet ganz einfach ein beliebiges Element einer Klasse zu. Alle Elemente, die dieser Klasse zugeordnet sind haben dann die gleichen Eigenschafte (bzw. diese Eigenschaften, die durch die Klasse zugewiesen werden).
    Nehmen wir beispielsweise folgenden Code:

    Code
    <!-- Divs sind etwas ähnliches wie <table>, nur einfacher und hauptsächlich für das Layout der Page gedacht (bestehen aus simplen Kästchen) -->
    <div id="ldiv1" class="linkdiv"></div>
    <div id="ldiv2" class="linkdiv"></div>
    <div id="ldiv3" class="linkdiv"></div>
    <div id="cdiv1" class="contentdiv"></div>
    <div id="cdiv2" class="contentdiv"></div>


    Nun der CSS-Code:


    Somit haben alle divs, die der Klasse linkdiv angehören die Eigenschaft der Breite und Farbe gemeinsam. Für die einzelnen Links wird aber durch die ID eine extra Position definiert, sowie das spezielle Hintergrundbild (mir fällt gerade auf, dass dadurch die Hintergrund-Farbe sinnlos wird, aber egal... :) ).
    Würde man hier keine Klassen verwenden, müsste man für alle Divs (div1-div4) die Breite und Farbe extra definieren und bei einer Änderung der Werte immer wieder alles verändern.
    Ich hoffe ich habe Funktionsweise und Sinn der IDs und CLASSes damit verständlich rübergebracht :)

  • so ich poste jetzt mal meinen html code
    das mit den buttons hat nun funktioniert aber der hintergrund von beiden tabellen-spalten bleibt weiß



    <html>


    <head>


    </head>


    <link rel="stylesheet" href="C:\Dokumente und Einstellungen\Peter\Eigene Dateien\html\design.css" type="text/css">


    <body>


    <table height="830" >


    <tr>


    <div id="navi" class="table" >


    <td width="150" >


    <a href="Test.html"> <img src="home.jpg" width="150" height="70" class="bildlink" /> </a>


    <a href="aboutme.html"> <img src="aboutme.jpg" width="150" height="70" class="bildlink" /> </a>


    <a href="bilder.html"> <img src="Bilder.jpg" width="150" height="70" class="bildlink" /> </a>


    </td>


    </div>


    <div id="content" class="table">


    <td >


    </td>


    </div


    </tr>


    </table>


    </body>
    </html>

    so und nun das zugehörige cs-sheet

    .bildlink {
    border: 0px solid #000000;
    }


    .table {
    background-color: #000000
    }


    #navi {
    background-image: url(C:\Dokumente und Einstellungen\Peter\Eigene Dateien\html\bgtableleft.jpg);
    }
    #content {
    background-image: url(C:\dokumente und einstellungen\peter\eigene dateien\html\frodohasfailed.jpg);
    }


    soweit ichs verstanden habe müsste das jetzt richtig sein aber es tut sich nichts

  • Also das mit den DIVs hast du wohl vollkommen falsch verstanden.
    DIVs haben nix mit Tabellen zu tun. Ein Div besteht nur aus
    <div> Inhalt <div>.
    Und Bildet einen einfachen Rahmen.
    Wenn du nun überall deine <div> und </div> rauslöscht und die IDs und CLASSes, die du hinter <div geschrieben hast bei den darauffolgeden <td> wieder einfügst, wird die Linke Spalte später im Browser schwarz dargestellt.
    Ich hoffe damit klappt alles, so wie du willst. Nur noch eins:
    Den vollständigen Pfad von deiner Festplatte anzugeben ist sinnlos.
    1. weil es einfach unnötige Schreibarbeit ist und
    2. weil es nicht mehr klappt, wenn du die Dateien auf einen Internet-Server geladen hast.
    Also: einfach alles unnötige weglassen
    "C:\dokumente und einstellungen\peter\eigene dateien\html\frodohasfailed.jpg"
    Die Datei, die dann auf dieses Bild zugreift, muss dann natürlich im gleichen Ordner liegen. Am besten wäre es allerdings, wenn du der Sauberkeit halber einen extra Ordner für deine Bilder anlegst und der Pfad dann also heisst:
    src="bilder/frodohasfeiled.jpg"


    mfg Foster

Jetzt mitmachen!

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