CSS Watermark or Background & Z-index
Posted: Mon Aug 16, 2010 9:51 pm
I am very new to web design only 4 days exp. I am 75 years old. in years past I programed in Cobal, Fortran, Clipper. but nothing in many years.
I would like to do a site with first page like this.http://www.linda2010.com/landing/ads/ch ... 2god1AnV3w
I like the colors and the Capitol building in background kind of like a watermark. Also the contrasting lights and darks with the rays. I have searched the web and studied the code for above site but some code is not available.
My code is all on my computer no web site as of now. My code is as follows.
Can you give me a better way to make a page like this or help me with what I have so far.
<!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 profile="http://gmpg.org/xfn/11">
<title>CSS Layers, Z-Index, Relative And Absolute Positioning - Onextrapixel</title>
<style type="text/css">
body
{background-image: url('bgimg.gif');background-repeat: no-repeat;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
</div>
<div id="layer1">
<h2> </h2>
<p> <img src="cap1.jpg" alt= "US Capitol" width="991" height="609" /> </p>
<div id="layer2">
<h2> </h2>
<p> <img src="Man-Woman.jpg" alt="Man and Woman" width="" height="" /> </p>
</div>
<div id="layer3">
<h2>Tital layer 3</h2>
<p> Text for 3 goes here </p>
</div>
<div id="layer4">
<h2>Tital layer 4/h2>
<p>Text for 4 goes here </p>
</div>
</div>
</div>
</body>
</html>
<!-- style.css -->
{
border:none;
margin:0;
padding:0;
}
body {
background:#fff;
color: #000;
font:12.35px "Lucida Grande", Arial, Georgia, Verdana, sans-serif;
}
a:link {
color:#0054a6;
text-decoration:none;
}
h1 {
font-size:20px;
margin-bottom:20px;
}
h2 {
font-size:15px;
margin-bottom:5px;
padding:10px 10px 0 10px;
}
#wrap {
margin:10px auto;
width:900px;
}
#header {
margin-bottom:20px;
}
#header a {
color:#0054A6;
}
#header a:hover {
text-decoration:underline;
}
#desc {margin:10px 0;}
p {
padding:10px;
}
/*Z-Index, Relative And Absolute Positioning*/
#layer1
{background:#0FF;
position:relative;
width:0px;
height:0px;
color:#fff;
}
#layer2
{background: #f9ad81;
position:absolute;
top:200px;
left:650px;
width:200px;
height:0px;
color:#fff;
z-index:1;
}
#layer3
{background:#6dcff6;
position:absolute;
top:450px;
left:100px;
width:800px;
height:200px;
color:#fff;
z-index:2;
}
#layer4
{background:#82ca9c;
position:absolute;
background-color:transparent;
top:120px;
left:150px;
width:400px;
height:300px;
color:#fff;
z-index:3;
}
I would like to do a site with first page like this.http://www.linda2010.com/landing/ads/ch ... 2god1AnV3w
I like the colors and the Capitol building in background kind of like a watermark. Also the contrasting lights and darks with the rays. I have searched the web and studied the code for above site but some code is not available.
My code is all on my computer no web site as of now. My code is as follows.
Can you give me a better way to make a page like this or help me with what I have so far.
<!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 profile="http://gmpg.org/xfn/11">
<title>CSS Layers, Z-Index, Relative And Absolute Positioning - Onextrapixel</title>
<style type="text/css">
body
{background-image: url('bgimg.gif');background-repeat: no-repeat;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
</div>
<div id="layer1">
<h2> </h2>
<p> <img src="cap1.jpg" alt= "US Capitol" width="991" height="609" /> </p>
<div id="layer2">
<h2> </h2>
<p> <img src="Man-Woman.jpg" alt="Man and Woman" width="" height="" /> </p>
</div>
<div id="layer3">
<h2>Tital layer 3</h2>
<p> Text for 3 goes here </p>
</div>
<div id="layer4">
<h2>Tital layer 4/h2>
<p>Text for 4 goes here </p>
</div>
</div>
</div>
</body>
</html>
<!-- style.css -->
{
border:none;
margin:0;
padding:0;
}
body {
background:#fff;
color: #000;
font:12.35px "Lucida Grande", Arial, Georgia, Verdana, sans-serif;
}
a:link {
color:#0054a6;
text-decoration:none;
}
h1 {
font-size:20px;
margin-bottom:20px;
}
h2 {
font-size:15px;
margin-bottom:5px;
padding:10px 10px 0 10px;
}
#wrap {
margin:10px auto;
width:900px;
}
#header {
margin-bottom:20px;
}
#header a {
color:#0054A6;
}
#header a:hover {
text-decoration:underline;
}
#desc {margin:10px 0;}
p {
padding:10px;
}
/*Z-Index, Relative And Absolute Positioning*/
#layer1
{background:#0FF;
position:relative;
width:0px;
height:0px;
color:#fff;
}
#layer2
{background: #f9ad81;
position:absolute;
top:200px;
left:650px;
width:200px;
height:0px;
color:#fff;
z-index:1;
}
#layer3
{background:#6dcff6;
position:absolute;
top:450px;
left:100px;
width:800px;
height:200px;
color:#fff;
z-index:2;
}
#layer4
{background:#82ca9c;
position:absolute;
background-color:transparent;
top:120px;
left:150px;
width:400px;
height:300px;
color:#fff;
z-index:3;
}