|
|||
div-Anordnung mit rotiertem Text funktionier - aber warum?
Schönen guten Abend!
Lustiger Titel oder? Ich versuche ja immer noch für eine Tabelle aus Platzgründen die Kopfzeile zu drehen. Jetzt ist es mir mit div-Boxen geglückt. Allerdings habe ich das nur durch rumprobieren (damit meine ich padding-Top und padding-Bottom) und nicht durch eine verstehende Logik hinbekommen. Könntet Ihr mir in diesem konkreten Fall die Wirkungsweise von padding-Top und padding-Botoom erklären? Warum hängen die gedrehten Texte ohne diese beiden Parameter willenlos in der Landschaft rum? Hier das php-File: PHP-Code:
HTML-Code:
@CHARSET "US-ASCII"; #myBox{ margin: 50px auto; width: 955px; height: 400px; border: 1px solid #600000; } .names{ width: 30px; height: 100px; border: 1px solid green; float: left; } .inhalt{ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); white-space: nowrap; padding-top: 70px; padding-bottom: 70px; } juri |
Sponsored Links |
|
|||
Hallo,
erstmal sollte ein Text niemals direkt in einem div stehen, sondern in einem passendem Element wie p oder li. Das hat aber nichts direkt mit deinem Problem zu tun. Beim Drehen des Inhalts passt sich die Größe des Containers nicht an. Gib den unterschiedlichen div mal verschiedene Hintergrundfarben (background-color) und experimentiere dann mal etwas mit padding, margin, width, height u.s.w. herum. Dann kannst du das am besten nachvollziehen. Um padding, margin, border u.s.w. zu verstehen google am Bestem mal nach dem Begriff "css box modell". Dazu gibt es massenhaft Erklärungen. Gruss MrMurphy |
Sponsored Links |
|
|||
Ich liefere dir mal ein paar Links:
Das Boxmodell von CSS - Webkompetenz Innenabstand - Webkompetenz Außenrand und Abstand - Webkompetenz CSS Transforms Module Level 1
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Float:right fehler im IE6 | gertnaster | CSS | 9 | 04.01.2011 22:59 |
Parent DIV soll mit der Höhe seines Childs wachsen | Tekkla | CSS | 2 | 19.11.2009 19:27 |
Float hängt sich durch's padding durch. | nick | CSS | 3 | 16.01.2008 20:24 |
Probleme mit float | Webentwickler Eric | CSS | 5 | 21.06.2007 21:09 |
Falsche Darstellung beim Internet Explorer | LordAvalon | CSS | 4 | 09.04.2007 17:22 |