nicht angemeldet
Links- und rechtsbündige Grafik in einem Tabellenfeld
Hallo,
ich möchte zwei Grafiken in ein einzelnes Tabellenfeld einfügen, wobei die erste Grafik linksbündig und die zweite rechtsbündig dargestellt werden soll. (Ich kann leider in konkreten Fall keine Teilung in zwei Tabellenfelder vornehmen.)
Meine Versuche, dies mit CSS durchzuführen, brachten leider wenig.
Ist dies per HTML bzw. per CSS-Formatierung möglich? Wenn ja, wie?
-
Hallo.
Meine Versuche, dies mit CSS durchzuführen, brachten leider wenig.
Welche Versuche? Was führte zu welchem Ergebnis?
MfG, at-
Hallo.
Meine Versuche, dies mit CSS durchzuführen, brachten leider wenig.
Welche Versuche? Was führte zu welchem Ergebnis?
MfG, atHallo,
ideal wäre etwa folgender Code:
<table width="100%">
<tr>
<td>
<!-- Bild linksbuendig -->
<img src="bild1.gif" width="10" height="10" style="???">
<!-- Bild rechtsbuendig -->
<img src="bild2.gif" width="10" height="10" style="???">
</td>
</tr>
</table>Das erste Bild soll stets linksbündig ausgegeben werden, das zweite immer rechtsbündig.
MfG
Ernst Richter
-
Hallo.
Meine Versuche, dies mit CSS durchzuführen, brachten leider wenig.
Welche Versuche? Was führte zu welchem Ergebnis?
Die Fragen bleiben leider bestehen.
MfG, at-
Hallo.
Meine Versuche, dies mit CSS durchzuführen, brachten leider wenig.
Welche Versuche? Was führte zu welchem Ergebnis?
Die Fragen bleiben leider bestehen.
MfG, atHallo,
folgender Code kommt dem gewünschten Ergebnis noch am nächsten:
<table width="100%" border="1">
<tr>
<td>
<!-- Icon linksbuendig -->
<img src="icon1.gif" align="left" width="10" height="10" style="vertical-align:middle">
<!-- Titel -->
Hier steht ein der Titel
<!-- Icon rechtsbuendig -->
<img src="icon2.gif" align="right" width="10" height="10">
</td>
</tr>
</table>Um das gewünschte Ergebnis noch etwas genauer zu beschreiben:
Es handelt sich um die Kopfzeile einer Box (ähnlich einem Windows-Fenster). Ganz links ein Icon, danach der "Fenstertitel". Rechts soll nun zusätzlich ein weiteres Icon (Button) eingefügt werden.
Der o. g. Code ordnet das zweite Icon zwar rechts an, jedoch in einer neuen Zeile. Idealerweise suche ich nach einer Möglichkeit, beide Grafiken mit CCS wie gewünscht zu formatieren.
MfG
Ernst Richter
-
Hallo.
<!-- Icon linksbuendig -->
<img src="icon1.gif" align="left" width="10" height="10" style="vertical-align:middle">Dir ist aber schon klar, dass eine Angabe zur _vertikalen_ Ausrichtung keinen Einfluss auf die _horizontale_ Ausrichtung hat, oder?
Nächste Frage: Schließen die Bilder bündig mit der Zelle ab? Vermutlich nicht, wogegen eine Veränderung der Eigenschaft "display" helfen sollte. Dann kannst du die mit "float" arbeiten, welches aufgrund der den Bildern inherenten Dimensionen nicht einmal eine Breite zugewiesen werden muss.
MfG, at-
Hallo.
<!-- Icon linksbuendig -->
<img src="icon1.gif" align="left" width="10" height="10" style="vertical-align:middle">Dir ist aber schon klar, dass eine Angabe zur _vertikalen_ Ausrichtung keinen Einfluss auf die _horizontale_ Ausrichtung hat, oder?
Nächste Frage: Schließen die Bilder bündig mit der Zelle ab? Vermutlich nicht, wogegen eine Veränderung der Eigenschaft "display" helfen sollte. Dann kannst du die mit "float" arbeiten, welches aufgrund der den Bildern inherenten Dimensionen nicht einmal eine Breite zugewiesen werden muss.
MfG, atHallo,
das "vertical-align:middle" ist ein Stück vorhandener Code.
Die Bilder sollen eigenlich schon exakt links- bzw. rechtsbündig angeordnet werden.
Hast Du ein Codebeispiel, wie man "display" und "float" hier einsetzen kann?
MfG
Ernst Richter
-
Hallo.
Die Bilder sollen eigenlich schon exakt links- bzw. rechtsbündig angeordnet werden.
Dagegen habe ich nichts einzuwenden.
Hast Du ein Codebeispiel, wie man "display" und "float" hier einsetzen kann?
Welche Angaben sind denn für "float" möglich und wie muss "display" beschaffen sein, damit sie wirken? Oder anders? Denkst du noch mit oder hattest du dich bereits mit dem Gedanken angefreundet, eine fertige Lösung zu erhalten?
MfG, at-
Hallo.
Die Bilder sollen eigenlich schon exakt links- bzw. rechtsbündig angeordnet werden.
Dagegen habe ich nichts einzuwenden.
Hast Du ein Codebeispiel, wie man "display" und "float" hier einsetzen kann?
Welche Angaben sind denn für "float" möglich und wie muss "display" beschaffen sein, damit sie wirken? Oder anders? Denkst du noch mit oder hattest du dich bereits mit dem Gedanken angefreundet, eine fertige Lösung zu erhalten?
MfG, atHallo,
habe noch nie mit "float" und "display" gearbeitet und daher in SelfHTML nachgeschaut. Meine Versuche haben leider recht wenig gebracht. Der folgende Code funktioniert solange, bis ich den Fenstertitel dazwischen bringe:
<style type="text/css">
.LINKS {
width : 10px;
float : left;
display : table-row;
}
.RECHTS {
width : 10px;
float : right;
display : table-row;
}
</style><table width="100%" border="1">
<tr>
<td>
<img src="icon1.gif" width="10" height="10" class="LINKS">
Fenstertitel
<img src="icon2.gif" width="10" height="10" class="RECHTS">
</tr>
</table>-
Hallo.
habe noch nie mit "float" und "display" gearbeitet und daher in SelfHTML nachgeschaut.
Sehr gut.
Meine Versuche haben leider recht wenig gebracht.
Das sehe ich anders, denn du hast damit immerhin den Ansatz verstanden.
Der folgende Code funktioniert solange, bis ich den Fenstertitel dazwischen bringe:
Dann bringe ihn eben nicht dazwischen -- sondern hänge ihn hinten an die Grafiken an. Dargestellt wird er ja dennoch zwischen den Grafiken. Und verwende für "display" besser den Wert "block". Außerdem kannst du natürlich auch nicht die Größenangaben der Bilder in CSS überführen, solltest dabei aber die Maßeinheit nicht vergessen.
MfG, at-
Hallo.
habe noch nie mit "float" und "display" gearbeitet und daher in SelfHTML nachgeschaut.
Sehr gut.
Meine Versuche haben leider recht wenig gebracht.
Das sehe ich anders, denn du hast damit immerhin den Ansatz verstanden.
Der folgende Code funktioniert solange, bis ich den Fenstertitel dazwischen bringe:
Dann bringe ihn eben nicht dazwischen -- sondern hänge ihn hinten an die Grafiken an. Dargestellt wird er ja dennoch zwischen den Grafiken. Und verwende für "display" besser den Wert "block". Außerdem kannst du natürlich auch nicht die Größenangaben der Bilder in CSS überführen, solltest dabei aber die Maßeinheit nicht vergessen.
MfG, atHallo,
so ganz klappts dennoch noch nicht - das folgende Beispiel kommt meiner Vorstellung zwar schon näher, jetzt fehlt wieder die vertikale Ausrichtung (vertical-align zeigt keine Wirkung):
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="float:left"><img src="icon1.gif" width="50" height="50"></div>
<div style="float:left">Titel</div>
<div style="float:right"><img src="icon2.gif" width="50" height="50"></div>
</td>
</tr>
</table>MfG
Ernst Richter
-
Hallo.
so ganz klappts dennoch noch nicht - das folgende Beispiel kommt meiner Vorstellung zwar schon näher, jetzt fehlt wieder die vertikale Ausrichtung (vertical-align zeigt keine Wirkung):
Auf welches Element hattest du "vertical-align" angewandt?
<table width="100%" border="1" cellpadding="0" cellspacing="0">
Diese Angaben kannst du ebenfalls in CSS vornehmen.
<div style="float:left"><img src="icon1.gif" width="50" height="50"></div>
<div style="float:left">Titel</div>
<div style="float:right"><img src="icon2.gif" width="50" height="50"></div>Wozu die <div>s? Und warum folgst du meinem Rat nicht, den Text hinter die Bilder zu setzen? Du machst es einem wirklich nicht leicht.
MfG, at-
Hallo,
ich habe "vertical-align" eigentlich testhalber auf alle Elemente angewandt. Bilder und Text sollen quasi vertikal zentriert dargestellt werden.
Woher das <DIV>-Element? Ich habe im Netz hierzu eine Ressource gefunden. Vorteil hier: Die Bilder werden exakt links- bzw. rechtsbündig angeordnet (Gelingt mir anders noch nicht richtig).
Zum Thema Text nach Bildern: Stimmt natürlich, man muß sich aber erst daran gewöhnen.
Zum Thema "Angaben kannst du ebenfalls in CSS...": Ist mir klar, es handelt sich aber wie gesagt um eine bestehende Site, ich möchte am Konzept möglichst wenig ändern.
MfG
Ernst Richter
-
Hallo.
ich habe "vertical-align" eigentlich testhalber auf alle Elemente angewandt.
Nacheinander? Gleichzeitig? In welchen Kombinationen? Mit welchen Ergebnissen? Eigentlich sollte eine eizige Angabe nämlich genügen.
Bilder und Text sollen quasi vertikal zentriert dargestellt werden.
Die Intention war mir schon klar, aber du hast Recht: man weiß ja nie ...
Woher das <DIV>-Element? Ich habe im Netz hierzu eine Ressource gefunden. Vorteil hier: Die Bilder werden exakt links- bzw. rechtsbündig angeordnet (Gelingt mir anders noch nicht richtig).
Dann machst du an einer anderen Stelle etwas falsch, denn du benötigst kein einziges <div>. Ein kleiner Tipp: Zeilenumbrüche erzeugen Leerzeichen und diese verhindern häufig eine Bündigkeit der Inhalte. Setze die Zeiclenumbrüche also geschickter oder lasse sie an den entscheidenden Stellen weg.
Zum Thema Text nach Bildern: Stimmt natürlich, man muß sich aber erst daran gewöhnen.
Das mag sein, aber was tut man nicht alles für funktionierende Seiten.
Zum Thema "Angaben kannst du ebenfalls in CSS...": Ist mir klar, es handelt sich aber wie gesagt um eine bestehende Site, ich möchte am Konzept möglichst wenig ändern.
Aber zumindest validieren solltest du die Seite zwischendurch. So lassen sich viele Schwierigkeiten vermeiden.
MfG, at
-
-
-
Hi,
so ganz klappts dennoch noch nicht - das folgende Beispiel kommt meiner Vorstellung zwar schon näher, jetzt fehlt wieder die vertikale Ausrichtung (vertical-align zeigt keine Wirkung):
schade daß Du nach vorgefertigten Lösungen suchst und nicht die Tips beherzigst und noch etwas nachdenkst.
Sonst wärst Du vermutlich auch auf diese Lösung gekommen:<td style="line-height:50px; text-align:center;">
<img style="float:left; width:50px; height:50px;" src="icon1.gif">
<img style="float:right; width:50px; height:50px;" src="icon2.gif">
Titel
</td>freundliche Grüße
Ingo
-
-
-
-
-
-
-
-
-
-