In einer Tabellenzelle img + Wort
Chris2
- html
0 Matthias Apsel
0 Chris20 Matthias Apsel
0 Chris2
0 Tom0 Chris20 Matthias Apsel
0 Vinzenz Mai0 Chris2
Hallo liebes Forum,
folgendes Problem, ich habe zwischen einen <td></td> Block ein Bild plus einen Text reingesetzt.
<td>
<img src="images/asc.png">TEXT
</td>
Nur dummerweise wenn ich das Bild reinsetze verschiebt sich der Text weiter nach unten, gibt es da eine schöne alternative oder muss man es verschachtelt positionieren (damit meine ich ind divs oder sowas).
Hoffe jemand hat ne gute Idee.
Gruß Chris
Om nah hoo pez nyeetz, Chris2!
Hoffe jemand hat ne gute Idee.
Lass sehen, was es werden soll, dann kann man dir konkret helfen.
Matthias
Lass sehen, was es werden soll, dann kann man dir konkret helfen.
Es sollen Spalten mit Überbegriffen und ein Pfeil sein, der Pfeil symbolisiert die Sotierung (absteigend, aufsteigend).
Im Enddeffekt will ich ein Bild das die Größe von 20x20px hat in ein td Block tun und danach einfach einen Text hinschreiben. Geht aber net richtig. Sobald das Bild erscheint rückt der Text weiter nach unten;
*********************
* *
* Name *
* *
*********************
so sieht es ohne Bild aus und so mit (das Bild ist mit dem text zentriert)
*********************
* |____| *
* |PIC | *
* |____|Name *
*********************
Om nah hoo pez nyeetz, Chris2!
Es sollen Spalten mit Überbegriffen und ein Pfeil sein, der Pfeil symbolisiert die Sotierung (absteigend, aufsteigend).
Das riecht nach <th>.
Matthias
Das riecht nach <th>.
Ist das selbe Resultat, hab ich vor 2 Minuten ausprobiert.
Ich glaube ich habe keine Wahl und muss irgend eine verschachtelte Suppe machen.
Im übrigen hab ich auch probiert den Text in ein <span> Block zu tun und diesen mit margin neu zu positionieren, hat auch nicht funktioniert.
Schätze mein Latein ist am Ende.
Hello,
Hallo liebes Forum,
folgendes Problem, ich habe zwischen einen <td></td> Block ein Bild plus einen Text reingesetzt.
<td>
<img id="img01" src="images/asc.png">TEXT
</td>
Nur dummerweise wenn ich das Bild reinsetze verschiebt sich der Text weiter nach unten, gibt es da eine schöne alternative oder muss man es verschachtelt positionieren (damit meine ich ind divs oder sowas).
Versuch es mal mit CSS
#img01
{
float:right;
}
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float
Liebe Grüße aus dem schönen Oberharz
Tom vom Berg
#img01
{
float:right;
}
Resultat:
*******************
* NAME *
* PIC*
* *
*******************
jetzt geht der Text etwas weiter nach oben, und das Bild wie eigentlich vorhersehbar auf die rechte Seite :D.
Aber ist schon ne kleine verbesserung :).
Danke und Gruß aus Hessen
Chris
Om nah hoo pez nyeetz, Chris2!
wenn wir mal davon ausgehen, dass du tatsächlich tabellarische Daten anzeigen möchtest und nicht eine Tabelle zu Layoutzwecken missbrauchst, sind es, wie ich schon schrieb die Überschriften also <th>. Du brauchst
text-align: center;
und vertical-align: middle;
Für viele Browser ist dies die Defaulteinstellung, sodass sie nicht extra angegeben werden braucht. Das Bild soll die Sortierung veranschaulichen, gehört deshalb nicht zum Inhalt und sollte Hintergrundgrafik sein. Lies dies. Zweite Möglichkeit ist, das Bild als generierten Inhalt einzubinden. Lies dies. Wie ich das übersehe, erfordern diese Varianten jedoch ein zusätzliches Element.
Wenn das Bild und der Text direkt in das th-Element hinein sollen, sollte vertical-align: middle;
reichen, ggf noch die Festlegung einer günstigen line-height
(= Höhe des th-Elementes)
Matthias
Hallo,
Das Bild soll die Sortierung veranschaulichen, gehört deshalb nicht zum Inhalt und sollte Hintergrundgrafik sein.
nein. Solche Bilder erlauben typischerweise, eine Sortierung nach der betreffenden Spalte vorzunehmen, bzw. die Sortierungsreihenfolge umzukehren. Sie gehören daher zum Inhalt und auf das onclick-Ereignis der Grafik muss reagiert werden.
Freundliche Grüße
Vinzenz
Hallo,
Das Bild soll die Sortierung veranschaulichen, gehört deshalb nicht zum Inhalt und sollte Hintergrundgrafik sein.
wenn der ganze Spaltenkopf für Sortierung/Umkehrung anklickbar sein darf, dann ist das natürlich richtig, siehe z.B. das Beispiel von Jügen Berkemeiers TableSort
Freundliche Grüße
Vinzenz
wenn wir mal davon ausgehen, dass du tatsächlich tabellarische Daten anzeigen möchtest und nicht eine Tabelle zu Layoutzwecken missbrauchst
Layoutzwecken NEIN! :D würde ich nie tun
Meine Daten kommen aus der Datenbank, im thead bei mir sind nur die Tabellenbezeichnungen drine die ich per mausklick entsprechen sortieren kann, deshalb das Image.
Das mit dem text-align und vertical-align funktioniert, komischerweise muss ich es in dies im img deklarieren.
Danke für die Hinweise.
Tabellenlayout kenn ich gar net, hab gleich mit CSS angefangen :)
Om nah hoo pez nyeetz, Chris2!
Das mit dem text-align und vertical-align funktioniert, komischerweise muss ich es in dies im img deklarieren.
text-align ja, vertical-align nein. Wieso komischerweise? Du sagst der Grafik, sie soll sich nach der Mitte des Textes richten.
vertical-align für das Tabellenfeld richtet die Grundlinie des Textes in Verbindung mit der Zeilenhöhe mittig in der Zelle aus. Grafiken sind zunächst einmal so ausgerichtet, dass sie unten mit dem Text abschließen.
Matthias