CSS Forum

**pmcross** · 08-31-2009, 01:53 PM

Hello,

I am working on a website where I have made custom buttons that are images in div's. The images overlap each other and they look good on 1280X1024 or 1280X800 resolutions but anything other than that causes them to move. I have the rest of my page adjusting to different resolutions by putting the content in a div and making the width 100%. I am using CSS and HTML. Any advice is appreciated! Here is my CSS code:

#box {border:0px solid; width:100%; height:400px;position:relative;}
#home {float:left position:relative; top:131px; center:50%; z:index:10;}
#how {float:left position:relative; top:131px; center:50%; z:index:10;}
#why {float:left position:relative; top:131px; center:27.5%; z:index:10;}
#price {float:left position:relative; top:256px; center:-21.75%; z:index:5;}
#contact {float:left position:relative; top:256px; center:6.2%; z:index:5;}

body {
margin: 0;
padding: 0;
font-size: 13px;
color: e0e0c2;
background-color: #E0E0C2;
background-repeat: no-repeat;
background-position: center top;
}

body, th, td, input, textarea, select, option {
text-transform: capitalize;
font-family: Papyrus;
}

h1, h2, h3 {
font-weight: normal;
color: #F8FBEC;
}

h1 {
letter-spacing: normal;
font-size: 3em;
}

h2 {
letter-spacing: -1px;
font-size: 2em;
}

h3 {
font-size: 1em;
}

p, ul, ol {
line-height: normal;
}

blockquote {
padding-left: 1em;
}

blockquote p, blockquote ul, blockquote ol {
line-height: normal;
font-style: italic;
}

a {
}

a:hover {
text-decoration: none;
color: #e0e0c2;
}
img{
border: 0;
}
#wrapper {
}
/* Header */

#header {
width: 760px;
height: 288px;
margin: 0 auto;
background: url(images/img02.jpg) no-repeat right top;
}

#header h1, #header p {
margin: 0;
color: #9CBC1E;
}

#header h1 {
padding: 100px 0 0 70px;
}

#header p {
padding-left: 73px;
margin-top: -10px;
}
#header a {
color: #E6B715;
}

/* Page */

#page {
width: 760px;
margin: 0 auto;
}

/* Content */

#content {
float: right;
width: 470px;
margin: 0;
}

.post {
padding: 0 0 20px 0;
}

.title {
margin: 0;
padding-bottom: 5px;
border-bottom: 2px solid #B7D24D;
}

.byline {
margin: 0;
color: #646464;
}

.meta {
text-align: left;
color: #646464;
padding: 10px 10px;
height: 48px;
background: url(images/img06.gif) no-repeat left top;
}

.meta .more {
padding-left: 20px;
}

.meta .comments {
padding-left: 20px;
}

.meta a {
color: #003300;
}

/* Sidebar */

#sidebar {
float: left;
width: 230px;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

#sidebar li {
}

#sidebar li ul {
padding: 15px 15px;
}

#sidebar li li {
border-bottom: 1px dotted #000000;
padding-left: 15px;
}

#sidebar h2 {
margin: 0;
padding: 10px 0 0 40px;
height: 40px;
background: url(images/img04.gif) no-repeat left 60%;
}

#sidebar a {
text-decoration: none;
}

#sidebar a:hover {
}

/* Footer */

#footer {
clear: both;
width: 760px;
height: 40px;
margin: 0 auto;
padding: 20px 0 0 0;
background: url(images/img05.gif) no-repeat left top;
text-align: center;
font-size: smaller;
color: #52640A;
}

#footer a {
color: #003300;
}

Here is my HTML from the page:

<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Personalized Discount Cards</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">

</style>
</head>
<body>
<div id="Layer8" style="position: absolute; left: 3px; top: 182px; width: 100%; height: 200px; z-index: 14; font-weight: bold">
<div id="box">
<img src="home-button.gif" alt="" name="home" width="180" height="140" id="home" />
<img id="how" alt="" src="how-it-works-button.gif" height="140" width="180" />
<img src="why-it-works-button.gif" alt="" name="why" width="180" height="140" id="why" />
<img src="contact-button.gif" alt="" name="contact" width="180" height="140" id="contact" />
<img id="price" alt="" src="pricing-button.gif" height="140" width="180" /> </div>

