zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden div-Anordnung mit rotiertem Text funktionier - aber warum?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.02.2014, 01:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.02.2014
Beiträge: 3
juri befindet sich auf einem aufstrebenden Ast
Standard 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:
<!doctype html>
<html>

<head>
        <title>Mein Test</title>
        
        <link href="./mycss/mytestDivs.css" type="text/css" rel="stylesheet">
</head>

<body>

    <div id="myBox">

    <?php 
    
            
// Hier startet die Kopfzeile mit den gedrehten Namen

            
for($i=0$i<30$i++){     

                echo 
"<div class='names'><div class='inhalt'>Peter Lustig</div></div>"
            }
        
    
?>
    
    </div>

    
</body>
</html>
... und noch das verwendete css

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;
}
Vielen Dank und Gute Nacht!
juri
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.02.2014, 07:36
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,

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.02.2014, 11:19
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 05.02.2014, 13:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.02.2014
Beiträge: 3
juri befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank,

ich werd mal danach schauen.

Gruß,
juri
Mit Zitat antworten
Antwort

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:31 Uhr.