Element in einer Tabelle absolut positionieren
Tina
- css
Ich will ein Element in einer Tabellenzelle unten rechts positionieren.
So habe ich es versucht, der Link wird aber ausserhalb der Tabelle angezeigt.
Das nächsthöheren Vorfahrenelement von 'link', das nicht die Normaleinstellung position:static hat ist doch td, warum wird der link nicht an td ausgerichtet?
<head>
<style>
td.c1 {background:green; position:relative;}
td a.l {color:red; position:absolute; right:1px; bottom:1px;}
</style>
</head>
<table border="1">
<tr>
<td width=300px>spalte1</td>
<td width=300px class='c1'>spalte2<br/>zeile zwo<a href='#' class='l'>Link</a></td>
<td width=300px>spalte3</td>
</tr>
</table>
Grüße,
fangen wir hier an, bei der zeile
Die Namen [der CSS-Klassen] [...] können Sie frei vergeben, Sie dürfen jedoch
[...]
nicht mit einer Ziffer [...] beginnen...
MFG
bleicher
@@bleicher:
Die Namen [der CSS-Klassen] [...] können Sie frei vergeben, Sie dürfen jedoch
[...]
nicht mit einer Ziffer [...] beginnen...
[ ] Hast du zuviel 1337 g35pr0ch3n?
[ ] Das Sandmännchen war schon bei dir und hat dir Sand in deine Äuglein gestreut?
'l' vs. '1'.
Live long and prosper,
Gunnar
Die Namen [der CSS-Klassen] [...] können Sie frei vergeben, Sie dürfen jedoch
[...]
nicht mit einer Ziffer [...] beginnen...
tun sie auch nicht :-) ist ein kleines L (l) schaut fast so aus wie ne eins (1)
Hi,
fangen wir hier an, bei der zeile
Die Namen [der CSS-Klassen] [...] können Sie frei vergeben, Sie dürfen jedoch
[...]
nicht mit einer Ziffer [...] beginnen...
Da würde mich ehrlich gesagt die Quelle interessieren.
In HTML finde ich keine derartige Einschränkung.
Aus http://www.w3.org/TR/html401/struct/global.html#adef-class
class = cdata-list [CS]
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.
Hier steht (indirekt) als einzige Einschränkung, daß der Klassenname keinen Whitespace enthalten kann (weil das als Trenner zwischen den Klassennamen dient).
Das [CS] bedeutet, daß der Wert case-sensitive ist. Auch kein Verbot für ne Ziffer am Anfang.
Der Link zu cdata-list http://www.w3.org/TR/html401/types.html#type-cdata bringt keine weiteren Einschränkungen, hier wird nur erwähnt, daß Whitespace verwurschtelt werden darf zu jeweils einem Space und am Anfang oder Ende abgeschnitten werden darf. Das hat aber nichts mit der Ziffer zu tun.
Sicherheitshalber noch ein Blick in die DTD http://www.w3.org/TR/html401/sgml/dtd.html#coreattrs, ob da eine Einschränkung als Kommentar vergeben ist:
<!ENTITY % coreattrs
"id ID #IMPLIED -- document-wide unique id --
class CDATA #IMPLIED -- space-separated list of classes --
style %StyleSheet; #IMPLIED -- associated style info --
title %Text; #IMPLIED -- advisory title --"
>
Nein, keine solche Einschränkung.
<div class="2bla"></div> ist also in HTML zulässig.
Und in CSS gibt's auch kein Verbot für ne Ziffer am Anfang (siehe hier: http://www.w3.org/TR/CSS21/grammar.html):
class
: '.' IDENT
;
ident {nmstart}{nmchar}*
nmstart [_a-z]|{nonascii}|{escape}
Unsere Ziffer paßt weder in [_a-z] noch in {nonascii}, probieren wir {escape}:
escape {unicode}|\[ -~\200-\377]
Ui, die zweite Alternative erlaubt, Zeichen zwischen Leerzeichen und Tilde (da fallen Ziffern rein) mit vorangestelltem Backslash zu escapen.
Also hätten wir dann:
.\2bla
Den anderen Ast {unicode} verfolge ich nicht weiter, ich habe ja bereits eine Methode gefunden, meinen ziffernbeginnenden Klassennamen zu notieren.
(Daß ich das nie verwenden würde, weil die Gefahr, daß irgendein Browser das nicht versteht, zu groß ist, steht auf einem anderen Blatt - erlaubt ist es)
cu,
Andreas
@@MudGuard:
escape {unicode}|\[ -~\200-\377]
Wo holste’n das her? Aus CSS 2.0? [CSS2 §D]
In CSS 2.1 steht
escape {unicode}|\[^\r\n\f0-9a-f] [CSS21 §G]
Und '\200' steht nicht für die Zeichenkette '' '2' '0' '0', sondern für das Zeichen U+0200 'Ȁ'.
Also hätten wir dann:
.\2bla
Nein, das wäre ein Selektor für die Klasse "+la" [CSS2 §4.1.3]
Für die Klasse "2bla" müsste es '.\32 bla' oder '\000032bla' heißen.
Den anderen Ast {unicode} verfolge ich nicht weiter,
Hätteste mal, denn das ist der richtige Ast:
unicode \{h}{1,6}(\r\n|[ \t\r\n\f])?
1 bis 6 HExadezimalziffern und ggfs. ein Whitespace-Zeichen.
(Daß ich das nie verwenden würde, weil die Gefahr, daß irgendein Browser das nicht versteht, zu groß ist, steht auf einem anderen Blatt - erlaubt ist es)
Schnell mal getestet: Firefox 2 kann es, IE 6 auch:
<!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="und" lang="und"
>
<head>
<title>TEST</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
[code lang=css].\32 bla {background: yellow}
</style>
</head>
<body>
<p class="2bla">Lorem ipsum dolor sit amet</p>
</body>
</html>[/code]
Live long and prosper,
Gunnar
@@Gunnar Bittersmann:
Schnell mal getestet: Firefox 2 kann es, IE 6 auch:
Firefox 3 , IE 7, aktuelle Opera und Safari auch.
Live long and prosper,
Gunnar
Hi,
Wo holste’n das her? Aus CSS 2.0?
Cascading Style Sheets, level 2 revision 1
CSS 2.1 Specification
W3C Candidate Recommendation 25 February 2004
(die hatte ich mir mal lokal gespeichert)
[CSS2 §D]
Meine Meinung zu dem verlinkten Dokument (Vollkommmen irrelevant) solltest Du kennen.
In CSS 2.1 steht
Die haben das dann wohl in der
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
W3C Candidate Recommendation 19 July 2007
geändert.
Den anderen Ast {unicode} verfolge ich nicht weiter,
Hätteste mal, denn das ist der richtige Ast:
Unter Berücksichtigung der von mir verwendeten Version von CSS 2.1 von 2004 war das nicht nötig.
Ändert aber am eigentlichen Ergebnis (SELFHTML ist hier fehlerhaft) nichts.
cu,
Andreas
@@MudGuard:
(die hatte ich mir mal lokal gespeichert)
„Verlasse dich nie auf Sekundärliteratur ;)“ [http://forum.de.selfhtml.org/archiv/2007/3/t147617/#m958154 f.]
Live long and prosper,
Gunnar
so geht´s.
scheinbar ist ein position:relative; auf td nicht defniert.
http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme:
"The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined."
<head>
<style>
td.c1 p {background:green; position:relative; margin:0; padding:0}
td a.l {color:red; position:absolute; right:1px; bottom:1px;}
</style>
</head>
<table border="1">
<tr>
<td width=300px>spalte1</td>
<td width=300px class='c1'><p>spalte2<br/>zeile zwo<a href='#' class='l'>Link</a></p></td>
<td width=300px>spalte3</td>
</tr>
</table>