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

Ares · #1 (**permalink**) 24.10.2006, 13:05

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 · #2 (**permalink**) 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 · #3 (**permalink**) 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 · #4 (**permalink**) 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 · #5 (**permalink**) 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 · #6 (**permalink**) 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 · #7 (**permalink**) 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 · #8 (**permalink**) 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

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Float Problem bei Überschrift	accessoire	CSS	3	15.06.2009 08:55
h2 Überschrift innerhalb eines Container zentrieren	mase	CSS	9	06.01.2009 23:37
Font der Überschrift ändern (Problem)	artist	CSS	2	07.12.2007 10:01
Barrierefreiheit wirklich nötig?	jensr	Barrierefreiheit	128	06.11.2006 10:54
Styleswitcher Problem: Überschrift wird kleiner statt größer	J-K	CSS	6	03.11.2005 21:42