untere randgrafik für überschrift-box

[AGSzabo]

Hallo,

das problem ist, ich muss irgendwie die grafik für den unteren rand zu der umrandung der überschrift dazu tun. siehe MENSCH - Vorstand (die hellgrünen boxen, sie passen sich in der höhe an die schrift an, oder wenn man das fenster schmäler macht und zwei zeilen aus einer werden)

im moment scheint das nur so zu gehen:

<h3>Gründer</h3>
<div class="h3b"></div>

und das css dazu:

h3 {
font-size:inherit;
text-align:left;
padding:5px 8px 4px 8px;
background:url(subtitle_bg.gif) no-repeat top right;
margin-top:30px;
display:block;
margin-right:-8px;
margin-left:-8px;
margin-bottom:0px;
font-weight:normal;
}
h3:before {
content:url(subtitle_left.gif);
margin-top:-5px;
margin-left:-8px;
float:left;
height:10px;
}

div.h3b {
background:url(subtitle_bg_btm.gif) no-repeat top right;
height:2px;
margin-bottom:3px;
margin-right:-8px;
margin-left:-8px;
}
div.h3b:before {
content:url(subtitle_left_btm.gif);
height:2px;
float:left;
}

gibts da ne bessre alternative, bei der ich kein extra <div> unter der überschrift barauche?

ps: nochwas das mich interessiert, laut w3c validator darf eine überschrift h1 bis h6 kein <div> enthalten. aber was ist wenn ich ein inline element rein tue aber davon das display: auf block; setze?

ags

 

[Loon3y]

Hallöchen.

ps: nochwas das mich interessiert, laut w3c validator darf eine überschrift h1 bis h6 kein <div> enthalten. aber was ist wenn ich ein inline element rein tue aber davon das display: auf block; setze?

Laut W3C ist das <div>-Tag auch zum logischen gruppieren mehrerer Elemente. Wie willst du innerhalb einer Überschrift mehrere Elemente sinnvoll gruppieren? :)


Alternativ zu deiner Variante würde ich dir einmal diesen Artikel zum Durchlesen geben: „Chroma Corners“ – Fast perfekte runde Ecken im Internet Explorer • Peter Kröner, Webdesigner & Frontendentwickler

Ich denke da sind alle momentan gängigen funktionierenden Varianten aufgezeigt. Welche Variante du wählst ist dir überlassen.... Ansonsten sieht deine Variante auch ganz interessant aus, du könntest eventuell statt dem div-Tag nach dem Überschriftentag auch ein leeres Span-Element innerhalb der Überschrift nutzen. :-)


Gruß
Loon3y

 

[AGSzabo]

du könntest eventuell statt dem div-Tag nach dem Überschriftentag auch ein leeres Span-Element innerhalb der Überschrift nutzen.

dazu müsste ich diesem span ein display:block; verpassen, aber blockelemente sind in überschriften nicht erlaubt. Oder wie hattest du dir das vorgestellt?

ags

 

[Loon3y]

Wieso sind block-Elemente in Überschriften nicht erlaubt? Das wäre wie... "Es dürfen keine Frauen in meinen Auto mitfahren"... ;)

Überschrift -> HTML
Block-Element -> CSS

Jedes HTML-Element kann via display:block; ein Block-Element werden (Andersrum genauso). :-)


Gruß
Loon3y

 

[AGSzabo]

Wieso sind block-Elemente in Überschriften nicht erlaubt?

Das frage ich mich auch, aber der w3c validator meldet einen fehler, wenn DIV innerhalb H1 bis H6 auftaucht, Man kann das zwar umgehen indem man ein SPAN verwendet und dem im css ein display:block; verpasst, denn der validator merkt das nicht. aber ob es gut ist, ich vermute nein,

 

[Loon3y]

Das frage ich mich auch, aber der w3c validator meldet einen fehler, wenn DIV innerhalb H1 bis H6 auftaucht, Man kann das zwar umgehen indem man ein SPAN verwendet und dem im css ein display:block; verpasst, denn der validator merkt das nicht. aber ob es gut ist, ich vermute nein,

