spans in a positionieren?

[Sinane]

Heyho,

ist es möglich, zwei in einem a untergebrachte span-Elemente gegeneinander zu verschieben?

<a id="logo" href="/"><span class="logo-init">IB</span> <span class="logo-text">my-flower</span></a>

Das ergibt momentan zwei unterschiedlich große Textabschnitte auf einer gemeinsamen Grundlinie (IB in 30px und my-flower in 16px). Ist es möglich, die beiden so zu positionieren, dass sie eine gemeinsame Mittellinie haben, also das my-flower etwas höher steht?


Vielen Dank!
Sinane

 

[owieortho]

AW: spans in a positionieren?

.logo-init {
font-size: 30px;
}
.logo-text {
font-size: 16px;
position: relative;
top: -0.4em;
}

Das sollte es sein...

O.

 

[Sinane]

AW: spans in a positionieren?

Okay, das hat geholfen, danke

Allerdings hat sich daraus das nächste ergeben: Der nachfolgende h1-Tag (außerhalb des a) steht auf der Grundlinie des IB... Eine relative Positionierung funktioniert da nicht, oder?

<a id="logo" href="/"><span class="logo-init">IB</span> <span class="logo-text">my-flowers</span></a>
<h1 class="site-slogan">Blumenversand frei Haus</h1>

 

[owieortho]

AW: spans in a positionieren?

Hast Du es denn probiert?

Wenn Du nicht schon an anderer Stelle CSS-Anweisungen gegeben hast, von denen wir nichts wissen, dann zeigt Dein HTML die Überschrift als neue Zeile und nicht auf einer Grundlinie eines der vorhergehenden Elemente. Das ist ja auch logisch. Das umgehst Du mit display: inline. Anschließend wieder relativ positionieren und die Höhe anpassen, z. B. in Ergänzung zum gestern angeführten CSS:

.site-slogan {
display: inline;
position: relative;
top: -0.2em;
}

Gruß
O.

 

[Sinane]

AW: spans in a positionieren?

Jap hatte es probiert, aber kam nix brauchbares bei raus. Jetzt funktioniert es, ich hatte das display: inline; vergessen, danke dir