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;
}
CSS Watermark or Background & Z-index
Moderator: General Moderators
CSS Watermark or Background & Z-index
Last edited by donmalex on Mon Aug 16, 2010 9:57 pm, edited 1 time in total.
Re: CSS Watermark or Background & Z-index
http://www.linda2010.com/landing/ads/ch ... 2god1AnV3w
The above link did not work so I have posted another
The above link did not work so I have posted another
-
wangxiaoyu
- Forum Newbie
- Posts: 4
- Joined: Mon Sep 06, 2010 2:16 am
Re: CSS Watermark or Background & Z-index
hi, this is the web page's background image link http://www.linda2010.com/landing/resour ... ground.jpg, which defined in the css of http://www.linda2010.com/landing/resour ... ington.css
you can also use photoshop to create one like it.
you can also use photoshop to create one like it.