CSS-Frage

    Wie deklariere ich nochmal im externen CSS Stylesheet id´s?

    z.B. habe ich

    Code
    h1 {
 font-size: 20pt;
 font-weight: bold;
}

    Nun möchte ich unterschiedliche Links unterschiedlich färben, also habe ich z.B.:

    Code
    <a id="extern" href="http://de.selfhtml.org/">selfhtml</a>

    Wie kann ich nun die id extern im css definieren? Irgendwie steh ich da gerade auf dem Schlauch und finde auch unter meinem Beispiel Link nicht die richtige Stelle.

    Dann benutzt class und nicht ID. IDs sind für einen einzigartigen Namen und nicht zum einfärben mehrerer unterschiedlicher elemente.


    Im Übrigen ist es egal ob die klasse/id extern oder intern deklariert wird. Wird beides mal gleich geschrieben:
    http://de.selfhtml.org/css/formate/einbinden.htm
    http://de.selfhtml.org/css/formate/ze…dividualformate
    http://de.selfhtml.org/css/formate/zentrale.htm#klassen

    Vielen Dank Buggy, dann lag es an # im css File.

    Die Links sehe ich mir gleich mal an um zu verstehen warum Du meinst besser class anstatt id zu verwenden, das erschließt sich mir nämlich noch nicht. Allerdings vorher auf den 40. Geburtstag meines Bruders fahren.

    Noch einen schönen Feiertag gewünscht und zieh den Bollerwagen nicht zu lange ;)

    Eine bestimmte ID kannst du nur fest bei einem einzigen Element vergeben. Kein anderes Element darf diese ID erhalten. Damit kann man per CSS natürlich auch nur dieses eine element damit ansprechen.

    IDs sollte man nur dann vergeben, wenn man Bereiche damit benennen (so kann man dann relative Angaben für die Unterelemente des mit der ID benannten Elements benutzen), oder sie per Javascript anfassen will.

    Class reicht in der Regel für das meiste, wenn es nur darum geht was umzufärben und kann über dies auf mehrere Elemente angewendet werden.

    Ja eben. Wenn du mehrere externe Links hast, ist es eben sinnvoll class zu benutzen. Dan kannst du nämlich sowas machen.

    Code
    <a class="extern">Bla</a>[...]
<a class="extern">Bla</a>[...]
<a class="extern">Bla</a>[...]


.extern {color:red}

    und musst nicht sowas machen:

    Code
    <a id="extern1">Bla</a>[...]
<a id="extern2">Bla</a>[...]
<a id="extern3">Bla</a>[...]


#extern1,#extern2,#extern3 {color:red}


    was ziemlich schwachsinnig wäre...

    In modernen Browsern kannst du übrigens auch einfach anhand des href-Attributes filtern.

    Zitat von Fraggle

    Es geht eigentlich nur darum um zwischen internen und externen Links optisch zu unterscheiden, von daher ist es nur ein tag für a hrefs, also einem einzigen Element.


    Dann hast Du mich missverstanden. Mit einem einzigen Element meine ich nicht alle A-Tags, sondern nur EINEN einzigen A-Tag im gesamten Dokument. Wenn Du etwas für ALLE A-Tags gültig machen willst, dann kannst du direkt schreiben:

    Code
    a{
 attribut:wert;
}


    Aber auch das wird wohl nicht das sein, was Du willst. Du willst ja nur die externen Links speziell machen.

    Dazu gibt es 2 möglichkeiten... entweder die class verwenden, oder eine spezielle Selektor. Der Selektor wäre geil, der IE blickt den aber nicht. Ob du den benutzt, ist also Deine Sache.

    Code
    a.extern{
 color:green;
}


<a href="#">Lalala1</a>
<a href="#">Lalala2</a>
<a class="extern" href="#">Lalala3</a>
<a href="#">Lalala4</a>
<a class="extern" href="#">Lalala5</a>


    In diesem Fall wären nur die Linjs mit der class "extern" grün.

    Der Selector würde so gehen:

    Code
    a[href~=http://]{
 color:green;
}


    damit würden alle Links grün, deren href absolut ist, also mit http:// anfangen.

    Danke für die Erklärung. Leider muß die Seite IE kompatibel bleiben, zumindest weitesgehend, da es ein engagiertes Projekt werden soll, auch wenn derzeit noch meine Übungsbaustelle auf ihr zu sehen ist. Der Selektor entfällt somit.

    Was ich aber nicht ganz verstehe sind Deine Class-Beispiele im Unterschied zu den ids.
    Denn ich habe im Endeffekt jetzt Dein class System genauso nur mit ids gelöst. Also jeder externe Link enthält id="extern" und im css ist ein einziges mal die id definiert. Oder ist das unschöne html Schreibweise?

    Es ist festgelegt, das eine ID innerhalb eines HTML-Dokumentes nur einmal definiert sein darf. Sprich nach dem HTML-standard (nach ALLEN HTML-Standards) ist

    Code
    <a href=".." id="extern">..</a><a href=".." id="extern">..</a>

    falsch, da die ID "extern" zweimal vergeben wurde.

    Code
    <a href=".." class="extern">..</a><a href=".." class="extern">..</a>

    ist hingegen richtig, die beiden Links gehören zur Klasse (Art, Gruppe, wie du willst) der externen Links.

    Also nochmal: Mit ID bezeichnest du EIN einzelnes einzigartiges Element (z.B. die Kopfzeile) mit class eine ganze Gruppe von Elementen.
    (Ein Element kann übrigens zu mehreren Klassen zugeordnet werden. in dem Fall schreibt man einfach class="klasse1 klasse2" , ob der IE das kann: k.A.)

    Gruß Hannes

    Signaturen sind doof.

    Zitat von HaMF

    (Ein Element kann übrigens zu mehreren Klassen zugeordnet werden. in dem Fall schreibt man einfach class="klasse1 klasse2" , ob der IE das kann: k.A.)


    Jopp. Kann er.

    Zitat von bugcatcher

    Der kann ne Menge. Nur meist nicht das richtig Wichtige.


    Der kann ne Menge, Aber das Wichtige meist nicht richtig.

    Signaturen sind doof.

    Vielen Dank Jungs.
    Jetzt hab ich es kapiert. Ist mehr oder minder eine Definitionssache, aber werde ich dann anpassen.

    Eine Frage nur noch.
    Bedeutet dann im css

    Code
    CLASS:
