Auf Thema antworten 2026

Beitrag

<blockquote data-quote="unofactura" data-source="post: 2317859" data-attributes="member: 575970">Hallo zusammen,schon wieder dieses Thema. Ja, leider. Nachdem ich nun gefühlte 100 Webseiten und Tutorials abgeklappert habe bin ich der Lösung kein Stück näher gekommen. Es will mir nicht gelingen Bilder vertikal in einem div auszurichten. Ich möchte eine Art Bildergalerie machen. Dabei sollen die Bilder immer zentriert in einem Rahmen dargestellt werden. Es soll etwa <a href="http://www.unofactura.de/test/test.htm" target="_blank">so</a> aussehen.Bei quadratischen und hochformatigen Bildern funktioniert das astrein, nur wie am im Beispiel zu sehen ist kleben die Querformate alle oben im Rahmen. Mit festen Werten will ich nicht arbeiten, da das Seitenverhältnis immer unterschiedlich ist.Na ja, möglicherweise ist auch mein Ansatz total falsch. Auf jeden Fall sind alle Tipps willkommen.Hier noch der Code incl. CSS zur obigen Beispielseite:[CODE]&lt;!DOCTYPE html&gt;&lt;html lang=&quot;de&quot;&gt;&lt;head&gt;&nbsp; &nbsp; &lt;title&gt;Test f&amp;uuml;r Bilder&lt;/title&gt;&nbsp; &nbsp; &lt;meta charset=&quot;utf-8&quot;/&gt;&lt;style type=&quot;text/css&quot;&gt;body {&nbsp; &nbsp; background-color: #c7c7cc; /*Hintergrundfarbe um den Mittelteil herum*/&nbsp; &nbsp; font-family:Arial,sans-serif;&nbsp; &nbsp; font-size:14px;}img {&nbsp; &nbsp; display:block;}#wrapper{width:980px; /*Etwas breiter als Header, damit wirkt Header leicht plastisch*/height:450px; /*Fester Wert, gleich bei allen Seiten ohne Bilder*/margin:0 auto; /*Zentriert das div!!!!*/text-align:left; /*Nicht unbedingt erforderlich*/border:1px solid #6e6e6e; /*Rahmen zur div-Identifizierung*/border-radius:3px;background-color: white}#seite{&nbsp; &nbsp; float:left;&nbsp; &nbsp; text-align:justify;&nbsp; &nbsp; margin:20px;&nbsp; &nbsp; padding:5px;&nbsp; &nbsp; width: 200px;&nbsp; &nbsp; height:300px;&nbsp; &nbsp; border:1px solid red /*um das div zu erkennen*/}#galerie{&nbsp; &nbsp; width: 600px;&nbsp; &nbsp; height:400px;&nbsp; &nbsp; margin:20px 20px 250px auto;&nbsp; &nbsp; border:1px solid black; /*zur Identifikation des divs*/}.bildbox{&nbsp; &nbsp; width:150px; /*feste Breite*/&nbsp; &nbsp; height:150px; /*feste Höhe*/&nbsp; &nbsp; float:left;&nbsp; &nbsp; /*damit die divs nebeneinander stehen*/&nbsp; &nbsp; background-color:#f0f0f0;&nbsp; &nbsp; margin:10px;&nbsp; &nbsp; padding:10px;&nbsp; &nbsp; border:1px solid blue; /*nur zur Indentifikation des divs*/}.quadrat{&nbsp; &nbsp; width:130px;&nbsp; &nbsp; height:130px;&nbsp; &nbsp; margin: 10px;}.hoch{&nbsp; &nbsp; height:130px;&nbsp; &nbsp; margin:10px auto;}.quer{&nbsp; &nbsp; width:130px;&nbsp; &nbsp; margin:0 auto;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&quot;wrapper&quot;&gt;&lt;aside id=&quot;seite&quot;&gt;&nbsp; &nbsp; &lt;p&gt;Hierhin kommt noch weiterer Inhalt und eine Navigation.&lt;/p&gt;&lt;/aside&gt;&lt;div id=&quot;galerie&quot;&gt;&nbsp; &nbsp; &lt;div class=&quot;bildbox&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;img class=&quot;quadrat&quot; src=&quot;1234.jpg&quot; alt=&quot;Bildtext&quot; title=&quot;Bildtitel&quot;&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;div class=&quot;bildbox&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;img class=&quot;hoch&quot; src=&quot;2345.jpg&quot; alt=&quot;Bildtext&quot; title=&quot;Bildtitel&quot;&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;div class=&quot;bildbox&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;img class=&quot;quer&quot; src=&quot;3456.jpg&quot; alt=&quot;Bildtext&quot; title=&quot;Bildtitel&quot;&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;div class=&quot;bildbox&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;img class=&quot;quer&quot; src=&quot;3456.jpg&quot; alt=&quot;Bildtext&quot; title=&quot;Bildtitel&quot;&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;div class=&quot;bildbox&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;img class=&quot;quadrat&quot; src=&quot;1234.jpg&quot; alt=&quot;Bildtext&quot; title=&quot;Bildtitel&quot;&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;div class=&quot;bildbox&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;img class=&quot;hoch&quot; src=&quot;2345.jpg&quot; alt=&quot;Bildtext&quot; title=&quot;Bildtitel&quot;&gt;&nbsp; &nbsp; &lt;/div&gt;&lt;/div&gt; &lt;!--Ende Galerie--&gt;&lt;/div&gt; &lt;!--Ende wrapper--&gt;&lt;/body&gt;&lt;/html&gt;[/CODE]</blockquote>

[QUOTE="unofactura, post: 2317859, member: 575970"] Hallo zusammen, schon wieder dieses Thema. Ja, leider. Nachdem ich nun gefühlte 100 Webseiten und Tutorials abgeklappert habe bin ich der Lösung kein Stück näher gekommen. Es will mir nicht gelingen Bilder vertikal in einem div auszurichten. Ich möchte eine Art Bildergalerie machen. Dabei sollen die Bilder immer zentriert in einem Rahmen dargestellt werden. Es soll etwa [URL='http://www.unofactura.de/test/test.htm'][B]so[/B][/URL][B] [/B]aussehen. Bei quadratischen und hochformatigen Bildern funktioniert das astrein, nur wie am im Beispiel zu sehen ist kleben die Querformate alle oben im Rahmen. Mit festen Werten will ich nicht arbeiten, da das Seitenverhältnis immer unterschiedlich ist. Na ja, möglicherweise ist auch mein Ansatz total falsch. Auf jeden Fall sind alle Tipps willkommen. Hier noch der Code incl. CSS zur obigen Beispielseite: [CODE]<!DOCTYPE html> <html lang="de"> <head> <title>Test für Bilder</title> <meta charset="utf-8"/> <style type="text/css"> body { background-color: #c7c7cc; /*Hintergrundfarbe um den Mittelteil herum*/ font-family:Arial,sans-serif; font-size:14px; } img { display:block; } #wrapper{ width:980px; /*Etwas breiter als Header, damit wirkt Header leicht plastisch*/ height:450px; /*Fester Wert, gleich bei allen Seiten ohne Bilder*/ margin:0 auto; /*Zentriert das div!!!!*/ text-align:left; /*Nicht unbedingt erforderlich*/ border:1px solid #6e6e6e; /*Rahmen zur div-Identifizierung*/ border-radius:3px; background-color: white } #seite{ float:left; text-align:justify; margin:20px; padding:5px; width: 200px; height:300px; border:1px solid red /*um das div zu erkennen*/ } #galerie{ width: 600px; height:400px; margin:20px 20px 250px auto; border:1px solid black; /*zur Identifikation des divs*/ } .bildbox{ width:150px; /*feste Breite*/ height:150px; /*feste Höhe*/ float:left; /*damit die divs nebeneinander stehen*/ background-color:#f0f0f0; margin:10px; padding:10px; border:1px solid blue; /*nur zur Indentifikation des divs*/ } .quadrat{ width:130px; height:130px; margin: 10px; } .hoch{ height:130px; margin:10px auto; } .quer{ width:130px; margin:0 auto; } </style> </head> <body> <div id="wrapper"> <aside id="seite"> Hierhin kommt noch weiterer Inhalt und eine Navigation. </aside> <div id="galerie"> <div class="bildbox"> <img class="quadrat" src="1234.jpg" alt="Bildtext" title="Bildtitel"> </div> <div class="bildbox"> <img class="hoch" src="2345.jpg" alt="Bildtext" title="Bildtitel"> </div> <div class="bildbox"> <img class="quer" src="3456.jpg" alt="Bildtext" title="Bildtitel"> </div> <div class="bildbox"> <img class="quer" src="3456.jpg" alt="Bildtext" title="Bildtitel"> </div> <div class="bildbox"> <img class="quadrat" src="1234.jpg" alt="Bildtext" title="Bildtitel"> </div> <div class="bildbox"> <img class="hoch" src="2345.jpg" alt="Bildtext" title="Bildtitel"> </div> </div>  </div>  </body> </html>[/CODE] [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?