✔ Bilder in Bildergalerie positionieren - Abstände

Z

Zneaf

Erfahrenes Mitglied
Hi,

ich arbeite seit einiger Zeit an meiner eigenen PHP - Bildergalerie, die auch zum Großteil schon funktioniert.

Die Bilder werden so ausgegeben, dass immer 2 nebeneinander stehen.
Das Problem an der ganzen Sache ist jedoch, dass ich es bisher nicht geschafft habe, die Abstände fest zu legen.

Die Seite hat eine Breite von 526 Pixeln und jedes Bild ist 200px breit und 150px hoch.
Mein Ziel ist, dass der Abstand zum Seitenrand (rechts und links) sowie zwischen den Bildern exakt 42 Pixel beträgt. Der Abstand jeder "Zeile von Bildern" sollte ungefähr 10 px betragen.

Meine CSS - Kenntnisse sind eher bescheiden und deswegen würde ich mich über eure Hilfe sehr freuen.

Hier erstmal der PHP - Teil der Bilderausgabe ("bilder.php"):
PHP: 
<?php

// Ausgabe der Bilder.

$i = 1;

foreach ($images as $element) {

    if($i % 2 == 0){
		$class = "lastImage";
	}else{
		$class = "firstImage";
	}

    echo "<div class=\"{$class}\"><img src=\"$element\" width =\"200\" height=\"150\"></div>";
	$i++;
}

?>

Im <head> - Teil der "bilder.php" wird die CSS - Datei "bilder.css" eingebunden.

Diese sieht wie folgt aus:
Code: 
<style type="text/css">

.lastImage{
width:200px;
height:150px;
float:right;
}

.firstImage{
width:200px;
height:150px;
float:left;
}

</style>

Ich habe schon mit padding und margin daran herumgeschraubt, aber habe den gewünschten Effekt nie erziehlt...

Habt ihr vielleicht eine Idee, wie ich das gewünschte Ergebnis erhalten könnte?

Vielen Dank im Voraus ;)

LG Zneaf
 
Hi,
kannst du irgendwo eine Testversion laufen lassen?
Ich hab jetzt noch nicht so ganz verstanden wie die Gallerie aussieht?
Sind die Bilder nebeneinander oder soll sozusagen eine Art Tabelle entstehen oder wie?

Viele Grüße
 
Hi,

ich kann leider nirgends eine Testversion hochladen, aber ich versuche es dir noch einmal näher zu bringen.

Stelle dir einmal vor, dass du eine Tabelle mit 2 Spalten hast. In jeder Spalte gibt es 1 Bild. D.h. pro Zeile gibt es 2 Bilder. Somit hängt die Anzahl der Zeilen davon ab, wieviele Bilder es insgesamt gibt.

Beispiel 1: gibt es insgesamt 10 Bilder, so ergibt sich eine Tabelle mit 2 Spalten und 5 Zeilen.
Beispiel 2: gibt es insgesamt 50 Bilder, so ergibt sich eine Tabelle mit 2 Spalten und 25 Zeilen.

Beachte bitte, dass ich in meinem Code keine Tabelle erzeugen lasse, sondern die Bilder per CSS und PHP anordnen lasse. Die Tabelle diente hier lediglich als Beispiel zum besseren Verständniss ;)

Das erste Bild wird durch float:left; links angeordnet und das zweite Bild wird per float:right; rechts angeordnet.
Um dies umsetzen zu können, verwende ich 2 mal class.
Je nachdem, ob es sich um das erste oder um das zweite Bild (pro "Zeile") handelt, wird die entsprechende class per PHP vergeben.

Hoffe, dass das ganze nun etwas verständlicher war :)

Was mein Problem ist, habe ich ja bereits erklärt (war hoffentlich verständlich genug ^^ )

Wenn du noch fragen haben solltest, so zögere nicht sondern schiess los =)

Vielen Dank schonmal ;)

LG Zneaf
 
Hey Leute ;)

ich versuche seit meinem letzten Post immernoch das Problem mit den Abständen zu lösen, aber ich bekommst einfach nicht hin :(

Habt ihr vielleicht eine Idee oder nen Tip oder vielleicht sogar die Lösung für mein Problem?

Über eure Hilfe würde ich mich sehr freuen.

Vielen Dank ;)

LG Zneaf
 
Zneaf hat gesagt.:
... ich kann leider nirgends eine Testversion hochladen, aber ich versuche es dir noch einmal näher zu bringen.
Zum Vergrößern anklicken....
... dann zeige hier einfach mal ein minimales HTML-Dokument, das deinem geparstem PHP entsprechen würde, mit dem von dir gewünschten Dokumententyp und dem entsprechendem CSS.
Damit könnte man dein Problem nachstellen und das ist besser als seitenlange Problembeschreibungen, die u.U. nur verwirren. Vermutlich ist das auch der kürzere Weg.
 
Das liegt an deinem float:right in der Klasse lastImage.
Hierdurch wird es ganz rechts angeordnet.
Ich würde es so machen:
PHP: 
// Ausgabe der Bilder.

$i = 1;

foreach ($images as $element) {

    if($i % 2 == 0){
        echo "<div class='lastImage'><img src=\"$element\" width =\"200\" height=\"150\"></div>";
        echo "<div class='clr'></div>";
    }else{
        echo "<div class='firstImage'><img src=\"$element\" width =\"200\" height=\"150\"></div>";
        
    }

   
    $i++;
}

