gondor: Verständnisfrage id/class

Hallo!

Eine Verständnisfrage:

Ich definiere im css folgendes:

.content
{
 margin:0 auto 0 auto;
 padding:0;
 width: 900px;
 top: 0;
 left: 0;
 background-color:#FFFFFF;
}

.content #test
{
 background-color:#D8D8D8;
}

Wie muss ich das DIV setzen, damit der Background überschrieben wird?

<div class="content" id="test"></div>

Oder wird das anders gemacht?

Danke für Hilfe,

gondor(..)

  1. Hallo gondor,

    Ein Leerzeichen bedeutet, dass sich der hintenstehende "Teilselektor" in der Dokumenthierarchie unterhalb (egal wie viele Ebenen) des weiter vorn stehenden befinden muss. Konkret musst du also ein Element der Klasse "content" definieren, innerhalb dessen du ein weiteres mit der id "test" notierst.

    Beste Grüße
    Richard

    1. also so?

      <div class="content">
         <div id="test">
         </div>
      </div>

      keine andere Möglichkeit?

      Möchte ungerne weitere Div's etc. setzen...

      1. N'Abend

        also so?

        <div class="content">
           <div id="test">
           </div>
        </div>

        Ja.

        keine andere Möglichkeit?

        Alternativ dazu kannst du natürlich auch das Leerzeichen im CSS entfernen und dein originales div so ansprechen:

        .content#test { ... }
        oder einfach
        #test { ... }

        Mit freundliche Grüßen
        _Siro

        1. Die Praxis zeigt daß die Browser (Opera und Firefox zumindest,  IE verwende ich aus Fanatismus nicht ;)) kein Problem mit mehreren übereinstimmenden ID werten haben.Sollte aso auch so k.p. sein.

          1. Hallo bleicher,

            Sollte aso auch so k.p. sein.

            Wird es deswegen richtig, nur weil einige Browser in dem Bereich Kulanz zeigen?

            Mit freundlichem Gruß
            Micha

            --
            LeagueEditor JavaScript kostenlose Ligaverwaltung || richtig Messen will gelernt sein
          2. Die Praxis zeigt daß die Browser (Opera und Firefox zumindest,  IE verwende ich aus Fanatismus nicht ;)) kein Problem mit mehreren übereinstimmenden ID werten haben.Sollte aso auch so k.p. sein.

            Wer hat denn von mehreren ID übereinstimmenden ID-Werten geredet? Bisher gibt es nur ein div und damit auch kein Problem.

            Mit freundliche Grüßen
            _Siro

            1. Hallo siro,

              Wer hat denn von mehreren ID übereinstimmenden ID-Werten geredet?

              Naja, es kam kurz durch ;)
              https://forum.selfhtml.org/?t=135417&m=878894

              Mit freundlichem Gruß
              Micha

              --
              LeagueEditor JavaScript kostenlose Ligaverwaltung || richtig Messen will gelernt sein
              1. Hallo!

                Wie sollte ich denn nun vorgehen?

                #test.content
                {
                 background-color:#D8D8D8;
                }

                #test.header
                {
                 background-color:#D8D8D8;
                }

                <body>
                 <div class="content" id="test">
                  <div class="header" id="test">

                </div>
                  <div class="left>

                </div>
                  <div class="right">

                </div>
                  <div class="footer">

                </div>
                 </div>
                </body>

                zeigt den Hintergrund im ff und opera richtig an. ie versagt jedoch.

                Wie würdet Ihr das machen?

                gondor(..)

                1. Lass doch die Id ganz weg?

                  Wenn dein Div-Container nicht nur dem content entspricht, sondern noch zusätzlich formatiert werden muss, weil er was besonderes ist, dann vergib dem Div 2 Klassen.

                  Z.B. <div class="content spezial"></div> und im CSS-File gibst du dann sowas in der Art an:
                  .content {
                     was auch immer für Angaben du machen willst
                     color:blue;
                     width:150px;
                     background-color:yellow
                  }

                  .spezial {
                     background-color:red;
                     color: green;
                  }

                  Solange spezial nach content im CSS-File kommt, wird das ganze so dargestellt, wie du das möchtest.

                  <body>
                  <div class="content" id="test">
                    <div class="header" id="test">

                  Sowas sollte man nicht machen. 2 mal die gleiche Id vergeben ergibt invaliden Code. (*Sagt man invalide? Klingt irgendwie komisch :) ) Damit also gar nicht erst anfangen.

                  Gruß Ben

                  1. Hey super!

                    Das funktioniert nun in allen Browsern :)

                    Vielen Dank für eure zahlreichen Antworten.

                    Habt mir (wiedermal) echt geholfen.

                    gondor(..)

  2. Hallo gondor,

    Eine Verständnisfrage:
    Wie muss ich das DIV setzen, damit der Background überschrieben wird?
    Oder wird das anders gemacht?

    öö jo.

    Als grundlegende Erklärung.

    1. Entweder ID oder class
    2. Wenn ein Element mehrmals vorkommt auf einer Seite (z.B. ein speziell formatierter Text) gibts du ihm class.
    3. Wenn ein Element nur einmal vorkommt auf einer Seite (z.B. der footer oder der header) gibts du ihm ID.

    Was genau du jetzt wie überschreiben willst verstehe ich leider nicht genau. Bring doch mal ein Praxis-Beispiel!

    Gruss
    doni

    ---
    meder, aaron - www.telltec.ch

    1. Was genau du jetzt wie überschreiben willst verstehe ich leider nicht genau. Bring doch mal ein Praxis-Beispiel!

      Okay. Ich habe eine feste Seiten-Struktur:

      <body>
       <div class="content" id="test">
        <div class="header" id="test">

      </div>
        <div class="left>

      </div>
        <div class="right">

      </div>
        <div class="footer">

      </div>
       </div>
      </body>

      Jedoch gibt es nun Seiten, wo sich der Hintergrund ändert. Da habe ich mir gedacht, Struktur beibehalten, CSS anpassen. Also:
      id="test" eingeführt und css um .content #test erweitern...

      Problem verstanden?

      gondor(..)

      1. Hi,

        <div class="content" id="test">
          <div class="header" id="test">

        id-Werte dürfen pro Dokument maximal einmal vorkommen.

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        Schreinerei Waechter
        O o ostern ...
        Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    2. Hallo doni.

      Als grundlegende Erklärung.

      1. Entweder ID oder class

      Warum?


      meder, aaron - www.telltec.ch

      Signaturen können mit „-- \n“ („\n“ natürlich nicht wörtlich) gekennzeichnet werden.

      Einen schönen Mittwoch 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]
  3. Hallo gondor,

      
    .content {  
     background-color:blue;  
    }  
      
    #test.content {  
     background-color:red;  
    }  
      
    #test {  
     background-color:green;  
    }  
    
    

    mein Test Code:

      
    <p class="content">Test</p>  
    <p id="test" class="content">Test</p>
    

    liefern einmal einen blauen und einmal einen roten Streifen. Ein grüner ist natürlich nicht zu sehen...

    Mit freundlichem Gruß
    Micha

    --
    LeagueEditor JavaScript kostenlose Ligaverwaltung || richtig Messen will gelernt sein
    1. genau so!

      danke,

      gondor(..)

  4. Hi,

    Hierzu vielleicht hilfreich:
    [lnik:http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html@title=Specifity Wars]

    Gruss,
    Lin

    --
    Mister rabbit says, "A moment of realization is worth a thousand prayers."
    1. *Klicks*

      Specifity Wars

      --
      Mister rabbit says, "A moment of realization is worth a thousand prayers."