Titel verschiebt sich durch Navbar bearbeitet von jojo der anfänger :) 31.10.2022 14:43 Hallo Leute Ich bin neu im Programmieren und habe gerade folgendes Problem. Ich möchte einen schönen Titel in der Mitte erstellen und oben rechts eine Navbar machen, jedoch verschiebt sich der Titel durch diese Navbar. Wie kann ich das beheben? ~~~ html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Coustard:wght@400;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Yanone+Kaffeesatz:wght@200;300;400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="index.css"> <title>Test Website</title> </head> <body> <a href="#">Discord</a> <a href="#">Info</a> <a href="#">Forum</a> <a href="#">Regelwerk</a> <a href="#">Shop</a> <div class="Titlebar"> <h1>NewFamily <br> State</h1> </div> <p class="underbar">Werde jetzt ein Teil der Community</p> </body> </html> ~~~ ~~~ css body{ font-family: 'Coustard', serif; height: 100%; background-color: azure; } .Titlebar{ color: rgb(207, 2, 197); text-align: center; font-size: 300%; } .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; } ~~~ [](/images/d9ec9f44-5921-11ed-b9a5-b42e9947ef30.PNG)
Titel verschiebt sich durch Navbar bearbeitet von Der Martin 31.10.2022 15:08 Hallo Leute Ich bin neu im Programmieren und habe gerade folgendes Problem. Ich möchte einen schönen Titel in der Mitte erstellen und oben rechts eine Navbar machen, jedoch verschiebt sich der Titel durch diese Navbar. Wie kann ich das beheben? `<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Coustard:wght@400;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Yanone+Kaffeesatz:wght@200;300;400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="index.css"> <title>Test Website</title> </head> <body> <a href="#">Discord</a> <a href="#">Info</a> <a href="#">Forum</a> <a href="#">Regelwerk</a> <a href="#">Shop</a> <div class="Titlebar"> <h1>NewFamily <br> State</h1> </div> <p class="underbar">Werde jetzt ein Teil der Community</p> </body> </html>` ` body{ font-family: 'Coustard', serif; height: 100%; background-color: azure; } .Titlebar{ color: rgb(207, 2, 197); text-align: center; font-size: 300%; } .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; } `[](/images/d9ec9f44-5921-11ed-b9a5-b42e9947ef30.PNG)
nicht angemeldet
