2 Zeilen Headline in einem H2 Tag mit seitlicher border

[dieter223]

Hallo,

ich habe ein kleines Problem und komme irgendwie nich auf die Lösung:
Ich möchte gern folgendes erreichen:

dabei soll das ganze beispielsweise eine H2-Headline sein: <h2><span>das ist klein</span> und das ist groß</h2>
wenn ich das span tag auf display block einstelle funzt das zwar soweit - aber jetzt kriege ich natürlich nicht mehr die seitlichen linien hin. Hat jmd eine Idee?

 

[tr4ze]

Gibt verschiedene Möglichkeiten:
Die eine(modernere) wäre es mit dem Pseudo :befor zu lösen.
Die andere, den Span mit Position aus dem Elementfluß zu heben.

Hier mal eine einfache Lösung mit Pseudoelement.

http://dabblet.com/gist/4e5ae05e60b3344611d7

 

[dieter223]

Vielen Dank - das ist schonmal eine Lösung. Allerdings ist das, was zwischen den zwei Linien steht für die Suchmaschinen - SEO und so. Leider steht ja bei deiner Lösung die suchmaschinenoptimerte Headline im CSS - also nicht für Suchmaschinen sichtbar. Ist also für mich nicht relevant. Trotzdem danke - man weiß ja nie wann mans mal braucht.

Ich hab mal meine derzeitige Lösung (mit H1 und H2 headline) hier hinterlassen:
http://dabblet.com/gist/9f64e804ae1f10d60e55

Bei dieser Lösung benutzte ich zwei unterschiedliche Headlines - im Code dann doch mehr oder weniger Kraut und Rüben. Cool wäre es wie gesagt, wenn mann die kleine Headline einfach mit einem Span versehen könnte.

Ich habe eine responsive Website und die Lösung mit der Position ist doch da nicht so richtig möglich, da sich die Headline (auf unterschiedlichen Geräten) dann ja verschiebt?

Liebe Grüße

 

[tr4ze]

Von SEO war in deinem Eingangspost nicht die Rede und ob dein Markup nun SEO technisch nicht noch schlimmer ist, sei mal dahingestellt.

Ich habe mein dabblet mal um eine span Methode erweitert.
Damit steht alles in einem H tag und wäre relevant.

http://dabblet.com/gist/d33b14aae77d5b0d88ee

Wie schon oben geschrieben, es gibt viele Möglichkeiten sowas zu lösen.
Wichtig ist sich über das Zusammenspiel von Display,Position und absoluten bzw. relativen Größen der jeweiligen Elternelemente klar zu sein.

 

[Gelöschtes Mitglied 133165]

unabhängig von der Gestaltung ist das nicht unbedingt semantisch sinnvoll gelöst

 

[dieter223]

Viele Dank für den Lösungsansatz! Ist im Prinzip genau das was ich wollte - allerdings ist jetzt die breite des spans (width:100px) absolut gesetzt. In meiner alten Lösung hatte ich das ja durch das Padding gelöst (also links und rechts 25px) - Damit die kleine Headline bisschen Platz zum Atmen hat.
Um diesen absoluten Wert kommt man nicht drumrum durch die relative Positionierung, oder???

Ansonsten hat mich das sehr weit gebracht vielen Dank dafür. Und das es semantisch nicht das Gelbe vom Ei ist, weiß ich schon.

 

[lachender_engel]

...die breite des spans (width:100px) ...(also links und rechts 25px)...

Ein anderer Hinweis: Du schriebst, Du hast ein responsive Layout. In einem solchen Fall arbeitest Du nicht mit px sondern em und %, da diese Werte im Verhältnis zum Screen berechnet werden.

 

[dieter223]

Ein anderer Hinweis: Du schriebst, Du hast ein responsive Layout. In einem solchen Fall arbeitest Du nicht mit px sondern em und %, da diese Werte im Verhältnis zum Screen berechnet werden.

Genau das habe ich ja an der Lösung kritisert.

lg

 

[tr4ze]

Viele Dank für den Lösungsansatz! Ist im Prinzip genau das was ich wollte - allerdings ist jetzt die breite des spans (width:100px) absolut gesetzt. In meiner alten Lösung hatte ich das ja durch das Padding gelöst (also links und rechts 25px) - Damit die kleine Headline bisschen Platz zum Atmen hat.
Um diesen absoluten Wert kommt man nicht drumrum durch die relative Positionierung, oder???

Ansonsten hat mich das sehr weit gebracht vielen Dank dafür. Und das es semantisch nicht das Gelbe vom Ei ist, weiß ich schon.

Hi, sorry war Unterwegs deswegen jetzt erst.
Das hat nix der Positionierung zu tun, sondern mit der Tasache das es sich um ein Blockelement handelt. Um den Inhalt horizontal zu zentrieren benötigst du eine Breite.
Das funktioniert auch mit % oder em.

http://dabblet.com/gist/c25a1db9de658bddfe68

Theoretisch kannst du auch noch ein padding einfügen, aber - mir hat man mal eingehämmert - margin+padding im selben Element + IE = großes Foobar !!!

Das mag in neueren Versionen nicht mehr gelten, aber wehe der fällt aus irgendeinem Grund mal in den Quirksmodus zurück.

Noch mal zur Positionierung und dem Unterschied zwischen relativ und absolut.

Relative Positionierung ist einfach, du stellst eine relation zum Elternelement her.Danach wird dein Element eingefügt(im sog. normalen Elementfluß).

Absolute Positionierung ist etwas komplizierter, weil es eigentlich auch relativ ist.
Und zwar sucht der Parser im DOM aufsteigend das nächste Element welches nicht Static(default) ist und erstellt dafür eine Relation.Dadurch kannst du dein Element aus dem Elementfluß herauslösen, was der kleine aber feine Unterschied ist.
Wenn du nun nirgendwo in deinem Markup eine Position Angabe gemacht hast ist das relative Element html(root).
Da html den kompletten Viewport einschließt, glauben die meisten das sich die absolute Positionierung eben auf diesen Viewport bezieht, dem ist aber nicht so.

btw: Responsive
Responsive bedeutet nicht alles dreht sich und bewegt sich !!!
Vielmehr ist es in den meisten Fällen ein Kompromiss aus Grid und Fluid Layout.
Wär ja sonst auch zu einfach, oder?

n8

 

[afr0kalypse]

Musst du <h2><span>...</span></h2> nutzen?
Ansonsten würde ich, wenn möglich, den html5 header tag empfehlen:
http://www.w3schools.com/tags/tag_header.asp