PDA

View Full Version : Help with Form Placement


rx7guy
06-20-2011, 11:54 PM
hi

i have built two pages using DW, an INDEX page and a FORM page. They both contain divs. I want to have the FORM page appear in the MAIN CONTENT div of the INDEX page. I got that to work, however the problem is the Form itself does not stay in the Div it is placed in, it floats out under the DIv and on top of other content.

thanks for the help

here is the FORM code:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
body {
}
img {
}
h1 {
}
h2 {
}
h3 {
}

#retailWrapper {
height: 540px;
width: 980px;
}
#retailWrapper #retailHeader {
height: 50px;
width: 980px;
float: left;
}
#retailWrapper #leftImage {
float: left;
margin-top: 10px;
clear: none;
}
#retailWrapper #form {
height: 400px;
width: 680px;
margin-top: 10px;
padding-top: 10px;
float: left;
}
.style1 {font-family: Arial, Helvetica, sans-serif}
.style19 {font-size: 12px}
.style21 {font-size: 16px}
.style23 {color: #000000}
.style25 {color: #FFFFFF}
.style27 {color: #BEBEBE}
.style29 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; }
.style30 {font-size: 14px}
.style31 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; }


-->
</style>
</head>

<body>


<div id="retailWrapper">
<div id="retailHeader"><img src="_Art Files/newRetailerInq.gif" width="980" height="51" /></div>
<div id="leftImage"><img src="_images/_galleryImages/retailDisplay.jpg" width="200" height="480" /></div>
<div id="form">
<form id="form1" name="form1" method="post" action="">
<table width="51%" align="center" cellpadding="8" cellspacing="6">
<tr>
<td width="131"><div align="right" class="style29">
<label for="name">Name:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="name" id="name" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="storeName">Store Name:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="storeName" id="storeName" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="addressLine1">Address Line 1:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="addressLine1" id="addressLine1" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="addressLine2">Address Line 2:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="addressLine2" id="addressLine2" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="city">City:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="city" id="city" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="state">State:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="state" id="state" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="zip">Zip:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="zip" id="zip" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="email">Email:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="email" id="email" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="phone">Phone:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<input type="text" name="phone" id="phone" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="comments">Comments:</label>
</div></td>
<td width="196"><div align="left" class="style31">
<textarea name="comments" rows="4" id="comments"></textarea>
</div></td>
</tr>
<tr>
<td width="131"><div align="right"><span class="style1"><span class="style19"><span class="style21"><span class="style23"><span class="style25"><span class="style27"><span class="style30"></span></span></span></span></span></span></span></div></td>
<td width="196"><div align="left" class="style31">
<input type="checkbox" name="subscribe" id="subscribe" />
<label for="subscribe">Subscribe newsletter</label>
</div></td>
</tr>
<tr>
<td width="131"><div align="right" class="style29">
<label for="reset"></label>
<input type="reset" name="reset" id="reset" value="Reset Form" />
</div></td>
<td width="196"><div align="left" class="style31">
<label for="submit"></label>
<input type="submit" name="submit" id="submit" value="Submit" />
</div></td>
</tr>
<tr>
<td width="131"><div align="right"><span class="style1"><span class="style19"><span class="style21"><span class="style23"><span class="style25"><span class="style27"><span class="style30"></span></span></span></span></span></span></span></div></td>
<td width="196"><div align="left"><span class="style1"><span class="style21"><span class="style30"></span></span></span></div></td>
</tr>
</table>
</form>
</div>
</div>

</body>


</html>





here is the INDEX code:



<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>main paage</title>

<!-- begin -- about us link to main content div script -->

<script type="text/javascript">

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=pag e_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>


<!-- end -- about us link to main content div script -->


<style type="text/css">
<!--
* {
margin: 0px auto;
padding: 0px;
}
body {
}
img {
}
h1 {
}
h2 {
}
h3 {
}
#wrapper {
height: 1050px;
width: 1000px;
background-color: #FFFFFF;
}
#wrapper #brandLogo {
height: 70px;
width: 980px;
background-image: url(_Art%20Files/brandLogo.gif);
margin-top: 10px;
}
#wrapper #siteNav {
height: 35px;
width: 980px;
float: none;
margin-left: 10px;
margin-top: 10px;
}
#wrapper #siteNav #confetti1 {
float: left;
width: 35px;
height: 35px;
background-image: url(_Art%20Files/_siteNav%20buttons/confetti35.gif);
}
#wrapper #siteNav #aboutUs {
float: left;
height: 35px;
width: 117px;
margin-left: 1.2px;
background-image: none;
}
#wrapper #siteNav #contactUs {
float: left;
height: 35px;
width: 117px;
margin-left: 1.1px;
background-image: none;
}
#wrapper #siteNav #retailers {
float: left;
height: 35px;
width: 117px;
margin-left: 1.1px;
}
#wrapper #siteNav #themes {
float: left;
height: 35px;
width: 117px;
margin-left: 1.1px;
}
#wrapper #siteNav #blog {
float: left;
height: 35px;
width: 117px;
margin-left: 1.1px;
}
#wrapper #siteNav #custom {
float: left;
height: 35px;
width: 117px;
margin-left: 1.1px;
}
#wrapper #siteNav #blank {
float: left;
height: 35px;
width: 117px;
margin-left: 1.1px;
}
#wrapper #siteNav #shopNow {
float: left;
height: 35px;
width: 117px;
margin-left: 1.1px;
}
#wrapper #mainContent {
height: 540px;
width: 980px;
float: none;
background-color: #FFFFFF;
margin-top: 10px;
margin-left: 10px;
clear: none;
}
#wrapper #dailyInfo {
height: 35px;
width: 980px;
margin-top: 10px;
margin-left: 10px;
float: none;
background-image: url(_Art%20Files/_siteNav%20buttons/brandText2.gif);
}
#wrapper #gallery {
height: 200px;
width: 980px;
margin-top: 10px;
margin-left: 10px;
}
#wrapper #footer {
height: 35px;
width: 980px;
margin-top: 10px;
margin-left: 10px;
background-color: #FFFFFF;
}
#wrapper #footer #confetti3 {
float: left;
height: 35px;
width: 35px;
background-image: url(_Art%20Files/_siteNav%20buttons/confetti35.gif);
}
#wrapper #footer #footerText {
float: left;
height: 35px;
width: 944px;
line-height: 35px;
text-transform: capitalize;
text-align: center;
color: #FFFFFF;
background-color: #FFFFFF;
background-image: url(_Art%20Files/footerBkgd.gif);
margin-left: 1px;
}
#wrapper #footer2 {
height: 35px;
width: 980px;
margin-top: 10px;
margin-left: 10px;
}
#wrapper #footer2 #confetti4 {
height: 35px;
width: 35px;
float: left;
background-image: url(_Art%20Files/_siteNav%20buttons/confetti35.gif);
}
#wrapper #footer2 #footer2Text {
float: left;
height: 35px;
width: 944px;
line-height: 35px;
text-transform: capitalize;
text-align: center;
color: #FFFFFF;
background-color: #FFFFFF;
background-image: url(_Art%20Files/footerBkgd.gif);
margin-left: 1px;
}
#wrapper #gallery #scene1 {
width: 320px;
height: 200px;
float: left;
}
#wrapper #gallery #scene3 {
float: left;
height: 200px;
width: 320px;
margin-left: 10px;
}
#wrapper #gallery #scene2 {
float: left;
height: 200px;
width: 320px;
margin-left: 10px;
}
-->
</style>
</head>

<body>
<div id="wrapper">
<div id="brandLogo"></div>
<div id="siteNav">
<div id="confetti1"></div>
<div id="aboutUs"><a href="javascript:ajaxpage('aboutUs.html', 'mainContent');">
<img src="_Art Files/_siteNav buttons/aboutUs.gif" alt="about us" width="117" height="35" border="0" /></a></div>

<div id="contactUs"> <h3><a href="javascript:ajaxpage('contactUs.html', 'mainContent');">
<img src="_Art Files/_siteNav buttons/contactUs.gif" alt="contact us" width="117" height="35" border="0" /></a></h3></div>

<div id="retailers"><a href="javascript:ajaxpage('z.html', 'mainContent');">
<img src="_Art Files/_siteNav buttons/retailers.gif" alt="retailers" width="117" height="35" border="0" /></a></div>

<div id="themes"><a href="javascript:ajaxpage('themes.html', 'mainContent');">
<img src="_Art Files/_siteNav buttons/themes.gif" alt="themes" width="117" height="35" border="0" /></a></div>

<div id="blog"><a href="javascript:ajaxpage('blog.html', 'mainContent');">
<img src="_Art Files/_siteNav buttons/blog.gif" alt="blog" width="117" height="35" border="0" /></a></div>

<div id="custom"><a href="javascript:ajaxpage('custom.html', 'mainContent');">
<img src="_Art Files/_siteNav buttons/personalized.gif" alt="personalize" width="117" height="35" border="0" /></a></div>
<div id="blank"><img src="_Art Files/_siteNav buttons/blank.gif" width="117" height="35" border="0" /></div>

<div id="shopNow"><a href="javascript:ajaxpage('shopNow.html', 'mainContent');">
<img src="_Art Files/_siteNav buttons/shopNow.gif" alt="shop now" width="117" height="35" border="0" /></a></div>
</div>
<div id="mainContent">

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
showImage();
// End -->
</script></div>



<div id="dailyInfo"></div>
<div id="gallery">
<div id="scene1"><img src="_images/_galleryImages/baby.jpg" width="320" height="200" /></div>
<div id="scene2"><img src="_images/_galleryImages/movie.jpg" width="320" height="200" /></div>
<div id="scene3"><img src="_images/_galleryImages/wine.jpg" width="320" height="200" /></div>
</div>
<div id="footer">
<div id="confetti3"></div>
<div id="footerText"></div>
</div>
<div id="footer2">
<div id="confetti4"></div>
<div id="footer2Text">copyright 2011</div>
</div>
</div>
</body>

</html>

jmichae3
06-28-2011, 01:13 AM
your comment with the begin -- and end -- won't fly in firefox. use only 1 - instead. example:
<!-- begin - about us link to main content div script -->
...
<!-- end - about us link to main content div script -->

your bustcacheparameter handling is broken because you are using an XML parser and a script element with an & in it and the xml parser is thinking that this is supposed to be a named entity. try it in firefox 5 with firebug pluugin and see. you need to wrap this thing in <[CDATA or whatever that was. see http://www.giantisland.com/Resources/JavaScript_and_CDATA.aspx



if (bustcachevar){ //if bust caching of external page
var d=new Date().getTime();
bustcacheparameter=(-1==url.indexOf("?"))?"?"+d:"&"+d;
}


this is better code, but I doubt the accuracy of anything using timestamps with browsers (which have no set time to respond).

you can do it if you really want to, but I suggest you avoid using filepaths with spaces in it (your images). not all hosting companies accept filepaths with spaces, and some don't like -'s. check your hosting to make sure.

what's with the concentrically nested spans? you could probably do the same with side-by-side spans and have less complexity and easier to edit.

failed validation:
Line 165, Column 77: required attribute "cols" not specified
… <textarea name="comments" rows="4" id="comments"></textarea>

required alt attribute not specified on images.


you effectively disabled your style sheet by commenting it out with HTML comments. no wonder I couldn't get any of my modifications to work.

see my changes to the CSS and HTML. you can use winmerge from http://winmerge.org/ to check out the differences.


<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">

* {
margin: 0px;
padding: 0px;
}
body {
background-color:cyan; /*added by Jim*/
}
img {
}
h1 {
}
h2 {
}
h3 {
}
#form1 {
float:left;/*added by Jim - put this in ONLY if you want your table INSIDE the everything*/
}