tagname.meineClass{
 attribut:wert;
}

    auf meine Sache übertragen

    Code
    CLASS:
a.extern{
 attribut:wert;
}

    Also "a" für Anker? Bin gerade unter Zeitdruck, sonst würde ich die Quellen von Buggy nochmal durchlesen. Oder wie soll ich "tagname" verstehen?

    Edit, hat sich erledigt, hab schnell nochmal in den Links nachgesehen. Ist genauso wie ich meinte. Danke nochmals.

    Noch 4 Fragen haben sich ergeben, wozu ich leider noch nichts fand (google und selfhtml, vielleicht weil ich nicht die richtigen Suchbegriffe nutzte):

    1.) meine Seite ist auf 1024er Auflösung optimiert. Nun ist es so, daß bei 800er Auflösung sich Probleme ergeben. Dies liegt daran, daß ich Div Container so eingestellt habe, daß sie auf 1024 Auflösung klappen, aber bei zuvielen Inhalten diese die Breite sprengen und daher einen Zeilenumbruch bewirken, der das Layout optisch stört.

    Gibt es eine Möglichkeit die Höhe eines Div Containers im css abhängig von der genutzten Bildschirmauflösung zu definieren?

    2a.) Arbeit ich unschönerweise an einer Stelle mit einem iframe. Mir fällt bislang keine Alternative ein. Ich habe zwei Div Container oben, horizontal als Banner und Menüleiste, dann kommt ein Main Div Container und darunter ein bottom Div Container.
    Im Main ist in einem Fall ein iframe definiert, da in diesem bestimmte andere Dateien geöffnet werden sollen. Wie kann man das galanter machen? Kann ich eine html Datei z.B. mit target bestimmte Div-Container definieren? Welche andere html Basis, ohne frames kann man für soetwas nutzen?

    2b.) Teilweise werden bei Punkt 2 Scrollbalken nötig sein. So ist bislang man iframe gebettete Datei länger als der iframe selber. Der entstehende Scrollbalken nervt, kann ich ihn ausblenden ohne die Scrollfunktion zu stoppen? Erübrigt sich vielleicht ja auch, wenn eine Alternative zu 2a gefunden wird :)

    3.) Wie definiere ich relative Positionen von Bildern am besten?
    Align center ist ja transitional, ich will meine Seite aber eigentlich auch strict korrekt machen. Demnach kann ich align center und middle nicht verwenden, da die in strict entfallen.

    Besten Dank nochmals.

    Zitat von bugcatcher
    Code
    a[href~=http://]{
 color:green;
}

    damit würden alle Links grün, deren href absolut ist, also mit http:// anfangen.


    Da fehlen noch Anführungszeichen, aber auch dann funktioniert das bei mir nicht, kann es das denn überhaupt? W3C sagt zu Attribut-Selektoren

    Zitat

    E[foo~="warning"] Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning".


    Somit würde das nur dann greifen, wenn im href http:// stehen würde, gefolgt von einem Leerzeichen.

    Ähm. Stimmt. Nicht ~ sonder * (ich benutze so selten Dinge die im IE nicht gehen.... Drecks Marktführer. Hab ich wohl was durcheinander geworfen) .... ist das schon css3? Moz-Only ist es mal nicht, da Opera es auch kann.

    Code
    a[href*="http://"]{
 color:green;
}


    Das mit dem ~ ist eigentlich nur für das class-Attribut brauchbar. Damit hielt sich der nutzen immer in Grenzen (bzw. ich hab nie einen Nutzen darin gefunden).

    Zitat von bugcatcher

    Das mit dem ~ ist eigentlich nur für das class-Attribut brauchbar. Damit hielt sich der nutzen immer in Grenzen (bzw. ich hab nie einen Nutzen darin gefunden).

    Für rel/rev oder lang (obwohl es da glaub die Pseudoklasse :lang(xy) gibt) könnte man das auch verwenden. Oder halt im eigenen XML-Dialekt...