PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Tue Aug 04, 2020 2:58 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 3 posts ] 
Author Message
PostPosted: Mon Aug 16, 2010 9:51 pm 
Offline
Forum Newbie

Joined: Mon Aug 16, 2010 9:28 pm
Posts: 2
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;
}


Last edited by donmalex on Mon Aug 16, 2010 9:57 pm, edited 1 time in total.

Top
 Profile  
 
PostPosted: Mon Aug 16, 2010 9:56 pm 
Offline
Forum Newbie

Joined: Mon Aug 16, 2010 9:28 pm
Posts: 2
http://www.linda2010.com/landing/ads/ch ... 2god1AnV3w

The above link did not work so I have posted another


Top
 Profile  
 
PostPosted: Mon Sep 06, 2010 2:43 am 
Offline
Forum Newbie

Joined: Mon Sep 06, 2010 2:16 am
Posts: 4
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.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 3 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 12 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group