logo not staying when website is resized

wblati

01-05-2010, 05:05 PM

Hi,

I want everything where it should when a user has a different screen resolution. My laptop is currently on 1400x1050 and the logo should be flush like this:
http://img63.imageshack.us/img63/3281/wllogov2.jpg

But when I resize the page the logo(top left) moves left or right. I want it to stay the same as it should be in the image shown above.

Heres my code for the index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Wilbert Lati's Portfolio Website</title>
<link href="test.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<body>

<div id="centre">
<div id="Layer1"><img src="images/swirl background.jpg" /></div>
<div id="Layer2"><img src="images/wilbert lati_logo_v2.jpg" /></div>
</div>

</body>

</html>

and this is the code for the css:
#background {
position:absolute;
width:1024;
height:768;
z-index:1;
visibility: visible;
}
#Layer1 {
position:absolute;
width:1024px;
height:768px;
z-index:1;
visibility: visible;
}
#Layer2 {
position:absolute;
width:300px;
height:150px;
z-index:2;
top:20px;
left:205px;
visibility: visible;
}
#centre
{
width: 1024px;
text-align: center;
position: realtive;
left: 50%;
top: 50%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

Heres a link to the files:
http://www.megafileupload.com/en/file/175689/portfolio-website-zip.html

Excavator

01-05-2010, 05:56 PM

Hello wblati,
I always think it's unfortunate that DW kind of steers new coders toward using so much absolute positioning. I hate the use of #layer1/2/3 ... but that's just my pet peeve.

Your main problem is the containing div is not position:relative; which makes the absolute positioned top left logo take it's positioning from the body of the document. That's why your seeing it move when the resolution changes.
Fix this spelling error and it works, somewhat. -
#centre
{
width: 1024px;
text-align: center;
position: realtive;
left: 50%;
top: 50%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

Your use of positioning kind of negates the margin: 0 auto; and by placing #centre at 50% you lose a lot of the viewport.

There are much better ways to do this - have a look at this -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Wilbert Lati's Portfolio Website</title>
<style type="text/css">
html, body {
font: 100% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#centre {
height: 768px;
width: 1024px;
margin: 0 auto;
background: url(images/swirl%20background.jpg);
text-align: center;
overflow: auto;
}
#logo {
height:150px;
width:300px;
float: left;
top:20px;
left:205px;
margin: 20px 0 0 205px;
}
</style>
</head>
<body>
<div id="centre">
<img src="images/wilbert lati_logo_v2.jpg" alt="description" width="300" height="150" id="logo" />
</div>
</body>
</html>

wblati

01-05-2010, 08:01 PM

Thanks alot Excavator!

Am I doing alright coding wise? Any adivice/ tips as I'm updating my old website(www.wilbertlati.co.uk) with this new one.

Excavator

01-06-2010, 01:26 AM

Thanks alot Excavator!

Am I doing alright coding wise? Any adivice/ tips as I'm updating my old website(www.wilbertlati.co.uk) with this new one.

You seem to have the right idea, getting away from frames and using a linked CSS that can style multiple pages.
I would question the use of absolute positioning, it has it's place but it's surely not needed to build the whole site with.
Also, check with w3schools (http://www.w3schools.com/) for tutorials on any selectors you're not familiar with, use the validators like my signature line suggests and post back here when you run into something that stumps you.