Hey guys
I am having a slight problem with my site. The problems are:
1. The text in the header does not re-size whenever the window is resized and it turns the page really messy.
2. Whenever you hover over the li in the navigation bar it shifts the divs underneath it and also makes the page look messy.
If anyone knows how to fix these errors please let me know.
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Goblin+One' rel='stylesheet' type='text/css'>
<style type="text/css">
body{
background-color:white;
}
.container{
width:80%;
height:600px;
margin-left:auto;
margin-right:auto;
background-color:white;
border:1px solid black;
}
.header{
background: url(images/back.png);
background-repeat:no-repeat;
background-size:100%;
width:100%;
height:200px;
}
.header > .hText{
width:60%;
margin-left:auto;
margin-right:auto;
padding-top:5%;
padding-left:5%;
font-size:400%;
text-align:center;
font-family: 'Goblin One', cursive;
}
.sym{
color:white;
padding-left:10px;
}
.sidebar{
width:20%;
float:left;
}
.main{
width:80%;
height:300px;
float:left;
}
.main img{
width:20%;
height:30%;
float:right;
padding-right:10px;
}
a:link {color:white;}
a:visited {color:white;}
a {text-decoration: none;}
a:hover { color:red;}
.navbar{
width:100%;
height:20px;
margin:0;
padding:0;
background-color:black;
}
.navbar > ul{
list-style:none;
margin:0;
padding:0;
}
.navbar > ul > li{
width:10%;
display:inline;
background-color:black;
float:right;
border-left:2px solid white;
text-align:center;
}
.navbar > ul > li > ul{
display:none;
list-style:none;
margin:0;
padding:0;
}
.navbar > ul > li:hover ul{
display:block;
}
.navbar > ul > li:hover ul > li{
border-bottom:1px solid white;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="hText">
Playstation's Best
</div>
</div><!--End of header div-->
<hr/>
<div class="navbar">
<ul>
<li><a href="#">Contact</a></li>
<li><a href="#">Games</a>
<ul>
<li><a href="#">COD Modern Warefare 3</a></li>
<li><a href="#">COD Black Ops</a></li>
<li><a href="#">Gran Trismo 5</a></li>
<li><a href="#">GTA San Andreas</a></li>
<li><a href="#">Fifa 10</a></li>
<li><a href="#">Resistance</a></li>
<li><a href="#">God Of War III</a></li>
</ul>
</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Playstation 1</a></li>
<li><a href="#">PS 1</a></li>
<li><a href="#">Playstation 2</a></li>
<li><a href="#">PS 2</a></li>
<li><a href="#">Playstation 3</a></li>
<li><a href="#">PS 3 Slim</a></li>
<li><a href="#">PSP</a></li>
</ul>
</li>
<li><a href="#">History</a></li>
<li><a href="#">Home</a></li>
</ul>
<div class="sym"><a href="http://ie.playstation.com/">Sony - Playstation</a></div><!--End of sym div-->
</div><!--End of navbar div-->
<hr/>
<div class="sidebar">
Sidebar
</div><!--End of sidebar div-->
<div class="main">
<h2>Playstation's Best</h2>
<p>Playstations Best is a site set up for all of ye crazed Playstation fans.
It will be updated weekly to keep you up to speed with the newest
<img src="images/ps2.jpg"/>
products and the latest
games from Sony.</p>
<p>Please feel free to check out all our products and services and be sure to
follow us on our Twitter and Facebook pages as they will contain other
sources of information from our fans and followers.</p>
</div><!--End of main div-->
</div><!--End of container div-->
</body>
</html>