olduwai: Einem Tag Eigenshaften zuweisen, aber nur innerhalb einer Klasse

Morgen,

Ich arbeite z.Z. an einem Foto-Blog.
Also ich habe jezt per externer CSS-Datei festgelegt, wie die Fotos + Kurzbeschreibung angezeigt werden sollen, das sieht so aus:

#fotoblock { position: relative; margin-top: 50px; margin-left: 10% ; margin-right: 10%; border-width: 3px; border-style: dotted; border-color:#696969; text-align: center; align: center; padding: 15px; }

Das ist der Code aus der CSS-Datei, in der HTML-Datei sieht das dann so aus:

  
    <div id="fotoblock">  
      <a href="inhalt/name_des-bildes.jpg" target="_blank"> <img src="inhalt/name_des-bildes.jpg" height="150" width="200" ></a>  
      <h2>Überschrift der Beschreibung</h2>  
      Beschreibung des Bildes.  
    </div>  

Jezt würde ich es gerne so gestalten, dass das klein dargestelle Link-Bild von einem 2px starken, simplen, weißen Rahmen eingeschlossen wird. Ist ja eigentlich ganz easy. Das möchte ich in der CSS-Datei definieren. Es soll also jedes Bild welches INNERHALB der "fotoblock"-Klasse ist weiß gerahmt sein. Wohlgemerkt nur das Bild, nicht die gesamte "fotoblock"-Klasse, welche ja schon einen gepunkteten Rahmen aufweist, und auch nur Bidler innerhalb der Klasse, nicht global alle Bilder auf der ganzen Seite.

Dankeschön, Olduwai.

  1. Tachchen!

    Jezt würde ich es gerne so gestalten, dass das klein dargestelle Link-Bild von einem 2px starken, simplen, weißen Rahmen eingeschlossen wird.

    http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente

    Gruß

    Die schwarze Piste

  2. Hi,

    Du willst also einem Tag Eigenschaften zuweisen, aber nur innerhalb einer Klasse? Hmm, das ist eigentlich nicht schwer. Hast du denn eine Klasse? Die bräuchtest du schon mal. Falls nicht, melde dich in der Volkshochschule an, dann kannst du flugs eine Klasse besuchen und bist dann auch sogleich innerhalb dieser. Dort weist du dann dem Tag (darauf achten, dass die Klasse tagsüber stattfindet!) eine Eigenschaft zu, z.b. der heutige Tag ist mistig!

    Ganz einfach!

    1. @@Brathahn:

      nuqneH

      Du willst also einem Tag Eigenschaften zuweisen […]?

      Wenn du dich hier über die falsche Verwendung von „Tag“ lustig machst, dann doch bitte konstruktiv!

      Qapla'

      --
      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
      (Mark Twain)
      1. Bittersmann:

        Wenn du dich hier über die falsche Verwendung von „Tag“ lustig machst, dann doch bitte konstruktiv!

        Das nennst du *lustig machen*? Grusel...

        Brathahn

  3. Mal ganz was anders

    #fotoblock { position: relative; margin-top: 50px; margin-left: 10% ; margin-right: 10%; border-width: 3px; border-style: dotted; border-color:#696969; text-align: center; align: center; padding: 15px; }

    Ich würde dir empfehlen dein CSS etwas besser zu formatieren.
    Zum beispiel so:

    #fotoblock  {  
       position: relative;  
       margin-top: 50px;  
       margin-left: 10% ;  
       margin-right: 10%;  
       border-width: 3px;  
       border-style: dotted;  
       border-color:#696969;  
       text-align: center;  
       align: center;  
       padding: 15px;  
    }  
    
    

    Da würde nämlich die Eigenschaft align etwas mehr ins Auge springen.
    Was ist mit der Eigenschaft align los?
    das kann dir der CSS-validator sagen. Es ist nämlich keine in CSS2.1 oder CSS3 vorgesehene Eigenschaft.

    Natürlich darfst du mittels Shorthand Properties die Angaben auch etwas komprimieren.

    margin: 50px 10% auto 10%;
    border: 3px dotted #F00;

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
  4. Om nah hoo pez nyeetz, olduwai!

    Im Moment hast du noch keine Klasse Fotoblock, sondern ein Div mit einer ID. IDs dürfen in einem Dokument nur einmal vorkommen. In der Hoffnung, dass du konstruktiven Beiträge von Beat und Gunnar schon berücksichtigt hast, bleibt nur noch auf den Beitrag von schwarzer Piste einzugehen: Du suchst den Nachfahrenselektor, also beispielsweise

    .fotoblock img {border: 2px solid white}.

    Je nach Struktur deines Dokumentes dürfte auch der Kindselektor für dich interessant sein. Informiere dich über die Unterschiede, zum Beispiel im neuen selfhtml-wiki:

    Nachfahrenselektor <--> Kindselektor

    Vermeide <a ... target="_blank">, Lass dem Nutzer die Wahl, wo er das Bild geöffnet haben möchte.

    Matthias

    --
    http://www.billiger-im-urlaub.de/kreis_sw.gif