</div>
<div id="Layer3" style="position: absolute; left: 0px; top: 611px; width: 100%; height: 472px; z-index: 8">
<CENTER><p class="style30">A <em>Personalized Discount Card</em> features your group or organization logo and/or information on the entire front cover of your personalized card. <br />
The cards of the size of a credit card so it fits conveniently in any wallet. <br />
The cards feature businesses in the area which will offer discounts on products and services to the cardholders. </p>
<p class="style30">The cards are full color and reusable so it offers continuous savings to each cardholder<br />
The <em>Personalized Discount Cards</em> are available in different quantities to meet the needs of your organization, 250, 500, 750, 1000, 1500, 2000 and more. These cards will benefit small organizations to very large organizations. </p>
<p class="style30"> </p>
<p class="style28">That is why we call it PERSONALIZED! </p>
<p class="style29"> </p>
<p> </p>
</CENTER>
<div id="footer">
<p>©2009 Theirdomainname.comAll Rights Reserved  •  Design by <a href="http://www.freecsstemplates.org/"> Huntsdoitall.com </a></p>
</div></div>
<div align="center"></div>
<div class="style31" id="Layer6" style="position: absolute; left: 0px; top: 58px; width: 100%; height: 103px; z-index: 18; vertical-align: middle; font-weight: bold">
<h1 align="center" class="style32">PERSONALIZED </h1>
<h1 align="center" class="style32">Discount Cards</h1>
<h1 align="center" class="style33">Fundraising Opprutunity </h1>
<h1 align="center" class="style33">We Design Your Card For You!! </h1>
</div>
<div id="Layer9" style="position: absolute; left: -12px; top: 0px; width: 100%; height: 284px; z-index: 1; vertical-align: middle; font-weight: bold"><img src="image002.gif" alt="" width="100%" height="278" /></div>

</body>
</html>

Thanks again for your help!
__________________

**LadynRed** · 08-31-2009, 04:07 PM

First of all, you are clearly frankensteining an already good template. Get rid of that hideous <center> tag! It is NOT allowed with XHTML Strict doctype, neither is the "align='center'" you've got stuffed in there. That kind of PRESENTATIONAL stuff belongs in the CSS, as the ORIGINAL template designer had it.

Second, you really shouldn't be using all those divs for navigation, an unordered list is what it really should be.

You also have some incorrect attributes:

Code:

#home  {float:left position:relative; top:131px; center:50%; z:index:10;}

There is no "center", it's left and top, right and bottom - you can't make up your own attributes and expect things to work.

**pmcross** · 08-31-2009, 04:59 PM

Than you for your reply, I included the code that I had changed and didn't realize that it wasn't working at all. Here is the correct code. I agree that the unordered list is the better route, can you tell me though is it possible to have images overlap in a unordered list?

CSS code

#box {border:0px solid; width:100%; height:400px;position:absolute;}
#home {position:absolute; top:131px; left:299px; z:index:10;}
#how {position:absolute; top:131px; left:469px; z:index:5;}
#why {position:absolute; top:131px; left:639px; z:index:5;}
#price {position:absolute; top:256px; left:387px; z:index:5;}
#contact {position:absolute; top:256px; left:555px; z:index:5;}

body {
margin: 0;
padding: 0;
font-size: 13px;
color: e0e0c2;
background-color: #E0E0C2;
background-repeat: no-repeat;
background-position: center top;
}

body, th, td, input, textarea, select, option {
text-transform: capitalize;
font-family: Papyrus;
}

h1, h2, h3 {
font-weight: normal;
color: #F8FBEC;
}

h1 {
letter-spacing: normal;
font-size: 3em;
}

h2 {
letter-spacing: -1px;
font-size: 2em;
}

h3 {
font-size: 1em;
}

p, ul, ol {
line-height: normal;
}

blockquote {
padding-left: 1em;
}

blockquote p, blockquote ul, blockquote ol {
line-height: normal;
font-style: italic;
}

