Antworten auf deine Fragen:
Neues Thema erstellen

2 Zeilen Headline in einem H2 Tag mit seitlicher border

dieter223

Nicht mehr ganz neu hier

Hallo,

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

beispiel94ujc.png



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?
 

dieter223

Nicht mehr ganz neu hier

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

Mod | Forum

Teammitglied
PSD Beta Team
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.
 
G

Gelöschtes Mitglied 133165

Guest

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

dieter223

Nicht mehr ganz neu hier

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.
 

tr4ze

Mod | Forum

Teammitglied
PSD Beta Team
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. :happy2:
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. :confused:

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben