Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

CSS-Text rechts auf der Seite ausrichten.





Frage

Hallo, irgendwie klappt es nicht, daß der Text bei diesem css rechts ausgegeben wird, sprich "align= right". Weiß jemand warum? [code] <html> <head> <style type="text/css"> <!-- p.wichtig { border-top-color: #999999; border-right-color: #666666; border-bottom-color: #666666; border-left-color: #999999; white-space: normal; background-color: #ffffff; color: #000000; border-top-width: 1px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #999999; border-right-color: #666666; border-bottom-color: #666666; border-left-color: #999999; padding : 5px; width: 90%; align: right; } --> </style> </head> <body> <p class="wichtig">das steht jetzt immer noch links</p> <p>asdfsadf </p> <p></p> </body> </html> [/code] Vielen Dank für Tipps Gruß Mel

Antwort 1 von DerWahreDenny

versuch mal text-align:right.

Antwort 2 von Mel

Hi,

Zitat:
versuch mal text-align:right.

Das richtet nur den Text rechts aus.
Was ich meine, das ich den gesamten Absatz des Textes ausrichten möchte und das müßte eigentlich mit Align: center funktionieren, aber tut es in diesem Fall nicht und ich weiß nciht warum?!

Gruß
Mel

Antwort 3 von DerWahreDenny

Hä? Verstehe ich nicht.

Erst rechts, jetzt center?!

Welchen Text denn nun genau? p.wichtig oder nur p?

;-)

Antwort 4 von rabies

Wie soll man das nun verstehen? Du möchtest den Absatz nach rechts bringen? Aber der darin befindliche Inhalt soll weiter Links zentriert bleiben? Oder auch rechts zentriert sein?

Um so gesehen Deinen 90% breiten Absatz nach rechts zu bringen, bräuchtest Du ein "Elternelement" mit 100%iger Breite. Für diesen Elternelement musst Du dann text-align: right; festlegen. Dann sollte der komplette Absatz rechts sein.

--Sven.

und btw.: die Eigenschaft align gibt es in CSS afaik _nicht_.

Antwort 5 von derpfleger

Und nebenbei: die border-Definitionen kannst du zB so zusammenfassen:

border-top: 1px solid #999999;
border-right: 2px solid #666666;
border-bottom: 2px solid #666666;
border-left: 1px solid #999999;

das trägt wesentlich zur Übersichtlichkeit bei.

Gruß Heiko

Antwort 6 von derpfleger

Vielleicht so?


<html>
<head>
<style type="text/css">
<!--

p.elternelement {
width:100%;
text-align:right;
border-top: 1px solid #FF0000;
border-right: 1px solid #FF0000;
border-bottom: 1px solid #FF0000;
border-left: 1px solid #FF0000;
 }

span.wichtig {
   border-top: 1px solid #999999;
   border-right: 2px solid #666666;
   border-bottom: 2px solid #666666;
   border-left: 1px solid #999999;
   white-space: normal;
   background-color: #ffffff;
   color: #000000;
   padding : 5px;
   width: 90%;
   text-align: left;
}
-->
</style>
</head>

<body>
<p class="elternelement">
<span class="wichtig">das steht jetzt immer noch links</span>
</p>
<p>asdfsadf </p>
<p></p>
</body>
</html>


womit ich rabies Gedanken aufgegriffen hätte.
Gruß Heiko

Antwort 7 von Friedel

Abgesehen davon, dass ich auch nicht verstanden habe, was du eigentlich willst, enthält dein Quellcode einiges an Ungereimtheiten. Das Atribut "align" gibt es in CSS jedenfalls nicht. Wenn ich wüßte, was du meinst, könnte ich dir wohl auch sagen, welches Attribut zu verwenden ist. Aber du solltest erst mal den ganzen Aufbau deiner konstruktion überdenken. Was z.B. soll denn "padding" bei einem Inlineelement bewirken? Dieses Attribut macht nur bei einem Blockelement Sinn und darf auch nur dort verwendet werden. Auch "text-align: left;" kann natürlich nicht in einem Inlineelement verwendet werden.

Antwort 8 von rabies

Zu Antwort 7:

padding darf und kann auf alle Elemente, nicht nur Block-Elemente, angewendet werden.

--Sven.

Antwort 9 von Friedel

