Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „spans in a positionieren?“

Sinane

Puttmacherin

Heyho,

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

HTML:
<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

Aktives Mitglied

AW: spans in a positionieren?

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

Das sollte es sein...

O.
 

Sinane

Puttmacherin

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?

HTML:
<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

Aktives Mitglied

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:
Code:
.site-slogan {
display: inline;
position: relative;
top: -0.2em;
}

Gruß
O.
 

Sinane

Puttmacherin

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 :)
 
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

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.156
Beiträge
2.581.859
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben