[ERLEDIGT] Neue Zeile innerhalb eines Div's möglich?

[naeooo]

Hi,

ist es möglich, wenn man einen Text innerhalb eines Div's schreibt, durch Css oder sonst irgendwie neue Zeilen zu machen bzw. den ganzen Text als Blocksatz zu setzen?

Hab es bis jetzt nur so und wüsste nicht, wie ich es anders machen könnte.
HTML-Code:

<div class="Zimmer_Text">In unserem Hotel haben wir 12 moderne und komfortable Zimmer.</div> 
        <div class="Zimmer_Text">Wir haben Einzelzimmer, Doppelzimmer, Dreierzimmer, sowie eine Luxussuite</div> 
        <div class="Zimmer_Text">Sie werden sich in den bequemlich eingerichteten Zimmern schnell wohl f&uumlhlen. </div> 
        <div class="Zimmer_Text">Alle Zimmer verf&uumlgen &uumlber einen Fernseher inkl. Sat.</div> 
        <div class="Zimmer_Text">Sie k&oumlnnen auch ohne weiteres Haustiere mitnehmen,</div> 
        <div class="Zimmer_Text">da unser Hotel sehr Tierfreundlich eingerichtet ist. </div>

Css-Code:

.Zimmer_Text{
    margin-left: 300px;
    font-style: Arial;
    font-size: 15px;
}

Und muss ich wenn ich es so mache, "Klassen" verwenden oder würde sich ein "id" besser dafür eignen?

 

[SpiceLab]

Warum nicht so?

<div class="Zimmer_Text">
  <p>In unserem Hotel haben wir 12 moderne und komfortable Zimmer.</p>
  <p>Wir haben Einzelzimmer, Doppelzimmer, Dreierzimmer, sowie eine Luxussuite</p>
  <p>Sie werden sich in den bequemlich eingerichteten Zimmern schnell wohl fühlen.</p>
  <p>Alle Zimmer verfügen über einen Fernseher inkl. Sat.</p>
  <p>Sie können auch ohne weiteres Haustiere mitnehmen,</p>
  <p>da unser Hotel sehr Tierfreundlich eingerichtet ist. </p>
</div>

Alternativ zum <p> auch mit <br /> möglich.

den ganzen Text als Blocksatz zu setzen?

Blocksatz = text-align:justify

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Textausrichtung/text-align

 

[naeooo]

Warum nicht so?

<div class="Zimmer_Text">
  <p>In unserem Hotel haben wir 12 moderne und komfortable Zimmer.</p>
  <p>Wir haben Einzelzimmer, Doppelzimmer, Dreierzimmer, sowie eine Luxussuite</p>
  <p>Sie werden sich in den bequemlich eingerichteten Zimmern schnell wohl fühlen.</p>
  <p>Alle Zimmer verfügen über einen Fernseher inkl. Sat.</p>
  <p>Sie können auch ohne weiteres Haustiere mitnehmen,</p>
  <p>da unser Hotel sehr Tierfreundlich eingerichtet ist. </p>
</div>

Alternativ zum <p> auch mit <br /> möglich.

Blocksatz = text-align:justify

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Textausrichtung/text-align

Das mit "p" ist in Css nicht möglich, da ich die ganzen Formatierungen dort schreiben muss..

 

[SpiceLab]

Das mit "p" ist in Css nicht möglich, da ich die ganzen Formatierungen dort schreiben muss..

Versteh nicht, was daran nicht möglich ist

Das <p>-Element lässt sich (je nach Bedarf) ebenfalls mit CSS formatieren.

.Zimmer_Text p {...}

 

[naeooo]

Versteh nicht, was daran nicht möglich ist

Das <p>-Element lässt sich (je nach Bedarf) ebenfalls mit CSS formatieren.

.Zimmer_Text p {...}

Also so:

<div class="Zimmer_Text">
        In unserem Hotel haben wir 12 moderne und komfortable Zimmer.
        Wir haben Einzelzimmer, Doppelzimmer, Dreierzimmer, sowie eine Luxussuite
        Sie werden sich in den bequemlich eingerichteten Zimmern schnell wohl f&uumlhlen. 
        Alle Zimmer verf&uumlgen &uumlber einen Fernseher inkl. Sat.
        Sie k&oumlnnen auch ohne weiteres Haustiere mitnehmen,
        da unser Hotel sehr Tierfreundlich eingerichtet ist.
        </div>

.Zimmer_Text p{
    margin-left: 300px;
    font-style: Arial;
    font-size: 17px;
    text-align: justify;
   
}

Ich glaub, ich verstehe nicht ganz, wie du es meinst, denn so kann es ja nicht funktionieren, da der Computer ja nicht weiß, wo er neue Zeile setzen muss.

 

[SpiceLab]

Ich glaub, ich verstehe nicht ganz, wie du es meinst, denn so kann es ja nicht funktionieren, da der Computer ja nicht weiß, wo er neue Zeile setzen muss.

text-align:justify definiert einen Blocksatz, in dem die einzelnen Zeilen die gleiche Länge besitzen (= Wortabstände sind unterschiedlich groß), und war lediglich meine Antwort auf Deine Frage danach, mit CSS den ganzen Text als Blocksatz zu setzen.

