0

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>
2
Contributors
2
Replies
5
Views
5 Years
Discussion Span
Last Post by ZeroEddy
1

Hi ZeroEddy

Just had a quick glance at your css code and can give you the following advice (anyone feel free to correct me if you have a better idea).

1 - Using font-size as a percentage does not make it relative to page/screen size, but to the base inherited font size. I guess you could resize the font with some javascript, but I don't think there is a way in css to specify dynamic font size.

2 - I believe you need to add a float (left or right shouldn't matter) to the navbar div. This will cause the float on main div to follow the navbar rather than the navbar's children. [ie: it should stop the divs from jumping]

You will likely need to play with this and tweak it, especially if you check it in firefox/chrome and IE as they often do things differently.

Hope this helps.
~H

0

Thank you very much Hearth for your reply. It helped me out a lot and it worked Thanks.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.