Liste von unten rechts nach oben links

[Der A.]

Hallo allerseits.

Ich habe eine Liste, die Vorschaubilder beinhaltet. Diese Liste würde ich gerne von unten rechts nach oben links füllen.

  
<div class="team">  
<ul>  
<li><a href="#"><img src="#" /></a></li>  
...  
</ul>  
</div>  

Kann mir jemand sagen, wie ich die li per CSS genau formatieren muss, damit sich die Vorschaubilder ein definiertes Feld von unten rechts nach oben links auffüllen?

Mein bisheriges CSS:

  
.team {margin:0; width:650px; height:360px; text-align:right;}  
.team ul {position:absolute; bottom:0; right:0;}  
.team ul li {float:right; margin:0 1px 1px 0; list-style:none; height:64px; line-height:64px;}  
.team ul li a img {border:none;}  

[LX]

Mit normalen Mitteln geht das leider nicht - Inhalte werden immer von oben nach unten geschrieben, daran ändert auch float nichts. Du kannst lediglich mit CSS3-Transformationen und der Filter-Eigenschaft im IE die Liste und die darin befindlichen Inhalte um je 2 Achsen spiegeln.

Gruß, LX

[Gunnar Bittersmann]

@@LX:

nuqneH

Du kannst lediglich mit CSS3-Transformationen und der Filter-Eigenschaft im IE die Liste und die darin befindlichen Inhalte um je 2 Achsen spiegeln.

Was einer Rotation um 180° gleichkommt.

Qapla'

[LX]

Kommt letzten Endes aufs gleiche raus. Wäre mal interessant, zu testen, was schneller funktioniert, das rotate oder ein Spiegelungs-transform...

Gruß, LX

[Gunnar Bittersmann]

@@LX:

nuqneH

Kommt letzten Endes aufs gleiche raus. Wäre mal interessant, zu testen, was schneller funktioniert, das rotate oder ein Spiegelungs-transform...

Nein, _eine_ Rotation oder _zwei_ Spiegelungen.* Aus den beiden müsste erst die resultierende Transformationsmatrix berechnet werden, das dauert …

Qapla'

* jeweils, d.h. für ul und sämtliche li

[Der A.]

Danke für die Tipps!

So funktioniert's in Firefox und Safari:

  
.team ul {position:absolute; bottom:0; right:0; -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg);}  
.team ul li {display:inline; float:left; margin:0 1px 1px 0; list-style:none; height:64px; line-height:64px; -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg);}  

Hab noch ein transform ohne Vorzeichen hinzugefügt in der Hoffnung, dass diese Eigenschaft irgendwann zum Standard wird.

[Gunnar Bittersmann]

@@Der A.:

nuqneH

Hab noch ein transform ohne Vorzeichen hinzugefügt in der Hoffnung, dass diese Eigenschaft irgendwann zum Standard wird.

Guter Plan. Bis dahin: Mit '-ms-transform' geht’s auch im IE 9; mit '-o-transform' auch im aktuellen Opera 11.10.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Mit '-ms-transform' geht’s auch im IE 9

Aber Vorsicht! Man sollte den IE 9 nicht mit '-ms-transform' und 'filter' versorgen.

