Bildergalerie mit Tabelle

G

garfield1711

Mitglied
Hi,

hatte die letzte Zeit viel zu tun und konnt mich nicht mehr um die HP kümmern.
Komme so langsam vorwärts.
Ich habe auf unserer momentanen HP ein Bilderarchiv.
Das sieht z.B. so aus:

http://www.mainzer-freischuetzen-garde.de/2009/Rosenmontag_23.02.2009/Rosenmontag_23.02.2009.htm

Jetzt mache ich die neue HP ja in CSS und PHP.
Kann man die Bilder da in etwa auch so reinbringen?
Ich frage nur, da ich die alte HP mit Frontpage und Tabellen gemacht habe und man
bei CSS ja Tabellen vermeiden soll.
Gibt es da eine vernünftige Lösung?

Gruß
Garfield
 
Du kannst es getrost bei der Tabellenstruktur belassen, denn auch wenn in der Seite CSS zum Einsatz kommt, besitzt die Tabelle in diesem Anwendungsfall weiterhin semantisch ihre Daseinsberechtigung.

Wenn du aber Zeit und Muße hast, kannst du ja ein alternatives CSS-Modell entwickeln - beispielsweise mit dem <ul>-Listenelement und umfliessenden Listeneinträgen <li> mittels einer float:left-Formatierung.

Ach, und gönne deine zukünftigen Fragen bitte ruhig ein neues Thema. Oder was hat dies nun mit der zentralen Verwaltung eines Dropdown-Menüs zu tun?

Daher packe ich deine Frage mal in ein neues Thema, zumal sie herzlich wenig mit PHP zu tun hat, und platziere sie fürs erste im HTML-Forum.

mfg Maik
 
Danke, werde ich mir merken neue Themen anzufangen.
Wollte nicht in zu vielen Foren nerven.
Du meinst also das ich unbesorgt eine Tabelle einfügen kann..

Wäre das ein komplizierter Aufwand so etwas in CSS zu erstellen?
Ich habe nämlich viele solcher Bilderseiten in der HP.
Vielleicht hast Du da ja mal reingeschaut.
 
Jo, die Tabelle geht dort voll in Ordnung :)

CSS-technisch hält sich der Aufwand in Grenzen, handelt sich ja schließlich nur um ein paar wenige Zeilen.

Lediglich bei der Umstrukturierung des Markups (HTML-Code) der bestehenden Galerien dürftest du dann etwas mehr Zeit einplanen :-)

Dies könnte dann beispielsweise so aussehen:
HTML: 
<div class="gallery">
     <ul>
        <li>
            <img src="http://www.mainzer-freischuetzen-garde.de/2009/Rosenmontag_23.02.2009/Rosenmontag_23.02.2009_008.JPG">
            <p>Beschreibung für Bild 1</p>
        </li>
        <li>
            <img src="http://www.mainzer-freischuetzen-garde.de/2009/Rosenmontag_23.02.2009/Rosenmontag_23.02.2009_009.JPG">
            <p>Beschreibung für Bild 2</p>
        </li>
        <li>
            <img src="http://www.mainzer-freischuetzen-garde.de/2009/Rosenmontag_23.02.2009/Rosenmontag_23.02.2009_010.JPG">
            <p>Beschreibung für Bild 3</p>
        </li>
        <li>
            <img src="http://www.mainzer-freischuetzen-garde.de/2009/Rosenmontag_23.02.2009/Rosenmontag_23.02.2009_011.JPG">
            <p>Beschreibung für Bild 4</p>
        </li>
        <!-- usw. -->
     </ul>
</div>
CSS: 
* {
margin:0;
padding:0;
}
.gallery {
width:900px;
margin:auto;
}
.gallery ul {
list-style:none;
}
.gallery ul li {
float:left;
width:290px;
margin:5px;
display:inline;
}
.gallery ul li p {
text-align:center;
}

mfg Maik
 
Zuerst nochmals Danke für Deine Geduld, auch wenn noch ein Paar Fragen kommen.

Das sieht schon gut aus, ich habe die Bilder aber auch noch verlinkt, damit man sie vergrößern kann in einem seperaten Fenster oder Tab.
Gebe ich die Verlinkung da auch mit ein?
 
Jo, daran ändert sich nichts gegenüber der bestehenden Galerie.

Ich hab sie hier in meinem kleinen schmucken Beispiel nur nicht übernommen, da dies darin nebensächlich ist, sondern dir den Grundaufbau vermitteln soll :-)

mfg Maik
 
Dafür Danke ich Dir schon mal.
Werde es mal in die Tat umsetzen und melde mich dann mit dem Ergebniss.
Man sagt ja: learning by doing

Werde es heute aber nicht mehr schaffen, gibt bald CL-League.

Gruß
Garfield
 
Hi,

dem kannst du ganz einfach entgegenwirken, indem du ab dem zehnten Galeriebild beginnend die fehlenden </a>-Tags hinzufügst.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück