Divs move when resizing page
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
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;
}
No comments:
Post a Comment