Daniel N.: verschachtelte HTML-Elemente in Individualformaten

Hallo,

ist es mit CSS möglich, Formate für verschachtelte HTML-Elemente in Individualformaten zu erstellen?

Ein Beispiel macht mein Vorhaben (hoffentlich) deutlich:

  
h1 {  
  font-size: 2em;  
}  
  
#header {  
  background-color: white;  
}  
  
h1 #header {  
  font-size: 1.5em;  
}  

Ich möchte also erreichen, dass üblicherweise die Überschriften eine Schriftgröße von "2em" erreichen.
Falls eine solche Überschrift innerhalb eines "id=header" vorkommt, soll diese nur noch eine Größe von "1em" erhalten.

Wie kann ich soetwas erreichen. Meine Syntax soll nur mein Vorhaben verdeutlichen!

Viele Grüße
Daniel

  1. Moin Daniel!
    wenn ich dich richtig verstanden habe möchtest du alle h1 als 2em darstellen, nur h1 id=header soll 1.5em haben:

      
    h1 {  
    font-size:2em;  
    }  
      
    h1#header {  
    font-size:1.5em;  
    }  
    
    

    Hoffe das ist es.
    tschüssi
    ichen

    --
    Ichen
    1. Hi ichen,

      ne, das meinte ich leider nicht.

      Ich meinte die h1 in folgendem Konstrukt:

        
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
      <html>  
      <head>  
      <title>Schriften und CSS</title>  
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
      </head>  
      <body>  
        
      <h1>Überschrift wird 2em gross</h1>  
        
      <div id=header>  
      h1>Überschrift wird 1.5em gross</h1>  
      </div>  
        
      </body>  
      </html>  
      
      

      Viele Grüße
      Daniel

      1. Moin Daniel!
        na dann:

          
        #header h1 {  
        ...  
        }  
        
        

        Gibt auch was in Selfhtml: CSS-Formate für verschachtelte HTML-Elemente definieren
        tschüssi
        ichen

        --
        Ichen
      2. <h1>Überschrift wird 2em gross</h1>

        <div id=header>
        <h1>Überschrift wird 1.5em gross</h1>
        </div>

        Ich bin mir nicht 100% sicher, aber:
        Hier ist Deine H1 eine H1 ohne ID!. Also 2em groß.

        Vielleicht andersrum, dann sollte es an die Kindelmente vererbt werden. Mache die 1.5em Angabe beim div:

        #header {
          background-color: white;
          font-size: 1.5em;
        }

        aber vermutlich wird auch das von:

        h1 {
          font-size: 2em;
        }

        wieder überschreiben.

        h1 #header {
          font-size: 1.5em;
        }

        sagt ja das eine <h1 id="header"> 1.5em hat.

        eine <h1> ohne ID interssiert das nicht.

        1. Hello out there!

          <div id=header>
          <h1>Überschrift wird 1.5em gross</h1>
          </div>

          Vielleicht andersrum, dann sollte es an die Kindelmente vererbt werden. Mache die 1.5em Angabe beim div:
          #header {
            background-color: white;
            font-size: 1.5em;
          }

          Richtig, das wird vererbt.

          aber vermutlich wird auch das von:
          h1 {
            font-size: 2em;
          }
          wieder überschreiben.

          Nein, es gelten beide Angaben. Die '2em' beziehen sich auf die Schriftgröße des 'div, so dass die Schriftgröße das Dreifache der des Fließtextes beträgt.

          h1 #header {
            font-size: 1.5em;
          }
          sagt ja das eine <h1 id="header"> 1.5em hat.

          Nein, tut es nicht. Mit Leerzeichen ist es ein Selektor für Nachfahren.

          See ya up the road,
          Gunnar

          --
          “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
  2. Hello out there!

    h1 #header {
      font-size: 1.5em;
    }
    Ich möchte also erreichen, dass üblicherweise die Überschriften eine Schriftgröße von "2em" erreichen.
    Falls eine solche Überschrift innerhalb eines "id=header" vorkommt,

    Wie „eines“? „Des“! Es kann nur eins geben.

    soll diese nur noch eine Größe von "1em" erhalten.
    Wie kann ich soetwas erreichen.

    War das eine Frage?

    Indem du
    (1) "1em" schreibst, wenn du "1em" meinst. ;-)

    (2) nicht das Element mit der ID 'header' selektierst, das innerhalb einer Überschrift vorkommt, sondern andersrum.

    See ya up the road,
    Gunnar

    --
    “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
    1. Hi Gunnar,

      Wie „eines“? „Des“! Es kann nur eins geben.

      Ok ok, schon klar. War nicht präzise genug...

      War das eine Frage?

      Ok, schon wieder unpräzise, da fehlt natürlich das Fragezeichen...

      (1) "1em" schreibst, wenn du "1em" meinst. ;-)

      Ah, mit ";-)", das verstehe ich ;-)

      (2) nicht das Element mit der ID 'header' selektierst, das innerhalb einer Überschrift vorkommt, sondern andersrum.

      Mit Beispiel-Code, wäre die Antwort noch besser gewesen. Ich denke, dass Beispiel müsste wie folgt aussehen:

        
      #header h1  {  
        font-size: 1em;  
      }  
      
      

      Vielen Dank für deine hilfreiche Antwort!
      Daniel

      1. Hi,

        kann es sein, dass der Internet-Explorer (ich habe den 6.0 probiert) das nicht unterstützt?

        Gibt es da einen Workaround?

        Viele Grüße
        Daniel

        1. Hallo Daniel.

          kann es sein, dass der Internet-Explorer (ich habe den 6.0 probiert) das nicht unterstützt?

          Nein, kann nicht sein, da er es tut.

          Einen schönen Freitag noch.

          Gruß, Mathias

          --
          sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
          „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
          [HTML Design Constraints: Logical Markup]
        2. Hello out there!

          kann es sein, dass der Internet-Explorer (ich habe den 6.0 probiert) das nicht unterstützt?

          Nein, der versteht zwar Kindselektoren nicht, Nachfahrenselektoren aber problemlos.

          Das Problem liegt nicht an '#header h1' (was als Beispiel „[dein] Vorhaben verdeutlichen“ sollte).

          See ya up the road,
          Gunnar

          --
          “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
          1. Hi,

            vielen Dank. Ihr habt Recht. Ich hatte (vorher) einen Syntaxfehler im CSS (es hatte sich ein " eingeschlichen).

            Kaum macht mans richtig, schon funktionierts ;-)

            Viele Grüße
            Daniel

      2. Hello out there!

        (2) nicht das Element mit der ID 'header' selektierst, das innerhalb einer Überschrift vorkommt, sondern andersrum.
        Mit Beispiel-Code, wäre die Antwort noch besser gewesen.

        Och nö. Ich schreibe keinen Beispielcode, um jegliche Denkarbeit zu ersparen. (Einmal drüber nachgedacht und schon bleibt es länger im Gedächtnis.)

        Beispielcode gebe ich dann an, wenn es etwas zu verdeutlichen gibt; „andersrum“ sollte aber deutlich genug gewesen sein.

        See ya up the road,
        Gunnar

        --
        “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
        1. Hallo Gunnar,

          Mit Beispiel-Code, wäre die Antwort noch besser gewesen.

          Och nö. Ich schreibe keinen Beispielcode, um jegliche Denkarbeit zu ersparen. (Einmal drüber nachgedacht und schon bleibt es länger im Gedächtnis.)

          Das ist vermutlich der Grund dafür, dass Milliarden bisher hergestellter Schulbücher, Seminarunterlagen und nicht zuletzt SELFHTML kein einziges Beispiel enthalten …

          [x] für eine neue Kategorie namens (PÄDAGOGIK). ;-)

          Grüße
           Roland

          1. Hello out there!

            Och nö. Ich schreibe keinen Beispielcode, um jegliche Denkarbeit zu ersparen. (Einmal drüber nachgedacht und schon bleibt es länger im Gedächtnis.)

            Das ist vermutlich der Grund dafür, dass Milliarden bisher hergestellter Schulbücher, Seminarunterlagen und nicht zuletzt SELFHTML kein einziges Beispiel enthalten …

            Dein Posting könnte in Schulbücher, Seminarunterlagen und nicht zuletzt SELFHTML (Forum-Archiv) als Beispiel schlechten Zitierens einfließen. ;-)

            So ist dieser Satz aus dem Zusammenhang gerissen; es stand ja noch einer dazu:

            Beispielcode gebe ich dann an, wenn es etwas zu verdeutlichen gibt […]

            See ya up the road,
            Gunnar

            --
            “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)