Hello to the board, in the first place, 'cause I'm new here.
I am quite at the beginning with CSS. HTML, PHP, MySQL are no problem, though for PHP and MySQL I still need some hours of googling from time to time.
The idea is that I want to be able to build my own websites, with no help from CMS-es, templates and others.
The main idea for this specific example is that I want the site to resize itself according to the resolution or window size, so it has the best look all the time. Though resolutions are in fact the biggest issue here.
Ok, so I created a page with a resizable background, and works like a charm. I also have a top-logo that I managed to make it resize with the window and looks cool. But I want to put,in the same way, a menu under the logo, that can be either a long horizontal image with map links (I figured), or individual buttons with simple a href links.
The problem is that when I load the menu image, it doesn't stay where it should, under the top-logo, while changing resolutions or window size. It's either OK, or overlapping with the logo, or way under the logo, to the middle of the page, with low resolultions/window sizes.
I tried all sort of things, nothing worked.
A little help will be appreciated.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html charset=utf-8">
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body id="page-body" bgcolor="#000000">
<img src="back.jpg" class="image">
<img src="up.png" class="up">
<img src="menu.png" class="menu_back">
</body>
</html>
CSS:
.body
{
margin-left:0px;
background:#000000;
}
.container
{
text-align:center;
}
.center_div
{
border:0px solid gray;
margin-left:auto;
margin-right:auto;
width:100%;
background-color:#555555;
text-align:left;
padding:50px;
}
.image
{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.up
{
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.menu_back
{
width: 100%;
position: relative;
top: 140px;
left: 0px;
}
