Absatz Positionierung in einem DIV-Tag

[rastaman2]

Moin alle zusammen,

ich habe mal eine Frage bezüglich der Positionierung von Absätzen <p> in einem <div>-Tag. Ist es möglich mehreren Absätzen in einem <div>-Tag eine unterschiedliche Textausrichtung zu geben?

Zum besseren Verständis hier mal ein Beispiel als html-code:

<div id="content">
                <p> Hier ist der Text des 1. Absatzes, dieser soll zentriert dargestellt werden.</p>
                
                <p>Und der 2. Absatz, sein Text soll linksbündig sein.</p>

                 usw....
</div>

Habe eigentlich schon eine Menge versucht, aber alles ohne Erfolg. Aber ihr habt bestimmt noch eine Idee ;).
Zur zeit behelfe ich mir einfach mit mehreren <div>-Tag's denen ich dann in der CSS-Datei text-align:center bzw. text-align:left usw. zuweise. Finde diese Lösung allerdings etwas unübersichtlich und hoffe, dass es auch anders geht.

Vielen Dank schon mal für eure Antworten.

VG
Thomas

 

[Efchen]

Ist es möglich mehreren Absätzen in einem <div>-Tag eine unterschiedliche Textausrichtung zu geben?

Klar. Du kannst jedem Tag eine eigene Textausrichtung geben. Du musst das Tag nur richtig adressieren.

Habe eigentlich schon eine Menge versucht, aber alles ohne Erfolg.

Ich kann mir nicht "eine Menge" vorstellen, wenn Du nicht zum Ergebnis gekommen bist.
Insbesondere, weil Du die Lösung ja schon verwendest, in Form einer id in Deinem umschließenden Container.

<div id="content">
  <p id="nurDieserAbsatz">Lorem ipsum</p>
  <p class="besondererAbsatz">dolor</p>
  <p class="besondererAbsatz">sit amet.</p>
</div>

Die einzelnen Absätze kannst Du nun verschieden ansprechen im Sylesheet:
#content p.besondererAbsatz
div#content #nurDieserAbsatz
.besondererAbsatz
p#nurDieserAbsatz
...

Je nach Schreibweise oben werden damit andere Elemente adressiert.
".besondererAbsatz" gilt z.B. für Elemente mit der Klasse, die auch außerhalb von div#content stehen können.

 

[rastaman2]

neuer Versuch

Hallo Efchen,

danke für deine Antwort. Mit Klassen habe ich es auch schon versucht, aber bin anscheinend nicht allzu fit in dem Thema ;)

Habe jetzt nochmal etwas versucht, jedoch funktioniert es so auch nicht. hier mal die CSS

#content{
width:950px;
height:600px;
background:#fff;
color:#000000;
}
#content p.center{
text-align:center;
}

Und die dazugehörige HTML

<div id="content">
                <p class="center"><h3>Herzlich willkomen .........</p>
                
                <p>Wir sind für Sie da! .....</p>
</div>

mfg

Thomas

 

[Efchen]

Habe jetzt nochmal etwas versucht, jedoch funktioniert es so auch nicht.

"funktioniert nicht" ist keine ausreichende Fehlerbeschreibung!

<p class="center"><h3>Herzlich willkomen .........</p>

Wenn Du hier den HTML-Fehler behebst, dann sollte es klappen. Benutzt Du nicht regelmäßig den Validator, um Deinen Code auf Fehler zu prüfen?

1. <h3> innerhalb von <p> ist Nonsense. Entweder der Inhalt ist eine Überschrift oder er ist ein Textabsatz. Beides geht nicht.
2. Vermutlich existiert für h3 noch eine andere Angabe bzgl. text-align, die Deine Einstellung für p.center wieder aufhebt.
3. "center" ist ein ungeeigneter Name für eine Klasse. Wie alles im HTML-Code sollte der Klassenname die Semantik beschreiben, nicht aber das Layout. Wenn Du das mal irgendwann ändern willst und text-align:right daraus machst, dann hast Du da ne Klasse "center" die Text rechts ausrichtet. Das ist natürlich verwirrend. Aber die Alternative ist, bei jedem Element mit der Klasse in allen HTML-Seiten den Klassenname zu ändern. Aber das ist nicht der Sinn der Trennung von Inhalt und Layout. Da solltest Du drauf achten, dass Du IDs und Klassen einen Namen gibst, der die Bedeutung beschreibt, nicht die Auswirkung.

 

[rastaman2]

1. <h3> innerhalb von <p> ist Nonsense. Entweder der Inhalt ist eine Überschrift oder er ist ein Textabsatz. Beides geht nicht.

Hört sich durchaus logisch an, wieder was dazu gelernt/verstanden. Daran lag es auch, dass er es nicht zentrieren wollte. Habe jetzt das ganze das ganze so umgebaut, dass er die Klasse auf's <h3> anwendet und siehe da es funktioniert.

Benutzt Du nicht regelmäßig den Validator, um Deinen Code auf Fehler zu prüfen?

Nope, kannst du mir einen guten Validator empfehlen?

3. "center" ist ein ungeeigneter Name für eine Klasse.

Sehe ich auch ein und werde versuchen in Zukunft verstärkt darauf zu achten. ;)

Vielen Dank noch einmal für deine Hilfe.

Liebe Grüße

Thomas

 

[Efchen]

The W3C Markup Validation Service

 

[rastaman2]

bedankt, gleich mal als Bookmark gesetzt;)