mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 19:14 Benutzername: Passwort: Auto-Login

Thema: [CSS] rotate + position fixed/absolute vom 02.02.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] rotate + position fixed/absolute
Autor Nachricht
remote
Threadersteller

Dabei seit: 10.11.2006
Ort: /var/www/
Alter: 109
Geschlecht: Männlich
Verfasst Mi 02.02.2011 19:29
Titel

[CSS] rotate + position fixed/absolute

Antworten mit Zitat Zum Seitenanfang

Ich würde gerne einen Link am linken Browserrand verankern und zwar um 90° gedreht.

Das Problem dabei: Die Rotation wird ausgehend vom Mittelpunkt der Box berechnet.. je länger also der Linktext, desto größer der Abstand zur linken Kante.
Da sich die Länge dynamisch ändern kann, ist mir mit einem festgelegten margin-left: -#px nicht geholfen.

Kennt jemand eine Lösung für das Problem, die ohne JS auskommt?



Code:

<div id="wrapper">
   <a href="#">blindtext</a>
</div>


Code:

#wrapper {
   position: absolute;
   top: 50%;
   left: 0;
}
         
#wrapper a {
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);   
}
  View user's profile Private Nachricht senden
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 02.02.2011 19:35
Titel

Antworten mit Zitat Zum Seitenanfang

Also dir geht es jetzt rein um die vertikal mittige Position oder worum?

Code:
display: table-cell;
vertical-align: middle;

Hä?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
remote
Threadersteller

Dabei seit: 10.11.2006
Ort: /var/www/
Alter: 109
Geschlecht: Männlich
Verfasst Mi 02.02.2011 19:50
Titel

Antworten mit Zitat Zum Seitenanfang

nein, es ging vorallem darum, dass es links keinen gap zum fensterrand gibt.
... auf jeden fall vielen dank fürs angucken - so wie es aussieht stand ich nur mal wieder auf dem schlauch:

wrapper =
feste breite (ausreichend für den längsten linktext)
festes left:-#px
text-align center (50% positionierung des links)


... ich könnte schwören ich hätte das gleich zu beginn so getestet... aber meh - tuts jedenfalls.
  View user's profile Private Nachricht senden
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 02.02.2011 20:04
Titel

Antworten mit Zitat Zum Seitenanfang

Hi,

du musst beachten, wenn du nicht den dirty-way mit festen Breiten und Höhen gehen willst:

http://www.w3.org/TR/css3-2d-transforms/#transform-origin
Code:
-webkit-transform-origin: left;
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
remote
Threadersteller

Dabei seit: 10.11.2006
Ort: /var/www/
Alter: 109
Geschlecht: Männlich
Verfasst Mi 02.02.2011 20:44
Titel

Antworten mit Zitat Zum Seitenanfang

Smooth-Graphics hat geschrieben:
Hi,

du musst beachten, wenn du nicht den dirty-way mit festen Breiten und Höhen gehen willst:

http://www.w3.org/TR/css3-2d-transforms/#transform-origin
Code:
-webkit-transform-origin: left;


merci - die eigenschaft war mir unbekannt.
  View user's profile Private Nachricht senden
 
Ähnliche Themen CSS: Suche "Zwischending" zwischen position:absolute & fixed
[CSS] IE8 mit :after und position:fixed nicht wirklich fixed
Position fixed
[CSS] position:fixed und der IE
IE6 und position:fixed
position fixed im IE7 und eventuell IE6
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.