nicht angemeldet
Liebe(r) annabolika,
wie sieht denn Dein Quellcode momentan aus?
Du hast im Themenbereich "HTML/XHTML" gepostet und in dem gibt es keine Lösung für Dein Problem, da HTML bzw. XHTML nichts mit dem Aussehen Deiner Seite zu tun hat. (X)HTML ist nur für die inhaltliche Struktur Deiner Seite zuständig - sonst nichts.
Eine Lösung für Dein Problem gibt es aber mit CSS. Hast Du davon schon gehört? Du erwähnst es nämlich nicht...
Beispiel (als Trockenübung):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Galerie-Test</title>
<style type="text/css">
/* CSS-Code für nebeneinanderliegende Bilder */
.bildergalerie img {
margin: 0px 10px 10px 0px; /* Abstände eines Bildes im Uhrzeigersinn */
}
</style>
</head>
<body>
<h1>Galerie-Test</h1>
<p class="bildergalerie">
<img src="" alt="erstes Bild" />
<img src="" alt="zweites Bild" />
...
<img src="" alt="letztes Bild" />
</p>
</body>
</html>
Ich gehe bei meinen Bildergalerien noch einen Schritt weiter und ermögliche eine Bildunterschrift, indem ich für jedes Bild einen eigenen Textabsatz verwende, in dem zuerst das Bild und dann seine Bildunterschrift stehen (als einfacher Textinhalt im Absatz). Das könnte dann so aussehen: Beispiel-Galerie. Dazu braucht es einen leicht anderen Code. Code-Beispiel für die Beispiel-Galerie (vereinfacht):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Galerie-Test</title>
<style type="text/css">
.bildergalerie p {
float: left;
width: 200px; /* Breite für einen Kasten */
margin: 3px; /* Außenabstand eines Kastens */
border: 1px solid green; /* zum Testen einen grünen Rand */
}
.bildergalerie img {
display: block; /* mittig im Kasten ausrichten */
margin: 0px auto 5px;
padding: 0px;
}
</style>
</head>
<body>
<h1>Galerie-Test</h1>
<div class="bildergalerie">
<p><img src="" alt="erstes Bild" /> Ein Bild...</p>
<p><img src="" alt="zweites Bild" /> Noch ein Bild...</p>
...
<p><img src="" alt="letztes Bild" /> Das letzte Bild.</p>
</div>
</body>
</html>
Liebe Grüße,
Felix Riesterer.
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)