Tabellen

minalva

Hallo, ich habe mal eine Frage,

ich möchte auf meiner Homepage Backgrounds anbieten.
Da es so viele sind, fände ich es schön, wenn möglichst viele nebeneinander stehen könnten. Die Seite soll sich aber auch der Auflösung möglichst anpassen können.
Da ich aber noch Text habe der bei dem Bild bleiben muss, dachte ich, das Beste wäre wohl eine Tabelle.
Mir gelingt es jedoch nicht eine Tabelle zu erstellen, bei der alle Bilder in einer Zeile sind, die Spalten aber dann umgebrochen werden, wenn der Platz nichtmehr reicht.

Mein momentaner Versuch sind lauter einzelne Tabellen, doch auch hier gelingt es mir nicht einzugeben, dass alle Tabellen nebeneinander sein sollen, falls der Rand jedoch erreicht ist, eine neue Zeile gestartet werden darf.

Äh.. das ist jetzt schlecht erklärt

Also mein bisheriger Quelltext:

Zitat

<table align="left" border="0">
<tr>
<td><a target="_blank" href="img/bild1.jpg">

The first picture</a>
</td>
</tr>
</table>
<wbr>
<table align="left" border="0">
<tr>
<td><a target="_blank" href="img/bild2.jpg">

the second picture</a>
</td>
</tr>
</table>
<wbr>
<table align="left" border="0">
<tr>
<td><a target="_blank" href="img/bild3.jpg">

the third picture</a>

</tr>
</table>

Alles anzeigen

Da sind jetzt zwar alle Tabellen nebeneinander, doch auch <wbr> führt nicht zu dem benötigten Umbruch.

Rocco

wieso machst du nicht eine tabelle mit einer festen breite (ca. 500pxl) und mit einer fixen anzahl von spalten und zentrierst sie?

minalva

wil ich möchte, dass so viele Bilder wie eben draufpassen, nebeneinander sind. Bei einer festen Breite jedoch, muss ich mich für eine Auflösung entscheiden und dann ärgern sich alle, die eine andere verwenden

Rocco

dann mach mal lauter tabellen mit 1 spalte und 1 zeile und fester größe, wo das bild reinkommt und die einfach nebeneinander. weiß nicht ob das geht, aber versuchs mal.

genau das habe ich ja gemacht, oder zumindest wollte ich das, doch die werden immer entweder alle untereinander angezeigt oder eben so nebeneinander, dass sie nicht umbrechen

Rocco

hmm... da hast du recht... habs auch grad probiert... ja dann bleibt dir nichts anderen übrig, als für jede auflösung eine eigene seite zu machen, wenn du es nicht so machen willst wie ich anfangs gesagt hab...

mfg

Marcus

Hi,

das geht mit CSS ganz leicht:

HTML

<html>
<head>
<title>Eine flexible Galerien</title>
<style type="text/css">
<!--
.galerie{width:100%}
.container{float:left; margin:5px;width:250px;}
.container img{float:left;width:120px;height:80px;}
-->
</style>
</head>
<body>
<div class="galerie">
	<div class=container>
		[img]bild1.jpg[/img]
		<h5>Titel</h5>



Beschreibung</p>
	</div>
	<div class="container">
		[img]bild2.jpg[/img]
		<h5>Titel</h5>



Beschreibung</p>
	</div>
	<div class="container">
		[img]bild3.jpg[/img]
		<h5>Titel</h5>



Beschreibung</p>
	</div>
	<div class="container">
		[img]bild4.jpg[/img]
		<h5>Titel</h5>



Beschreibung</p>
	</div>
</div>
</body>
</html>

Alles anzeigen

width und heigt musst du halt an deine Bedürfnisse anpassen.

Gruß
Marcus

Vielen Dank Marcus, das war genau das was ich gesucht habe

Ähmm....ist es eigentlich normal, dass diese Tabelle in den meisten Browsern (IE, Opera...aber nicht Firefox) manchmal etwas merkwürdig dargestellt wird?

Ich verwende den selben Quellcode, doch bei mir erscheint manchmal vollkommen grundlos ein 'nichtvorhandenes Bild'
Also bei einem Umbruch sieht es so aus, als wäre am Anfang der Zeile ein Bild. Es sind aber alle Bilder vorhanden.
Erst dachte ich ja, es läge am Source, doch die verschiedenen Browser, zeigen dieses Problem an unterschiedlichen Stellen

minalva

Ich habe genau das selbe festgestellt, aber erklären kann ich das auch nicht

6_freddy

Hi,
also das funzt doch wunderbar (by the Way:"Danke Marcus!") - der Textbereich gibt halt 'ne Breite vor, die man nicht vergessen sollte. Wenn man (zu Demo-Zwecken) mal so formatiert:

Code

<!--
.galerie{width:100%;border:1px solid grey}
.container{float:left; margin:5px;width:250px;border:1px solid grey}
.container img{float:left;width:120px;height:80px;border:1px solid grey}
-->

Dann wird das deutlich.
MfG
6_freddy

minalva

Ich sage das ja nur sehr ungern, aber auch das funzt nicht.

Ich habe es mit verschieden großen Bildern versucht, ich habe es mit verschiedenen Werten versucht, nichts hilft ... nur Firefox bildet es richtig ab

Tags