Ich glaube wir haben aneinander vorbeigeredet *g*

Also nochmal von Anfang... das <div>-Element ist ein HTML-Tag welches mehrere Elemente gemeinsam logisch gruppiert. Innerhalb einer Überschrift kann man aber keine mehrere Elemente gruppieren --> div nicht korrekt.

ein span-Element gruppiert nicht mehrere Elemente, sondern ist ein bedeutungsloses Tag (es hat keinerlei Semantik) und "transportiert" nur stylebezogene Angaben wie z.B.:

<p>Ich <span class="blue">bin</span> ein <span class="green">heute</span> ganz <span class="yellow">gut drauf</span>.</p>

Das span hat keinerleier auswirkung auf den ausgezeichneten Inhalt. Würdest du z.b. etwas als "wichtig" oder "sehr wichtig" hervorheben, würdest du das <em>- bzw. <strong>-Tag verweden.

<p>ich bin <em>wichtig</em>. Und ich bin <strong>sehr wichtig</strong>.</p>

Gruß
Loon3y

 

[AGSzabo]

Also nochmal von Anfang... das <div>-Element ist ein HTML-Tag welches mehrere Elemente gemeinsam logisch gruppiert. Innerhalb einer Überschrift kann man aber keine mehrere Elemente gruppieren --> div nicht korrekt.

Wie meinst du "mehrere elemente"? hast du ein beispiel?

ags

 

[Loon3y]

Hallo.

<div id="main">
   <h1>Ich bin der Überschrift 1. Grades</h1>
   <p>Ich der 1. Textabsatz...</p>
   <p>Ich der 2.Textabsatz...</p>
   <h2>Ich bin die Überschrift 2. Grades</h2>
   <p>Ich bin ein Textabsatz...</p>
   <p>Ich bin ein Textabsatz...</p>
   <p>Ich bin ein Textabsatz...</p>
   <h3>Ich bin die Überschrift 3. Grades</h3>
   <p>Ich bin ein Textabsatz...</p>   
   <h2>Ich bin wieder eine Überschrift 3. Grades</h2>
   <p>Ich bin ein Textabsatz...</p>   
</div>

--> Mehrere Elemente gruppiert. ^^

 

[AGSzabo]

Aha. Also <SPAN> geht nicht, weil ich schon am anfang der überschrift ein <SPAN> habe, das das datum enthällt und mit float nach rechts geschickt wird. SPAN:last-child geht im IE nicht. Also hab ich das <B></B> geopfert. ich hoffe das ist erlaubt, da es von <EM> abgelöst wird... ;-)

 

[Elroy]

Hallo.

Wenn du dem <span> eine class oder id gibst geht das sehr wohl du kannst nämlich mehr als nur ein <span> verwenden, und das <b> von <em> abgelöst wird, also das musst du mir mal zeigen wo du das her hast.
Am besten mal Nachschlagen für was <b> und für was <em> steht.

Gruss
Elroy

 

[Loon3y]

Aha. Also <SPAN> geht nicht, weil ich schon am anfang der überschrift ein <SPAN> habe, das das datum enthällt und mit float nach rechts geschickt wird. SPAN:last-child geht im IE nicht. Also hab ich das <B></B> geopfert. ich hoffe das ist erlaubt, da es von <EM> abgelöst wird... ;-)

Das <b>-Tag wird wohl erst wieder mit HTML 5 kommen, wobei da noch nicht entschlossen worden ist was es für eine Semantik hat. Besser wäre wirklich ein <span> (siehe ein Post weiter oben).

Wieso wird es vom <em> abgelöst? Den Satz verstehe ich nicht so ganz...


Gruß
Loon3y

 

[AGSzabo]

hi elroy,

eben dieses CLASS für das SPAN wollte ich mir sparen. ;-) das mit der ablösung in html5 war ein irrtum, ich hab nochmal nachgesehn.