Selbstverständlich werden dadurch die Zeilenumbrüche nicht mehr an Deinen gewünschten Stellen gesetzt.

Darum hab ich auch das <p>- oder <br />-Element empfohlen, um gezielt die Absätze oder Zeilenumbrüche im Textfluß zu erzeugen.

Das ist semantisch korrekter/wohlgeformter, als jede einzelne Zeile in das allgemeine Block-Element <div> zu packen, wofür es eben nicht vorgesehen ist. Man spricht in diesem Zusammenhang auch von einer "DIV-Suppe".

<div class="Zimmer_Text">
        In unserem Hotel haben wir 12 moderne und komfortable Zimmer.
        Wir haben Einzelzimmer, Doppelzimmer, Dreierzimmer, sowie eine Luxussuite
        Sie werden sich in den bequemlich eingerichteten Zimmern schnell wohl f&uumlhlen.
        Alle Zimmer verf&uumlgen &uumlber einen Fernseher inkl. Sat.
        Sie k&oumlnnen auch ohne weiteres Haustiere mitnehmen,
        da unser Hotel sehr Tierfreundlich eingerichtet ist.
        </div>

.Zimmer_Text p{
    margin-left: 300px;
    font-style: Arial;
    font-size: 17px;
    text-align: justify;

}

Der Selektor

.Zimmer_Text p{...}

findet keine Übereinstimmung, weil in Deinem gezeigten HTML-Code überhaupt kein <p> als Nachfahreelement des <div class="Zimmer_Text"> existiert.

Alles in allem kann man nur empfehlen, die Grundlagen zu lernen.

 

[naeooo]

text-align:justify definiert einen Blocksatz, in dem die einzelnen Zeilen die gleiche Länge besitzen (= Wortabstände sind unterschiedlich groß), und war lediglich meine Antwort auf Deine Frage danach, mit CSS den ganzen Text als Blocksatz zu setzen.

Selbstverständlich werden dadurch die Zeilenumbrüche nicht mehr an Deinen gewünschten Stellen gesetzt.

Darum hab ich auch das <p>- oder <br />-Element empfohlen, um gezielt die Absätze oder Zeilenumbrüche im Textfluß zu erzeugen.

Das ist semantisch korrekter/wohlgeformter, als jede einzelne Zeile in das allgemeine Block-Element <div> zu packen, wofür es eben nicht vorgesehen ist. Man spricht in diesem Zusammenhang auch von einer "DIV-Suppe".

Der Selektor

.Zimmer_Text p{...}

findet keine Übereinstimmung, weil in Deinem gezeigten HTML-Code überhaupt kein <p> als Nachfahreelement des <div class="Zimmer_Text"> existiert.

Alles in allem kann man nur empfehlen, die Grundlagen zu lernen.

Ja, aber wenn ich um jede Zeile wieder ein <p> setzen müsse, wäre das <p> bei .Zimmer_Text ja sinnlos, da es dann ja sowieso funktionieren würde?

 

[SpiceLab]

Ja, aber wenn ich um jede Zeile wieder ein <p> setzen müsse, wäre das <p> bei .Zimmer_Text ja sinnlos, da es dann ja sowieso funktionieren würde?

Das eine (erzwungene Zeilenumbrüche) hat mit dem anderen (Blocksatz) nichts zu tun.

Wenn <p> aus semantischen Gründen anstelle von <div> deklariert wird (siehe mein Code-Snippet in Post #2), ist text-align:justify natürlich überflüssig.

Andersherum, falls Du Dich für den Blocksatz entscheidest, entfallen alle weiteren <p>-Elemente im <div>.

<div class="Zimmer_Text">
  <p>
        In unserem Hotel haben wir 12 moderne und komfortable Zimmer.
        Wir haben Einzelzimmer, Doppelzimmer, Dreierzimmer, sowie eine Luxussuite
        Sie werden sich in den bequemlich eingerichteten Zimmern schnell wohl fühlen.
        Alle Zimmer verfügen über einen Fernseher inkl. Sat.
        Sie können auch ohne weiteres Haustiere mitnehmen,
        da unser Hotel sehr Tierfreundlich eingerichtet ist.
  </p>
</div>

 

[naeooo]

Das eine (erzwungene Zeilenumbrüche) hat mit dem anderen (Blocksatz) nichts zu tun.

Wenn <p> aus semantischen Gründen anstelle von <div> deklariert wird (siehe mein Code-Snippet in Post #2), ist text-align:justify natürlich überflüssig.

Andersherum, falls Du Dich für den Blocksatz entscheidest, entfallen alle weiteren <p>-Elemente im <div>.

<div class="Zimmer_Text">
  <p>
        In unserem Hotel haben wir 12 moderne und komfortable Zimmer.
        Wir haben Einzelzimmer, Doppelzimmer, Dreierzimmer, sowie eine Luxussuite
        Sie werden sich in den bequemlich eingerichteten Zimmern schnell wohl fühlen.
        Alle Zimmer verfügen über einen Fernseher inkl. Sat.
        Sie können auch ohne weiteres Haustiere mitnehmen,
        da unser Hotel sehr Tierfreundlich eingerichtet ist.
  </p>
</div>

Habs jetzt gelöst, Danke :)