@rabies: Wie kommst du darauf? Und wozu soll das gut sein? Ich habe gerade mal nachgesehen, wie andere das interpretieren. In der Bibel (http://de.selfhtml.org/) steht dazu

Zitat:
Sinnvoll … für alle HTML-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden …

Ob die Angabe erlaubt ist obwohl sie sinnlos ist, wird dort nicht beschrieben.

Antwort 10 von rfb

@Friedel:
aber, so heißt es auch im Buch CSS, Kap. Eigenschaften, Vers Innenabstände, der HTML-Bibel:
Zitat:
Sinnvoll sind die Angaben zum Innenabstand ferner, wenn Sie außerdem CSS-Eigenschaften für Rahmen oder für Farben oder Grafiken zum Hintergrund eines Elements notieren.


Antwort 11 von rabies

Edition W3C zum Thema padding. - Anwendbar auf alle Elemente.

W3C selbst zum Thema padding - Applies to: all elements.

Und als sinnlos erachte ich die Angabe von padding bei inline-Elementen keineswegs. Manchmal sieht ein wenig "eingerückter" Text doch schöner aus als rein dahin-geklatschter.

... und noch dazu ist p nicht einmal ein Inline-Element (sofern Du den Comment von A7 nicht auf pfleger´s A bezogen hast, der padding auf span angewendet hat). -s-

Antwort 12 von Friedel

@rabies: Hast du auch die Überschrift geleden?
Zitat:
Das Boxmodel
Aber rfb hat mich mit den Rahmen überzeugt. An die hatte ich nicht gedacht. Aber deinen Einwand wegen p habe ich nicht verstanden. Auf was bezieht er sich?

P.S. Einrückungen würde ich mit margin machen.

@rfb: Stimmt. Ich habe nicht an die Rahmen gedacht. Dadurch macht padding wieder Sinn, denn es gibbt dadurch etwas wozu man einen Abstand erzeugen kann. Aber für text-align fällt mir kein Sinn in einem Inlineelement ein.

Antwort 13 von Friedel

@@rabies: Der Link zu Edition-W3C ist übrigens gut. Danke. kannte ich noch nicht.

Antwort 14 von Mel

Ich wollte eigentlich das gleiche wie auf dieser Website produzieren:

http://www.grammiweb.de/html/html067.shtml

Hier ist der Text mittig ausgerichtet und zwar mit "align=center", oder nicht?!

Ich wollte das gleiche erreichen, aber mit "align=right". funzt aber bei mir nicht...

Gruss Mel

Antwort 15 von rabies

... Wissen und Ideen für Webmacher - Aaahja. Da haben sich die Autoren dieser Seite meiner Ansicht nach wohl vertan. Ich bleibe weiter bei dem Standpunkt, dass es das Attribut "align" nicht für CSS gibt. (Und so weit ich weiß, ist das W3C der selben Ansicht). ;)

Antwort 16 von DerWahreDenny

@mel

auf der angegebenen website ist ALLES linksbündig!

mfg

Antwort 17 von Mel

Hmh,

ich lass es dann jetzt einfach sein und lös es auf eine klassische Art und Weise direkt im html-code ohne css...

Danke Euch auf jedne Fall für Eure Ideen und Tipps
Gruss
Mel

Antwort 18 von derpfleger

Das ist einfach falsch gelöst.
Die Angabe "align:center;" im CSS ist Unsinn und wird ignoriert. Das Zentrieren erfolgt dann durch den html-Tag <center></center>, der das Ganze umschliesst. Das ist aber eine unnötige Verwurschtelung von Layout mittels html-tag und Layout mittels CSS.

Gruß Heiko

Antwort 19 von derpfleger

Die Anweisung könnte dann zB so lauten:
statt
.einrahmen { border-left: 1px solid #000; border-right: 1px solid #000; width: 60%; align: center; padding-left: 5px; padding-right: 5px; text-align: left } 


so
.einrahmen { border-left:1px solid #000; border-right:1px solid #000;  padding-left:5px;  padding-right:5px; margin:0px 20%;  text-align:center;  } 


Also statt dem Ganzen mit width:60% die Grösse zuzuweisen, einen Aussenabstand links und rechts von 20% definieren.

Gruß Heiko

Antwort 20 von derpfleger

muss im unteren Code natürlich auch text-align:left; heissen, sorry