|
|||
Problem mit transform:rotate
Hallo
Ich will einen Text vertikal ausrichten. Daher habe ich versucht den Text mit "transform:rotate(270deg);" zu drehen. Das hat funktioniert, aber leider kann ich den Text jetzt nicht mehr ordentlich positionieren. Ich bräuchte 20 px Abstand zum rechten Rand des umgebenden div-Feldes und eine vertikale Zentrierung im umgebenden div-Feld. Normalerweise hätte ich das ungefähr so gelöst: <div style="width:270px;height:320px;display:table-cell;vertical-align:middle;text-align:right;"> <div style="display:inline-block;transform:rotate(270deg);margin-right:20px;"> Vertikaler Text </div> </div> Die vertikale Zentrierung funktioniert, aber nicht der Abstand zum rechten Rand. Mit "text-align:right;" wird das div-Feld nämlich so positioniert, als ob der Text immer noch waagrecht wäre. Gibt es eine Lösung für das Problem? Ich darf kein JavaScript verwenden. |
Sponsored Links |
|
|||
Hallo
Zitat:
Zitat:
Da mir Text direkt in Containern genau wie Inline-CSS widerstrebt habe ich mal folgendes Beispiel erstellt: HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt --> <title>Text transformieren</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Um alte IE HTML5-tauglich zu machen --> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) --> <style> /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */ header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { -moz-box-sizing: border-box; box-sizing: border-box; } html { font-size: 120%; } body { padding: 0; } div { width: 270px; height: 320px; display: table-cell; vertical-align: middle; border: 2px solid red; } p { display: inline-block; transform: rotate(270deg) translatex(0px) translatey(180px); border: 2px solid blue; } </style> </head> <body> <div> <p>Vertikaler Text</p> </div> </body> </html> MrMurphy |
Sponsored Links |
|
|||
Das funktioniert bei mir leider nicht im Google Chrome.
Ich habe auch schon so etwas Ähnliches versucht. Das Problem ist aber, dass die Breite des Textes in den verschiedenen Browsern unterschiedlich ist. |
|
|||
Hallo
Zitat:
Zitat:
Gruss MrMurphy |
|
|||
Bei mir funktioniert es noch immer nicht:
Im Firefox 37.0.1 gibt es keinen Abstand zum rechten Rand. Im Google Chrome 42.0 gibt es ca. 10 px Abstand zum rechten Rand. Ich habe den Zoom immer auf 100% eingestellt und verwende Linux als Betriebssystem. |
|
|||
Hallo,
die Browser sollen bei meinem Beispiel wie der Chrome einen kleinen Abstand vom rechten Rand des umgebenden Elements anzeigen. Das Problem mit dem Firefox kann ich nachvollziehen. Das liegt an einem oder mehreren Addons, die du installiert hast. Bei meinem "Arbeits"-Firefox mit relativ vielen Addons, z. B. WebDeveloper und Wave und NoSquint und ..., hängt die Schrift auf direkt am rechten Rand. Bei meinem "Test"-Firefox ohne Addons im Rohzustand wird der Abstand korrekt genau wie im Chrome, IE und Opera angezeigt. Wenn jemand in seinen Browser so eingreift, das der die Seiten nicht mehr korrekt anzeigt, wirst du daran nichts ändern können. Du kannst den Quelltext nur korrekt erstellen und mit den originalen Browsern ohne "Zubehör" testen. Gruss MrMurphy |
Stichwörter |
rotate, transform, vertikaler text |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit margin-left | Shyne | CSS | 7 | 03.03.2008 19:02 |
Font der Überschrift ändern (Problem) | artist | CSS | 2 | 07.12.2007 11:01 |
Design zu CSS/HTML verarbeiten - Problem häufen sich. | Grafikamateur | CSS | 2 | 06.08.2007 10:57 |
Problem bei Div's - zwei mal das gleiche und doch nicht ... | Niriel | CSS | 10 | 09.06.2005 18:39 |
Problem mit einem CSS Layout | nARC | CSS | 20 | 21.05.2005 07:28 |