zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bild und Text in einer Zeile horizontal mittig zentrieren?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.08.2008, 15:24
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2007
Beiträge: 98
McFarlane befindet sich auf einem aufstrebenden Ast
Standard Bild und Text in einer Zeile horizontal mittig zentrieren?

Hallöchen,

ich hab in einer Tabellenzeile ein Bild und danach einen Text stehen.
Ausschnitt:


Nun sieht man ja was das Problem ist: Der Text steht irgendwo am Fuß des Bildes... Ich hab es bereits mit Listen probiert aber auch da ist das gleiche. Die einzige Lösung die ich bisher gefunden habe, ist das Bild und den Text in verschiedene Divs schieben und die Abstände dann anpassen. Nur gibt das bei vielen Einträgen massig Divs und bei unterschiedlichen Bildgrössen ist das auch keine Lösung...

Gibts da eine Eigenschaft für?

Danke, McFarlane
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.08.2008, 15:31
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi,

die vielen divs brauchst du nicht, lediglich das <img> für das Bild und ein <p> mit dem Text z.B..

Das Bild läßt du floaten und für das <p> definierst du eine Klasse:
Code:
.abstand  {
    padding-bottom:2em;
}
Den Wert mußt du natürlich noch anpassen.

Gruß
Klaus
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.08.2008, 15:32
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Wenn es - wie es scheint - Deko-Grafiken sind, kommen sie als background-image ins CSS. background-position erledigt den Rest.
Mit Zitat antworten
  #4 (permalink)  
Alt 27.08.2008, 15:49
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2007
Beiträge: 98
McFarlane befindet sich auf einem aufstrebenden Ast
Standard

Nun, Dekografiken sind es leider nicht, das wär zu einfach^^.

Die Bilder können von verschiedenen größen sein und je nach eingestelltem Style auch ganz verschieden aussehen. Das mit der Klasse funktioniert deshalb auch nur wenn die Bilder die gleiche Größe haben.
Mit Zitat antworten
  #5 (permalink)  
Alt 27.08.2008, 15:52
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Wenn sich alles in einer Zeile abspielt, hilft vertical-align. Anderfalls dieses Prinzip: Centering (horizontally and vertically) an image in a box
Mit Zitat antworten
  #6 (permalink)  
Alt 27.08.2008, 16:13
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2007
Beiträge: 98
McFarlane befindet sich auf einem aufstrebenden Ast
Standard

hmm, ich habs jetzt so gemacht:

um den Text ist ein <p> Element und das Bild hat ein Float-Left bekommen. Dadurh geht dann auch das vertical-align ganz wundervoll.
Das komische ist nur, dass ich für jedes <img> den Style direkt in das Bild schreiben muss, weil es als Klasse nicht funktioniert:

So hab ich es jetzt:
Code:
<img style='float:left;' src=... />
Und so zeigt es die Bilder nur untereinander an:
Code:
<img class='fileimg' src=... />
CSS:
Code:
.fileimg {float:left;}
Warum geht das zweite nicht?
Mit Zitat antworten
  #7 (permalink)  
Alt 27.08.2008, 16:24
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von McFarlane Beitrag anzeigen
das Bild hat ein Float-Left bekommen. Dadurh geht dann auch das vertical-align ganz wundervoll.
Das kann nicht sein, denn durch float wird img ein Blockelement. Was aber geht:

Code:
<p><img src="bild.jpg" /> Text</p>
Dann wirkt vert. al. wie gewünscht, wohlgemerkt sofern sich alles in einer Zeile abspielt.

Dazu und vor allem zu Deinem anderen Problem lade das Ganze mal hoch und poste den Link.
Mit Zitat antworten
  #8 (permalink)  
Alt 27.08.2008, 16:52
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2007
Beiträge: 98
McFarlane befindet sich auf einem aufstrebenden Ast
Standard

Also Hochladen kann ichs noch ni, weil das ein Filebrowser wird und der zur Zeit noch recht unsicher ist...

Aber ich hab Poste hier mal den Quellcode von einer Zeile der Tabelle. Wundert euch mal nicht über das &nbsp;, das ist grad einfah nur da, es kommen noch andere Spalten dahinter.

Code:
<tr>
<td>
<img width='24' height='24' style='float:left;' src='./style/crystal/filetypes/php.png' alt='php'/>
<p>browser.php</p>
</td><td>&nbsp;</td>
</tr>
Und so sieht es aus:


Zu dem anderen Problem:
Ich hatte einfach den Style in jedem <img> Element durch eine Klasse für alle ersetzt. Und das hat den Text unter den Bildern angezeigt.

EDIT:
Da das die Lösung von hubspe ist und ich die vorhin abgewiesen habe: Ich hab es jetzt so gemacht, dass die Bilder immer die gleiche Größe haben.

Geändert von McFarlane (27.08.2008 um 16:54 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 27.08.2008, 17:00
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Oh, Du hast das Ganze ja in einer Tabelle (stimmt, hattest Du eingangs ja auch geschrieben). Dass da vert. al. klappt ist klar Aber eine Tabelle ist für diese Zwecke fehl am Platz, eine Liste wäre korrekt. Dann kannst Du in jedem li Bild und Text per vert. al. ausrichten (d.h. den Text am Bild, das jeweils die Zeilenhöhe bestimmt), egal wie hoch das Bild ist. Sofern es einzeilig ist, brauchst Du keinerlei Zusatz-Markup.

Zitat:
Zitat von McFarlane Beitrag anzeigen
Ich hatte einfach den Style in jedem <img> Element durch eine Klasse für alle ersetzt. Und das hat den Text unter den Bildern angezeigt.
Schon klar, aber das kann nicht sein, also Testcase bauen & hochladen.

Geändert von heiko_rs (27.08.2008 um 17:02 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 27.08.2008, 17:08
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2007
Beiträge: 98
McFarlane befindet sich auf einem aufstrebenden Ast
Standard

ja, das konnte wirklich nicht sein.

hatte grad bemerkt, dass ich ein }; anstatt ;} im CSS stehen hatte was mir natürlich den Style zerlegt hat.

Das eine Liste für das einzeilige Layout richtig wäre stimmt, aber ich werde noch mehr Spalten hinzufügen oder die Dateien mehrspaltig anzeigen lassen. Deshalb nehm ich (erstmal) ne Tabelle, da kann ich mich besser um den Skript kümmern.

Vielen Dank für eure Hilfe
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
Wachsende Container Andy CD CSS 13 10.02.2010 14:08
Floats verschwinden im nichts, Fließer überdecken Floats. nick CSS 5 09.02.2008 15:34
Falsche Darstellung beim Internet Explorer LordAvalon CSS 4 09.04.2007 17:22
Problem: Überschrift <hx> innerhalb von Abschnitt <p> Ares CSS 7 24.10.2006 14:30
bild über 2 div-tags positionieren MoJo CSS 7 12.06.2006 17:48


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