zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bilder mit jeweils einem Untertitel folgend anordnen...

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.09.2007, 18:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.07.2007
Beiträge: 5
Baron befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.09.2007, 19:00
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 25.11.2006
Ort: Freistadt (Oberösterreich)
Beiträge: 169
max29a befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.09.2007, 20:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.07.2007
Beiträge: 5
Baron befindet sich auf einem aufstrebenden Ast
Standard

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> &nbsp; &nbsp; &nbsp;
<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> &nbsp; &nbsp; &nbsp;
<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> &nbsp; &nbsp; &nbsp;

USW.

was mache ich falsch, dass die bilder immer noch nicht nebeneinander gelistet werden?

gruss
Mit Zitat antworten
  #4 (permalink)  
Alt 29.09.2007, 21:18
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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 &nbsp; 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)
Mit Zitat antworten
  #5 (permalink)  
Alt 30.09.2007, 10:28
Benutzerbild von pmmueller
Autor von "Little Boxes"
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Ort: Groningen (Niederlande)
Beiträge: 292
pmmueller sorgt für eine eindrucksvolle Atmosphärepmmueller sorgt für eine eindrucksvolle Atmosphäre
Standard

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
2. CSS
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«
Mit Zitat antworten
  #6 (permalink)  
Alt 01.10.2007, 12:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.07.2007
Beiträge: 5
Baron befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 01.10.2007, 16:41
Benutzerbild von uspri
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.07.2005
Beiträge: 900
uspri sorgt für eine eindrucksvolle Atmosphäreuspri sorgt für eine eindrucksvolle Atmosphäre
Standard

Gib dem Container, der in der nächsten Zeile sein soll eine zusätzliche Klasse mit einem clear: left; drinnen und schmeiß Deine <br />'s raus.
Mit Zitat antworten
  #8 (permalink)  
Alt 01.10.2007, 21:06
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

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>
Mit Zitat antworten
  #9 (permalink)  
Alt 01.10.2007, 22:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.07.2007
Beiträge: 5
Baron befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von uspri Beitrag anzeigen
Gib dem Container, der in der nächsten Zeile sein soll eine zusätzliche Klasse mit einem clear: left; drinnen und schmeiß Deine <br />'s raus.
versteh ich nicht, koenntest du das bitte erlaeutern? ich bin nicht so der css experte
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:13 Uhr.