Need some help formatting Website for all monitor sizes

[Jake_A_T]

Hi there,

I've been designing a site using HTML/CSS for the past day, and I have the homepage complete. It looks great on my 24" Mac (in Safari, Firefox, and Chrome), and it looks good on my 15" Mac laptop (except when I use Firefox, for some reason the alignment is all off). The real issue is when I view my site on a 13" Maclaptop - the site appears very zoomed in and everything is overlapping and out of alignment. I'll post my CSS and HTML code below in addition to a screenshot of how it should look and how it does look on the 13". Any help trying to resolve the issue would be greatly appreciated!

Proper View: http://www.flickr.com/photos/8046922...ream/lightbox/

View on 13": http://www.flickr.com/photos/8046922...ream/lightbox/

CSS:

html,body
{
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	overflow-x: hidden;
}

div
{
padding: -8px;
margin: -8px;
}

body
{ 
background: url(../images/background.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
width: 100%;
height: 100%;
}

.logo
{
	position: relative;
	float: left;
	margin-top: -10px;
}

.logo1
{
	position: relative;
	float: right;
	margin-top: -10px;
}

.logo2
{
	position: relative;
	float: right;
	margin-top: -10px;
	margin-right: 35px;
}

.logo3
{
	position: relative;
	float: right;
	margin-top: -10px;
	margin-right: auto;
}

.logo4
{
	position: relative;
	float: right;
	margin-top: -10px;
	margin-right: auto;
}

.logo5
{
	padding-left: 20px;
	position: relative;
	float: left;
	margin-top: 500px;
	opacity:0.2;
filter:alpha(opacity=20);
}

.logo6
{
	padding-right: 20px;
	position: relative;
	float: right;
	margin-top: 500px;
	opacity:0.2;
filter:alpha(opacity=20);
}

.imageborder
{
	border:6px solid #333333;
}

#header
{
position: relative;
top: 45px;
min-width: 100%;
height: 80px;
background-color: #CC9900;
z-index: -2;
}

#container
{
height: 100%;
margin-left: 350px;
margin-right: 350px;
margin-bottom: 4em;
text-align:center;
}

#title
{
height: 100px;
margin-left: 150px;
margin-right: 150px;
margin-top: -40px;
z-index: 1;

}

#menu
{
width: 100%;
height: 50px;
margin-top: -8px;
margin-left: auto;
margin-right: auto;
float: none;
text-align:center;
letter-spacing:4px;
word-spacing:1px;
font-family: "Arial Black";
font-size: 125%;
color: #ffffff;
z-index: 7;
}

#mainarea
{
margin-top: 0px;
width: 100%;
}

#content
{
height: 100%;
margin-left: 10px;
text-align: middle;
font-family: "Book Antiqua";
font-size: 100%;
color: #000000;
}

#oneline
{
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
text-align: center;
font-family: "Times New Roman";
letter-spacing:4px;
font-size: 140%;
color: #ffffff;
}

#paperpagetitle
{
margin-left: auto;
margin-right: auto;
margin-top: -50px;
height: 200px;
text-align: middle;
font-family: "Tahoma";
letter-spacing:8px;
font-size: 600%;
color: #CC9900;
}

#oneline1
{
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: -80px;
text-align: center;
font-family: "Times New Roman";
font-size: 140%;
color: #ffffff;
}

#oneline2
{
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
text-align: center;
font-family: "Arial";
letter-spacing:4px;
font-size: 90%;
color: #ffffff;
z-index: 5;
}

#papercontent
{
width: 100%;
margin: 0 auto;
margin-top: 80px;
padding: 0 0 120px 0;
text-align: middle;
font-family: "Helvetica";
font-size: 150%;
color: #ffffff;
}

	#content .menu
	{
	margin: 10px 0;
	display: block;
	text-align: center;
	}
	.valid {margin: 10px 0 0;}

#footer 
{
position: relative;
padding-bottom: 1px;
min-width: 100%;
height: 80px;
z-index: 3;
text-align: middle;
font-family: "Helvetica";
font-size: 100%;
color: #ffffff;
background-color: #CC9900;
}

#footercontainer
{
position: absolute;
float: left;
padding-bottom: 29px;
margin-left: 510px;
width: 47%;
height: 60px;
z-index: 3;
text-align: middle;
font-family: "Helvetica";
font-size: 100%;
color: #ffffff;
}

#footercontent
{
	float: left;
padding-top: 15px;
margin-left: auto;
margin-top: 6px;
height: 85px;
z-index: 4;
text-align: middle;
font-family: "Helvetica";
font-size: 100%;
color: #ffffff;
}

#footercontent1
{
	float: right;
padding-top: 15px;
margin-right: auto;
margin-top: 25px;
height: 85px;
z-index: 4;
text-align: middle;
font-family: "Helvetica";
font-size: 100%;
color: #ffffff;
}

a:link { color:#ffffff; text-decoration:none; }   
a:visited { color:#ffffff; text-decoration:none; } 
a:hover { color:#000000; text-decoration:none; }   
a:active { color:#000000; text-decoration:none; } 

.header1 a:link { color:#ffffff; text-decoration:none; }   
.header1 a:visited { color:#ffffff; text-decoration:none; } 
.header1 a:hover { color:#000000; text-decoration:none; }   
.header1 a:active { color:#000000; text-decoration:none; } 

.header2 a:link { color:#ffffff; text-decoration:none; }   
.header2 a:visited { color:#ffffff; text-decoration:none; } 
.header2 a:hover { color:#CC9900; text-decoration:none; }   
.header2 a:active { color:#CC9900; text-decoration:none; }

HTML

<!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" xml:lang="en" lang="en">

<html>

<head>
<title> Elvis Tribute Artist: Pete Paquette </title>
<!-- Pete, Paquette, Elvis --><cmt>

<link rel="stylesheet" href="css/main1.css"/>
<style type="text/css">

</style>
</head>

<body>

<div id="header">

</div>

<img src="images/petelogo.png" alt="Paquette Productions" width="325" height="325" class="logo5" />
<img src="images/petelogo.png" alt="Paquette Productions" width="325" height="325" class="logo6" />

<div id="container">

<div id="menu">
<b><a href="index.html">HOME</a>     |     <a href="page1.html">BIO</a>     |     <a href="page2.html">TOUR DATES</a>     |     <a href="page3.html">VIDEOS</a>     |     <a href="page4.html">SIGN UP</a></b>

</div>

<img src="images/petelogo.png" alt="Paquette Productions" width="70" height="70" style="margin-top: -64px" class="logo" />
<a href="http://www.facebook.com/pages/The-Official-Pete-Paquette-Fan-Club/263124813762333" target="_blank"><img src="images/facebook.png" alt="Facebook" width="30" height="30" style="margin-top: -40px" class="logo2"/></a>
<a href="http://www.youtube.com/user/PaquetteProductions1" target="_blank"><img src="images/youtube.png" alt="YouTube" width="30" height="30" style="margin-top: -40px" class="logo1"/></a>

<div id="mainarea">

	<div id="content">

<br>
<br>
<br>

<div id="oneline">
ELVIS TRIBUTE ARTIST
</div>

<br>

<div id="paperpagetitle">
PETE PAQUETTE
</div>

<div id="oneline1">
One of Canada's top Elvis Tribute Artists and recipient of numerous awards
</div>

<br>

<center><iframe width="900" height="500" src="http://www.youtube.com/embed/XWqBRTKNhGM" frameborder="0" allowfullscreen></iframe></center>

<img src="images/awards.png" alt="Awards" style="margin-top: -5px" />

<div id="oneline2">
<i><b>"Like"</b> my Facebook Fan Club page by <span class="header2"><a href="http://www.facebook.com/pages/The-Official-Pete-Paquette-Fan-Club/263124813762333" target="_blank">clicking here!</a></i></span>
</div>

</div>
</div>

</div>

<div id="footer">

<div id="footercontainer">
<div id="footercontent">

<p align="justify">Copyright 2013</p>

</div>

<div id="footercontent1">

<a href="http://www.facebook.com/pages/The-Official-Pete-Paquette-Fan-Club/263124813762333" target="_blank"><img src="images/facebook.png" alt="Facebook" width="30" height="30" class="logo3"/></a>
<a href="http://www.youtube.com/user/PaquetteProductions1" target="_blank"><img src="images/youtube.png" alt="YouTube" width="30" height="30" class="logo4"/></a>

</div>
</div>
</div>
</div>

</body>
</html>

[tempz]

Is your website live?

[sunfighter]

I have a windows machine and use FF. Things are messed up.

[tempz]

@Jake

Hi, can you zip up your image folder and upload it to http://ge.tt/

1. Res: 1360x768 - Chrome website doesn't look great.

I will continue to update.

[Jake_A_T]

@tempz

Hey,

My site isn't live yet (just got started on it yesterday and was trying to get the homepage done), but i've uploaded a zip file of my site (index.html, css and images) here if you want to take a look: http://ge.tt/3844sAT/v/0?c

Thanks!

[Jake_A_T]

@tempz

just wanted to add that all of the extra images in the folder are from another project I had completed (just forgot to delete the unnecessary images).

[tempz]

I'll start fixing all the problems I can see.

[Jake_A_T]

@tempz

Thank you very much!! If you have any other questions or need anything else you can just leave a reply - i'll check here often.

[tempz]

Okay, I have been playing with your code. You have lots of issues with your code; the way it's layed out.

I have changed most of it; made it easier to understand and other users to help you write code.

I have changed a lot of your css and added my own.

preview: http://i.imgur.com/5SAWC.jpg

I will continue to update and change things as I go

[Jake_A_T]

@tempz

Wow...thanks for the update!! It looks awesome, and thank you so much for taking the time to look and work on it - I really appreciate it a lot!

[tempz]

I will update your website live from:

http://dev.tempz.webatu.com/petewebsite/

[Jake_A_T]

@tempz

That's great, thanks! - i'll definitely look forward to checking out its progress

[Jake_A_T]

@tempz

Hey, I just wanted to add that everything is looking great so far - better than I could have expected!

For the longest time (before posting this on this site) I was trying to add a Facebook "like" button in the black box listing the 3 awards (sort of near the bottom of the box and centred), but all that was appearing was a big white box (no matter what method I tried). Basically I was trying to get this: http://developers.facebook.com/docs/.../plugins/like/ , but couldn't, so I settled on that line of text that links to the page to like. If it doesn't take long and you know how to add this it would be amazing, but if not no worries at all because you've already done more than I could have imagined!

[tempz]

Originally Posted by Jake_A_T

@tempz

Hey, I just wanted to add that everything is looking great so far - better than I could have expected!

For the longest time (before posting this on this site) I was trying to add a Facebook "like" button in the black box listing the 3 awards (sort of near the bottom of the box and centred), but all that was appearing was a big white box (no matter what method I tried). Basically I was trying to get this: http://developers.facebook.com/docs/.../plugins/like/ , but couldn't, so I settled on that line of text that links to the page to like. If it doesn't take long and you know how to add this it would be amazing, but if not no worries at all because you've already done more than I could have imagined!

You don't need @name any more - I was talking to at first not sunny didn't want you to get confused

If you would like to show me where you want to put the like button via the live website (printscreen).

I still have some things to fix

1. Layout issues
2. Code issues
3. colour scheme

[Jake_A_T]

Ah haha, makes sense to start off like that to reduce confusion!

Here's a screenshot of where I was thinking to place the "Like" button (so basically on top of the black box but a bit up from the bottom edge of the box): http://www.flickr.com/photos/8046922...ream/lightbox/

No problem at all, I definitely appreciate the time spent on it more than anything!!