Zwei überschriften neben einander mit leerzeichen (HTML,CSS)?
Hi unzwar habe folgendes Problem:
Ich mache gerade einen Shop und ich weis das man mit style="display:inline;" zwei überschriften neben einander machen kann aber dann steht dort:
Premium RangVIP Rang
wie kriege ich zwischen das Rang und das VIP leerzeichen ?
Danke im voraus
LG lukas
Hier noch der QuellCode:https://paste.horlboge.de/lazibixira.xml
4 Antworten
Wieso machst du nicht aus den zwei Überschriften eine Überschrift?
Abgesehen davon ist nicht klar, mit welchen Elementen du da gerade arbeitest. Doch ich denke, einfach nur ein Leerzeichen zwischen beiden Elementen zu setzen, könnte bereits vollkommen ausreichen.
Du kannst, wenn du den inline-Kram einmal herauswerfen würdest, auch einfach einen margin setzen.
HTML:
<div class="headlines">
<h2>Premium Rang</h2><h2>VIP Rang</h2>
</div>
CSS:
.headlines {
display: flex;
}
.headlines h2:first-child {
margin-right: 50px;
}
Im Übrigen solltest du dich einmal dringend mit HTML-Grundlagen auseinandersetzen (schau auf MDN nach Tutorials), dann dein Dokument validieren und die Fehler beheben. Da sind wirklich böse Fehler drin.
Nein, bitte keine HTML-Entities. Das geht eleganter, wie meine obige Lösung bereits zeigt.
Das stimmt natürlich ;) Aber so kann er es auch in nur eine Überschifft packen.
(Ja würde auch gehen wenn er z.B. content oder span in die h2 klatscht und dann wie du mit css Klassen arbeitet)
Ich meinte so generell was das ist. Ist das so ähnlich wie Zertifikate für Windows Apps? (Also dieses zertifizierter Herausgeber: ...)
Du kannst dir zwar bei erfolgreicher Validation tatsächlich so ein W3C Siegel auf die Webseite packen, aber darum geht es tatsächlich nicht. 😜
Ein paar Gründe, die dafür sprechen, auf ein valides Dokument zu achten:
- Funktionalität (ja, du kannst mit einem invaliden Dokument dafür sorgen, dass andere Elemente nicht mehr funktionieren. Sei es CSS, irgendwelche Links oder Formulare)
- positive Eigenwerbung (an fremden HTML sieht man halt, wie viel Ahnung der Entwickler wirklich hat)
- Performance
- SEO / Suchmaschinenranking
- Barrierefreiheit
OK danke mein PC ist gerade aus aber probiere ich morgen direkt aus
Sag mal das muss dich doch genervt haben mir zu Helfen damals konnte ich ja noch garnicht richtig Programmieren loool
Das wurde falsch geschrieben: style="display:inline;"
Müsste so aussehen:
style="display:inline";
Bin aber selbst nur ein neuling aber ich vermute mal das dies das Problem war. Versuchen kann mans ja
Schick mal den Code, vlt ist dort einfach nur ein Fehler
Hm finde jz eig kein Fehler, aber wie regex schon geschrieben hat, mach doch einfach eine Überschrift raus
Okay. Aber warum hast du hinter
<h2 style="display:inline;">Premium Rang</h2>
noch einmal
<h2 style="display:inline;"> geschrieben?
Mach das dahinter nochmal weg
Okay jetzt habe ich es sorry ausversehen 😅
<h1>Überschrift <span>Ergänzungstext</span></h1>
Bin mir nicht sicher
Und außerdem, Impressum nicht vergessen 😂
Das mit dem leerzeichen hat nicht geklappt alles schoin versucht und ich brauche 2 überschriften weil ich es so mache:
Premium Rang:
Foto
KaufenButton
dannach kommt das halt noch mit anderen Rängen