XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Problem: Überschrift <hx> innerhalb von Abschnitt <p> (http://xhtmlforum.de/showthread.php?t=42582)

Ares 24.10.2006 13:05

Problem: Überschrift <hx> innerhalb von Abschnitt <p>
 
Hallo!

Ich möchte auf meiner Webseite ein Programm beschreiben. Der Name des Programms soll in einer Überschrift hx stehen, darunter der Text mit der Beschreibung. Links von diesem beiden Texten soll das Programmicon zu sehen sein.

Also quasi so:
Code:

B=Bild

  BBBB  Programmname
  BBBB
  BBBB  Text Text Text Text Text Text Text Text
        Text Text Text Text Text Text Text Text


So soll es nicht aussehen:
Code:

B=Bild

  Programmname
 
  BBBB  Text Text Text Text Text Text Text Text
  BBBB  Text Text Text Text Text Text Text Text
  BBBB


(Ich hoffe man kann es erkennen :) )

Jedenfalls wollte ich das ganze so machen:

Code:

<p class="progInfoBox" id="prog1InfoBox">
  <h4>Überschrift: Programmname</h4>                                                 
  Text        Text Text Text Text Text Text Text Text Text Text Text       
  Text Text Text Text Text Text Text Text Text Text Text Text
  Text Text Text Text Text Text Text Text Text Text Text Text
  Text Text Text Text Text Text Text Text Text Text Text Text
  Text Text Text Text Text Text Text Text Text Text Text Text                               
</p>

CSS:
Code:

.progInfoBox {
  border: 1px solid #999;
  padding: 0 0 0 75px;
}

.progInfoBox h4  {
  border: 1px solid #999;
  display: inline;
}

#prog1InfoBox {
  background: url(../images/bild.png) top left no-repeat;
}

Durch padding-left wollte ich den Inhalt des Absatzes nach Rechts verschieben und als Hintergrund des Absatzes das Programmicon einblenen. Somit wären Überschrift und Text wie gewünscht neben dem Icon.

Ja, ich weiß dass Überschriften eigentlich vor einen Absatz gehören und nicht darein. Aber ich fand die Idee zunächst besser als des ganze durch ein zusätzliches (überflüssiges?) <div> zu umgeben, diesem das Padding und den Hintergrund zuzuweisen und Überschrift über den Absatz zu setzen.

Mich hat erstaunt, dass wegen der h4 Überschrift der gesamte Inhalt der p-Box herausgenommen wird. Die p-Box bleibt also leer, und der gesamte Inhalt wird darunter angezeigt.

Das passiert auch, wenn an h4 mit display: inline; nicht als Blockelement verwendet.

Verwendet man statt dem h4 ein div passiert genau dasselbe. Verwendet man aber ein span und setzt display: block; wird der Inhalt komischwer Weise korrekt in der p-Box angezeigt?

Woran liegt es, dass der Inhalt aus der p-Box herausgenommen wird? Kann man das verhindern? Oder ist eine Überschrift innerhalb eines Absatzes so ein böser Fehler, dass man das besser anders mache?

Habt ihr einen Vorschlag wie man das sonst machen könnte? Mit dem umgebenden, zusätzlichen div geht es natürlich. Aber das ganze soll ja soweit möglich ohen zusätzliche Markups funktionieren.

Besten Dank
Ares

sinistar 24.10.2006 13:13

Poste bitte etwas mehr, z.B. CSS-Code für Deine ID/Klasse. Wo kommt z.B. das Bild her (aus dem Codeschnipsel nicht ersichtlich)? Vielleicht willst Du das Ganze auch lieber mit Definitionslisten gestalten?

Siegfried 24.10.2006 13:18

Hi,

innerhalb eines Paragraphen sind nur inline-Elemente erlaubt. Überschriften sind Blockelemente.

Eventuell könntest Du in etwa so vorgehen:
Code:

<img src="..." style="float: left;"/>
<h1>Überschrift</h1>
<p style="margin-left: ...px">
...
</p>