a {
}

a:hover {
text-decoration: none;
color: #e0e0c2;
}
img{
border: 0;
}
#wrapper {
}
/* Header */

#header {
width: 760px;
height: 288px;
margin: 0 auto;
background: url(images/img02.jpg) no-repeat right top;
}

#header h1, #header p {
margin: 0;
color: #9CBC1E;
}

#header h1 {
padding: 100px 0 0 70px;
}

#header p {
padding-left: 73px;
margin-top: -10px;
}
#header a {
color: #E6B715;
}

/* Page */

#page {
width: 760px;
margin: 0 auto;
}

/* Content */

#content {
float: right;
width: 470px;
margin: 0;
}

.post {
padding: 0 0 20px 0;
}

.title {
margin: 0;
padding-bottom: 5px;
border-bottom: 2px solid #B7D24D;
}

.byline {
margin: 0;
color: #646464;
}

.meta {
text-align: left;
color: #646464;
padding: 10px 10px;
height: 48px;
background: url(images/img06.gif) no-repeat left top;
}

.meta .more {
padding-left: 20px;
}

.meta .comments {
padding-left: 20px;
}

.meta a {
color: #003300;
}

/* Sidebar */

#sidebar {
float: left;
width: 230px;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

#sidebar li {
}

#sidebar li ul {
padding: 15px 15px;
}

#sidebar li li {
border-bottom: 1px dotted #000000;
padding-left: 15px;
}

#sidebar h2 {
margin: 0;
padding: 10px 0 0 40px;
height: 40px;
background: url(images/img04.gif) no-repeat left 60%;
}

#sidebar a {
text-decoration: none;
}

#sidebar a:hover {
}

/* Footer */

#footer {
clear: both;
width: 760px;
height: 40px;
margin: 0 auto;
padding: 20px 0 0 0;
background: url(images/img05.gif) no-repeat left top;
text-align: center;
font-size: smaller;
color: #52640A;
}

#footer a {
color: #003300;
}

HTML Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Personalized Discount Cards</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">

</style>
</head>
<body>
<div id="Layer8" style="position: absolute; left: 3px; top: 182px; width: 100%; height: 200px; z-index: 14; font-weight: bold">
<div id="box">
<img src="home-button.gif" alt="" name="home" width="180" height="140" id="home" />
<img id="how" alt="" src="how-it-works-button.gif" height="140" width="180" />
<img src="why-it-works-button.gif" alt="" name="why" width="180" height="140" id="why" />
<img src="contact-button.gif" alt="" name="contact" width="180" height="140" id="contact" />
<img id="price" alt="" src="pricing-button.gif" height="140" width="180" /> </div>

</div>
<div id="Layer3" style="position: absolute; left: 0px; top: 611px; width: 100%; height: 472px; z-index: 8">
<CENTER><p class="style30">A <em>Personalized Discount Card</em> features your group or organization logo and/or information on the entire front cover of your personalized card. <br />
The cards of the size of a credit card so it fits conveniently in any wallet. <br />
The cards feature businesses in the area which will offer discounts on products and services to the cardholders. </p>
<p class="style30">The cards are full color and reusable so it offers continuous savings to each cardholder<br />
The <em>Personalized Discount Cards</em> are available in different quantities to meet the needs of your organization, 250, 500, 750, 1000, 1500, 2000 and more. These cards will benefit small organizations to very large organizations. </p>
<p class="style30"> </p>
<p class="style28">That is why we call it PERSONALIZED! </p>
<p class="style29"> </p>
<p> </p>
</CENTER>
<div id="footer">
<p>©2009 Theirdomainname.comAll Rights Reserved  •  Design by <a href="http://www.freecsstemplates.org/"> Huntsdoitall.com </a></p>
</div></div>
<div align="center"></div>
<div class="style31" id="Layer6" style="position: absolute; left: 0px; top: 58px; width: 100%; height: 103px; z-index: 18; vertical-align: middle; font-weight: bold">
<h1 align="center" class="style32">PERSONALIZED </h1>
<h1 align="center" class="style32">Discount Cards</h1>
<h1 align="center" class="style33">Fundraising Opprutunity </h1>
<h1 align="center" class="style33">We Design Your Card For You!! </h1>
</div>
<div id="Layer9" style="position: absolute; left: -12px; top: 0px; width: 100%; height: 284px; z-index: 1; vertical-align: middle; font-weight: bold"><img src="image002.gif" alt="" width="100%" height="278" /></div>

