zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit transform:rotate

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.05.2015, 22:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2015
Beiträge: 3
Wajas befindet sich auf einem aufstrebenden Ast
Standard 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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.05.2015, 00:06
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
als ob der Text immer noch waagrecht wäre
Das ist das normale Verhalten.

Zitat:
Gibt es eine Lösung für das Problem?
Ja, mit translatey, also einer Verschiebung auf der y-Achse.

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>
Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.05.2015, 11:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2015
Beiträge: 3
Wajas befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 10.05.2015, 11:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Das funktioniert bei mir leider nicht im Google Chrome.
Bei mir funktioniert meine Lösung im aktuellen FF, IE, Chrome und Opera. Ich hoffe, das du nicht aktuelles CSS3 in alten Browsern verwenden willst und einen alten Chrome verwendest.

Zitat:
Das Problem ist aber, dass die Breite des Textes in den verschiedenen Browsern unterschiedlich ist.
Das kann ich nicht nachvollziehen. Bei meiner Lösung wird der Text bei gleichem Zoomfaktor in allen Browser gleich groß angezeigt.

Gruss

MrMurphy
Mit Zitat antworten
  #5 (permalink)  
Alt 10.05.2015, 22:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2015
Beiträge: 3
Wajas befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 10.05.2015, 22:55
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Antwort

Stichwörter
rotate, transform, vertikaler text

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:38 Uhr.