29.09.2007, 18:21
|
|||
|
|||
Bilder mit jeweils einem Untertitel folgend anordnen...
hallo leute,
ich hoffe ich bin hier in der richtigen abteilung, es kommt auf die loesung des problems an... eigentlich ist es ganz simpel was ich erreichen will aber ich kriege es nicht hin. ich habe es bereits mit div-containern versucht. ich will das unter jedem bild ein titel ist, undzwar mittig unter jedem bild. dazu kommt das mehrere bilder in eine reihe sollen. ich krieg es aber nur so hin, dass die bilder untereinander, mit ihren jeweiligen untertiteln gelistet werden. also damit ihr wisst wie ich das genau meine noch eine grafik:  danke fuer jede hilfe MfG Baron 
|
| Sponsored Links |
|
29.09.2007, 19:00
|
|||
|
|||
|
hallo,
es ist eigentlich ganz einfach... schreib gleich hinter der grafik im html ein <br/> und dann den untertitel. da der untertitel in eine <p> steht, kannst du in deinem css eine klasse z.b. zentiert anlegen mit der du untertitel zentieren kannst so das mittig unter dem bild steht. hier noch ein html code beispiel: <img src="grafik" /><br/><p class="zentriert"> untertitel</p> und ein css code beispiel. p.zentriert { text-align:"center";} hoffe dir ein wenig weitergeholfen zu haben.. schönen abend noch...
__________________
meine Wirkungsstätte Geändert von max29a (29.09.2007 um 19:04 Uhr) Grund: nachtrag
|
| Sponsored Links |
|
29.09.2007, 20:38
|
|||
|
|||
|
vielen dank das <br/> kannte ich noch gar nicht, aber irgendwas ist hier noch schief. ich poste mal direkt den quelltext:
p.center {text-align: "center";} (...) <a href="...jpg" target="_blank"><img src="..." name="bla" alt="bla" style=".....jpg') no-repeat center 0px;"></a><br/> <p class="center">*Bildbeschreibung*<br/>*bildname*</p> <a href="...jpg" target="_blank"><img src="..." name="bla" alt="bla" style=".....jpg') no-repeat center 0px;"></a><br/> <p class="center">*Bildbeschreibung*<br/>*bildname*</p> <a href="...jpg" target="_blank"><img src="..." name="bla" alt="bla" style=".....jpg') no-repeat center 0px;"></a><br/> <p class="center">*Bildbeschreibung*<br/>*bildname*</p> USW. was mache ich falsch, dass die bilder immer noch nicht nebeneinander gelistet werden? gruss
|
|
29.09.2007, 21:18
|
|||
|
|||
|
Du musst jeweils das Bild und den Text, die zusammengehören, mit einem Element zusammenfassen. Dieses kannst du dann floaten.
edit: Schritt-für-Schritt-Erklärung im Floattutorial: Floatutorial: Tutorial 2 - Step 1 Was dort für ein Bild nach rechts gemacht wird, machst du für viele nach links. Du brauchst kein <br>, keine und wenn du die text-align-Eigenschaft verwendest, dann wird der Wert ohne Anführungszeichen notiert. Geändert von fricca (29.09.2007 um 21:27 Uhr)
|
|
30.09.2007, 10:28
|
||||
|
||||
|
Das von Fricca empfohlene Float-Tutorial ist Klasse, aber auf derselben Site findest du noch eines, dass deinen Bedürfnissen noch näher kommt:
Tutorial 4 Floating an image thumbnail gallery Die fertige Version sieht so aus: 1. HTML Code:
<div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br /> Beschriftung </div> <div class="thumbnail"> <img src="images/image.gif" alt="" width="60" height="60"><br /> Beschriftung </div> und so weiter Code:
div.thumbnail {
float: left;
width: 60px;
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 5px;
}
__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao«
|
|
01.10.2007, 12:22
|
|||
|
|||
|
danke an euch alle.
es gibt noch ein kleines problem das man bemerkt wenn man den fensterrahmen gross zieht. undzwar hab ich nach drei bildern (mehr sollen nicht in eine reihe) ein <br> gesetzt, aber statt dann das naechste (das vierte) bild in die naechste zeile zu packen, haengt er es noch rechts [aber leicht nach unten versetzt] an. ich hoffe ihr koennt euch das vorstellen. meine css definitionen: { text-align: center; float: left; width: 300px; } wisst ihr woran das liegt? MfG Baron
|
|
01.10.2007, 21:06
|
||||
|
||||
|
Hallo,
ich habe nichts gegen die Lösungen mit Divs, im Falle einer Bildergalerie mit Untertitel finde ich allerdings die Verwendung von Definitionslisten eine Idee besser (semantischer) und mindestens so flexibel. Der Beispiel unten ist keine fertige Lösung. Ich wollte damit nur zeigen, wie ich das meine. Grüße: Emil Code:
<!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>Bilder in 4-er Reihen </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="Content-Language" content="de" />
<style type="text/css">
/* <![CDATA[ */
* {margin: 0;padding: 0;border: 0;}
div {
float: left;
width: 480px;
background: #ccc;
}
dl {
float: left;
width: 480px;
}
dt {
float: left;
width: 120px;
height: 170px;
background: #aaa
}
dd {
float: left;
width: 100px;
margin: 170px 0 20px -110px;
text-align: center;
font-size: 85%;
background: #f00;
}
dt img {
display: block;
margin: 10px;
background: #f00
}
dl:after {
content:".";
display: block;
height: 0;
clear: left;
visibility: hidden;
}
dl { display: inline-table; }
/* vor ie/Mac verstecken start \*/
* html dl.galerie { height: 1%; }
/* vor ie/Mac verstecken ende */
/* ]]> */
</style>
</head>
<body>
<div>
<dl>
<dt><img src="bild1.gif" height="150px" width="100px" alt="Bild 1" /></dt>
<dd>Titel 1</dd>
<dt><img src="bild2.gif" height="150px" width="100px" alt="Bild 2" /></dt>
<dd>Titel 2</dd>
<dt><img src="bild3.gif" height="150px" width="100px" alt="Bild 3" /></dt>
<dd>Titel 3 ist länger</dd>
<dt><img src="bild4.gif" height="150px" width="100px" alt="Bild 4" /></dt>
<dd>Titel 4</dd>
</dl>
<dl>
<dt><img src="bild5.gif" height="150px" width="100px" alt="Bild 5" /></dt>
<dd>Titel 5</dd>
<dt><img src="bild6.gif" height="150px" width="100px" alt="Bild 6" /></dt>
<dd>Titel 6 ist länger</dd>
<dt><img src="bild7.gif" height="150px" width="100px" alt="Bild 7" /></dt>
<dd>Titel 7</dd>
<dt><img src="bild8.gif" height="150px" width="100px" alt="Bild 8" /></dt>
<dd>Titel 8</dd>
</dl>
<dl>
<dt><img src="bild9.gif" height="150px" width="100px" alt="Bild 9" /></dt>
<dd>Titel 9 ist auch etwas länger</dd>
<dt><img src="bild10.gif" height="150px" width="100px" alt="Bild 10" /></dt>
<dd>Titel 10</dd>
<!-- Weitere Bilder -->
</dl>
</div>
</body>
</html>
|
|
01.10.2007, 22:51
|
|||
|
|||
|
Zitat:
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Bilder mit Beschriftung anordnen | snaps | CSS | 4 | 15.03.2011 20:06 |
| um ein mittiges div jeweils bilder | ___elvis___ | CSS | 0 | 18.08.2010 13:38 |
| 3 Bilder in einem DIV anordnen (links, mittig, rechts) | plegox | CSS | 5 | 29.04.2010 18:28 |
| bilder in div container unten anordnen | diegaby | CSS | 12 | 17.11.2008 14:08 |
| Bilder und Text anordnen - Probleme mit Opera | soulson7 | CSS | 1 | 11.07.2005 19:49 |
Linear-Darstellung
