Text-Align in <div>

[mowgli]

Seid gegrüsst, geschätzte Mitgestalter unseres Web's

Vor einiger Zeit habe ich angefangen mich für HTML / CSS zu interessieren. Ich habe aus purem Vergnügen / Genuss angefangen eigene Seiten zu gestalten. Ohne besondere Motivation verschwand diese Beschäftigung dann auch wieder von der Routineliste, was schlussendlich auch der Grund ist wieso ich momentan Mühe habe bei der Gestaltung einer Website. In diesem Fall jedoch mache ich es nicht aus Vergnügen, sondern es wird schlussendlich ein qualitativ gutes Endergebnis erwartet.

Der Hund liegt in der Ausrichtung der Elemente innerhalb eines <div>-Elementes begraben.
Momentan sieht es wie folgt aus:

<div id="Content_RAW.01">  
		<h3> RAW.01 </h3>  
        <p><img src="../../../../Pictures/RAW.01_FLYER.jpg" width="450" height="635" alt="Flyer RAW 0.1" /></p>  
		<pre> <p>Nebst den KAOS-Events beschwört Project Riot nun mit der ersten RAW-Party eine neue Eventserie ins Leben.  
Eine Serie von Nächten voller Endstufen auf dem Volumeboard, vibrierenden Knochen und schweissnassen Menschenmengen öffnet  
am Freitag 19.04.2013 mit der RAW.01 ihre Pforten. Alle Infos über die Basshölle findet ihr auf unserem RAW.01-Flyer und auf unserer offiziellen FB-Page.</p></pre>  
	</div>

Der dazugehörende CSS-Code:

#Content_RAW.01 {  
				text-align: center;  
				margin: 0 auto;}

Ich möchte, dass der gesamte Inhalt des #Content_RAW.01-div's zentriert angezeigt wird.
Jedoch zeigt er den Inhalt mit den normalen <p>-Angaben an, also sprich: linksbündig.

Ich hoffe ihr könnt mir helfen. :)

Grüsse,
mowgli

[mowgli]

//Edit: Habe die Lösung gefunden.

Lösungsweg:

HTML: <div class="center" id="Content_RAW.01">

CSS: ~~~css .center {
text-align: center;
margin: 0 auto;}

[JürgenB]

Hallo mowgli,

//Edit: Habe die Lösung gefunden.

HTML: <div class="center" id="Content_RAW.01">

oder du lässt den Punkt in der ID weg.

Gruß, Jürgen

PS Was willst du eigentlich mit <pre><p>...</p></pre> erreichen?

[mowgli]

Hallo mowgli,

//Edit: Habe die Lösung gefunden.

HTML: <div class="center" id="Content_RAW.01">

oder du lässt den Punkt in der ID weg.

Gruß, Jürgen

PS Was willst du eigentlich mit <pre><p>...</p></pre> erreichen?

Hi Jürgen,

Ja super. Den ganzen Abend an ner ALternativlösung rumgefummelt, wobei ich nur einen Punkt weglassen könnte. :D

Zu deiner Frage: Mit dem <pre> erreiche ich dass der Text so angezeig wird, wie ich ihn eingebe. Aber ich denke, dass dir das klar ist. Wieso fragst du?

[JürgenB]

Hallo mowgli,

Ja super. Den ganzen Abend an ner ALternativlösung rumgefummelt, wobei ich nur einen Punkt weglassen könnte. :D

oder Gunnars Lösung nehmen.

Zu deiner Frage: Mit dem <pre> erreiche ich dass der Text so angezeig wird, wie ich ihn eingebe. Aber ich denke, dass dir das klar ist. Wieso fragst du?

mich irritiert das <p> im <pre>.

Gruß, Jürgen

[Gunnar Bittersmann]

@@JürgenB:

nuqneH

HTML: <div class="center" id="Content_RAW.01">

oder du lässt den Punkt in der ID weg.

Warum?

Wie bei jedem Kontextwechsel gilt es auch hier, Zeichen mit Sonderbedeutung zu escapen.

Kontext ist CSS-Selektor, Sonderzeichen ist '.'

('#Content_RAW.01' würde ja das Element mit der ID "Content_RAW" selektieren, wenn es der Klasse "01" angehört (fast jedenfalls, denn die '0' müsste auch escapet werden))

CSS-gemäß escapet: #Content_RAW\.01 {…}

Qapla'

[JürgenB]

Hallo Gunnar,

CSS-gemäß escapet: #Content_RAW\.01 {…}

wieder was gelernt. Ich hätte jetzt nur den "." weggelassen oder ersetzt.

Gruß, Jürgen

[hotti]

hi,

<pre> und <p> sind Blockelemente. Guckst Du HTML-Referenz: Blog in Blog darf nicht. Du möchtest Zeilenumbrüche auch in <p> sichtbar machen? Tu das:

  
p {  
  white-space: pre;  
}  

Fertig, Horst

[Der Martin]

Hallo,

<pre> und <p> sind Blockelemente. Guckst Du HTML-Referenz: Blog in Blog darf nicht.

diese Aussage ist in ihrer Pauschalität falsch - div ist auch ein Blockelement, und p in div ist okay; form und fieldset sind auch Blockelemente, und fieldset in form ist völlig in Ordnung.

Allerdings ist p kein erlaubtes Kindelement von pre, p in pre ist also auf jeden Fall falsch. Andersrum auch, weil p nur Inline-Inhalt haben darf.

Du möchtest Zeilenumbrüche auch in <p> sichtbar machen? Tu das:

p {

white-space: pre;
}

  
Der Hinweis ist dennoch gut und richtig.  
  
Ciao,  
 Martin  

-- 
Computer lösen für uns Probleme, die wir ohne sie gar nicht hätten.  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(