Gruppen

Top Gruppen: Windows 7; Windows Vista; Windows XP; Textverarbeitung; Excel; DSL; Internet Browser; E-Mail/Outlook
Betriebsysteme: Windows classik; Linux; BS-Sonstige
Software: Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; SW-Sonstige
Hardware: Mainboard/CPU; Grafikkarten; Peripherie; Laptop/Notebook; HW-Sonstiges
Netzwerk: Telefon,ISDN,Modem; W-Lan; NW-Sonstiges
Programmierung: PHP,ASP,Perl...; Java,C++...; Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke; SN Intern; Test

/ Forum / Webseiten/HTML

Webseiten/HTML

Fragevon greg68 vom 27.03.2019, 15:54 Options

css + php Bilder anordnen

Hallo,

ich würde gerne folgendes machen:

per PHPsollen mehrere Bilder aus einer SQL-Datenbank auf eine Seite geladen werden. Soweit kein Thema, wäre nicht das Problem. jetzt möchte ich aber per css die Bilder in drei Reihen untereinander anzeigen lassen, natürlich in gleicher Größe und in den Abständen gleichmässig formatiert. Wie müsste so ein Quelltext aussehen. Habs schon mit position:absolute ,eingebaut in einer while-Schleife versucht. Leider werden die Bilder dann schön übereinander gelegt. mit margin bekomme ich die erste Reihe (links) sauber hin aber die dritte Reihe (mitte) wird erst unter der 1 Reihe angezeigt. Ich hoffe meine Fragestellung ist verständlich angekommen.

Gruss Gregor

Antwort schreiben

Antwort 1 von greg68 vom 27.03.2019, 15:56 Options

Fehler: Dritte Reihe wäre natürlich rechts, 2 Reihe Mitte

Antwort 2 von MoRe99 vom 27.03.2019, 16:03 Options

Was heißt

Zitat:
jetzt möchte ich aber per css die Bilder in drei Reihen untereinander anzeigen lassen, natürlich in gleicher Größe und in den Abständen gleichmässig formatiert

denn genau? Vor allem: was bedeutet "in gleicher Größe"? Liegen die Bilder schon in identischer Größe (Breite und Höhe aller Bilder identisch) vor? Und um wieviele Bilder in einer Reihe dreht es sich eigentlich? Und was ist bei dir eine "Reihe"? Die Vertikale oder die Horizontale?

Antwort 3 von MoRe99 vom 27.03.2019, 16:28 Options

Versuch's mal mit float und entsprechendem margin. Das XHTML ist recht einfach (auf die Schnelle mal eben):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="de" lang="de">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
    <title>Bilder in drei Reihen</title>
</head>

<body>
    <img src="bild1.jpg" width="xxx" height="yyy">
    <img src="bild2.jpg" width="yyy" height="xxx">
    <img src="bild3.jpg" width="xxx" height="yyy"><br />

    ... ganz viele weitere Zeilen mit Bildern ...

    <img src="bild1.jpg" width="xxx" height="yyy">
    <img src="bild2.jpg" width="yyy" height="xxx">
    <img src="bild3.jpg" width="xxx" height="yyy">
</body>
</html>

In deinem CSS-File schreibst du z.B.:

img {
	float: left;
	margin: 5px;
}

Sollte die Bilder eigentlich sauber anordnen. Sobald allerdings die Bilder unterscheidlich breit und/oder hoch sind klappt das natürlich nicht mehr so sauber.

Antwort 4 von greg68 vom 27.03.2019, 17:21 Options

Danke für die Antwort!

Es soll so sein (mal in Tabellenform erklärt: 3 "Spalten" und beliebig viele Zeilen in denen die Bilder dargestellt werden, je nachdem wieviel Bilder zusammen kommen, also quasi ein Album das in drei Spalten unterteilt ist. Durch

$sql=mysql_query("select * from DB OFFSET x LIMIT y");

while ($row=mysql_fetch_object($sql)) {
<img src="$row->bild" ...>};

werden sie abgefragt aus der Datenbank. Es geht mir darum das CSS so ins PHP einzubinden das ein 3-spaltiges Album angezeigt wird.
Ich werde mal versuchen deinen Ansatz einzubinden.

Gruss

Antwort 5 von MoRe99 vom 27.03.2019, 17:31 Options

Zitat:
Es geht mir darum das CSS so ins PHP einzubinden das ein 3-spaltiges Album angezeigt wird.

Nun, PHP ist nicht wirklich meine Stärke. ;-) Aber es ollte zumindest so funktionieren, wie oben von mir dargestellt. Voraussetzung dafür, dass auch wirklich die Bilder der zweiten Reihe exakt untereinander stehe und die Bilder der dritten Reihe ebenfalls, ist jedoch, wie ich auch schon erwähnt habe, dass die Bilder gleich breit sind. Spontan habe ich grade keine Idee, wie das bei unterschiedlich breiten Bildern machbar wäre.

Antwort 6 von rfb vom 27.03.2019, 17:44 Options

Zitat:
wie das bei unterschiedlich breiten Bildern machbar wäre

setze sie jeweils in ein div oder span, gib diesem Blockelement-eigenschaften (ist nicht bei jeder Doctype nötig) und eine feste Breite, floate jeweils 3Stck und unterbrich dann das Floating mittels clear.

Antwort 7 von MoRe99 vom 27.03.2019, 18:09 Options

@ rfb

Jou, das geht natülich. Allerdings hast du dann halt u. u. sehr viele Divs oder Spans. Meine Antwort bezog sich auf eine Möglichkeit, das mit so wenig div und/oder span wie möglich hinzubekommen.

Antwort 8 von greg68 vom 27.03.2019, 18:43 Options

Danke,

die Bilder werden natürlich in der Größe formatiert.
Ich mache mich jetzt mal dran die Ideen auszuprobieren.

Antwort 9 von greg68 vom 27.03.2019, 19:24 Options

ich habs, ich habs!!

$sql=mysql_query("SELECT * FROM bilder") or die (mysql_error());
//ermittelt die Anzahl Bilder
$anzahl_bilder=mysql_num_rows($sql);
//Startet eine Schleife bis. Es werden immer 3 Bilder in einer Reihe angezeigt
For ($i=0;$i<$anzahl_bilder;$i=$i+3) {
$sql=mysql_query("SELECT * FROM bilder LIMIT 3 OFFSET $i") or die (mysql_error());

while ($row=mysql_fetch_object($sql)) {
echo "<div class='block'><p>
     <input type='checkbox' name='$row->datei'>$row->bezeichnung<br>
     <img src='$row->datei'>
</div>";
        }
}

und das CSS

img {
    width:200px;
    height:150px;
}
div.block {
    float:left;
    margin-left:10px;
}

liefert jetzt alle Bilder schön in 3 Spalten. Ich habe in Spalten gedacht statt wie hier in Zeilen. Die Checkbox soll es nachher ermöglichen Bilder auszusuchen.

Danke für die Hilfe

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..