I'm just starting to learn HTML and CSS, and I have written a little bit of a website of my own. I'm now trying to help a friend write one and maintain it, but it's much more of a problem than I anticipated.
I'm trying to create a navigation bar BELOW two icons/logos, but it flies to the bottom of the page, OR overlays the 2 logos. Help? A live version is available at http://ift.tt/2mjUeMu
This is my code so far: (please ignore some of the color:white, it's to help me see better xD)
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="css/mainframe.css" type="text/css" rel=stylesheet>
<script src="scripts/jquery.js"></script>
<body>
<!--Giga logo, top left--!>
<div id="gigalogomainbox">
<div id="gigalogobox">
<img id="gigalogo" src="images/gigalogo.png">
</div>
<div class="clearfix">
</div>
</div>
<!--Steam logo, top right--!>
<div id="steamlogomainbox">
<div id="steamlogobox">
<img id="steamlogo" src="images/steamlogo.png">
</div>
<div class="clearfix">
</div>
</div>
<!--navigation barrrrrr--!>
<div id="navbarbox">
<ul id="navbar">
<li>Home</li>
<li>Servers</li>
<li>Community</li>
<li>Store</li>
<li>Download</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
CSS:
.clearfix {
clear: both;
}
body
{
background-color: rgb(21,14,43);
background-image: url("../images/backgroundimage.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%;
background-position: center center;
overflow: hidden;
}
#gigalogomainbox
{
float: left;
width: 30%;
height: 50vw;
overflow: hidden;
transform: skewX(20deg);
}
#gigalogobox
{
margin: 0 3vw 0 5vw;
padding: 0 0 0 2vw;
background-color: white;
width: 80%;
height: 20%;
}
#gigalogo
{
width: 90%;
float: left;
margin: 2.5vw 2vw 0 0;
}
#steamlogomainbox
{
width: 10%;
height: 50vw;
float: right;
overflow: hidden;
}
#steamlogobox
{
margin: 0 -2vw 0 3vw;
padding: 0;
width: 100%;
height: 20%;
float: right;
background-color: white; /*000c21*/
transform: skewX(-20deg);
}
#steamlogo
{
width: 65%;
float: right;
margin: 3vw 2vw 0 0;
transform: skewX(20deg);
}
#placeholderbartop
{
float: left;
width: 60%;
margin: 0;
padding: 0;
height: 10vw;
}
#navbarbox
{
width: 100%;
}
#navbar, #navbar ul
{
width: 100%;
height: 5vw;
margin: 0;
color: white;
background-color: white;
display: inline-block;
}
#navbar li
{
color: white;
list-style: none;
display: inline-block;
padding: 1vw;
color: red;
font-size: 30px;
}
Aucun commentaire:
Enregistrer un commentaire