Bilder in Bildergalerie positionieren - Abstände @ tutorials.de: Tutorials, Forum & Hilfe

Zneaf · 23.07.11 17:18

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-Code:


<?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

**Jan-Frederik Stieler** · 23.07.11 19:22

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

Zneaf · 23.07.11 21:19

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

Zneaf · 26.07.11 10:02

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

***hela*** · 26.07.11 11:09

Zitat von Zneaf

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

... 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.

Maniac · 26.07.11 14:25

Das liegt an deinem float:right in der Klasse lastImage.
Hierdurch wird es ganz rechts angeordnet.
Ich würde es so machen:

PHP-Code:



// 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:

Code 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.

Zneaf · 27.07.11 20:37

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-Code:

<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

**chmee** · 27.07.11 20:51

Gib den Tabellenspalten css-Klassen, eine für rechts, eine für links..

HTML-Code:

<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-Code:

..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

Zneaf · 27.07.11 20:58

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

Maniac · 28.07.11 11:46

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-Code:


<!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>

Zneaf · 29.07.11 18:09

Hey Maniac

jetzt bin ich echt etwas verwirrt...ich weiß nicht so recht, wie ich Deine Version bei mir umsetzen muss, damit das ganze funktioniert. Tut mir leid.
Ich poste Dir mal den gesamten Programm-Code, den ich vor Deinem letzten Post hatte.

bilder.php:

PHP-Code:


<?php



// Daten aus URL abholen.

$album = $_GET['album'];

$location = $_GET['location'];

$day = $_GET['day'];

$month = $_GET['month'];

$year = $_GET['year'];



// Ordnernamen zusammenbasteln.

$ordnername = "$album($day-$month-$year)";



// Bilder in Array übergeben.

$images = glob("galery/".$ordnername."/pics/*.jpg");

$counter = count($images);

$anzahl_bilder = $counter;



// 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++;

}



?>

bilder.css:

Code :

<style type="text/css">
 
.lastImage{
width:200px;
height:150px;
float:right;
}
 
.firstImage{
width:200px;
height:150px;
float:left;
}
 
</style>

Was ich verstehe, ist, dass Du die Bilder in einem Array so abspeicherst, dass du jedem Bild eine Nummer zuteilst.

Allerdings könnten dann in jeder Galerie auch nur 20 Bilder sein, wenn ich mich nicht irre.
D.h. man müsste die Bilder vorher zählen lassen und diesen Wert als Maximalwert für $z verwenden oder?

Was ich nicht verstehe, ist, wie bzw. wo ich beim dem Teil mit dem Array den Pfad zu den Bildern angeben muss, damit überhaupt Bilder angezeigt werden können.

Was ich auch nicht verstehe, wie es mir mehr als 2 Bilder anzeigen soll, wenn ich nur
$element."1.png' und $element."2.png' zum einbinden der Bilder verwende.

Tut mir echt leid, dass ich damit nicht so ganz klar komme...programmiere lediglich in meiner Freizeit (Wenn mich meine Freudinn lässt

) und versuche mein Wissen zu erweitern.
Hoffe Du nimmst mir das nicht übel.

Vielen Dank für alles

LG Zneaf =)

Maniac · 29.07.11 18:16

Nein, mein Code wie ich das Array zusammengesetzt habe hat nichts mit deinem zu tun.
Das war nur weil ich ja deine Bilder nicht habe und ein Array mit mehreren Bildern simultan zu deinem Script brauchte.

Was für dich wichtig ist, hab ich dir schon vorher gepostet, da ich recht hatte und mein Code stimmt.

Nimm einfach meine Foreach-Schleife die ich dir vorher gepostet hatte und du gesagt hast das die Bilder untereinander und verschoben sind. Das bedeutet für mich das dein Conatianer (DIV) keine 526px breit ist, denn sonst würde es gehen. Hast du bei den Bildern noch einen Border definiert oder so?

Zneaf · 03.08.11 10:02

Hey Maniac

Es hat alles so funktioniert, wie Du es mir beschrieben hast.
Ich habe einfach noch einen zusätzlichen DIV in die for-schleife eingebaut, dem ich lediglich die Breite 526px zugewiesen habe...und schon hats funktioniert

PHP-Code:


// Ausgabe der Bilder.



$i = 1;



foreach ($images as $element) {



    echo "<div class='bilder'>";



    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>";

        

    }



    echo "</div>";



    $i++;

}

Habe das Script dann nurnoch um eine Angabe erweitert, mit der ich den Abstand von Reihe zu Reihe auf 5px festgelegt habe (im bilder.css).

Code :

1
2
3

.bilder {
width:200px;
}

zu Deiner Frage: ich habe bei den Bildern keinen Border definiert.

Vielen Dank für alles

LG Zneaf =)

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Bilder vergrößern in Bildergalerie

Bildergalerie: Neue Bilder Kennzeichnen

Bildergalerie - Bilder nacheinander aufrufen

PHP Bildergalerie (Bilder verlinken)

Bildergalerie: Kategorien u. Bilder getrennt

Stichworte

E-Mail:

Abonnieren Abbestellen