DS60, or someone else, I have some follow-up questions.
Forgive me for using divs again, but I’m not familiar with any other way, and I’m not sure what you are doing in the examples above.
So, my questions are these:
1 - Why do you reference the background image more than once? Shouldn’t once be sufficient for the background?
2 - If you look at this link again https://comfortinthecold.com/tests/, why would the text in a div with a defined dimension be WAY outside of that div’s boundaries? It appears that the text itself flows as it would normally, even though it is placed within the div that shows up elsewhere?
3 - Why can’t you use an “id” on a span to make them work, instead of nesting them to make them unique?
/* null margins and padding to give good cross-browser baseline */
html,
body,
address,
blockquote,
div,
form,
fieldset,
caption,
h1,h2,h3,h4,h5,h6,
hr,
ul,li,ol,
table,tr,td,th,
p,
img {
margin: 0;
padding:0;
}
img,fieldset {
border:none;
}
body {
padding: 8px 0;
text-align: center; /* center #pageWrapper IE 5.x */
/*
never trust font defaults for line-height or face
I like mine taller anyhow...
*/
font: normal 100%/150% "times new roman",times,serif;
background: #3E5171;
}
#pageWrapper {
width: 976px; /* 1024 - 48 to be 1024 friendly! */
min-height: 800px;
margin: 0 auto;
text-align: left;
color: #FFFFFF;
background: #3F4C6E url(../images/pageWrapperBackground.jpg) top left no-repeat;
}
* html #pageWrapper {
/*
IE6- knows not the min-height, but will incorrectly
treat height as such!
*/
height:800px;
}
h1 {
position: relative;
width: 100%; /* fix IE positioning bugs */
font: bold 32px/40px "times new roman",times,serif;
color: #FFFFFF;
text-shadow:0 0 2px #000;
}
h1 span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 144px;
background:url(../images/pageWrapperBackground.jpg) top left no-repeat;
}
h1 a span {
width: 360px;
background:url(../images/H1Logo.png) 14px 28px no-repeat;
}
h1 span span {
top: 64px;
height: 40px;
background: #55F;
opacity: 0.5;
-moz-opacity:0.5;
filter: alpha(opacity=50);
}
h1 a {
display: block;
width: 360px;
padding: 64px 0 40px;
text-indent:16px; /* can't trust padding here thanks to width */
color: #FFFFFF;
}
#productLinks {
padding-left:2em;
float:left;
}
#mainMenu a,
#productLinks a {
text-decoration:none;
color: #FFFFFF;
}
#mainMenu a: active,
#mainMenu a: focus,
#mainMenu a: hover,
#productLinks a:active,
#productLinks a:focus,
#productLinks a:hover {
color:#FD8;
}
#mainMenu {
list-style:none;
float: right;
position: relative; /* to depth sort over H1 */
margin-top:-70px; /* ride up over h1 */
font: 18px/20px "times new roman",times,serif;
}
#mainMenu li {
display:inline;
}
#mainMenu a {
float: left;
padding: 0 10px;
text-decoration:none;
border-right: 2px solid #000000;
}
#mainMenu .last a {
border:0;
}
#mainCopy {
border: 1px solid #000000;
position:relative;
float: left;
padding:5px;
height: 615px;
width: 800px;
}
#cart {
border: 1px solid #000000;
position:relative;
top: 200px;
width: 130px;
height:50px;
}
<!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" lang="en" xml:lang = "en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en" />
<title>
jQuery background image fade-in test
</title>
<link type="text/css" rel="stylesheet" href="css/template.css" media="screen,projection,tv" />
<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</head>
<body>
<div id="pageWrapper">
<h1>
<!-- empty spans are image sandbags, do not remove -->
<span><span></span></span>
<a href="#">
Comfort in the Cold ™
<span></span>
</a>
</h1>
<ul id="mainMenu">
<li><a href="">Home</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Products</a></li>
<li><a href="">Video</a></li>
<li class="last"><a href="">Links</a></li>
</ul>
<ul id="productLinks">
<li style="list-style-type:none; font-size:20px; font-weight:bold; text-decoration:underline;">Products</li>
<li><a href="">Rapture</a></li>
<li><a href="">Cocoon</a></li>
<li><a href="">Kits</a></li>
<li><a href="">Instructions</a></li>
<li><a href="">Hot Socks</a></li>
<li><a href="">Hot Sock inserts</a></li>
<li><a href="">Zebralight</a></li>
</ul>
<div id="mainCopy">Main copy</div>
<div id="cart">Cart</div>
</div><!-- #pageWrapper -->
</body>
</html>
