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:
Code:
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
Code:
<!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>