mlegg
06-30-2011, 11:25 PM
I made this site (http://thecookiejarnh.com/about.html). The text is at the very edge of the <div class="one">. I thought I had the padding setup correctly but alas something went wrong. How do I fix it?
CSS
html,body {
padding:0;
margin:0;
height:100%;
background-image:url(images/ckbk2.gif);
background-position:center top; /* this positioning has been modified */
}
#mainPicture {
height:200px;
width:960px;
background-image:url(images/CookieJar-logo2.jpg);
}
#container {
position:relative;
width:960px;
padding: 0;
min-height:100%;
margin:auto;
font-family: sans-serif;color:navy;
background-color:#fff;
}
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#3193DE;
background-repeat:repeat;
border-color:#AAAAAA;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu {
width:656px;
padding-left:300px;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: left;
}
ul.pureCssMenu ul{
width:164.85px;
z-index: 10;
}
ul.pureCssMenu li{
display:block;
margin:2px 5px 0px 2px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#3193DE;
border-width:0px;
border-color:#6655ff;
border-style:solid;
text-align:left;
text-decoration:none;
padding:4px;
_padding-left:0;
font:16px Georgia;
color: #FFFFFF;
text-decoration:none;
cursor:default;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:center;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:5;
height:16;
display:inline-block;
background-color:#AAAAAA; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:80%;
height:3;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#FFFFFF;
border-color:#665500;
border-style:solid;
font:16px Georgia;
color: #003366;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#FFFFFF;
border-color:#665500;
border-style:solid;
font:16px Georgia;
color: #003366;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arrv_anim_1.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:11px;}
ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrv_anim_1o.gif);
}
ul.pureCssMenu a:hover span{ _background-image:url(./images/arrv_anim_1o.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_double_1.gif)}
ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arr_double_1o.gif);}
ul.pureCssMenu table a:hover span{background-image:url(./images/arr_double_1o.gif)}
#div.one {
padding: 15px;
min-height:100%;
}
#div.one a:link {
color :#3193DE;
text-decoration:underline;
}
#div.one a:visited {
color: #3193DE;
text-decoration:underline;
}
#div.one a:hover {
color: #FFFFFF;
background-color: #3193DE;
text-decoration:underline;
}
#div.one a:active {
color : #3193DE;
background-color: #FFFFFF;
text-decoration:underline;
}
#footer {
position:absolute;
width:100%;
left:0;
bottom:0;
padding:5px 0;
font-family:sans-serif;
font-size:15px;
text-align:center;
color: #FFFFFF;
background-color:#3193DE;
}
#footer a:link {
color : #FFFFFF;
text-decoration:underline;
}
#footer a:visited {
color: #FFFFFF;
text-decoration : underline;
}
#footer a:hover {
color: #3193DE;
background-color: #FFFFFF;
text-decoration: underline;
}
#footer a:active {
color : #990000;
background-color: #FFFFFF;
text-decoration: underline;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="keywords" content="The Cookie Jar, Dover, NH, Lisa Ciccotelli, fresh baked cookies, cookies, fresh baked, chocolate chip, ">
<meta name="description" content="The Cookie Jar is the vision of Lisa Ciccotelli to bring fresh baked cookies to the world's cookie lovers. The Cookie Jar is based out of Dover, NH and sold throughout the local seacoast area.">
<title>TheCookieJar.com</title>
<link rel="stylesheet" type="text/css" href="cookiejar.css"><!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6styles.css">
<![endif]-->
<style type="text/css">
li.c1 {border:none}
</style>
<!-- Start visuallightbox.com HEAD section -->
<link rel="stylesheet" href="engine/css/vlightbox1.css" type="text/css" />
<link rel="stylesheet" href="engine/css/vlightbox2.css" type="text/css" />
<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="engine/js/jquery.min.js" type="text/javascript"></script>
<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
<script src="engine/js/vlbdata.js" type="text/javascript"></script>
<!-- End visuallightbox.com HEAD section -->
</head>
<body>
<div id="container">
<div id="mainPicture"></div>
<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="index.html">Home</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="products.html">Cookies</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="about.html">Our Story</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="testimonials.html">Testimonials</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="contact.html">Contact</a></li>
</ul>
<!-- End PureCSSMenu.com MENU -->
<div class="one"><br>
<p>I remember coming home after school each day to the smell of homemade treats... warm and cozy, delicious treats baking in the oven... and I wanted to carry on that tradition with my children.</p>
<p>In our family, Pa always says "no M-Os" (no Missed Opportunities). This was the opportunity that I didn't want to miss... to share my homemade chocolate chip cookies with everyone. This recipe took years to perfect... made with all fresh ingredients and baked fresh every day. Our goal is to bake each cookie with a gooey, fudgey center, and the perfect crispiness on the edges.</p>
<p>Need just a taste?<br>
Try the Minis or a bag of Samplers... and they're perfect for sharing!</p>
<div style="clear:both">
<div id="footer">Copyright © The Cookie Jar, Dover, NH / <a href="mailto:Lisa@thecookiejarnh.com">Lisa@thecookiejarNH.com</a></div>
</div>
<!--end #container --></div>
</body>
</html>
CSS
html,body {
padding:0;
margin:0;
height:100%;
background-image:url(images/ckbk2.gif);
background-position:center top; /* this positioning has been modified */
}
#mainPicture {
height:200px;
width:960px;
background-image:url(images/CookieJar-logo2.jpg);
}
#container {
position:relative;
width:960px;
padding: 0;
min-height:100%;
margin:auto;
font-family: sans-serif;color:navy;
background-color:#fff;
}
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#3193DE;
background-repeat:repeat;
border-color:#AAAAAA;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu {
width:656px;
padding-left:300px;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: left;
}
ul.pureCssMenu ul{
width:164.85px;
z-index: 10;
}
ul.pureCssMenu li{
display:block;
margin:2px 5px 0px 2px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#3193DE;
border-width:0px;
border-color:#6655ff;
border-style:solid;
text-align:left;
text-decoration:none;
padding:4px;
_padding-left:0;
font:16px Georgia;
color: #FFFFFF;
text-decoration:none;
cursor:default;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:center;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:5;
height:16;
display:inline-block;
background-color:#AAAAAA; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:80%;
height:3;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#FFFFFF;
border-color:#665500;
border-style:solid;
font:16px Georgia;
color: #003366;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#FFFFFF;
border-color:#665500;
border-style:solid;
font:16px Georgia;
color: #003366;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arrv_anim_1.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:11px;}
ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrv_anim_1o.gif);
}
ul.pureCssMenu a:hover span{ _background-image:url(./images/arrv_anim_1o.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_double_1.gif)}
ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arr_double_1o.gif);}
ul.pureCssMenu table a:hover span{background-image:url(./images/arr_double_1o.gif)}
#div.one {
padding: 15px;
min-height:100%;
}
#div.one a:link {
color :#3193DE;
text-decoration:underline;
}
#div.one a:visited {
color: #3193DE;
text-decoration:underline;
}
#div.one a:hover {
color: #FFFFFF;
background-color: #3193DE;
text-decoration:underline;
}
#div.one a:active {
color : #3193DE;
background-color: #FFFFFF;
text-decoration:underline;
}
#footer {
position:absolute;
width:100%;
left:0;
bottom:0;
padding:5px 0;
font-family:sans-serif;
font-size:15px;
text-align:center;
color: #FFFFFF;
background-color:#3193DE;
}
#footer a:link {
color : #FFFFFF;
text-decoration:underline;
}
#footer a:visited {
color: #FFFFFF;
text-decoration : underline;
}
#footer a:hover {
color: #3193DE;
background-color: #FFFFFF;
text-decoration: underline;
}
#footer a:active {
color : #990000;
background-color: #FFFFFF;
text-decoration: underline;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="keywords" content="The Cookie Jar, Dover, NH, Lisa Ciccotelli, fresh baked cookies, cookies, fresh baked, chocolate chip, ">
<meta name="description" content="The Cookie Jar is the vision of Lisa Ciccotelli to bring fresh baked cookies to the world's cookie lovers. The Cookie Jar is based out of Dover, NH and sold throughout the local seacoast area.">
<title>TheCookieJar.com</title>
<link rel="stylesheet" type="text/css" href="cookiejar.css"><!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6styles.css">
<![endif]-->
<style type="text/css">
li.c1 {border:none}
</style>
<!-- Start visuallightbox.com HEAD section -->
<link rel="stylesheet" href="engine/css/vlightbox1.css" type="text/css" />
<link rel="stylesheet" href="engine/css/vlightbox2.css" type="text/css" />
<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="engine/js/jquery.min.js" type="text/javascript"></script>
<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
<script src="engine/js/vlbdata.js" type="text/javascript"></script>
<!-- End visuallightbox.com HEAD section -->
</head>
<body>
<div id="container">
<div id="mainPicture"></div>
<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="index.html">Home</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="products.html">Cookies</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="about.html">Our Story</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="testimonials.html">Testimonials</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="contact.html">Contact</a></li>
</ul>
<!-- End PureCSSMenu.com MENU -->
<div class="one"><br>
<p>I remember coming home after school each day to the smell of homemade treats... warm and cozy, delicious treats baking in the oven... and I wanted to carry on that tradition with my children.</p>
<p>In our family, Pa always says "no M-Os" (no Missed Opportunities). This was the opportunity that I didn't want to miss... to share my homemade chocolate chip cookies with everyone. This recipe took years to perfect... made with all fresh ingredients and baked fresh every day. Our goal is to bake each cookie with a gooey, fudgey center, and the perfect crispiness on the edges.</p>
<p>Need just a taste?<br>
Try the Minis or a bag of Samplers... and they're perfect for sharing!</p>
<div style="clear:both">
<div id="footer">Copyright © The Cookie Jar, Dover, NH / <a href="mailto:Lisa@thecookiejarnh.com">Lisa@thecookiejarNH.com</a></div>
</div>
<!--end #container --></div>
</body>
</html>