Take Three: auf div zugreifen wie?

Hallo Leute,

Habe folgendes Problem. Ich hätte gern verschieden Bereiche auf meiner Seite, die alle unterschiedlich IDs haben, die ich aber z.T. alle gleich formatiern kann mit CSS.
Also ungefähr so die Bereiche:~~~html

<div id="b1" class="bereich">.....</div>
<div id="b2" class="bereich">.....</div>
<div id="b3" class="bereich">.....</div>

  
Und ungefähr so die Styles:~~~css
  
div.bereich { position:fixed; color:black; background-color:red; usw.usw. }  
#b1   { left:50px; top:10px; width:100; }  
#b2   { left:100px; top:10px; width:80; }  
#b3   { left:150px; top:10px; width:20; }  

Funktioniert aber nicht. Es muss irgendwie an dem div.bereich liegen. Die einzelnen Bereiche, die über die ID aufgerufen werden funktionieren!?!

Danke für eure Hilfe

  1. Hi there,

    nur beim Überfliegen:

    #b1   { left:50px; top:10px; width:100; }

    width 100 was ???

  2. Hallo,

    div.bereich { position:fixed;

    In welchem Browser geht das nicht? Der IE kann kein position:fixed;

    Grüße
    Thomas

    --
    Surftip: kennen Sie schon Pipolino's Clowntheater?
    http://www.clowntheater-pipolino.net/
  3. Hi,

    div.bereich { position:fixed; }

    Dir ist bewußt, daß dies nur moderne Browser umsetzen können und es darüber hinaus sehr problematisch sein kann?

    #b1   { width:100; }

    Diese Angabe ist ungültig.

    freundliche Grüße
    Ingo

  4. Tag Take.

    Habe folgendes Problem. Ich hätte gern verschieden Bereiche auf meiner Seite, die alle unterschiedlich IDs haben, die ich aber z.T. alle gleich formatiern kann mit CSS.

    Soweit ich weiß, haben ID-Selektoren eine höhere Wertigkeit als Klassen, vielleicht liegt es daran (siehe http://www.w3.org/TR/CSS21/cascade.html#specificity). Du kannst dir aber die Klassenzuweisung ersparen, indem du einfach alles zusammenfasst, das gleich sein soll:

    #b1,#b2,#b3 {  
    /* gemeinsame Eigenschaften */  
    }  
    #b1 {  
    /* spezielle Eigenschaften fuer b1 */  
    }  
    #b2 {  
    /* spezielle Eigenschaften fuer b2 */  
    }  
    #b3 {  
    /* spezielle Eigenschaften fuer b3 */  
    }
    

    Siechfred

    1. Hi,

      Soweit ich weiß, haben ID-Selektoren eine höhere Wertigkeit als Klassen,

      Richtig.

      vielleicht liegt es daran

      Das würde sich dann auswirken, wenn für eine Property unterschiedliche Werte vergeben würden.
      Hier werden aber nur unterschiedliche Eigenschaften genutzt - die specificity der Selektoren hat also praktisch keine Auswirkung.

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      Schreinerei Waechter
      Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
      1. Tag MudGuard.

        Hier werden aber nur unterschiedliche Eigenschaften genutzt - die specificity der Selektoren hat also praktisch keine Auswirkung.

        Aha, danke für die Nachhilfe :-)

        Siechfred

    2. Hallo Siechfred,

      Soweit ich weiß, haben ID-Selektoren eine höhere Wertigkeit als Klassen, vielleicht liegt es daran

      ich hab es jetzt konkret am Beispiel nicht nachgeprüft, sehe aber
      (abgesehen von deinem CSS) eine einfache, doch womöglich auch
      problematische Lösung:

      Mit !important liesse sich ja u.U. die Wertigkeit verändern, nur vermute
      ich dass es eleganter wäre auf !important zu verzichten, auch um
      User-Stylesheets etwa in Hinblick auf Barrierefreiheit mehr Spielraum zu
      lassen.

      Grüsse

      Cyx23

  5. Hi,

    Funktioniert aber nicht.

    Aha. Und was bedeutet "Funktioniert aber nicht"?

    Und in welchem Browser?

    Zuallererst solltest Du aber die bereits genannten Fehler im CSS beseitigen.

    cu,
    Andreas

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