#retailWrapper {
width: 980px;
height: 540px;
}
#retailWrapper #retailHeader {
width: 980px;
height: 51px; /*changed by Jim Michaels from 50 to 51 to match image */
float: left;
}
#retailWrapper #leftImage {
float: left;
margin-top: 10px;
clear: none;
}
#retailWrapper #form {
width: 680px;
height: 400px;
margin-top: 10px;
padding-top: 10px;
}
/*
these are essentially unused - Jim Michaels
.style1 {font-family: Arial, Helvetica, sans-serif}
.style19 {font-size: 12px;}
.style21 {font-size: 16px;}
.style23 {color: #000000;}
.style25 {color: #FFFFFF;}
.style27 {color: #BEBEBE;}
*/
.style29 {
font-family: Arial, Helvetica, sans-serif;
width:131px; /*added by Jim*/
font-size: 14px;
color: #000000;
padding-top:0px;
padding-bottom:6px;
padding-left:0px;
padding-right:0px;
vertical-align:top;
text-align:right;
}
/*.style30 {font-size: 14px;}*//* this is essentially unused - Jim Michaels*/
.style31 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
width:196px; /*added by Jim*/
padding-top:0px;
padding-bottom:0px;
padding-left:6px;
padding-right:0px;
vertical-align:top;
text-align:left;
}

</style>
</head>

<body>


<div id="retailWrapper">
<div id="retailHeader"><img alt="_Art Files/newRetailerInq.gif" src="file://c|/www/vancouverwahomelandguide/montana-picnic/i/DSCN0522-retouched.jpg" width="980" height="51" style="background-color:#222;"/></div>
<div id="leftImage"><img alt="_images/_galleryImages/retailDisplay.jpg" src="file://c|/www/vancouverwahomelandguide/montana-picnic/i/DSCN0644-retouched.jpg" width="200" height="480" style="background-color:#555;"/></div>
<div id="form">
<form id="form1" name="form1" method="post" action="form.xhtml">
<table width="350px" align="center" cols="2" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="style29">
<label for="name">Name:</label>
</td>
<td class="style31">
<input type="text" name="name" id="name" />
</td>
</tr>
<tr>
<td class="style29">
<label for="storeName">Store Name:</label>
</td>
<td class="style31">
<input type="text" name="storeName" id="storeName" />
</td>
</tr>
<tr>
<td class="style29">
<label for="addressLine1">Address Line 1:</label>
</td>
<td class="style31">
<input type="text" name="addressLine1" id="addressLine1" />
</td>
</tr>
<tr>
<td class="style29">
<label for="addressLine2">Address Line 2:</label>
</td>
<td class="style31">
<input type="text" name="addressLine2" id="addressLine2" />
</td>
</tr>
<tr>
<td class="style29">
<label for="city">City:</label>
</td>
<td class="style31">
<input type="text" name="city" id="city" />
</td>
</tr>
<tr>
<td class="style29">
<label for="state">State:</label>
</td>
<td class="style31">
<input type="text" name="state" id="state" />
</td>
</tr>
<tr>
<td class="style29">
<label for="zip">Zip:</label>
</td>
<td class="style31">
<input type="text" name="zip" id="zip" />
</td>
</tr>
<tr>
<td class="style29">
<label for="email">Email:</label>
</td>
<td class="style31">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="style29">
<label for="phone">Phone:</label>
</td>
<td class="style31">
<input type="text" name="phone" id="phone" />
</td>
</tr>
<tr>
<td class="style29">
<label for="comments">Comments:</label>
</td>
<td class="style31">
<textarea name="comments" cols="15" rows="4" id="comments"></textarea>
</td>
</tr>
<tr>
<td class="style29"></td>
<td class="style31">
<input type="checkbox" name="subscribe" id="subscribe" />
<label for="subscribe">Subscribe newsletter</label>
</td>
</tr>
<tr>
<td class="style29">
<label for="reset"></label>
<input type="reset" name="reset" id="reset" value="Reset Form" />
</td>
<td class="style31">
<label for="submit"></label>
<input type="submit" name="submit" id="submit" value="Submit" />
</td>
</tr>
<tr>
<td class="style29="></td>
<td class="style31"></td>
</tr>
</table>
</form>
</div>
</div>