</body>
</html>

**LadynRed** · 09-01-2009, 10:00 PM

Quote:

is it possible to have images overlap in a unordered list?

Sure, I've done it.. though not intentionally.. lol. You use margin and padding to adjust spacing, and margins can be negative numbers.

**pmcross** · 09-02-2009, 10:40 AM

I have them touching vertically but I can not get them to touch horizontally. Can you please tell me what I need to do to get the two unordered list to touch or overlap horizontally? I am really at a loos with this. Any help is very much appreciated.

CSS Code

Code:

/* Header */

#header {
    width: 100%;
    height: 120px;
    background: url(image002.gif);
    background-repeat: repeat;
    
}


/* Menu */

#menu {
    width: 100%;
    height: 55px;
    padding-top: 13px;
}
ul.HorizontalButtons {
  margin-left: 0px;
  padding-left: 0px;
  
}
ul.HorizontalButtons li {
  display: inline;
  background-color: #;
  border-style: hidden;
  border-width: -7px;
  border-width: -7px;
  margin:  -7px;
  padding: 0px

}
}
ul.HorizontalButtons li a {
  text-decoration: none
}
ul.HorizontalButtons li a:hover {
  background-color: #
}
}
ul.HorizontalButtons2 {
  margin-left: 0px;
  padding-left: 0px;
  
}
ul.HorizontalButtons2 li {
  display: inline;
  background-color: #;
  border-style: hidden;
  border-width: -7px;
  margin:  -7px;
  padding: 0px

}
}
ul.HorizontalButtons2 li a {
  text-decoration: none
}
ul.HorizontalButtons2 li a:hover {
  background-color: #
}
#menu a {
    display: block;
    float: left;
    width: 112px;
    height: 18px;
    padding: 4px 4px 0 4px;
    text-align: center;
    text-decoration: none;
    background: url(images/img05.gif) no-repeat center top;
}

body {
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: e0e0c2;
    background-color: #E0E0C2;
    background-repeat: no-repeat;
    background-position: center top;
}

body, th, td, input, textarea, select, option {
    text-transform: capitalize;
    font-family: Papyrus;
}

h1, h2, h3 {
    font-weight: normal;
    color: #F8FBEC;
}

h1 {
    letter-spacing: normal;
    font-size: 3em;
}

h2 {
    letter-spacing: -1px;
    font-size: 2em;
}

h3 {
    font-size: 1em;
}

p, ul, ol {
    line-height: normal;
}

blockquote {
    padding-left: 1em;
}

blockquote p, blockquote ul, blockquote ol {
    line-height: normal;
    font-style: italic;
}

a {
}

a:hover {
    text-decoration: none;
    color: #e0e0c2;
}
img{
border: 0;
}
#wrapper {
}
/* Header */

#header {
    width: 100%;
    height: 288px;
    background-image: url(image002test.gif);
    background-repeat: repeat-x;
    float: none;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    position: relative;
}



/* Page */

#page {
    width: 760px;
    margin: 0 auto;
}

/* Content */

#content {
    float: right;
    width: 470px;
    margin: 0;
}

.post {
    padding: 0 0 20px 0;
}

.title {
    margin: 0;
    padding-bottom: 5px;
    border-bottom: 2px solid #B7D24D;
}

.byline {
    margin: 0;
    color: #646464;
}

.meta {
    text-align: left;
    color: #646464;
    padding: 10px 10px;
    height: 48px;
    background: url(images/img06.gif) no-repeat left top;
}

.meta .more {
    padding-left: 20px;
}

.meta .comments {
    padding-left: 20px;
}

.meta a {
    color: #003300;
}

/* Sidebar */

#sidebar {
    float: left;
    width: 230px;
}

#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#sidebar li {
}

