Du bist nicht angemeldet.

Wie Bilder horizontal mit CSS anordnen.

Lieber Besucher, herzlich willkommen bei: Panorama Community. Falls dies dein erster Besuch auf dieser Seite ist, lies bitte die Hilfe durch. Dort wird dir die Bedienung dieser Seite näher erläutert. Darüber hinaus solltest du dich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutze das Registrierungsformular, um dich zu registrieren oder informiere dich ausführlich über den Registrierungsvorgang. Falls du dich bereits zu einem früheren Zeitpunkt registriert hast, kannst du dich hier anmelden.

Besi

Power-User

  • »Besi« ist der Autor dieses Themas

Beiträge: 115

  • Private Nachricht senden

1

Donnerstag, 23. August 2007, 23:26

Wie Bilder horizontal mit CSS anordnen.

Hallo, So nun will ich es mal versuchen zu erklären. In meinem Beispiel möchte ich die fünf Bilder horizontal in einer linie anordnen. Beim vergrößern bzw. verkleiner des Fensters soll der Abstand zwischen den Bildern gleich bleiben, sowie das rechte und das linke Bild mit dem rechten bzw. linken Rand abschliessen. Alle fünf Bilder sind nun horizontal angeordnet fast so wie ich es will. Die Bilder bleiben Rechts und links bündig zum Aussenrand. Hab zur Übersicht einen Border um die Li gemacht. Das einzige was für mich bis jezt unlösbar bleibt ist, wie bekomm ich das hin, damit der Abstand zwischen den Bildern beim verkleinern und vergrössern des Fensters immer gleich bleibt. Hier der link zur Ansicht: http://www.fewobesler.de/Kugelbild/flash/vorlage.html Hier der CSS teil für mein UL #foot{ width: 100%; padding:0; clear: both; border-top: 1px solid #CB4526; border-bottom: 1px solid #CB4526; margin: auto; } #foot ul { list-style-type: none; /*float: right;*/ } .links { border: 1px solid silver; float: left; list-style-type: none; padding: 10px 0px; width: 19% } .mitte { text-align: center; border: 1px solid silver; float: left; list-style-type: none; padding: 10px 0px; width: 19% } .rechts { text-align: right; border: 1px solid silver; float: right; list-style-type: none; padding: 10px 0px; width: 19% } Bin um jeden Hinweis dankbar. Das müsste doch lösbar sein. mfg Stefan

Malum

Administrator

Beiträge: 1 756

  • Private Nachricht senden

2

Freitag, 24. August 2007, 01:55

Mit li, div und CSS ziemliche Würgerei. Ist mit einer Tabelle in einer Minute erledigt. Wenn man sie XHTML-Konform haben will, dauert es etwas länger. Old fashioned, ich weiß. Nur die Bilder rutschen nicht so schön übereinander wie mit CSS.
www.kubische-panoramen.de

panocanarias

Mega-User

Beiträge: 716

Wohnort: Teneriffa, Spanien

  • Private Nachricht senden

3

Freitag, 24. August 2007, 02:57

Zitat

@Besi: wie bekomm ich das hin, damit der Abstand zwischen den Bildern beim verkleinern und vergrössern des Fensters immer gleich bleibt.

Zitat

@Malum: ist mit einer Tabelle in einer Minute erledigt.
Stefan, Malums Hinweis auf die Tabellen als Gestaltungsmittel hat mich erinnert, daß ich mal zu Thema "extrem breite Seiten" was geschrieben habe. Ist ein bischen her, müsste aber auch für die aktellen Browser gelten. Da ging es auch um das Nebeneinander-Anordnen von Bildern. Vielleicht findest du da noch 'ne Idee. Dort unter "Tips und Tricks" -> "extrem breite Webseiten erzeugen". Sorry, wegen Frames kein direkter Link. Saludos, Klaus

Blockbuster

Mega-User

Beiträge: 1 329

  • Private Nachricht senden

4

Freitag, 24. August 2007, 08:45

Mhh... ohne jetzt jemanden auf die Füsse treten zu wollen, halte ich persönlich Tabellen für möglich, aber in der heutigen Zeit in Verbindung mit CSS für überholt. Den Tip mit dem Abstandshalter *.gif als 1 Pixelgrafik halte ich sogar für absolut falsch. Der Grund für schlechten Code auf Webseiten sind genau solche Anleitungen, die zu hunderten im Netz kusieren. Auf die schnelle... [code] Meine Ferienwohnung [/code] Jedes Bild hat jetzt seine eigene ID, die zum formatieren mit CSS genutzt werden kann. Der Code soll nur als Beispiel dienen, den du dir selber Anpassen kannst. Er erfüllt aber schon seinen Zweck. Die Bedeutung der einzelnen CSS-Anweisungen setze ich jetz mal voraus. Du kannst natürlich auch die CSS in einer seperaten CSS einbinden. Im HTML-Code hat die normalerweise nix zu suchen. Wichtig ist da nur zu wissen wann eine ID bez. eine class benutzt wird. Die Links zu den Bildern müssen natürlich angepasst werden. Gruß Ralf
... rettet den Plural von Panorama > Panoramen

panoramen-360.de

Malum

Administrator

Beiträge: 1 756

  • Private Nachricht senden

5

Freitag, 24. August 2007, 10:33

Hallo Ralf Dass große Seiten wie Google News, Amazon, Heise und viele andere auf Tabellen aufbauen, hat den Grund, dass bei in der Breite flexiblen Layouts Tabellen ganz klar die Nase vorne haben. Da wird man sich bei Verwendung der mittlerweile üblichen li- und div-Suppe oft die Zähne ausbeissen - und auf Gestaltungsmöglichkeiten verzichten. Z.B. folgt ein auf 100% Breite gesetztes Quicktime-Panorama der Größe einer Tabellenzelle, nicht aber der Größe eines div-Containers.
www.kubische-panoramen.de

Besi

Power-User

  • »Besi« ist der Autor dieses Themas

Beiträge: 115

  • Private Nachricht senden

6

Freitag, 24. August 2007, 12:10

Werde dann doch die Tabelle vorziehen, da es für diesen einen Zweck für mich einfacher ist. Danke noch für Deine Mühe.