</body>


</html>

jmichae3
06-28-2011, 06:13 AM
index page:
last script tag should be type="text/javascript", language attribute is deprecated.
also, remove the line <!-- Begin
and put in the CDATA stuff.

copyright character should be replaced with named entity &copy;

again, remove the comments from the xhtml.
here is your working index.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>main paage</title>

<!-- begin - about us link to main content div script -->

<script type="text/javascript">
/*<![CDATA[*//*---->*/
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest){ // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
} else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){
}
}
} else {
return false
}
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar){ //if bust caching of external page
var d=new Date().getTime();
bustcacheparameter=(-1==url.indexOf("?"))?"?"+d:"&"+d;
}
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (4 == page_request.readyState && (200 == page_request.status || -1 == window.location.href.indexOf("http"))){
document.getElementById(containerid).innerHTML=pag e_request.responseText
}
}

function loadobjs(){
if (!document.getElementById){
return
}
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (-1==loadedobjects.indexOf(file)){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
} else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
/*--*//*]]>*/
</script>


<!-- end - about us link to main content div script -->


<style type="text/css">
* {
margin: 0px auto;
padding: 0px;
}
body {
}
img {
}
h1 {
}
h2 {
}
h3 {
}
#wrapper {
height: 1050px;
width: 1000px;
background-color: #FFFFFF;
}
#wrapper #brandLogo {
height: 70px;
width: 980px;
background-image: url(_Art%20Files/brandLogo.gif);
margin-top: 10px;
}
#wrapper #siteNav {
height: 35px;
width: 980px;
float: none;
margin-left: 10px;
margin-top: 10px;
}
#wrapper #siteNav #confetti1 {
float: left;
width: 35px;
height: 35px;
background-image: url(_Art%20Files/_siteNav%20buttons/confetti35.gif);
}
#wrapper #siteNav #aboutUs {
float: left;
height: 35px;
width: 117px;
margin-left: 1.2px;
background-image: none;
}
#wrapper #siteNav #contactUs {
float: left;
height: 35px;
width: 117px;
margin-left: 1.1px;
background-image: none;
}
#wrapper #siteNav #retailers {
float: left;
height: 35px;
width: 117px;
margin-left: 1.1px;
}
#wrapper #siteNav #themes {
float: left;
height: 35px;
width: 117px;
margin-left: 1.1px;
}
#wrapper #siteNav #blog {
float: left;
height: 35px;
width: 117px;
margin-left: 1.1px;
}
#wrapper #siteNav #custom {
float: left;
height: 35px;
width: 117px;
margin-left: 1.1px;
}
#wrapper #siteNav #blank {
float: left;
height: 35px;
width: 117px;
margin-left: 1.1px;
}
#wrapper #siteNav #shopNow {
float: left;
height: 35px;
width: 117px;
margin-left: 1.1px;
}
#wrapper #mainContent {
height: 540px;
width: 980px;
float: none;
background-color: #FFFFFF;
margin-top: 10px;
margin-left: 10px;
clear: none;
}
#wrapper #dailyInfo {
height: 35px;
width: 980px;
margin-top: 10px;
margin-left: 10px;
float: none;
background-image: url(_Art%20Files/_siteNav%20buttons/brandText2.gif);
}
#wrapper #gallery {
height: 200px;
width: 980px;
margin-top: 10px;
margin-left: 10px;
}
#wrapper #footer {
height: 35px;
width: 980px;
margin-top: 10px;
margin-left: 10px;
background-color: #FFFFFF;
}
#wrapper #footer #confetti3 {
float: left;
height: 35px;
width: 35px;
background-image: url(_Art%20Files/_siteNav%20buttons/confetti35.gif);
}
#wrapper #footer #footerText {
float: left;
height: 35px;
width: 944px;
line-height: 35px;
text-transform: capitalize;
text-align: center;
color: #FFFFFF;
background-color: #FFFFFF;
background-image: url(_Art%20Files/footerBkgd.gif);
margin-left: 1px;
}
#wrapper #footer2 {
height: 35px;
width: 980px;
margin-top: 10px;
margin-left: 10px;
}
#wrapper #footer2 #confetti4 {
height: 35px;
width: 35px;
float: left;
background-image: url(_Art%20Files/_siteNav%20buttons/confetti35.gif);
}
#wrapper #footer2 #footer2Text {
float: left;
height: 35px;
width: 944px;
line-height: 35px;
text-transform: capitalize;
text-align: center;
color: #FFFFFF;
background-color: #FFFFFF;
background-image: url(_Art%20Files/footerBkgd.gif);
margin-left: 1px;
}
#wrapper #gallery #scene1 {
width: 320px;
height: 200px;
float: left;
}
#wrapper #gallery #scene3 {
float: left;
height: 200px;
width: 320px;
margin-left: 10px;
}
#wrapper #gallery #scene2 {
float: left;
height: 200px;
width: 320px;
margin-left: 10px;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="brandLogo"></div>
<div id="siteNav">
<div id="confetti1"></div>
<div id="aboutUs">
<a href="javascript:ajaxpage('aboutUs.html', 'mainContent');">
<img src="_Art Files/_siteNav buttons/aboutUs.gif" alt="about us" width="117" height="35" border="0" />
</a>
</div>

