CSS Titel verschiebt sich

dereineisthier · 24. Oktober 2022

Hey Leute.
Ich bin noch relativ neu im Programmier bereich und programmiere gerade eine Webseite.
Nun habe ich ein Problem. Ich habe einen grossen Titel und ich möchte gewisse Links Rechts oben noch einfügen, jedoch leider verschiebt sich dann immer der Titel nach links. Wie kann ich das beheben?

Cool Master · 24. Oktober 2022

Poste den Code bitte nicht als Bild sondern als "Code" und bitte auch den HTML-Code angeben.

dereineisthier · 25. Oktober 2022

CSS:
body{
font-family: 'Coustard', serif;
height: 100%;
background-color: azure;
}

.Titlebar{
color: rgb(207, 2, 197);
text-align: center;
font-size: 80px;
}
.underbar{
color: blueviolet;
font-size: 25px;
font-weight: bold;
text-align: center;
}
a{
text-decoration: none;
color: blue;
font-weight: bold;
margin-left: 12px;
float: right;
}
a:hover{
color: blue;
text-shadow: 1px 2px 0px #6f00ff;
color: blue;
}

html:
<body>
<a href="#">Discord</a>
<a href="#">Info</a>
<a href="#">Forum</a>
<a href="#">Regelwerk</a>
<a href="#">Shop</a>
<h1 class="Titlebar">NewFamily <br> State</h1>
<p class="underbar">Werde jetzt ein Teil der Community</p>
</body>
</html>

User007 · 26. Oktober 2022

Hi und willkommen im Forum...

Cool Master schrieb:
Poste den Code bitte nicht als Bild sondern als "Code" [...]

Damit war gemeint, die Codezeilen mittels der "Code"-Funktion aus der Symbolleiste des Beitrags-Editors in das entsprechende Tag zu packen...

...damit die Darstellung im Beitrag dann so aussieht:

CSS:

body{
font-family: 'Coustard', serif;
height: 100%;
background-color: azure;
}


.Titlebar{
color: rgb(207, 2, 197);
text-align: center;
font-size: 80px;
}
.underbar{
color: blueviolet;
font-size: 25px;
font-weight: bold;
text-align: center;
}
a{
text-decoration: none;
color: blue;
font-weight: bold;
margin-left: 12px;
float: right;

}
a:hover{
color: blue;
text-shadow: 1px 2px 0px #6f00ff;
color: blue;
}

HTML:

<body>
<a href="#">Discord</a>
<a href="#">Info</a>
<a href="#">Forum</a>
<a href="#">Regelwerk</a>
<a href="#">Shop</a>
<h1 class="Titlebar">NewFamily <br> State</h1>
<p class="underbar">Werde jetzt ein Teil der Community</p>
</body>
</html>

Grundsätzlich empfehle ich Dir für die Umsetzung Deines Projekts Elemente, wie Link-Gruppen, Überschriften etc. bspw. erstmal mit dem <div>-Tag als gruppierendes Block-Element zu separieren und somit eine völlig flexible Platzierung im Seitenlayout durch zuweisende Style-Angaben mit CSS zu ermöglichen.
In diesem Anwendungsfall sollte im CSS nach der rechtsseitigen Ausrichtung der Link-Gruppe in der Style-Definition für das <a>-Element (a{...) einfach nur die "Abschnittslöschung" mit der Eigenschaft clear fehlen.

Ansonsten schau Dir dazu auch mal diesen Artikel zu moderner Seitenstrukturierung an - das SelfHTML-Portal gehört nach wie vor für Anfänger zu den ersten Anlaufstellen für solche Eigenrecherchen.

Suche

CSS Titel verschiebt sich

dereineisthier

Newbie

Anhänge

Cool Master

Fleet Admiral

dereineisthier

Newbie

User007

Rear Admiral

Ähnliche Themen