#sidebar li ul {
    padding: 15px 15px;
}

#sidebar li li {
    border-bottom: 1px dotted #000000;
    padding-left: 15px;
}

#sidebar h2 {
    margin: 0;
    padding: 10px 0 0 40px;
    height: 40px;
    background: url(images/img04.gif) no-repeat left 60%;
}

#sidebar a {
    text-decoration: none;
}

#sidebar a:hover {
}

/* Footer */

#footer {
    clear: both;
    width: 760px;
    height: 40px;
    margin: 0 auto;
    padding: 20px 0 0 0;
    background: url(images/img05.gif) no-repeat left top;
    text-align: center;
    font-size: smaller;
    color: #52640A;
}

#footer a {
    color: #003300;
}

HTML Code

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Personalized Discount Cards</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
<!--
#Layer1 {
    position:absolute;
    width:100%;
    height:190px;
    z-index:1;
    top: 4px;
    left: 14px;
    margin-left: auto;
}
#Layer2 {
    position:absolute;
    width:785px;
    height:215px;
    z-index:2;
    left: 165px;
    top: 56px;
    background-color: #9BBB59;
    margin-left: auto;
}
.style28 {
    color: #76923C;
    font-size: 18px;
    font-weight: bold;
}
.style29 {color: #000000; font-size: 18px; }
.style30 {color: #76923C; font-size: 18px; }
.style34 {
    font-family: "Times New Roman", Times, serif;
    font-size: 36px;
    color: #000000;
}
.style35 {
    font-family: "Times New Roman", Times, serif;
    font-size: 30px;
    color: #000000;
}
-->
</style>
</head>
<body>
<div id="header">

          <h6 align="center">&nbsp;</h6>
          <h6 align="center">&nbsp;</h6>
          <h6 align="center"><span class="style34">PERSONALIZED <br />
          Discount cards</span><br />
            <span class="style35">FUNDRAISING OPPORTUNITY<br />
            We Design your card for you!!</span></h6>
        <h1 align="center" class="style11">&nbsp;</h1>
  </div>
<ul class="HorizontalButtons">
<center><li><img src="home-button.gif" alt="" name="home" width="180" height="140" id="home" /></li>
   <li><a href="How-It-Works.htm"><img id="how" alt="" src="how-it-works-button.gif" height="140" width="180" /></a></li>
   <li><a href="Why-It-Works.htm"><img src="why-it-works-button.gif"alt="" name="why" width="180" height="140" id="why" /></a></li>
   </center></ul>
   <ul class="HorizontalButtons2">
   <CENTER>
   <li><a href="Contact.htm"><img src="contact-button.gif" alt="" name="contact" width="180" height="140" id="contact" /></a></li>
   <li><a href="Pricing.htm"><img id="price" alt="" src="pricing-button.gif" height="140" width="180" /></a></li> 
  </center>
</ul>
</div>
<div id="Layer3" style="position: absolute; left: 0px; top: 611px; width: 100%; height: 472px; z-index: 8">
  <CENTER><p class="style30">A <em>Personalized Discount Card</em> features your group or organization  logo and/or information on the entire front cover of your personalized card. <br />
      The cards of the  size of a credit card so it fits conveniently in any wallet. <br />
      The cards feature businesses in the area which will  offer discounts on products and services to the cardholders.  </p>
    <p class="style30">The cards are full color and reusable so it offers  continuous savings to each cardholder<br />
    The <em>Personalized  Discount Cards</em> are available in different quantities to meet the needs of  your organization, 250, 500, 750, 1000, 1500, 2000 and more.  These cards will benefit small organizations  to very large organizations.  </p>
  <p class="style30">&nbsp;</p>
  <p class="style28">That is why we call it PERSONALIZED! </p>
  <p class="style29">&nbsp;</p>
  <p>&nbsp;</p>
</CENTER>
<div id="footer">
<p>&copy;2009 Theirdomainname.comAll Rights Reserved &nbsp;&bull;&nbsp; Design by <a href="http://www.freecsstemplates.org/"> Huntsdoitall.com </a></p>
</div></div>
<div align="center"></div>
</body>
</html>