Forum Moderators: not2easy
i have paragraphs in 1 set of divs, so i cannot use them to display a background img w/ width and height only to have to set a seperate width and height for the paragraph block.
so i have resorted to using z-indexing w/ an absolute positioned div behind the paragraph that has the background-image i wish to use.
the css is below. if you need the html just let me kno, i avoided pasting it for sake of a shorter post.
/* CSS FILE */
* {
margin:0;
padding:0;
z-index: 2;
}
body {
margin:0px;
padding:0px;
}
p {
font-family:Georgia, Palatino, "Times New Roman", Times, serif;
font-size:10px;
color:#6A8763;
}
ul {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#799c80;
padding-bottom:2em;
list-style:none;
}
/* div properties */
#intro {
width:768px;
margin:1em 0 1em 1em;
}
#pageHeader {
background-image:url(header.gif);
background-repeat:no-repeat;
height:318px;
width:768px;
z-index:1;
position:relative;
top:0;
left:0;
margin:0 0 1em 0;
z-index:1;
}
#pageHeader h1 {
background-image:url(pageHeaderh1.gif);
background-repeat:no-repeat;
height:29px;
}
#pageHeader h1 span {
display:none;
}
#pageHeader h2 {
background-image:url(pageHeaderh2.gif);
background-repeat:no-repeat;
height:21px;
}
#pageHeader h2 span {
display:none;
}
#quickSummary p.p1 {
background-image:url(quicksummaryp1.gif);
background-repeat:no-repeat;
height:41px;
position:absolute;
top:217px;
left:335px;
z-index:2;
}
#quickSummary p.p1 span {
display:none;
}
#quickSummary p.p2 {
position:absolute;
top:994px;
left:574px;
width:164px;
text-align:center;
z-index:2;
}
/* for #preamble bg */
#extraDiv1 {
background-image:url(preamble-bg.gif);
background-repeat:no-repeat;
height:184px;
width:463px;
z-index:1
}
#preamble {
height:160px;
width:463px;
border:1px solid #900;
z-index:2
}
#preamble p {
text-align:justify;
margin:0 0 0 20em;
width:246px;
z-index:2
}
#preamble p.p1 {
padding-top:2em;
z-index:2
}
#preamble h3 {
background-image:url(preambleh3.gif);
background-repeat:no-repeat;
height:38px;
margin:1em 0 0 4.75em;
border:1px solid #900;
}
#preamble h3 span {
display:none;
}
#supportingText {
width:466px;
margin: 0 0 0 1em;
}
/* for #explanation bg */
#extraDiv2 {
background-image:url(explanation-bg.gif);
background-repeat:no-repeat;
height:177px;
width:466px;
z-index:1;
}
#explanation {
width:337px;
height:167px;
z-index:2
}
#explanation h3 {
background-image:url(explanationh3.gif);
background-repeat:no-repeat;
height:34px;
}
#explanation h3 span {
display:none;
}
/* for #participation */
#extraDiv3 {
#participation {
background-image:url(participation-bg.gif);
background-repeat:no-repeat;
height:244px;
width:466px;
position:absolute;
top:502px;
left:29px;
z-index:1;
}
#participation {
background-image:url(participation-bg.gif);
background-repeat:no-repeat;
height:244px;
width:466px;
}
#participation h3 {
background-image:url(participationh3.gif);
background-repeat:no-repeat;
height:22px;
width:138px;
border:1px solid #900;
}
#participation h3 span {
display:none;
border:1px solid #900;
}
#participation p {
width:301px;
padding: 0 1em 1em 1em;
text-align:justify;
}
#participation p.p1 {
padding-top:0;
}
#benefits {
background-image:url(benefits-bg.gif);
background-repeat:no-repeat;
height:91px;
width:466px;
}
#benefits h3 {
background-image:url(benefitsh3.gif);
background-repeat:no-repeat;
height:15px;
}
#benefits h3 span {
display:none;
}
#benefits p {
text-align:justify;
width:466px;
height:66px;
}
#requirements {
background-image:url(requirements-bg.gif);
background-repeat:no-repeat;
height:266px;
width:466px;
}
#requirements h3 {
background-image:url(requirementsh3.gif);
background-repeat:no-repeat;
height:19px;
}
#requirements h3 span {
display:none;
}
#footer {
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
text-transform:uppercase;
background-color:#E2E6D0;
text-align:center;
padding-top:9px;
width:164px;
height:21px;
position:absolute;
top:1024px;
left:574px;
z-index:2;
}
#linkList {
background-image:url(linkList-bg.gif);
background-repeat:no-repeat;
height:722px;
width:176px;
position:absolute;
top:338px;
left:567px;
z-index:1;
}
#lselect h3 {
background-image:url(selecth3.gif);
background-repeat:no-repeat;
height:19px;
}
#lselect h3 span {
display:none;
}
#larchives h3 {
background-image:url(archivesh3.gif);
background-repeat:no-repeat;
height:15px;
}
#larchives h3 span {
display:none;
}
#lresources h3 {
background-image:url(resourcesh3.gif);
background-repeat:no-repeat;
height:15px;
}
#lresources h3 span {
display:none;
}
You seem to have a lot of z-indexing going on. Can you post your html and I'll take a look?
