Website designing? HTML CODES?

O

Omar Tahir

New member
I have made a simple page with a navigation bar. The problem is when I resize the browser everything changes position.Please help me out? or atleast specify a good website that can solve my problem
this is the fullview:
http://img88.imageshack.us/i/58771376.png/

this is the resized view;
http://img4.imageshack.us/i/89762891.png/

this is screen resolution of 800 by 600:
http://img705.imageshack.us/i/800by600.png/


this my html file:
<html>
<head>
<link rel="stylesheet" type="text/css" href="C:\Documents and Settings\Tagir\Desktop\web\style.css" />
<title>Welcome</title>
<style type="text/css">
div
{
margin-left:14%;
}
ul
{
width:100%
list-style-type:none;
padding:opx;
overflow:hidden;
}
li
{
display:inline;
}
</style>
</head>

<body>
<div>
<ul><li><a class="bar" href="#home">Home</a></li><li><a class="bar" href="#olympiad">Olympiad</a></li><li><a class="bar" href="#IAS37">IAS 37</a></li>
<li><a class="bar" href="#downloads">Downloads</a></li><li><a class="bar" href="#contact">Contact US</a></li></ul>
</div>
<p>This is a test. I repeat this is a test. Write someting.This is a test. I repeat this is a test. Write someting.
This is a test. I repeat this is a test. Write someting.This is a test. I repeat this is a test. Write someting.
This is a test. I repeat this is a test. Write someting.This is a test. I repeat this is a test. Write someting.
This is a test. I repeat this is a test. Write someting.This is a test. I repeat this is a test. Write someting.
This is a test. I repeat this is a test. Write someting.This is a test. I repeat this is a test. Write someting.
This is a test. I repeat this is a test. Write someting.This is a test. I repeat this is a test. Write someting.
This is a test. I repeat this is a test. Write someting.This is a test. I repeat this is a test. Write someting.</p>
<span class="foot">
<p class="foot">A HT PRODUCTION (c) 2011</p>
</span>



<html>
</body


and this is the css:

body
{
background-color:LemonChiffon;
color:DarkRed;
font-size:12pt;
font-family:Verdana;
margin-right:auto;
margin-left:auto;
margin-top:4%;
width:90%;
min-width:600px;
max-width:2000px;
}
a:link.bar,a:visited.bar
{
color:LemonChiffon;
text-decoration:none;
font-size:14pt;
padding:15px;
display:block;
text-align:center;
background-color:sienna;
width:120px;
float:left;
}
a:hover.bar
{
background-color:saddleBrown;
}
span.foot
{
position:relative;
display:block;
bottom:4%
padding:5%;
}
p.foot
{
color:black;
font-size:8pt;
}
 
Back
Top