zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem: Überschrift <hx> innerhalb von Abschnitt <p>

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.10.2006, 13:05
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.12.2005
Beiträge: 41
Ares befindet sich auf einem aufstrebenden Ast
Standard 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

Geändert von Ares (24.10.2006 um 13:18 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.10.2006, 13:13
Benutzerbild von sinistar
Schwarzschaf
XHTMLforum-Mitglied
 
Registriert seit: 28.06.2006
Beiträge: 108
sinistar befindet sich auf einem aufstrebenden Ast
Standard

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?
__________________
Carpe diem! ...ma non dimenticare la notte.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.10.2006, 13:18
Benutzerbild von Siegfried
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 11.08.2006
Beiträge: 465
Siegfried befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 24.10.2006, 13:18
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.12.2005
Beiträge: 41
Ares befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
  #5 (permalink)  
Alt 24.10.2006, 13:21
Benutzerbild von sinistar
Schwarzschaf
XHTMLforum-Mitglied
 
Registriert seit: 28.06.2006
Beiträge: 108
sinistar befindet sich auf einem aufstrebenden Ast
Standard

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;.
__________________
Carpe diem! ...ma non dimenticare la notte.

Geändert von sinistar (24.10.2006 um 13:24 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 24.10.2006, 13:23
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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?
Mit Zitat antworten
  #7 (permalink)  
Alt 24.10.2006, 13:26
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.12.2005
Beiträge: 41
Ares befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 24.10.2006, 13:30
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

[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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:46 Uhr.