• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bilder werden nicht richtig nebeneinander angezeigt.

B

benbalthasar

Mitglied
Hallo,

via PHP und SQL lese ich aus einer Datenbank Infos aus womit ich Bilder auf einer Webseite ausgebe. Jetzt habe ich allerdings ein Darstellungsproblem.

Die Bilder sollen alle nebeneinander stehen und nach 4 auf die nächste Zeile wechseln.

Habe das ganze mal auf einer extra Seite hochgeladen: Galerie Test - Informationen uber mich, Ben Balthasar Hier mal der Code mit dem ich die Bilder generien und anzeigen lasse

Hier noch der Code:

PHP: 
<div class="galerie">
   <h2>Bildergalerie <?php  echo $monatsname; ?>    </h2> 


<?php
require($templates_view."gallerie_navi_view.php");
?>
<hr />
<!-- monat -->

<ul>
<?php $i=0; ?>
<?php  foreach ($alben as $album) { ?>    
<li><p><?php if($_GET['wo'] == 'fremd') {
        echo $album['fotograf'];} ?> </p>
        
        <img src="<?php echo $album['path'];?>/thumb/<?php echo $album['filename'];?>"  /></p>
        <p><?php echo $album['titel'];?>
    
    <?php if($album['erstellt'] > $last_logindatum ) {?>
    
    
 <?php } ?></p>     
    
</li><?php } ?></ul>


</div>

Vielen Dank für Eure Hilfe.

PS: Das ganze ist XHTML
 
Zuletzt bearbeitet:
Wo ich angefangen habe mit der Seite wurde mir aber mitgeteilt das ich nicht zuviel div's nutzen sondern dann lieber mit einer Liste arbeiten soll.
 
Eine Liste ist für Galerien genau richtig. Allerdings wird bei mir (im Firefox) die Liste korrekt angezeigt. Hast Du das Problem bereits behoben?

Dein HTML-Code hat noch ein paar Schnitzer:
[Invalid] Markup Validation of [url]http://test.ben-balthasar.de/index.php?site=monat&mid=09&wo=2012 - W3C Markup Validator[/URL]

Und wenn Du das nächste Mal HTML-Code zeigst, dann bitte auch den erzeugten HTML-Code - denn der ist relevant um eine Darstellung zu beurteilen.

Außerdem geht (oder ging?) es hier um Gestaltung, also habe ich das Topic direkt zu CSS verschoben.
 
benbalthasar schrieb:
Wo ich angefangen habe mit der Seite wurde mir aber mitgeteilt das ich nicht zuviel div's nutzen sondern dann lieber mit einer Liste arbeiten soll.
Zum Vergrößern anklicken....

Stimmt schon, mit Divs sollte man es nicht übertreiben.

Wenn du alle vier Bilder eine zusätzliche Aktion ausführen willst, sei es ein <br />, <p>, etc., dann baue in die foreach Schleife eine if Abfrage mit Modulo 4 ein.
 
Wenn man <li>'s per CSS floatet wird ein <br> nur wenig anrichten können. Ein <p> müsste auch per CSS entsprechend gestylet werden.

Nein, einfacher ist es wenn man dem <ul> eine feste Breite gibt die in der Summe die Breite der einzelnen, gefloateten <li>'s ergibt. Mit "display: inline;" könnte man ähnliches erreichen. So etwas ist Gestaltung und muss nicht zwingend in einer PHP-Programmierung abgehandelt werden.
 
Ich hatte ja nicht von einer Liste gesprochen. Man könnte die Bilder auch direkt aufeinander folgend in einem Container ausgeben. ;)
 
Hallo,

habe nix geändert und bei mir wird das auch noch nicht richtig angezeigt, wie man hier auf dem Screen sehen kann.

Wegen dem Rest werde ich mir für die Zukunft merken und dran halten.

Mfg

Edit: <ul> hat schon die feste Breite und auch ordne ich alles mit inline-block.
Wenn ich bei dem 3. <li> die Unterschrift kürze, dann wird alles wieder richtig angezeigt.
 

