| Autor |
Nachricht |
Krisslinger
Threadersteller
Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Mi 23.06.2010 11:54
Titel Element absolut in <td> positionieren |
  |
|
Hallo alle zusammem,
hab nach längerer Zeit mal wieder eine Frage, auf die mir keine Lösung einfällt.
Folgender Fall:
Eine Tabelle mit mehreren Spaten, in der letzten Spalte soll immer am unteren Ende ein weiteres Element (DIV) ausgerichtet werden. Unabhängig von der Höhe der <td> soll das Element immer mit dem gleichen Abstand von unten ausgerichtet werden.
Hier mal der nötige Code:
| Code: |
<td>[i]Inhalt[/i]</td>
<td>[i]Inhalt[/i]</td>
<td style="display: block; position: relative;">
<p><span>Einzeln:</span> Preis in Euro</p>
<p><span>Gesamt:</span> Preis in Euro</p>
<div class="order-options">
<a class="button button-order-option" href="#">kopieren</a>
<a class="button button-order-option" href="#">bearbeiten</a>
<a class="button button-order-option" href="#">löschen</a>
</div>
</td>
|
Das Div mit der Klasse "order-options" ist absolut positioniert mit bottom: 10px. Funktioniert auch theoretisch. Allerdings braucht es ja zur absoluten Positionierung ein Block-Element als Eltern-Element. Bekommt das <td> nur die Eigenschaft display:block, ist es aber nur noch so hoch wie der Inhalt, in dem Fall die beiden <p> Tags und nicht so hoch, wie die <td> zuvor.
Hat jemand eine Idee, wie ich das hinbekommen, dass ich ein Element in einem flexiblen <td> immer unten ausrichten kann?
Vielen Dank
|
|
| |
  |
 |
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Mi 23.06.2010 12:42
Titel
|
|
|
|
Dein Markup sieht nicht richtig aus - wie soll eine korrekte Zuordnung tabellarischer Daten möglich sein, wenn Einzel- und Gesamtpreis in derselben td stehen? Baue mal ein komplettes Testcase und poste den Link.
|
|
| |
|
|
|
Anzeige
|
|
|
willshedo
Dabei seit: 21.12.2005
Ort: Waldshut
Alter: 51
Geschlecht: -
|
Verfasst Mi 23.06.2010 12:47
Titel
|
|
|
So auf die Schnelle:
| Code: | | td{valign:bottom;padding-bottom:5px;} |
So wär der Inhalt in der Zelle immer am unteren Rand ausgerichtet, und das padding schafft den Innenabstand vom unteren Rand zum Element in der Zelle.
Grüße,
Chris
|
|
| |
|
|
escaPe
Dabei seit: 10.09.2007
Ort: <? include("home.htm") ?>
Alter: 112
Geschlecht:
|
Verfasst Mi 23.06.2010 12:50
Titel
|
|
|
valign ist kein valider css Befehl.
also entweder
| Code: | | <td valign="bottom"> |
oder in css:
| Code: | | vertical-align:bottom; |
zweiteres funktioniert leider nicht in den gängigsten Browsern.
|
|
| |
|
|
Krisslinger
Threadersteller
Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 23.06.2010 12:58
Titel
|
|
|
| willshedo hat geschrieben: | So auf die Schnelle:
| Code: | | td{valign:bottom;padding-bottom:5px;} |
So wär der Inhalt in der Zelle immer am unteren Rand ausgerichtet, und das padding schafft den Innenabstand vom unteren Rand zum Element in der Zelle. |
Danke, aber dann hab ich das Problem, dass die <p> Tags auch unten hängen. Die sollen aber immer oben bleiben, nur das div="order-options" soll immer unten sein.
| heiko_rs hat geschrieben: | | Dein Markup sieht nicht richtig aus - wie soll eine korrekte Zuordnung tabellarischer Daten möglich sein, wenn Einzel- und Gesamtpreis in derselben td stehen? Baue mal ein komplettes Testcase und poste den Link. |
Danke, aber hier geht es nicht um die Zuordnung von Daten. In der <td> kann auch nur ein <p>Blablub</p> stehen. Es geht nur um die finale Darstellung und in dieser muss oben im Textfluss normaler Text stehen und das div="order-options" immer am unteren Ende des <td>.
Zuletzt bearbeitet von Krisslinger am Mi 23.06.2010 12:59, insgesamt 1-mal bearbeitet
|
|
| |
|
|
top
Moderator
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht:
|
Verfasst Mi 23.06.2010 13:05
Titel
|
|
|
Ist rowspan eigentlich noch valide? 
Dann könnte man das vielleicht auch so lösen:
| Code: | <tr>
<td rowspan="2">[i]Inhalt[/i]</td>
<td rowspan="2">[i]Inhalt[/i]</td>
<td>
<p><span>Einzeln:</span> Preis in Euro</p>
<p><span>Gesamt:</span> Preis in Euro</p>
</td>
</tr>
<tr>
<td height="16">
<a class="button button-order-option" href="#">kopieren</a>
<a class="button button-order-option" href="#">bearbeiten</a>
<a class="button button-order-option" href="#">löschen</a>
</td>
</tr> |
|
|
| |
|
|
escaPe
Dabei seit: 10.09.2007
Ort: <? include("home.htm") ?>
Alter: 112
Geschlecht:
|
Verfasst Mi 23.06.2010 13:13
Titel
|
|
|
| Wittlinger hat geschrieben: | | willshedo hat geschrieben: | So auf die Schnelle:
| Code: | | td{valign:bottom;padding-bottom:5px;} |
So wär der Inhalt in der Zelle immer am unteren Rand ausgerichtet, und das padding schafft den Innenabstand vom unteren Rand zum Element in der Zelle. |
Danke, aber dann hab ich das Problem, dass die <p> Tags auch unten hängen. Die sollen aber immer oben bleiben, nur das div="order-options" soll immer unten sein.
| heiko_rs hat geschrieben: | | Dein Markup sieht nicht richtig aus - wie soll eine korrekte Zuordnung tabellarischer Daten möglich sein, wenn Einzel- und Gesamtpreis in derselben td stehen? Baue mal ein komplettes Testcase und poste den Link. |
Danke, aber hier geht es nicht um die Zuordnung von Daten. In der <td> kann auch nur ein <p>Blablub</p> stehen. Es geht nur um die finale Darstellung und in dieser muss oben im Textfluss normaler Text stehen und das div="order-options" immer am unteren Ende des <td>. |
Und wieso nicht einfach zwei Zeilen?
|
|
| |
|
|
Krisslinger
Threadersteller
Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 23.06.2010 13:30
Titel
|
|
|
Deswegen:
Pro <tr> stehen immer die Angaben zu einem Produkt, je mehr Produkte im Warenkorb, desto mehr <tr>.
Und im letzten <td> sollen unten eben die Buttons sein, aber immer am unteren Ende. Und da die Spalten flexibel in der Höhe sein können, ist es zwingend erforderlich, das Div absolut zu positionieren.
Zuletzt bearbeitet von Krisslinger am Mi 23.06.2010 13:31, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
CSS-Element zentral positionieren
[Prototype] Element anhand von Browsergröße positionieren
über css ein Element nach definiertem Element ansprechen
position absolut im IE6
[CSS] Text absolut auf 0,0
Die absolut schlechtesten Webseiten...
|
|
Willkommen auf dem Portal für Mediengestalter