<div id="contactUs">
<h3>
<a href="javascript:ajaxpage('contactUs.html', 'mainContent');">
<img src="_Art Files/_siteNav buttons/contactUs.gif" alt="contact us" width="117" height="35" border="0" />
</a>
</h3>
</div>

<div id="retailers">
<a href="javascript:ajaxpage('z.html', 'mainContent');">
<img src="_Art Files/_siteNav buttons/retailers.gif" alt="retailers" width="117" height="35" border="0" />
</a>
</div>

<div id="themes">
<a href="javascript:ajaxpage('themes.html', 'mainContent');">
<img src="_Art Files/_siteNav buttons/themes.gif" alt="themes" width="117" height="35" border="0" />
</a>
</div>

<div id="blog">
<a href="javascript:ajaxpage('blog.html', 'mainContent');">
<img src="_Art Files/_siteNav buttons/blog.gif" alt="blog" width="117" height="35" border="0" />
</a>
</div>

<div id="custom">
<a href="javascript:ajaxpage('custom.html', 'mainContent');">
<img src="_Art Files/_siteNav buttons/personalized.gif" alt="personalize" width="117" height="35" border="0" />
</a>
</div>


<div id="blank">
<img src="_Art Files/_siteNav buttons/blank.gif" width="117" height="35" border="0" alt="" />
</div>

<div id="shopNow">
<a href="javascript:ajaxpage('shopNow.html', 'mainContent');">
<img src="_Art Files/_siteNav buttons/shopNow.gif" alt="shop now" width="117" height="35" border="0" />
</a>
</div>
</div>
<div id="mainContent">

<script type="text/javascript">
/*<![CDATA[*//*---->*/

showImage();
/*--*//*]]>*/
</script></div>



<div id="dailyInfo"></div>
<div id="gallery">
<div id="scene1"><img src="_images/_galleryImages/baby.jpg" width="320" height="200" alt="" /></div>
<div id="scene2"><img src="_images/_galleryImages/movie.jpg" width="320" height="200" alt="" /></div>
<div id="scene3"><img src="_images/_galleryImages/wine.jpg" width="320" height="200" alt="" /></div>
</div>
<div id="footer">
<div id="confetti3"></div>
<div id="footerText"></div>
</div>
<div id="footer2">
<div id="confetti4"></div>
<div id="footer2Text">copyright &copy; 2011</div>
</div>
</div>
</body>

</html>

rx7guy
06-30-2011, 12:47 PM
jmichae3 (http://www.dreamweaverclub.com/forum/member.php?u=30537) - thank you!