Grafiken innerhalb der Seite ausrichten...

Andre.E

hallo gemeinde,

ich habe folgendes problem, ich möchte in einer seite mehrere bilder (mit beschreibung unter dem bild) darstellen. da die bilder zu einer serie gehören, sollen diese nebeneinander dargestellt werden wobei die darstellung abhängig von der fensterbreite sein soll.
also nehmen wir mal an ein bild hat eine größe von 190 pixeln in der breite und ich habe 12 bilder. wäre jetzt mein browserfenster 600 pixel breit hätte ich 4 reihen bilder, bei 800 pixeln 3 reihen und bei 200 pixeln 12 reihen.

eine table dachte ich ist der richtige ansatz und folgendes habe ich versucht:

1.

HTML

<html>
<head>
<title>test</title>
</head>
<body>
<table width="80%" border="0" align="center">
  <tr>
    <td>
	[img]../bilder/bild.jpg[/img] 
	[img]../bilder/bild.jpg[/img]
	[img]../bilder/bild.jpg[/img]
	[img]../bilder/bild.jpg[/img]
	[img]../bilder/bild.jpg[/img]
	[img]../bilder/bild.jpg[/img]
	[img]../bilder/bild.jpg[/img] 
	[img]../bilder/bild.jpg[/img]
	[img]../bilder/bild.jpg[/img]
	[img]../bilder/bild.jpg[/img]
	[img]../bilder/bild.jpg[/img]
	[img]../bilder/bild.jpg[/img]
    </td>
  </tr>
</table>
</body>

Alles anzeigen

hier sind die bilder so wie ich es möchte, aber ich kann keinen erklärenden text unter das jeweilige bild setzen...

2.

Code

<table border="0" width="100%">
  <tr><td>
    <table border="0" width="190">
      <tr><td><a href="../bilder/abild.jpg" target="_blank" title="Bild">
        [img]../bilder/bbild.jpg[/img]</a></td></tr>
      <tr><td><font face="Verdana", "Helvetica", "Geneva", "Arial", "MS Sans Serif" size=2 color="#00000">Text</font></td></tr>
    </table>


    <table border="0" width="190">
      <tr><td><a href="../bilder/abild.jpg" target="_blank" title="Bild">
        [img]../bilder/bbild.jpg[/img]</a></td></tr>
      <tr><td><font face="Verdana", "Helvetica", "Geneva", "Arial", "MS Sans Serif" size=2 color="#00000">Text</font></td></tr>
    </table>


    <table border="0" width="190">
      <tr><td><a href="../bilder/abild.jpg" target="_blank" title="Bild">
        [img]../bilder/bbild.jpg[/img]</a></td></tr>
      <tr><td><font face="Verdana", "Helvetica", "Geneva", "Arial", "MS Sans Serif" size=2 color="#00000">Text</font></td></tr>
    </table>

Alles anzeigen

...

</td></tr>
</table>

hier ist zwar eine beschreibung der bilder möglich, aber diese werden nicht an der möglichen fensterbreite ausgerichtet.

wer weiss einen rat

danke und gruss
Andre

driver

hat nix mit der grafik zu tun... also mal verschoben....

edit:

hab mal weng rumversucht.... is mir nur sowas eingefallen....

HTML

<html> 
<head> 
<title>test</title> 
<style type="text/css">
div {
width:195px;
float:left;
}
</style>
</head> 
<body> 
<table width=80% border=0>
<tr><td>
<div>[img]bild.jpg[/img]
sdafasfasdfasdfa</div>
<div>[img]bild.jpg[/img]
sdafasfasdfasdfa</div>
<div>[img]bild.jpg[/img]
sdafasfasdfasdfa</div>
<div>[img]bild.jpg[/img]
sdafasfasdfasdfa</div>
<div>[img]bild.jpg[/img]
sdafasfasdfasdfa</div>
<div>[img]bild.jpg[/img]
sdafasfasdfasdfa</div>
<div>[img]bild.jpg[/img]
sdafasfasdfasdfa</div>
<div>[img]bild.jpg[/img]
sdafasfasdfasdfa</div>
<div>[img]bild.jpg[/img]
sdafasfasdfasdfa</div>
</td></tr>
</table>
</body>
</html>

