Elemente untereinander innerhalb inline-Element

[Tine]

Hallo,

ich hoffe ich kann mein Problem einigermaßen erklären.

Ich will kleine Bereiche, bestehend aus einem Bild, darunter zwei Buttons nebeneinander, vielfach auf einer Seite anzeigen.

Die Bereiche sollen sich wie inline-Elemente verhalten, also nebeneinander je nach Breite der Seite passen unterschiedlich viele nebeneinander.

Im Bereich selber soll aber das Bild über den beiden Buttons stehen.

Das span Element (oder ein anderes) außenrum brauche ich, weil später einige per CSS ausgeblendet werden sollen.

Bekomme das nicht hin.
Habe das folgende versucht, leider ohne Erfolg.

  
<span >  
  <img src="pic.png" alt="pic">  
  <br>  
  <button>Test-1</button><button>Test-2</button>  
<span/>  
<span >  
  <img src="pic.png" alt="pic">  
  <br>  
  <button>Test-1</button><button>Test-2</button>  
<span/>  
  
<!--  span ca 30 mal -->  

Wäre toll, wenn jemand einen Tip hätte.

[Der Martin]

Hi,

ich hoffe ich kann mein Problem einigermaßen erklären.

ich vermute, dass ich es richtig verstanden habe.

Ich will kleine Bereiche, bestehend aus einem Bild, darunter zwei Buttons nebeneinander, vielfach auf einer Seite anzeigen.
Die Bereiche sollen sich wie inline-Elemente verhalten, also nebeneinander je nach Breite der Seite passen unterschiedlich viele nebeneinander.

Also quasi ein Block, der sich nach außen hin wie ein inline-Element verhält. Genau dafür gibt's inline-block.

Im Bereich selber soll aber das Bild über den beiden Buttons stehen.
Das span Element (oder ein anderes) außenrum brauche ich, weil später einige per CSS ausgeblendet werden sollen.

Ein gruppierendes Element brauchst du auf jeden Fall; ob es das semantisch neutrale span sein muss, sei dahingestellt. Vielleicht gibt es etwas Sinnvolleres.

Habe das folgende versucht, leider ohne Erfolg.

Wo ist das Stylesheet dazu? - Überhaupt, warum stellst du deine Frage im Bereich HTML? Es geht doch offensichtlich um Gestaltung, also CSS.

<span >

<img src="pic.png" alt="pic">
  <br>
  <button>Test-1</button><button>Test-2</button>
<span/>
<span >
  <img src="pic.png" alt="pic">
  <br>
  <button>Test-1</button><button>Test-2</button>
<span/>

<!--  span ca 30 mal -->

  
Gib dem Containerelement (also hier dem span) ein display:inline-block und -falls nötig- feste Abmessungen, dem darin enthaltenen Bild ein display:block, dann kannst du auch das br-Element entsorgen.  
  
So long,  
 Martin  

-- 
Wer schläft, sündigt nicht.  
Wer vorher sündigt, schläft besser.  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[Tine]

ich vermute, dass ich es richtig verstanden habe.

perfekt verstanden und vor allem perfekt gelöst - lieben Dank!

Ein gruppierendes Element brauchst du auf jeden Fall; ob es das semantisch neutrale span sein muss, sei dahingestellt. Vielleicht gibt es etwas Sinnvolleres.

Was könnte denn ein semantisch sinnvolles Gruppierungselement sein.
Es werden Vorschau-Bilder mit Buttons in der Gruppe angezeigt.

Noch eine Frage:
gibt es noch einen Unterschied zwischen span und div, ausser der inline bzw. block Eigenschaft?

[Der Martin]

Hallo,

ich vermute, dass ich es richtig verstanden habe.
perfekt verstanden und vor allem perfekt gelöst - lieben Dank!

na, da habe ich ja Glück gehabt. ;-)

Ein gruppierendes Element brauchst du auf jeden Fall; ob es das semantisch neutrale span sein muss, sei dahingestellt. Vielleicht gibt es etwas Sinnvolleres.
Was könnte denn ein semantisch sinnvolles Gruppierungselement sein.
Es werden Vorschau-Bilder mit Buttons in der Gruppe angezeigt.

Um das zu sagen, müsste man deinen konkreten Fall sehen. Aber allgemein: Wenn du mehrere dieser Blöcke in direkter Folge hast, könnte man argumentieren, dass sie eine Liste bilden. Dann wäre das richtige Element zum Gruppieren ein li. Auch andere Fälle sind denkbar ...

gibt es noch einen Unterschied zwischen span und div, ausser der inline bzw. block Eigenschaft?

Nein, das ist der einzige Unterschied. Beide sind als neutrale gruppierende Elemente ohne eigene Bedeutung gedacht.

Ciao,
 Martin