I'm currently creating a website just to mess with CSS and HTML, however, I've ran into a problem with my navigation bar. I've created it, however, when I put my logo in at the top of the page, above the nav bar, the nav bar moved down to like the middle of the page and I'm not sure how to move it so that it's just below the logo. From what I remember this happened when I put in another image which I haven't positioned at that point, but even after moving that image, the nav bar didn't move back to its original point. I tried setting the position of it to fixed, but it moved it to the left side of the screen.
And also, how would I go about moving the second image within my website without ruining the nav bar again?
Here is my CSS:
#image1 {
display: block;
margin-left: auto;
margin-right: auto;
height: 8%;
width: 30%;
}
#image2 {
position: relative;
width: 20%;
top: 400px;
right: 481px;
}
ul {
list-style-type:none;
width:60%;
margin: auto;
padding: 0;
overflow: hidden;
background-color: rgba(163,21,23,1.00)
}
li {
float: right;
width: 33.33%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border: thin;
border-style: groove;
}
li a:hover {
background-color: #111;
}
body {
background-color: rgba(96,96,96,1.00)
}
And this is my HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> LoL </title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<img src="assets/lol.png" alt="Logo" id="image1">
<img src="assets/minions.png" alt="Minions in LoL" id="image2" >
<ul>
<li><a class="active" href="#Home">Home</a></li>
<li><a href="#Farming">Farming</a></li>
<li><a href="#Best champions for each role">Best champions for each role</a>
</li>
</ul>
<banner></banner>
</body>
</html>
Thanks.
Aucun commentaire:
Enregistrer un commentaire