Alles anzeigen

Andre.E

schönen dank einstweilen, werde mal versuchen das ganze entsprechend umzusetzen...

gruss
Andre

Andre.E

servus,
das wocheende ist vorbei und ich habe versucht den vorschlag entsprechend umzusetzen - leider ohne den gewünschten erfolg. zum einen da die bilder immer noch untereinander angezeigt werden und zum zweiten durch die style angabe im header der je nach einstellungen im IE eine anzeige der inhalte unterbindet.

da sich vorhandener text der verfügbaren fensterbreite anpasst, muss das doch auch mit anderen inhalten möglich sein...
bin für weitere vorschläge dankbar!

gruss
Andre

yeti66

Andre.E,

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
img {padding:4px;border:1px solid #84776B; background:#fff; text-align:center;}
div { width:210px;float:left;left: 25px;text-align:center;}
</style>
</head>
<body>
<table width=80% border=0   align="center">
<tr><td >
<div>[img]bild.jpg[/img]
sdafasfasdfasdfa</div>
<div>[img]bild.jpg[/img]
sdafasfasdfasdfa</div>
<div>[img]bild.jpg[/img]
sdafasfasdfasdfa</div>
<div>[img]bild.jpg[/img]
sdafasfasdfasdfa</div>
<div>[img]bild.jpg[/img]
sdafasfasdfasdfa</div>
<div>[img]bild.jpg[/img]
sdafasfasdfasdfa</div>
<div>[img]bild.jpg[/img]
sdafasfasdfasdfa</div>
<div>[img]bild.jpg[/img]
sdafasfasdfasdfa</div>
<div>[img]bild.jpg[/img]
sdafasfasdfasdfa</div>
</td></tr>
</table>
</body>
</html>

Alles anzeigen

mmhh, war doch richtig! Du kannst die Tabelle ja mit 100% angeben, aber wozu brauchst Du dann eine Tabelle. Je nach Breite wirst Du es nicht vermeiden könnne, dass Bilder auch untereinander stehen. Aber wenn ich es richtig verstanden habe strebst Du es doch an, das sich die Bilder der Breite anpassen.!?

P.S. Ich habe nur einen Rahmen erstellt. damit man auch ohne Bilder dieAbstände sieht und den Text zentriert.
Gruß yeti66

Andre.E

vielen dank yeti66!!!

ich kann dir nicht sagen warum, aber jetzt funktioniert es. vielleicht kannst du (oder jemand anderes) mir auch bei der letzten hürde helfen.
die bilder werden jetzt wie gewünscht ausgerichtet, aber die texte für die beschreibung sind unterschiedlich lang. habe ich ein bild mit einem sehr langen text, "hängt" das folgende bild unter eben diesem...

(ich hoffe ihr versteht was ich meine )

danke und gruss
Andre

yeti66

Andre.E,

Du gibst allen einheitlich eine größere Höhe würde ich sagen oder reduzierst den Text!?>> Fasse Dich kurz << so in der Art. Umfangreichere Erklärungen kann mann ja auch mit einem POPUP zum Bild machen .

Hier (ausgeliehen bei Ronald ) ein Beispiel: http://web306.server3.webplus24.de/testseiten/tooltips/

Gruß yeti66

Andre.E

yeti66

vielen dank!
ich habe im style eine einheitliche höhe vergeben und jetzt sieht es wirklich so aus wie ich haben wollte...

aber das mit dem popup ist auch eine sehr gute idee, würdes du mir bitte hierzu noch den code geben?

... ich hoffe ich kann mich irgendwann mal revangieren

gruss
Andre

yeti66

Andre.E,

Code zum POPUP??
Den findest Du doch massenweise im Internet.
http://www.fueralles.de/Popupgenerator.html

Gruß yeti66

Andre.E

yeti66

danke für alles - habe fertig

gruss
Andre

Tags