?>
und im CSS:
CSS: 
.firstImage, .lastImage{
width:200px;
height:150px;
float:left;
margin: 0 42px 0 42px;
}

.lastImage{
    margin: 0 42px 0 0;
}

.clr{
   clear:left;
}

Sollte zum gewünschten Ergebnis führen, habs jetzt allerdings nicht getestet.
 
Zuletzt bearbeitet:
Hi Leute =)

Danke für die schnellen Rückmeldungen ;)

@hela: hab dir hier mal n html dokument zur beschreibung gemacht. Hoffe ich hab genau das gemacht, was du wolltest....war mir nicht so ganz sicher ^^

HTML: 
<table border ="0" width ="500" cellspacing ="0" cellpadding="0">
     <tr>
          <td><img src="images/bild1" width="200" height="150"></td>
          <td><img src="images/bild2" width="200" height="150"></td>
     <tr>
     <tr>
          <td><img src="images/bild3" width="200" height="150"></td>
          <td><img src="images/bild4" width="200" height="150"></td>
     <tr>
     <tr>
          <td><img src="images/bild5" width="200" height="150"></td>
          <td><img src="images/bild6" width="200" height="150"></td>
     <tr>
     <tr>
          <td><img src="images/bild7" width="200" height="150"></td>
          <td><img src="images/bild8" width="200" height="150"></td>
     <tr>
</table>

Die Bilder auf der linken Seite (Bild 1,3,5,7) sollen 42pixel vom linken rand entfernt sein, dann sollen weitere 42pixel abstand zu den Bildern der rechten Seite (Bild 2,4,6,8) sein und dann sollten es wieder 42pixel zur rechten Seite Abstand sein.
Hoffe das war das was du wolltest und hoffe es war logisch genug ^^

@Maniac: hab deine Variante ausprobiert und folgendes Ergebnis erhalten:
Pro Zeile steht nun nurnoch 1 Bild anstatt 2 Bilder. Sie sind immer abwechselnd ein stück nach rechts und links verschoben (warscheinlich die 42px). D.h. das erste ist 42px zu weit links und das zweite ist 42px zu weit rechts und das dritte ist 42px zu weit links usw.

Vielen Dank für eure Hilfe ;)

LG Zneaf
 
Gib den Tabellenspalten css-Klassen, eine für rechts, eine für links..
HTML: 
<td class="linksTD"><img src="images/bild1"></td>
<td class="rechtsTD"><img src="images/bild2"></td>
Die Höhe und Breite der Bilder hat eigentlich -seit CSS- im Body nichts mehr zu suchen.. Nicht so schlimm, weil wir im CSS den td's die Breite und Höhe angeben, zudem damit auch den Abstand definieren. Einfach wäre es mit text-align und margin-left bzw. margin-right, damit bekommen wir unsere "fixen" Abstände hin.
HTML: 
..Platzhalter für eigene Gedanken :)

Links:
css im Head der Datei : http://www.css4you.de/wscss/css02.html#head
text-align : http://www.css4you.de/Texteigenschaften/text-align.html
margin/padding : http://de.html.net/tutorials/css/lesson10.php

mfg chmee
 
Hey chmee ;)

hört sich ja gut an, aber ich habe ja nicht wirklich eine Tabelle in meiner Galerie.
Diese diente ja lediglich zu Erklärungszwecken (weil hela es nicht gahz verstanden hatte).

Oben habe ich sowohl die Ausgabe per PHP als auch die "Formatierung" per CSS gepostet.

Vielleicht kannst Du das ja mal überfliegen und mit Deine Ideen / Lösungsvorschläge dazu mitteilen =)

Denn ich wüsste nicht, wie ich bei einer solchen Tabelle die Bilder automatisch in die richtige Zelle einfügen lassen sollte.

Vielen Dank für die Hilfe =)

LG Zneaf
 
Also ich habs jetzt nochmal getestet, und es funktioniert!
Hab die Breite von 526px genommen und ne gestrichelte Linie gesetzt, damit du siehst das es klappt.
PHP: 
<!doctype html>
<html>
<head>
<style type="text/css">
.firstImage, .lastImage{
width:200px;
height:150px;
float:left;
margin: 0 42px 10px 42px;
}
 
.lastImage{
    margin: 0 42px 10px 0;
}
 
.clr{
   clear:left;
}
body{
background-color: #c6c6c6;
}
#wrapper{
border: 1px #fff dashed;
width: 526px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
<?php

// Ausgabe der Bilder.

$images = array();
for($z=1;$z<=20;$z++){
	$images[$z] = 'Bild';
}


$i = 1;

foreach ($images as $element) {

	if($i % 2 == 0){
		echo "<div class='lastImage'><img src='".$element."2.png' width ='200' height='150'></div>";
		echo "<div class='clr'></div>";
    }else{
		echo "<div class='firstImage'><img src='".$element."1.png' width ='200' height='150'></div>";
        
    }

		 
		$i++;
}
?>
</div>
</body>
</html>
 

Anhänge

  • Zneaf.jpg
    Zneaf.jpg
    34,9 KB · Aufrufe: 5
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück