Ankündigung

Einklappen
Keine Ankündigung bisher.

Schriftformatierung mit CSS in einer Tabelle

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Schriftformatierung mit CSS in einer Tabelle

    Hallo Experten,

    ich durchschaue CSS noch nicht richtig und vermute, daß mir CSS einen Streich spielt.

    Auf meinen Seiten habe ich eine Kopfzeile mit einer Tabelle "table" eingerichtet, die ich mit "class="xxxx" formatiert habe.
    Die (einzige) Tabellenzeille "row" hat bei mir zwei Tabellenzellen "td". Beide td's werden mit zwei verschiedenen Klassen formatiert, da ich die Schriftgröße verändern möchte.

    In der ersten Tabellenzelle ist nur Text. In der zweiten Tabellenzelle nur ein Hyperlink mit Linktext.

    Meine Fragen:
    1. Wie bekomme ich die zweite Tabellenzelle (oder nur den Text darin) RECHTSBÜNDIG ausgerichtet?
    2. Wie erreiche ich, daß der Linktext in der zweiten Tabellenzelle ebenfalls GRAU (#DDDDDD) wird und nicht schwarz, obwohl ich in css in der Klassendefinition bereits die Farbe #DDDDDD vorgeschrieben habe. In der ersten Tabellenzelle klappt das, in der zweiten nicht. (Nur beim Überfahren mit der Maus wird der Text grau, das habe ich bereits hinbekommen)

    Einen direkten Link auf die Beispielseite meiner Homepage kann ich nicht setzen, da ich mit Frames arbeite. Daher hier der "Klickweg": erst auf www.halloneptun.de, ==> Tauchen und mehr ==> Das bin ich.

    Auszug aus dem HTML-Quelltext der Seite "Das bin ich" (nur die Kopfzeile):

    Code:
    </head>
    <body class="textnormal">
    <a name="oben"></a>
    
    <table class="chapterheadborder-tum" style="">
    <tr>
     <td class="chapterheadtext-tum">Das bin ich</td>
     <td class="chapterheadtextsmall-tum"><a href="tauchkarriere-kurz.html" target="main" title="">Stationen meiner Tauchkarriere</a></td>
    </tr>
    </table>

    Verwendeter CSS-Code (Ausschnitt):

    Code:
    body {
    	margin-left: 10pt;
    	margin-top: 10pt;
    	margin-right:10pt;
    	background-color:#DDDDDD;
    	color:#000000;
    	}
    
    .textnormal {
    	font-size: 10pt;
    	color:#000000;
    	line-height: 14pt;
    	text-align: justify;
    	font-family: verdana, arial, sans-serif;
    	}
    
    a:link {
    	text-decoration:none;
    	color: black;}
    a:visited {
    	text-decoration:none;
    	color: black;}
    a:hover {
    	/* font-style:italic; */
    	text-decoration:underline;
    	color: blue;}
    a:active {
    	text-decoration:none;
    	color: black;}
    
    .chapterheadborder-tum {
    	border-style: double;
    	border-width: medium;
    	border-color: #006699;
    	width: 100%;
    	background-color: #1076A9;
    	}
    
    td.chapterheadtext-tum {
    	padding: 10px;
    	font-family: Andy, "Comic Sans MS", Verdana, sans-serif;
    	font-size: 16pt;
    	font-weight: bold;
    	color: #DDDDDD;
    	}
    
    td.chapterheadtextsmall-tum {
    	padding: 10px;
    	font-family: Andy, "Comic Sans MS", Verdana, sans-serif;
    	font-size: 11pt;
    	font-weight: normal;
    	color: #DDDDDD;
    	}
    
    .chapterheadtextsmall-tum a:hover {
    	text-decoration:underline;
    	color: #DDDDDD;
    	}
    
    .chapterheadtextsmall-tum a:link a:active a:visited {
    	text-decoration:none;
    	color: #DDDDDD;
    	}
    Sind meine o.g. Fragen/Fehler in meinem HTML-Quelltext oder im CSS-Code zu lösen?

    Ich hoffe, Ihr könnt mir helfen!!

    Grüßle vom Neptun

    P.S.: Ja, ich weiß, Frames sind verpönt. Aber ich möchte die Vor- und Nachteile in DIESEM Thread nicht diskutieren.
    Ja, auch Tabellen sind arg schlecht. Aber ich weiß nicht, wie ich die Kopfzeile anders besser hinbekomme. Bin für Ratschläge offen....
    www.halloneptun.de - Seite für Tauchsportfreunde

  • #2
    AW: Schriftformatierung mit CSS in einer Tabelle

    Mahlzeit!

    Neptun:
    1. Wie bekomme ich die zweite Tabellenzelle (oder nur den Text darin) RECHTSBÜNDIG ausgerichtet?
    Durch die Angabe "text-align:right;" im CSS-Block:
    Code:
    td.chapterheadtextsmall-tum {
        padding: 10px;
        font-family: Andy, "Comic Sans MS", Verdana, sans-serif;
        font-size: 11pt;
        font-weight: normal;
        color: #DDDDDD;
        [B]text-align: right;[/B]
        }
    Neptun:
    2. Wie erreiche ich, daß der Linktext in der zweiten Tabellenzelle ebenfalls GRAU (#DDDDDD) wird ...
    Dir fehlen in der entsprechende Definition nur ein paar Kommas:
    Code:
    .chapterheadtextsmall-tum [B]a, a:link, a:active, a:visited[/B] {
        text-decoration:none;
        color: #DDDDDD;
        }
    mfg
    dhx

    Kommentar


    • #3
      AW: Schriftformatierung mit CSS in einer Tabelle

      Hallo dhx!

      Vielen Dank für Deine superschnelle Antwort und die klar formulierten Lösungen! Du bist ja echt Klasse!

      Also auf den Befehl text-align:right, da hätte ich auch selber drauf kommen können, ich Esel! Mit diesem Befehl klappt es auch, vielen Dank!

      Nur mit meinem zweiten Problem funktioniert es nicht: Weiterhin wird der Linktext in der zweiten Tabellenzelle schwarz statt GRAU (#DDDDDD) angezeigt (ich habs mit IE, Mozille und Opera ausprobiert). Ich habe wie von Dir empfohlen die fehlenden Kommas in meinem CSS nachgepflegt und auf meine Homepage hochgeladen. Aber der Text bleibt schwarz. Er wird erst dann GRAU, wenn man mit der Maus drüberfährt ("hover").

      Also bleibt meine Frage:

      2. Wie erreiche ich, daß der Linktext in der zweiten Tabellenzelle ebenfalls GRAU (#DDDDDD) wird und nicht schwarz, obwohl ich in css in der Klassendefinition bereits die Farbe #DDDDDD vorgeschrieben habe. In der ersten Tabellenzelle klappt das, in der zweiten nicht. (Nur beim Überfahren mit der Maus wird der Text grau, das habe ich bereits hinbekommen)

      Zu meiner Testseite gelangt man über www.halloneptun.de ==> Tauchen und mehr ==> Das bin ich. (Es geht um die Formatierung der dunkelblau hinterlegten Kopfzeile)

      Vielen Dank!
      Neptun
      www.halloneptun.de - Seite für Tauchsportfreunde

      Kommentar


      • #4
        AW: Schriftformatierung mit CSS in einer Tabelle

        Beim Link "Meine Tauchkarriere" sehe ich eine Klasse "textstrong" - in der ist diese Farbe hinterlegt. Das müsstest du ändern.

        Kommentar


        • #5
          AW: Schriftformatierung mit CSS in einer Tabelle

          Hallo threadi,

          Nein, auf der Unterseite "Das bin ich" (und nur auf DIESE Unterseite bezieht sich meine Anfrage - das ist meine Testseite, wenn es da klappt, dann ändere ich alle anderen entsprechend), also im HTML-Code der Kopfzeile von "Das bin ich" ist KEINE Klasse "textstrong" definiert. Auf anderen Seiten schon, hier nicht.

          Code:
          <body class="textnormal">
          <a name="oben"></a>
          
          <table class="chapterheadborder-tum" style="">
          <tr>
           <td class="chapterheadtext-tum">Das bin ich</td>
           <td class="chapterheadtextsmall-tum"><a href="tauchkarriere-kurz.html" target="main" title="bla bla">Stationen meiner Tauchkarriere</a></td>
          </tr>
          </table>
          Also bleibt meine Frage:

          2. Wie erreiche ich, daß der Linktext in der zweiten Tabellenzelle ebenfalls GRAU (#DDDDDD) wird und nicht schwarz, obwohl ich in css in der Klassendefinition bereits die Farbe #DDDDDD vorgeschrieben habe. In der ersten Tabellenzelle (Text: "Das bin ich") klappt das, in der zweiten nicht. (Nur beim Überfahren des Links mit der Maus wird der Text grau, das habe ich bereits hinbekommen)

          Zu meiner Testseite gelangt man über www.halloneptun.de ==> Tauchen und mehr ==> Das bin ich. (Es geht um die Formatierung der dunkelblau hinterlegten Kopfzeile)

          Vielen Dank!
          Neptun
          www.halloneptun.de - Seite für Tauchsportfreunde

          Kommentar


          • #6
            AW: Schriftformatierung mit CSS in einer Tabelle

            Mahlzeit!

            Setze mal ein "td" vor der entsprechenden Anweisung:
            td.chapterheadtextsmall-tum a, a:link, a:active, a:visited
            {
            text-decoration:none;
            color: #DDDDDD;
            }
            mfg
            dhx

            Kommentar


            • #7
              AW: Schriftformatierung mit CSS in einer Tabelle

              Auf der Seite http://www.halloneptun.de/neptun-fra...s_bin_ich.html sehe ich schon eine Klasse "textstrong" ...

              Und außerdem sehe ich im Quellcode fehlerhafte Farbangaben wie z.B.

              Code:
              color:DDDDDD
              (dort fehlt eine raute davor).

              Kommentar


              • #8
                AW: Schriftformatierung mit CSS in einer Tabelle

                Hallo dhx,

                DANKE!!!!

                DAS war's, das td vor dem Klassennamen!!! td.chapterheadtextsmall

                Jetzt funktioniert endlich alles wie gewünscht. dhx, Du hast die Bezeichnung "Kaiser" zu Recht!

                Ich verstehe allerdings nicht, warum es hier an dieser Stelle zwingend notwendig ist, die Formatierung mit dieser Klasse konkret auf eine Tabellenzelle td einzuschränken (denn ohne dem td. vor dem Klassennamen hätte die Formatierung mit der Klasse .chapterheadtextsmall ja auch für eine Tabellenzelle td gelten müssen), aber ich bin erst einmal zufrieden.

                Vielen Dank nochmal für Deinen Tipp! :danke:

                Grüßle vom Neptun
                www.halloneptun.de - Seite für Tauchsportfreunde

                Kommentar

                homepage-forum.de - Hilfe für Webmaster! Statistiken

                Einklappen

                Themen: 57.256   Beiträge: 432.202   Mitglieder: 29.677   Aktive Mitglieder: 21
                Willkommen an unser neuestes Mitglied, Euro_crem.

                Online-Benutzer

                Einklappen

                476 Benutzer sind jetzt online. Registrierte Benutzer: 0, Gäste: 476.

                Mit 9.939 Benutzern waren am 17.05.2023 um 21:38 die meisten Benutzer gleichzeitig online.

                Die neuesten Themen

                Einklappen

                Die neuesten Beiträge

                Einklappen

                Lädt...
                X
                😀
                🥰
                🤢
                😎
                😡
                👍
                👎