Also 'filter' für IE 7 per '*+html'-Hack. (Für IE 6 per '* html', falls der noch irgendwie relevant sein sollte.

Den 8er müsste man in den 7er-Modus schicken. Wohl sowieso das einzige, was man mit dieser Fehlgeburt tun kann.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Den 8er müsste man in den 7er-Modus schicken.

Oder man findet doch etwas, was der 8er nicht kann, der 9er aber doch: die Pseudoklasse :not().

Die Selektoren wären dann also '.team ul:not(x)' und '.team li:not(x)'. Wobei immer noch eine Frage im Raum steht.

Qapla'

[Der A.]

Hab die beiden: -ms-transform und -o-transform auch noch integriert.

IE 6 muss ich zum Glück nicht mehr berücksichtigen. Ist auch nicht so schlimm, wenn's im IE 8 und 7 nicht gleich funktioniert wie in den anderen Browsern. Ist ja eigentlich nur eine kosmetische Geschichte. Fuktionieren tut's auch, wenn die Liste von oben nach unten angezeigt wird.

[LX]

Hallo, Gunnar!

Nein, _eine_ Rotation oder _zwei_ Spiegelungen.* Aus den beiden müsste erst die resultierende Transformationsmatrix berechnet werden, das dauert …

Eine doppelte Spiegelung entspricht 1:1 der gleichen transform-Matrix, die aus rotate berechnet werden würde. Daher bleibt lediglich die Frage, ob rotate tatsächlich wie auch immer beschleunigt oder lediglich in die transform-Matrix übersetzt wird.

Gruß, LX

[Gunnar Bittersmann]

@@LX:

nuqneH

Eine doppelte Spiegelung entspricht 1:1 der gleichen transform-Matrix, die aus rotate berechnet werden würde.

Oh, da hab ich was übersehen. Bei der Transformationsmatrix für die Rotation muss der Sinus und der Cosinus des Winkels berechnet werden. Das kostet natürlich auch Zeit.

Für Spiegelungen an x- und y-Achse sind die Transformationsmatrizen klar, beide müssen aber noch miteinander multipliziert werden.

Ob nun die Matrixmultiplikation oder die Berechnung der Winkelfunktionen schneller ist, wer weiß.

Daher bleibt lediglich die Frage, ob rotate tatsächlich wie auch immer beschleunigt oder lediglich in die transform-Matrix übersetzt wird.

?? Ich denke, es läuft alles über Transformationsmatrizen.

Qapla'

[LX]

Hi, Gunnar!

?? Ich denke, es läuft alles über Transformationsmatrizen.

Und genau da bin ich mir angesichts der teilweisen Nutzung von modernen Grafikbeschleunigern in modernen Browsern nicht notwendigerweise sicher.

Gruß, LX

[MudGuard]

Hi,

Kann mir jemand sagen, wie ich die li per CSS genau formatieren muss, damit sich die Vorschaubilder ein definiertes Feld von unten rechts nach oben links auffüllen?

ungetestet: die li auf display:inline und für das ul ein direction:rtl vorgeben. Sollten in den li Textinhalte vorkommen, für die li wieder direction:ltr setzen.

cu,
Andreas

[Gunnar Bittersmann]

@@MudGuard:

nuqneH

ungetestet: die li auf display:inline und für das ul ein direction:rtl vorgeben.

Und von unten nach oben füllen?

Qapla'

[MudGuard]

Hi,

ungetestet: die li auf display:inline und für das ul ein direction:rtl vorgeben.
Und von unten nach oben füllen?

vertical-direction: btt ;-)

Ich schrieb doch: ungetestet.

cu,
Andreas

[Gunnar Bittersmann]

@@Der A.:

nuqneH

[code lang=html]
<div class="team">
<ul>
<li><a href="#"><img src="#" /></a></li>
...
</ul>
</div>

Wozu soll das divÉlement gut sein? Du kannst doch dem ul-Element die Klasse geben. (Wäre eine ID nicht angebracht?)

Qapla'

[Der A.]

Wozu soll das divÉlement gut sein? Du kannst doch dem ul-Element die Klasse geben. (Wäre eine ID nicht angebracht?)

Gute Frage.

Hab das Div gekillt und der ul die Klasse gegeben. War wohl noch von einer früheren Version drin.

Danke für den Tipp.

[Gunnar Bittersmann]

@@Der A.:

nuqneH

.team ul li {float:right; margin:0 1px 1px 0; list-style:none; height:64px; line-height:64px;}

Mache Selektoren nur so speziell wie nötig: '.team li'.

.team ul li a img {border:none;}

Dito.

Qapla'