CSS Div Box

allroundskater

Cadet 2nd Year
Registriert
März 2008
Beiträge
27
Guten Abend.

Ich habe folgendes Problem.

Ich möchte eine Box mit Bilder nebeinander ohne Zeilenumbruch darstellen. Wenn es zu viele Bilder in der Box hat, sollte ein Scrollbalken erscheinen um weiter nach rechts zu scrollen.

Hier mein Code

PHP:
<html>
<head>
<titel>Gallery</titel>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>

<div id="fenster">
<?php
$i = 0;
$handle = opendir("images/gallery/");
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") {
$i++;
}
}
echo "$i";
closedir($handle);
$a = 1;
while($i >= $a){
?>

<a href="images/gallery/<?php echo $a;?>b.jpg" target="_blank"><img src="images/gallery/<?php echo $a;?>.jpg" border="0"></a>

<?php 
$a++;
}
?>
</div>
</body>
</html>

Und noch der CSS Code

HTML:
#fenster {
 display:inline;
 margin: 0 auto;
 margin-top: 200px;
 width: 600px;
 height: 300px; 
  overflow: scroll; 
}

Ich wäre froh wenn mir jemand weiterhelfen könnte.
 

Anhänge

  • gallery.JPG
    gallery.JPG
    18,4 KB · Aufrufe: 183
Das Problem besteht immer noch, auch wenn ich den white space definiere.
 
Funktioniert in meinem Beispiel einwandfrei:

HTML:
<html>
<body>

<div style="margin:0 auto; height:300px; width:600px; overflow:scroll; white-space:nowrap;">
<img src="bild.jpg" /> <img src="bild.jpg" /> <img src="bild.jpg" /> <img src="bild.jpg" /> <img src="bild.jpg" /> <img src="bild.jpg" /> <img src="bild.jpg" />
</div>

</body>
</html>

Ist doch vom Prinzip her das selbe? Die überflüssige Scrollbar bekommt man in dem Beispiel weg, wenn man stattdessen overflow:auto benutzt.

Nachtrag: Das "display:inline" macht das kaputt. Lass das mal weg.
 
Vielen Dank, mit deinem Beispiel funktionierts. Ich habe rausgefunden das es auch mit display:list-item funktioniert.
 
Zurück
Oben