Andererseits: Vermutlich sollen das ja viele solcher Einträge werden. Vermutlich eine ganze Liste davon. Listen schafft man in ul oder ol Container. Diese können Überschriften und Paragraphen enthalten. Und unter Umständen kannst Du den schwarzen Punkt der ul durch das Bild ersetzen :)
Ich weiß aber nicht, ob das mit dem IE geht.

Resp. gerade bei sinistar gelesen: Definitionslisten sind vielleicht noch besser.

Ares 24.10.2006 13:18

Zitat:

Poste bitte etwas mehr, z.B. CSS-Code für Deine ID/Klasse. Wo kommt z.B. das Bild her (aus dem Codeschnipsel nicht ersichtlich)?
Ok, habe ich eingefügt...

sinistar 24.10.2006 13:21

Bliebe noch Siegfrieds Frage zu beantworten, ob es eins, mehrere oder gar viele solcher Einheiten gibt?

Bei nur einem Element: img mit float: left;, dann die h4 und der p (nacheinander) mit padding-left: 75px;.

fricca 24.10.2006 13:23

Wenn ein div-Element eine Überschrift und einen Textabsatz gruppiert, dann ist es kein überflüssiges zusätzliches Markup.
Was du oben zeigst, ist fehlerhafter Code. Daran rumzuoperieren ist sinnfrei.
Alternativvorschläge für sinnvolleres Markup hast du bereits.
Was also ist jetzt noch dein Problem?

Ares 24.10.2006 13:26

Zitat:

Bliebe noch Siegfrieds Frage zu beantworten, ob es eins, mehrere oder gar viele solcher Einheiten gibt?
Es sollten mehrere solche Einheiten werden. Ich werde mir die sache mit den Definitionslisten mal anschauen.

Zitat:

Wenn ein div-Element eine Überschrift und einen Textabsatz gruppiert, dann ist es kein überflüssiges zusätzliches Markup. Was du oben zeigst, ist fehlerhafter Code. Daran rumzuoperieren ist sinnfrei.
Gut, danke. Ich werde es zunächst mit den Listen versuchen. Wenn das nicht so klappt wie ich mir das vorstelle verwende ich das zusätzliche div.

RoToRa 24.10.2006 13:30

[QUOTE=Ares;312417]
Aber ich fand die Idee zunächst besser als des ganze durch ein zusätzliches (überflüssiges?) <div> zu umgeben, diesem das Padding und den Hintergrund zuzuweisen und Überschrift über den Absatz zu setzen.[quote]

Dafür sind aber DIVs da.

Zitat:

Mich hat erstaunt, dass wegen der h4 Überschrift der gesamte Inhalt der p-Box herausgenommen wird. Die p-Box bleibt also leer, und der gesamte Inhalt wird darunter angezeigt.
Die Darstellung von invalidem HTML ist nicht definiert. Browser können (müssen?) in dem Fall machen, wozu sie bock haben.

Zitat:

Das passiert auch, wenn an h4 mit display: inline; nicht als Blockelement verwendet.
Die Regel "P-Elemente dürfen keine Block-Elemente enthalten" ist eine HTML-Regel. Die Display-Eigenschaft mit CSS zu änderen ändert daran nichts.

Zitat:

Verwendet man aber ein span und setzt display: block; wird der Inhalt komischwer Weise korrekt in der p-Box angezeigt?
Umgekehrt ist genauso CSS die HTML-Regeln egal. CSS hat keine Probleme damit Blöcke in Inline-Elementen darzustellen.

Zitat:

Woran liegt es, dass der Inhalt aus der p-Box herausgenommen wird?
In HTML sind die schliessenend </p>-Tags optional. Wenn beim Parsen eines P-ELements auf ein Element gestossen wird (hier ein H4), das nicht in einem P vorkommen darf, wird ein weggelassenes </p> angenommen und das Element geschlossen.

Zitat:

Oder ist eine Überschrift innerhalb eines Absatzes so ein böser Fehler, dass man das besser anders mache?
Ja, es ist böse. Ohne DIV geht es nur, wenn Überschrift und Absatz nicht als eine Einheit angesprochen werden muss. Einfach H4 und P den selben Padding-Left geben.

Robin


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:47 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2022, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2022