PDA

View Full Version : Not having much luck


lyssa615
11-21-2007, 02:29 AM
I'm attempting to do my first web page on Dreamweaver but I am getting frustrated. I am trying to use divs for my page layout but it looks terrible when viewed as a web page. For example, 2 layers are supposedly the same height in pixels but when viewed on the web they don't look exactly the same height. If I paste my code here can someome take a look at it and let me know if/how I can improve it? If you need more info from me, please let me know. Thank you!! Here is the page I've been working on,,,,,


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
.lovewisdom { font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 18px;
letter-spacing: .4em;
}
.style3 {color: #0000CC; font-size: 18px;}
.style13 {font-size: large; font-family: Georgia, "Times New Roman", Times, serif;}
.para {
font-family: Georgia, "Times New Roman", Times, serif;
padding-right: .5in;
padding-left: .5in;
}
.welcome {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: large;
text-transform: capitalize;
letter-spacing: .6em;
}
.style14 {
font-family: Georgia, "Times New Roman", Times, serif;
padding-right: 1px;
padding-left: 1px;
}
.style1 { font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
}
#Layer1 {
border-bottom-style: solid;
border-top-color: #330000;
}
#Layer2 {
border-bottom-style: solid;
border-top-color: #330000;
}
</style>
</head>
<body>
<div id="Layer1" style="position: absolute; left: 7px; top: 0px; width: 503px; height: 141px; z-index: 6; background: #CCCCCC; vertical-align: middle">
<div align="center"><img src="croppedlogo.gif" width="447" height="109"></div>
</div>
<div id="Layer2" style="position: absolute; left: 510px; top: 1px; width: 463px; height: 138px; z-index: 2; background: #CCCCCC; text-align: center; vertical-align: middle">sdsds</div>
<div id="Layer3" style="position: absolute; left: 5px; top: 145px; width: 702px; height: 1055px; z-index: 3; background: #FFFFCC">
<p class="welcome">&nbsp;</p>
<blockquote>
<p class="welcome">Welcome to Flowertography, </p>
<p class="style14">where original photographs of beautiful flowers and foliage are used to design note cards and gifts. Included with each photo is the meaning of the flower which simply, yet eloquently, helps you to express your thoughts to someone, whatever the occasion may be. </p>
</blockquote>
<p align="center" class="style3"><img src="hydragnea.JPG" width="244" height="199" alt="hydragnea"></p> <p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
</div>
<div id="Layer4" style="position: absolute; left: 707px; top: 146px; width: 259px; height: 1116px; z-index: 4">google ads go here</div>
<div id="Layer5" style="position: absolute; left: 2px; top: 1200px; width: 705px; height: 61px; z-index: 5; background: #FFFFCC">
<p align="center"><strong>Copyright &copy; 2007 Flowertography.&nbsp; All rights reserved.</strong></p></div>
</body>
</html>

edbr
11-21-2007, 03:16 AM
put alll you layers definitions at least into the head section not on the page ie. #Layer3{
position: absolute; left: 5px; top: 145px; width: 702px; height: 1055px; z-index: 3; background: #FFFFCC;}
that will make it clearer to debug.Which layers are you having problems with?

Cary
11-21-2007, 04:38 AM
I used edbr's advice with your code. Besides that, all I did was make sure #Layer2 had the same "top" and "height" values as #Layer1.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
.lovewisdom {
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 18px;
letter-spacing: .4em;
}

.style3 {
color: #0000CC;
font-size: 18px;
}

.style13 {
font: large Georgia, "Times New Roman", Times, serif;
}

.para {
font-family: Georgia, "Times New Roman", Times, serif;
padding-right: .5in;
padding-left: .5in;
}

.welcome {
text-transform: capitalize;
letter-spacing: .6em;
font: large Georgia, "Times New Roman", Times, serif;
}

.style14 {
font-family: Georgia, "Times New Roman", Times, serif;
padding-right: 1px;
padding-left: 1px;
}

.style1 {
font: 18px Georgia, "Times New Roman", Times, serif;
}

#Layer1 {
border-bottom-style: solid;
border-top-color: #330000;
position: absolute;
left: 7px;
top: 0px;
width: 503px;
height: 141px;
z-index: 6;
background: #CCCCCC;
vertical-align: middle;
}

#Layer2 {
border-bottom-style: solid;
border-top-color: #330000;
position: absolute;
left: 510px;
top: 0px;
width: 463px;
height: 141px;
z-index: 2;
background: #CCCCCC;
text-align: center;
vertical-align: middle;
}

#Layer3 {
position: absolute;
left: 5px;
top: 145px;
width: 702px;
height: 1055px;
z-index: 3;
background: #FFFFCC;
}

#Layer4 {
position: absolute;
left: 707px;
top: 146px;
width: 259px;
height: 1116px;
z-index: 4;
}

#Layer5 {
position: absolute;
left: 2px;
top: 1200px;
width: 705px;
height: 61px;
z-index: 5;
background: #FFFFCC;
}
-->
</style>
</head>
<body>
<div id="Layer1">
<div align="center"><img src="croppedlogo.gif" width="447" height="109"></div>
</div>
<div id="Layer2">sdsds</div>
<div id="Layer3">
<p class="welcome">&nbsp;</p>
<blockquote>
<p class="welcome">Welcome to Flowertography, </p>
<p class="style14">where original photographs of beautiful flowers and foliage are used to design note cards and gifts. Included with each photo is the meaning of the flower which simply, yet eloquently, helps you to express your thoughts to someone, whatever the occasion may be. </p>
</blockquote>
<p align="center" class="style3"><img src="hydragnea.JPG" width="244" height="199" alt="hydragnea"></p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
</div>
<div id="Layer4">google ads go here</div>
<div id="Layer5">
<p align="center"><strong>Copyright &copy; 2007 Flowertography.&nbsp; All rights reserved.</strong></p>
</div>
</body>
</html>