Anhänge

  • so.jpg
    so.jpg
    23,2 KB · Aufrufe: 10
Zuletzt bearbeitet:
Dein Code stimmt schon mal insofern nicht, als dass du <p> in <li> steckst. Wenn du gerne eine Liste verwenden willst, dann schreibe etwas wie <li><img src="" alt="" /><br /><span class="bild-text">Blabla</span></li>, gib den Listelementen ein display: inline-block und mache den Wrapper so breit, dass nur 4 Bilder nebeneinander passen. Das ist zwar auch nicht ganz sauber, aber immer noch besser als deine Verschachtelung.
 
Dein Quellcode ist schon ganz in Ordnung. Natürlich kann man in <li> auch <p> verwenden, genau wie <strong>, <u> oder auch <div>'s wenn es sein muss. In deinem Fall liegt die Ursache für diese Darstellungssache jedoch vermutlich woanders ...

benbalthasar schrieb:
habe nix geändert und bei mir wird das auch noch nicht richtig angezeigt, wie man hier auf dem Screen sehen kann.
Zum Vergrößern anklicken....

Leider kann ich den von dir genutzten Browser weiterhin nicht erkennen?! Bei mir stimmt im Firefox die Ansicht immernoch.

Edit: <ul> hat schon die feste Breite und auch ordne ich alles mit inline-block.
Wenn ich bei dem 3. <li> die Unterschrift kürze, dann wird alles wieder richtig angezeigt.
Zum Vergrößern anklicken....

Die Eigenschaft
Code: 
dispay: inline-block;
hast Du nur dem <ul> zugewiesen. Ersetze das mal durch
Code: 
dispay: block;
. Danach wirst Du merken, dass das floating der <li>-Elemente nun dafür sorgt, dass das <ul> und somit das umgebende Element keine Höhe mehr hat und der Hintergrund fehlt. Das kannst Du beheben indem Du dem <ul> auch noch die Eigenschaft
Code: 
overflow: hidden;
gibst.

Dann solltest Du am HTML-Code etwas korrigieren. Momentan sieht ein Eintrag in der Liste bei dir so aus:

HTML: 
<li><p> </p>
		
		<img src="bilder/2012/September/schnapp//thumb/schnapp_3.JPG"  /></p>
		<p>Schnappschüsse	
		
	
 </p> 	
	
</li>

Dort ist ein </p> zuviel und das obere <p></p> ergibt auch nicht wirklich einen Sinn. Korrigiere das mal zu

HTML: 
<li>
		<img src="bilder/2012/September/schnapp//thumb/schnapp_3.JPG"  />
		<p>Schnappschüsse</p>
</li>

Wenn Du jetzt noch Abstände zwischen Bild und Text haben willst, gib den Abstand dem Bild, also per

Code: 
li img { margin-bottom: 8px; }

Da jetzt der HTML-Code hier stimmt und Du den Style ergänzt hast, sollte es auch in deinem Browser eigentlich passen. Wenn nicht, nenne bitte deinen Browser UND korrigere auch den restlichen HTML-Code, wie oben schon gesagt.
 
Pro Listelement sollte eigentlich nur ein Eintrag stehen. Da du hier ja zwei brauchst, würde ich entweder <p> nehmen und diese floaten, oder die Bildunterschriften nicht direkt ausgeben, sondern per JavaScript in einem Slide-In-container, wenn jemand über das Bild hovert.
 
Hallo,
versuch mal folgende Änderungen
Code: 
.galerie ul {
 clear: both;
 width: 100%;
 display: block;
 list-style-type: none;
 overflow: hidden;
 margin:0 auto 15px auto;
}

.galerie li {
 float:left;
 min-height:8.5em;
 margin:5px;
 padding:5px;
 border:1px solid #aaa;

}
.galerie li img { 
  display:block;
  margin:10px auto;
}
Bei mir hat's funktioniert.
 
Vielen Dank, jetzt funktioniert es auch bei mir so wie ich es gern möchte. Habe zwar noch ein wenig die Werte angepasst, aber es funzt.

Besten Dank auch an die anderen für die Hilfe.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben