This question has actually been asked a lot of times, but none of the responses that I found worked for me. Maybe I am doing it wrong. Anyway, I made a site using CSS divs and foolishly used a browser window to make sure everything was aligned correctly. When I was done and I zoomed out, all of the images and other div elements shifted and moved around instead of being fixed like expected. I vaguely know that the problem has to do with the lack of a wrapper div and/or the fact I used relative and absolute positioning a LOT, just to get it to work. Any help is appreciated, I am new to CSS and this is my first site I've made with it. Thanks! -Zac
Here is a link the broken site as requested: http://wctadm.org/
Can't embed screenshot, here is a link: http://imgur.com/MmmGceb Shows correct alignment as I saw it on one monitor, and the zoomed-out, messed up version.
HTML file:
<!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>
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,800,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Default Page</title>
</head>
<body>
<div id="container">
<div id="content" class="clearfix">
<!-- Content //--->
</div>
<div id="header">
<!-- NAVBAR <img src="DM-logo.png" alt="DM Logo" height="81" width="130"> //--->
<ul id="menu" style="position: relative; z-index: 100;">
<li><a href="">Gallery</a></li>
<li><a href="">Contact</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Teachers</a>
<ul>
<li><a href="">Mrs. Rosarita Olvina</a></li>
<li><a href="">Mrs. Christine Pavesich</a></li>
<li><a href="">Mr. Francisco Virella</a></li>
</ul>
</li>
<li><a href="">Courses</a>
<ul>
<li><a href="">Graphic Design</a></li>
<li><a href="">Photography</a></li>
<li><a href="">Video Production</a></li>
<li><a href="">Animation</a></li>
<li><a href="">Art</a></li>
</ul>
</li>
<li><a href="">About</a>
<ul>
<li><a href="">What We Do</a></li>
<li><a href="">Where We Go</a></li>
</ul>
</li>
<li><a href="">Home</a></li>
</ul>
<ul id="logo">
<ul>
<li><img src="dm-button.png" style="position: absolute; top: 0px; left: -120px; z-index: 1;" height="120" width="120"/></li>
</ul>
<ul id="welcome">
<ul>
<li><p style="position: absolute; top: 140px; left: 75px; z-index: 2;">Welcome to Digital Media at WCTA</p></li>
</ul>
<ul id="banner">
<ul>
<li><img src="bannerbackgroundDMwithshadow.png" style="position: absolute; top: 81px; left: -120px; z-index: 0;" height="400" width="859"/></li>
</ul>
</div>
</div>
</div>
</div>
<div id="quicklinks">
<div id="links1">
<img src="courses-icon2.png" style="position: relative; top: 0px; left: 40px; z-index: 100;" height="97.75" width="139"/>
<p style="text-align: center; position: relative; top: -10px; left: 0px; z-index: 100; font-size: 22px; font-weight: bold;">Explore courses</p>
<p style="text-align: center; position: relative; top: -30px; left: 0px; z-index: 100; font-size: 12px;">Our courses teach advanced digital media in a wide range of subjects.</p>
<a href="courses.html" style="text-decoration: none"><img src="more.png" style="position: relative; top: -24px; left: 60px; z-index: 101;" height="33.6" width="98.5"/></a>
</div>
<div id="links2">
<img src="gallery-icon.png" style="position: relative; top: 0px; left: 40px; z-index: 100;" height="97.75" width="139"/>
<p style="text-align: center; position: relative; top: -10px; left: 0px; z-index: 100; font-size: 22px; font-weight: bold;">View the gallery</p>
<p style="text-align: center; position: relative; top: -30px; left: 0px; z-index: 100; font-size: 12px;">Gallery of our student's finest work in a variety of mediums.</p>
<a href="gallery.html" style="text-decoration: none"><img src="more.png" style="position: relative; top: -24px; left: 60px; z-index: 101;" height="33.6" width="98.5"/></a>
</div>
<div id="links3">
<img src="contact-icon2.png" style="position: relative; top: 0px; left: 40px; z-index: 100;" height="97.75" width="139"/>
<p style="text-align: center; position: relative; top: -10px; left: 0px; z-index: 100; font-size: 22px; font-weight: bold;">Contact us</p>
<p style="text-align: center; position: relative; top: -30px; left: 0px; z-index: 100; font-size: 12px;">Drop us a line if you have any questions or concerns regarding our program.</p>
<a href="contact.html" style="text-decoration: none"><img src="more.png" style="position: relative; top: -24px; left: 60px; z-index: 101;" height="33.6" width="98.5"/></a>
</div>
</div>
<!---------- BLURB //------------------->
<div id="blurb">
<div id="blurbpic">
<img src="placeholder.png" style="position: relative; top: 0px; left: 0px; z-index: 100;" height="250px" width="250px"/>
</div>
<div id="blurbtext">
<p style="text-align: left; position: relative; top: -10px; left: 0px; z-index: 100; font-size: 50px; color:white; font-family:'Open Sans Condensed', sans serif;">Dedicated to excellence</p>
<p style="text-align: left; position: relative; top: -50px; left: 10px; z-index: 99; font-size: 14px; color:white;">Members of WCTA's Digital Media program are expected to work hard, strive high, and have fun while doing it. With courses in areas ranging from Digital Media to Photography, joining the Digital media program is the best choice you could make to start the journey of your career in technology. Digital Media students not only get access to multiple computer labs and software, but they also get to go out in the field regularly to gain real life experience. </p>
</div>
</div>
<!---------- FOOTER //------------------->
<div id="footer">
<ul id="footerpic">
<ul>
<li><img src="footerbackground.png" style="position: relative; top: 0px; left: -194px; z-index: 150;" height="173px" width="859px"/></li>
</ul>
<ul id="footerlogo">
<ul>
<li><img src="DM-logowhite.png" style="position: relative; top: 80px; left: 270px; z-index: 151;" height="58.5" width="88.3"/></li>
</ul>
<ul id="footertext1">
<ul>
<li><p style="position: relative; top: 10px; left: 89px; z-index: 151; font-size: 12px; color:white;">©2013 Zac Clark - Digital Media</p></li>
</ul>
</div>
<ul id="footertext2">
<ul>
<li><p style="position: relative; top: -30px; left: 720px; z-index: 151; font-size: 12px; color:white;">About • Contact • FAQ • Find Us</p></li>
</ul>
</div>
</div> <!-- Wrapper Div //-->
</body>
</html>
CSS file:
@charset "utf-8";
/* Zac Clark - 2013 */
/* --- Primary Content boxes --*/
body {
background: #F7F7F7;
font-family: 'Open Sans', arial, sans-serif;
color: #000000;
font-size: 12px;
/* margin: 0px; */
}
div#container {
width: 859px;
margin: 0px auto;
background: #FFFFFF;
padding: 0px;
}
div#content {
width: 859px;
padding-top: 473px;
background: black;
float: left;
}
div#header {
margin-left:0px; /* 161px */
margin-right:0px;
width: 859px;
height: 481px;
background: #757575;
position: absolute;
top: 0px;
float: left;
}
#wrapper {
margin-left:auto;
margin-right:auto;
width:859px;
}
/* --- Quick Links --- */
div#quicklinks {
width: 859px;
margin: 0px auto;
background: white;
top: 286.3px;
height: 286.3px;
}
div#links1 {
width: 286.3px;
float: left;
margin: 0px auto;
background: #F5F5F5;
height: 286.3px;
padding: 30px;
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 286.3px;
}
div#links2 {
width: 286.3px;
float: left;
margin: 0px auto;
background: white;
height: 286.3px;
padding: 30px;
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 286.3px;
}
div#links3 {
width: 286.3px;
float: right;
margin: 0px auto;
background: #F5F5F5;
height: 286.3px;
padding: 30px;
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 286.3px;
}
/* --- Blurb & Image --- */
div#blurb {
width: 859px;
margin: 0px auto;
background: #333333;
top: 300px;
height: 300px;
}
div#blurbpic {
width: 300px;
float: left;
margin: 0px auto;
background: #333333;
height: 300px;
padding: 30px;
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 300px;
}
div#blurbtext {
width: 559px;
float: right;
margin: 0px auto;
background: #333333;
height: 300px;
padding: 10px;
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 559px;
}
/* --- Clearfix (Ignore) --- */
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* --- General Elements --*/
#logo ul li { display: inline; }
#banner ul li { display: inline; }
#welcome ul li {
font-family: 'Open Sans Condensed', sans serif;
font-size: 40px;
display: inline;
display: block;
text-decoration: none;
color: #ffffff;
border-top: 0px;
padding: 0px 0px 0px 0px;
background: transparent;
margin-left: 0px;
white-space: nowrap;
}
#footerlogo ul li { display: inline; }
#footerpic ul li { display: inline; }
#footertext1 ul li { display: inline; }
#footertext2 ul li { display: inline; }
/* --- NAVBAR --- */
ul {
font-family: 'Open Sans', Times;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: right;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 7px solid #CC4D4D;
padding: 25px 30px 30px 30px;
background: #333333;
margin-left: 0px;
white-space: nowrap;
}
ul li a:hover { background: #757575; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #757575; }
li:hover li a:hover { background: #757575; }
<!---------- FOOTER ------------//>
div#footer {
margin-left:0px; /* 161px */
margin-right:0px;
width: 859px;
height: 173px;
background: #757575;
position: absolute;
top: 0px;
}