Frage:Styling Elemente einer HTML-Webseite
Wie kann ich Stil verschiedene Elemente einer HTML-Webseite richtig? Ich habe überall im Internet nachgeschaut und Bücher gelesen, aber ich kämpfe immer noch.
Ausgabe:
Mein Problem ist, dass ich eine Hauptüberschrift haben, die wie die Haupt „Titel“ für meine Website, die den Namen der Website angezeigt wird, aber links von meiner Position, ich möchte style eine vertikale Navigationsleiste, die in Linie mit meiner Überschrift sein wird. Dennoch habe ich Probleme, die Navbar zu stylen und zur Arbeit zu gehen, anstatt übereinander zu liegen.
HTML:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="homepage.css">
<head>
<title>CSGOWin | Win Big!</title>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="Jackpot.html">Jackpot</a></li>
<li><a href="Jackpot.html">Coinflip</a></li>
<li><a href="News.html">Giveaways</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a><li>
</ul>
</div>
<h1>CSGO Win</h1>
</body>
</html>
CSS:
body {
padding: 0;
margin: 0;
background-image: url(bgimg.jpg);
width: 100%;
height: 100%;
background-size: 100%;
}
h1 {
font-family: Arial, Verdana, sans-serif;
background-color: #FFA500;
border-style: solid;
border-radius: 25px;
text-align: center;
margin-top: 50px;
margin-left: 350px;
margin-right: 350px;
padding-top: 1%;
padding-bottom: 1%;
font-size: 45px;
}
ul {
list-style-type: none;
margin-left: 50px;
margin-right: 85%;
margin-top: 50px;
background-color: #FFA500;
}
li a {
font-family: Arial, Verdana, sans-serif;
display: block;
}
.navbar{
}
Schließlich bin ich sehr neue Überlauf zu stapeln, so dass ich entschuldige mich, wenn meine Frage nicht voll ist detailliert. Ich werde Fragen beantworten, wenn es welche gibt. Danke für Ihre freundliche Hilfe.
Es gibt einige Möglichkeiten, dies einzurichten ... Eine besteht darin, Ihre .navbar-Klasse und UL-Klasse auf "display: inline-block" zu setzen. Eine andere Möglichkeit ist die Verwendung von Schwimmern (etwas schwieriger). Der beste Weg, insbesondere wenn Sie möchten, dass Ihr Menü fest bleibt, ist die Verwendung von position: absolute oder position: fixed in Ihrer .navbar-Klasse. Ich würde diese 3 Optionen untersuchen und sehen, was am besten zu Ihrem Seitenaufbau passt. – deebs
Es gibt eine Menge Probleme mit Ihrem Code. Eine definitive Antwort zu finden und zu sagen: "So löst man das Problem" wird nicht helfen. Es lohnt sich, darüber nachzudenken, wie bestimmte Elemente funktionieren und was sie in bestimmten Situationen tun können. Sehen Sie sich 'position:' und 'float:' zum Positionieren an und lesen Sie in 'margin:' um zu sehen, wo Sie Ihre Fehler machen. –