Div shifting down page in live view
I'm trying to create a website for a project I'm doing.I'm having a problem in live view where I the div with the id "imageholder" keeps shifting down the page. It looks fine in the editor but the browser and live view not so much. I want it to line up with the top div, not the bottom one.
Another problem I'm having is that I can't adjust the footers margin very well. it's not taking into account the div's directly above it. I've included a screenshot of the page as it hasn't been uploaded online yet. Thanks
Here is the code:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link href="CSS/Project.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-color: #E0EEEE;
</style>
</head>
<body>
<div id="container">
<header>
<h1 id="title">Limerick Running Club</h1>
<h2 class="subhead"><strong>L.R.C</strong></h2>
</header>
<br/>
<nav>
<nav id="nav_centre">
<ul>
<li><a href="#">Home</a></li>
<li></li>
<li><a href="#">History</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Results</a></li>
<li><a href="#">Useful Links</a></li>
<li><a href="#">Contact Us</a></li>
</ul><br/>
</nav>
</nav>
<section>
<h2 >History</h2>
<article></article>
<article class="mainpara">
<p>The limerick running club was founded in 2008. We are a community funded club with the sole aim of helping to make our community fitter and happier. Our main office is based in castletroy and you are welcome to drop in anytime and join up. </p>
<p>Since the LRC was founded we have had a number of members who have shared with us their feeling about joining the club. </p>
<p>You can read more about what their saying below</p>
</article>
<article id="testimonial"><h3>Member Testimonials</h3><h3 class="Name">John Byrne</h3>
<p>Since joining the LRC my health and fitness has improved greatly. I recommended the club to everyone.</p>
<h3 class="Name">Mary Smith</h3>
<p>I'm delighted I joined the LRC. I feel much fitter and healthier since joining and there is a great sense of community surrounding the club.</p>
<h3 class="Name">Tom Ryan</h3>
<p>Really enjoying my runs with the lRC. I'd recommend joining to anyone.</p>
</article>
</section>
<div id="imageholder"><img src="Images/edited.jpg" width="355" height="266" alt=""/></div>
<footer><span id="copyright">©2015 Limerick Running Club</span></footer>
</div>
</body>
</html>
CSS:
@charset "utf-8";
html{
background-color:#E0EEEE;
header{
width:100%;
nav {
width 100%;
height 55px;
#nav_centre {
text-align: center;
width: 1080px;
margin-right: auto;
margin-left: auto;
border-color: #4683ea;
border-style: solid;
border-radius: 12px;
padding-bottom: 15px;
padding-top: 0px;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-size: small;
background-color:#4683ea;
nav ul{
list-style:none;
nav a{
display:inline;
float:left;
text-decoration:none;
font-weight:bold;
padding-top: 5px;
padding-bottom:5px;
padding-right: 45px;
padding-left: 45px;
height: 20px;
color:#CCC;
header {
text-align: center;
#container {
width: 1080px;
margin-left: auto;
margin-right: auto;
footer {
margin-top: 600px;
text-align: center;
height: 50px;
clear: both;
padding-top: 25px;
#copyright{
color:#a6a6a6;
article {
margin-top: 20px;
width: 650px;
margin-left: 5px;
margin-right: 0px;
#imageholder {
width: 360px;
float: right;
clear: none;
margin-top: 20px;
margin-right: 5px;
padding-right: 5px;
.mainpara {
float: left;
border-color: #4683ea;
border-style: solid;
border-radius: 12px;
padding-left: 5px;
background-color: #F0F0F0;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
width: 600px;
section {
margin-top: 75px;
left: 5px;
h1{
color:#4683ea;
#title{
font-weight: bold;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
color:#FFA500;
.subhead{
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
h2{
letter-spacing: 2px;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
#testimonial {
float: left;
border-color: #4683ea;
border-style: solid;
border-radius: 12px;
padding-left: 5px;
background-color: #F0F0F0;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
padding-right: 5px;
width: 600px;
clear: both;
.Name {
color:#FFA500;
Try this -
<article class="mainpara">
<div id="imageholder"><img src="Images/edited.jpg" width="355" height="266" alt=""/></div>
<p>The limerick running club was founded in 2008. We are a community funded club with the sole aim of helping to make our community fitter and happier. Our main office is based in castletroy and you are welcome to drop in anytime and join up. </p>
<p>Since the LRC was founded we have had a number of members who have shared with us their feeling about joining the club. </p>
<p>You can read more about what their saying below</p>
</article>
Move the imageholder div so that it is the first child of the "mainpara" article.
Also, you probably want "...what they're saying below" in that last paragraph above. Finally, why do you have a nested <nav> tag in your code?
Similar Messages
-
Trouble viewing pages in live view and preview in browser
I am currently using Dreamweaver CS4 on windows XP. I was able to view all my pages in live view and I was able to preview them in Firefox and Internet Explorer. I changed a CSS setting on the page, and when I went to view it nothing showed up. I only got a white screen. I undid everything that I did, try to preview it again and it still wouldn't show up. I tried to preview other files, some show up other don't. I've tried to rename the file, put it in another folder, restarted Dreamweaver and restarted the computer. Nothing is working. Any help would be appreciated.
Sorry here is the code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>NES Group-Bank and Credit Union Design, Project Management, Consulting</title>
<style type="text/css">
<!--
body {
background-image: url();
tr td strong {
font-size: 9px;
font-family: Verdana, Geneva, sans-serif;
text-align: left;
text-indent: 0;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
padding: 0px;
height: auto;
width: auto;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
#Table_01 tr td strong font .small {
text-align: left;
-->
</style><head><TITLE>NES Group</TITLE>
<meta name="Keywords" CONTENT="NES Group, New England Security, bank products Massachusetts, Rhode Island, New Hampshire, Connecticut, Maine, Vermont, nesgroup, bank, credit union, drive up, drive-up, montegonet, bank equipment, bank design, tech centers, consulting, Space Programming, Cost Projections, Site Design, Planning, Project Management, Refurbished, New Construction, Construction Scheduling, Construction Documentation, Interior Design, Marketing, Merchandising, Supermarket Banking, Alternative Banking Facilities, Design Development, Market Studies, Project Coordination, Strategic Planning Site Selections, Negotiations, Permit Consulting, Demographic Analysis, ATM Security Surveys, ADA Handicap Compliance, Bank Applications, Feasibility Studies, Retail Site Locations">
<meta name="Description" CONTENT="NES Group is a leader in providing all aspects of bank design and project management for your new or existing facilities. The services we provide range from site acquisition, space planning, and construction through bank products and furnishings.
NES Group has been serving the financial industry, exclusively, offering its old-fashioned values of commitment and customer satisfaction for over thirty years. One Source... One Company... Working together for the future.">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- www.hitslink.com/ web tools statistics hit counter code -->
<script type="text/javascript">//<![CDATA[
var data,nhp,ntz,rf,sr,i,d=new Date(),pageName;
// The pageName variable can be customized if needed
pageName=location.pathname;
document.cookie='__support_check=1';nhp='http';
rf=document.referrer;sr=window.location.search;
if(top.window.location==document.referrer
|| (document.referrer == '' && top.window.location != ''))
{rf=top.document.referrer;sr=top.window.location.search}
ntz=new Date();if(location.href.substr(0,6).toLowerCase()=='https:')
nhp='https';data='&an='+escape(navigator.appName)+
'&sr='+escape(sr)+'&ck='+document.cookie.length+
'&rf='+escape(rf)+'&sl='+escape(navigator.systemLanguage)+
'&av='+escape(navigator.appVersion)+'&l='+escape(navigator.language)+
'&pf='+escape(navigator.platform)+'&pg='+escape(pageName);
if(navigator.appVersion.substring(0,1)>'3') {data=data+'&cd='+
screen.colorDepth+'&rs='+escape(screen.width+ ' x '+screen.height)+
'&tz='+ntz.getTimezoneOffset()+'&je='+ navigator.javaEnabled()};
i=new Image();i.src=nhp+'://counter.hitslink.com/statistics.asp'+
'?v=1&s=1&acct=ChrissyPDQ'+data+'&tks='+d.getTime(); //]]>
</script>
<!-- End www.hitslink.com/ statistics web tools hit counter code -->
<script language="JavaScript">
<!--
<!--
<!--
<!--
<!--
<!--
<!--
<!--
<!--
<!--
<!--
<!--
<!--
<!--
<!--
<!--
<!--
<!--
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
//-->
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
//-->
function mmLoadMenus() {
if (window.mm_menu_0214163523_0) return;
window.mm_menu_0214163523_0 = new Menu("root",90,18,"Arial, Helvetica, sans-serif",10,"#ffffff","#000000","#990033","#cccccc","left","middle",3,0,1000,-5,7,true ,true,true,0,false,false);
mm_menu_0214163523_0.addMenuItem("Who We Are","window.open('http://www.nes-group.com/Whoweare.htm', '_self');");
mm_menu_0214163523_0.addMenuItem("Our Services","window.open('http://www.nes-group.com/Ourservices.htm', '_self');");
mm_menu_0214163523_0.fontWeight="bold";
mm_menu_0214163523_0.hideOnMouseOut=true;
mm_menu_0214163523_0.menuBorder=0;
mm_menu_0214163523_0.menuLiteBgColor='#ffffff';
mm_menu_0214163523_0.menuBorderBgColor='#555555';
mm_menu_0214163523_0.bgColor='#555555';
window.mm_menu_0214163523_1 = new Menu("root",151,18,"Arial, Helvetica, sans-serif",10,"#ffffff","#000000","#990033","#cccccc","left","middle",3,0,1000,-5,7,true ,true,true,0,false,false);
mm_menu_0214163523_1.addMenuItem("Project Approach","window.open('http://www.nes-group.com/projectapproach.htm', '_self');");
mm_menu_0214163523_1.addMenuItem("5 Steps to Success","window.open('http://www.nes-group.com/5steps.htm', '_self');");
mm_menu_0214163523_1.addMenuItem("Market Studies/Site Analysis","window.open('http://www.nes-group.com/marketstudies.htm', '_self');");
mm_menu_0214163523_1.fontWeight="bold";
mm_menu_0214163523_1.hideOnMouseOut=true;
mm_menu_0214163523_1.menuBorder=0;
mm_menu_0214163523_1.menuLiteBgColor='#ffffff';
mm_menu_0214163523_1.menuBorderBgColor='#555555';
mm_menu_0214163523_1.bgColor='#555555';
window.mm_menu_0214163523_2 = new Menu("root",179,18,"Arial, Helvetica, sans-serif",10,"#ffffff","#000000","#990033","#cccccc","left","middle",3,0,1000,-5,7,true ,true,true,0,false,false);
mm_menu_0214163523_2.addMenuItem("Main Offices & Operations Centers","window.open('http://www.nes-group.com/mainoffices.htm', '_self');");
mm_menu_0214163523_2.addMenuItem("Branch Offices","window.open('http://www.nes-group.com/branches.htm', '_self');");
mm_menu_0214163523_2.addMenuItem("Alternative Branches","window.open('http://www.nes-group.com/alternativebranches.htm', '_self');");
mm_menu_0214163523_2.fontWeight="bold";
mm_menu_0214163523_2.hideOnMouseOut=true;
mm_menu_0214163523_2.menuBorder=0;
mm_menu_0214163523_2.menuLiteBgColor='#ffffff';
mm_menu_0214163523_2.menuBorderBgColor='#555555';
mm_menu_0214163523_2.bgColor='#555555';
window.mm_menu_0214163523_3 = new Menu("root",130,18,"Arial, Helvetica, sans-serif",10,"#ffffff","#000000","#990033","#cccccc","left","middle",3,0,1000,-5,7,true ,true,true,0,false,false);
mm_menu_0214163523_3.addMenuItem("What Is a Brand?","window.open('http://www.nes-group.com/whatisabrand.htm', '_self');");
mm_menu_0214163523_3.addMenuItem("Merchandising Products","window.open('http://www.nes-group.com/merchandisingproducts.htm', '_self');");
mm_menu_0214163523_3.fontWeight="bold";
mm_menu_0214163523_3.hideOnMouseOut=true;
mm_menu_0214163523_3.menuBorder=0;
mm_menu_0214163523_3.menuLiteBgColor='#ffffff';
mm_menu_0214163523_3.menuBorderBgColor='#555555';
mm_menu_0214163523_3.bgColor='#555555';
window.mm_menu_0214163523_4 = new Menu("root",120,18,"Arial, Helvetica, sans-serif",10,"#ffffff","#000000","#990033","#cccccc","left","middle",3,0,1000,-5,7,true ,true,true,0,false,false);
mm_menu_0214163523_4.addMenuItem("Satisfied Customers","window.open('http://www.nes-group.com/customerssay.htm', '_self');");
mm_menu_0214163523_4.addMenuItem("Awards","window.open('http://www.nes-group.com/awards.htm', '_self');");
mm_menu_0214163523_4.fontWeight="bold";
mm_menu_0214163523_4.hideOnMouseOut=true;
mm_menu_0214163523_4.menuBorder=0;
mm_menu_0214163523_4.menuLiteBgColor='#ffffff';
mm_menu_0214163523_4.menuBorderBgColor='#555555';
mm_menu_0214163523_4.bgColor='#555555';
window.mm_menu_0214163523_5 = new Menu("root",151,18,"Arial, Helvetica, sans-serif",10,"#ffffff","#000000","#990033","#cccccc","left","middle",3,0,1000,-5,7,true ,true,true,0,false,false);
mm_menu_0214163523_5.addMenuItem("Projects In Progress","window.open('http://www.nes-group.com/projectsinprogress.htm', '_self');");
mm_menu_0214163523_5.addMenuItem("Recently Completed Projects","window.open('http://www.nes-group.com/recentlycompleted.htm', '_self');");
mm_menu_0214163523_5.addMenuItem("News & Events","window.open('http://www.nes-group.com/news.htm', '_self');");
mm_menu_0214163523_5.fontWeight="bold";
mm_menu_0214163523_5.hideOnMouseOut=true;
mm_menu_0214163523_5.menuBorder=0;
mm_menu_0214163523_5.menuLiteBgColor='#ffffff';
mm_menu_0214163523_5.menuBorderBgColor='#555555';
mm_menu_0214163523_5.bgColor='#555555';
window.mm_menu_0214163523_6 = new Menu("root",151,18,"Arial, Helvetica, sans-serif",10,"#ffffff","#000000","#990033","#cccccc","left","middle",3,0,1000,-5,7,true ,true,true,0,false,false);
mm_menu_0214163523_6.addMenuItem("E-Mail Us","window.open('http://www.nes-group.com/emailus.htm', '_self');");
mm_menu_0214163523_6.addMenuItem("Employment Opportunities","window.open('http://www.nes-group.com/employment.htm', '_self');");
mm_menu_0214163523_6.addMenuItem("Directions","window.open('http://www.nes-group.com/directions.htm', '_self');");
mm_menu_0214163523_6.fontWeight="bold";
mm_menu_0214163523_6.hideOnMouseOut=true;
mm_menu_0214163523_6.menuBorder=0;
mm_menu_0214163523_6.menuLiteBgColor='#ffffff';
mm_menu_0214163523_6.menuBorderBgColor='#555555';
mm_menu_0214163523_6.bgColor='#555555';
mm_menu_0214163523_6.writeMenus();
} // mmLoadMenus()
//-->
</script>
<script language="JavaScript1.2" src="mm_menu.js"></script>
<link href="Images/homepagetext.css" rel="stylesheet" type="text/css">
</head>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-9171796-1");
pageTracker._trackPageview();
} catch(err) {}</script>
<body topmargin="0" onLoad="MM_preloadImages('MenuImages/BankNewportmenu_r2_c2_f2.jpg','MenuImages/BankNewpor tmenu_r2_c4_f2.jpg','MenuImages/BankNewportmenu_r2_c6_f2.jpg','MenuImages/BankNewportmenu_ r2_c8_f2.jpg','MenuImages/BankNewportmenu_r2_c10_f2.jpg','MenuImages/BankNewportmenu_r2_c1 2_f2.jpg','MenuImages/BankNewportmenu_r2_c14_f2.jpg');">
<table width="766" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="766"> <table border="0" cellpadding="0" cellspacing="0" width="766">
<!-- fwtable fwsrc="BankNewport_.png" fwbase="BankNewportmenu.jpg" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" -->
<tr>
<td width="19"><img src="MenuImages/spacer.gif" width="19" height="1" border="0" alt=""></td>
<td width="44"><img src="MenuImages/spacer.gif" width="44" height="1" border="0" alt=""></td>
<td width="35"><img src="MenuImages/spacer.gif" width="35" height="1" border="0" alt=""></td>
<td width="52"><img src="MenuImages/spacer.gif" width="52" height="1" border="0" alt=""></td>
<td width="36"><img src="MenuImages/spacer.gif" width="36" height="1" border="0" alt=""></td>
<td width="65"><img src="MenuImages/spacer.gif" width="65" height="1" border="0" alt=""></td>
<td width="32"><img src="MenuImages/spacer.gif" width="32" height="1" border="0" alt=""></td>
<td width="110"><img src="MenuImages/spacer.gif" width="110" height="1" border="0" alt=""></td>
<td width="34"><img src="MenuImages/spacer.gif" width="34" height="1" border="0" alt=""></td>
<td width="80"><img src="MenuImages/spacer.gif" width="80" height="1" border="0" alt=""></td>
<td width="31"><img src="MenuImages/spacer.gif" width="31" height="1" border="0" alt=""></td>
<td width="98"><img src="MenuImages/spacer.gif" width="98" height="1" border="0" alt=""></td>
<td width="29"><img src="MenuImages/spacer.gif" width="29" height="1" border="0" alt=""></td>
<td width="86"><img src="MenuImages/spacer.gif" width="86" height="1" border="0" alt=""></td>
<td width="14"><img src="MenuImages/spacer.gif" width="14" height="1" border="0" alt=""></td>
<td width="10"><img src="MenuImages/spacer.gif" width="1" height="1" border="0" alt=""></td>
</tr>
<tr>
<td colspan="15" rowspan="5">
<script language="JavaScript1.2">mmLoadMenus();</script>
<table border="0" cellpadding="0" cellspacing="0" width="766">
<!-- fwtable fwsrc="BankNewportmenu.png" fwbase="BankNewportmenu.jpg" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" -->
<tr>
<td width="12"><img src="MenuImages/spacer.gif" width="12" height="1" border="0" alt=""></td>
<td width="44"><img src="MenuImages/spacer.gif" width="44" height="1" border="0" alt=""></td>
<td width="25"><img src="MenuImages/spacer.gif" width="25" height="1" border="0" alt=""></td>
<td width="52"><img src="MenuImages/spacer.gif" width="52" height="1" border="0" alt=""></td>
<td width="28"><img src="MenuImages/spacer.gif" width="28" height="1" border="0" alt=""></td>
<td width="65"><img src="MenuImages/spacer.gif" width="65" height="1" border="0" alt=""></td>
<td width="29"><img src="MenuImages/spacer.gif" width="29" height="1" border="0" alt=""></td>
<td width="110"><img src="MenuImages/spacer.gif" width="110" height="1" border="0" alt=""></td>
<td width="30"><img src="MenuImages/spacer.gif" width="30" height="1" border="0" alt=""></td>
<td width="115"><img src="MenuImages/spacer.gif" width="115" height="1" border="0" alt=""></td>
<td width="29"><img src="MenuImages/spacer.gif" width="29" height="1" border="0" alt=""></td>
<td width="98"><img src="MenuImages/spacer.gif" width="98" height="1" border="0" alt=""></td>
<td width="29"><img src="MenuImages/spacer.gif" width="29" height="1" border="0" alt=""></td>
<td width="86"><img src="MenuImages/spacer.gif" width="86" height="1" border="0" alt=""></td>
<td width="13"><img src="MenuImages/spacer.gif" width="13" height="1" border="0" alt=""></td>
<td width="10"><img src="MenuImages/spacer.gif" width="1" height="1" border="0" alt=""></td>
</tr>
<tr>
<td colspan="15"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="765" height="168">
<param name="movie" value="FlashOnMenu/Flash2009/BankNewport2Flash2009.swf">
<param name="quality" value="high">
<embed src="FlashOnMenu/Flash2009/BankNewport2Flash2009.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="765" height="168"></embed>
</object></td>
<td><img src="MenuImages/spacer.gif" width="1" height="112" border="0" alt=""></td>
</tr>
<tr>
<td rowspan="4"><img name="BankNewportmenu_r2_c1" src="MenuImages/BankNewportmenu_r2_c1.jpg" width="12" height="78" border="0" alt=""></td>
<td><a href="#" target="_self" onMouseOut="MM_swapImgRestore();MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0214163523_0,0,22,null,'BankNewportmenu_r2_c2');M M_swapImage('BankNewportmenu_r2_c2','','MenuImages/BankNewportmenu_r2_c2_f2.jpg',1);"><img name="BankNewportmenu_r2_c2" src="MenuImages/BankNewportmenu_r2_c2.jpg" width="44" height="14" border="0" alt=""></a></td>
<td rowspan="4"><img name="BankNewportmenu_r2_c3" src="MenuImages/BankNewportmenu_r2_c3.jpg" width="25" height="78" border="0" alt=""></td>
<td rowspan="3"><a href="#" onMouseOut="MM_swapImgRestore();MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0214163523_1,0,22,null,'BankNewportmenu_r2_c4');M M_swapImage('BankNewportmenu_r2_c4','','MenuImages/BankNewportmenu_r2_c4_f2.jpg',1);"><img name="BankNewportmenu_r2_c4" src="MenuImages/BankNewportmenu_r2_c4.jpg" width="52" height="17" border="0" alt=""></a></td>
<td rowspan="4"><img name="BankNewportmenu_r2_c5" src="MenuImages/BankNewportmenu_r2_c5.jpg" width="28" height="78" border="0" alt=""></td>
<td><a href="#" onMouseOut="MM_swapImgRestore();MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0214163523_2,0,22,null,'BankNewportmenu_r2_c6');M M_swapImage('BankNewportmenu_r2_c6','','MenuImages/BankNewportmenu_r2_c6_f2.jpg',1);"><img name="BankNewportmenu_r2_c6" src="MenuImages/BankNewportmenu_r2_c6.jpg" width="65" height="14" border="0" alt=""></a></td>
<td rowspan="4"><img name="BankNewportmenu_r2_c7" src="MenuImages/BankNewportmenu_r2_c7.jpg" width="29" height="78" border="0" alt=""></td>
<td rowspan="3"><a href="#" onMouseOut="MM_swapImgRestore();MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0214163523_3,0,22,null,'BankNewportmenu_r2_c8');M M_swapImage('BankNewportmenu_r2_c8','','MenuImages/BankNewportmenu_r2_c8_f2.jpg',1);"><img name="BankNewportmenu_r2_c8" src="MenuImages/BankNewportmenu_r2_c8.jpg" width="110" height="17" border="0" alt=""></a></td>
<td rowspan="4"><img name="BankNewportmenu_r2_c9" src="MenuImages/BankNewportmenu_r2_c9.jpg" width="30" height="78" border="0" alt=""></td>
<td rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore();MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0214163523_4,0,22,null,'BankNewportmenu_r2_c10'); MM_swapImage('BankNewportmenu_r2_c10','','MenuImages/BankNewportmenu_r2_c10_f2.jpg',1);">< img name="BankNewportmenu_r2_c10" src="MenuImages/BankNewportmenu_r2_c10.jpg" width="115" height="15" border="0" alt=""></a></td>
<td rowspan="4"><img name="BankNewportmenu_r2_c11" src="MenuImages/BankNewportmenu_r2_c11.jpg" width="29" height="78" border="0" alt=""></td>
<td rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore();MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0214163523_5,0,22,null,'BankNewportmenu_r2_c12'); MM_swapImage('BankNewportmenu_r2_c12','','MenuImages/BankNewportmenu_r2_c12_f2.jpg',1);">< img name="BankNewportmenu_r2_c12" src="MenuImages/BankNewportmenu_r2_c12.jpg" width="98" height="15" border="0" alt=""></a></td>
<td rowspan="4"><img name="BankNewportmenu_r2_c13" src="MenuImages/BankNewportmenu_r2_c13.jpg" width="29" height="78" border="0" alt=""></td>
<td rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore();MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0214163523_6,0,22,null,'BankNewportmenu_r2_c14'); MM_swapImage('BankNewportmenu_r2_c14','','MenuImages/BankNewportmenu_r2_c14_f2.jpg',1);">< img name="BankNewportmenu_r2_c14" src="MenuImages/BankNewportmenu_r2_c14.jpg" width="86" height="15" border="0" alt=""></a></td>
<td rowspan="4"><img name="BankNewportmenu_r2_c15" src="MenuImages/BankNewportmenu_r2_c15.jpg" width="13" height="78" border="0" alt=""></td>
<td><img src="MenuImages/spacer.gif" width="1" height="14" border="0" alt=""></td>
</tr>
<tr>
<td rowspan="3"><img name="BankNewportmenu_r3_c2" src="MenuImages/BankNewportmenu_r3_c2.jpg" width="44" height="64" border="0" alt=""></td>
<td rowspan="3"><img name="BankNewportmenu_r3_c6" src="MenuImages/BankNewportmenu_r3_c6.jpg" width="65" height="64" border="0" alt=""></td>
<td><img src="MenuImages/spacer.gif" width="1" height="1" border="0" alt=""></td>
</tr>
<tr>
<td rowspan="2"><img name="BankNewportmenu_r4_c10" src="MenuImages/BankNewportmenu_r4_c10.jpg" width="115" height="63" border="0" alt=""></td>
<td rowspan="2"><img name="BankNewportmenu_r4_c12" src="MenuImages/BankNewportmenu_r4_c12.jpg" width="98" height="63" border="0" alt=""></td>
<td rowspan="2"><img name="BankNewportmenu_r4_c14" src="MenuImages/BankNewportmenu_r4_c14.jpg" width="86" height="63" border="0" alt=""></td>
<td><img src="MenuImages/spacer.gif" width="1" height="2" border="0" alt=""></td>
</tr>
<tr>
<td><img name="BankNewportmenu_r5_c4" src="MenuImages/BankNewportmenu_r5_c4.jpg" width="52" height="61" border="0" alt=""></td>
<td><img name="BankNewportmenu_r5_c8" src="MenuImages/BankNewportmenu_r5_c8.jpg" width="110" height="61" border="0" alt=""></td>
<td><img src="MenuImages/spacer.gif" width="1" height="61" border="0" alt=""></td>
</tr>
</table></td>
<td><img src="MenuImages/spacer.gif" width="1" height="112" border="0" alt=""></td>
</tr>
<tr>
<td><img src="MenuImages/spacer.gif" width="1" height="14" border="0" alt=""></td>
</tr>
<tr>
<td><img src="MenuImages/spacer.gif" width="1" height="1" border="0" alt=""></td>
</tr>
<tr>
<td><img src="MenuImages/spacer.gif" width="1" height="2" border="0" alt=""></td>
</tr>
<tr>
<td><img src="MenuImages/spacer.gif" width="1" height="61" border="0" alt=""></td>
</tr>
</table>
</td></tr>
<tr>
<td><table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="765" height="36" bgcolor="#FFFFFF"><img src="Images/line_whoweare_t.gif" width="765" height="36" align="texttop"></td>
</tr>
<tr>
<td height="550"><div align="center">
<table id="Table_01" width="765" height="572" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="47"><img src="MenuImages/whoweare/images/images/images/wwr1110_01_01.jpg" width="24" height="47"></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_02.jpg" width="160" height="47"></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_03.jpg" width="167" height="47"></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_04.jpg" width="151" height="47"></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_05.jpg" width="259" height="47"></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_06.jpg" width="6" height="47"></td>
</tr>
<tr>
<td height="145"><img src="MenuImages/whoweare/images/images/images/wwr1110_01_07.jpg" width="24" height="145"></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_08.jpg" width="160" height="145"></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_09.jpg" width="167" height="145"></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_10.jpg" width="151" height="145"></td>
<td background="MenuImages/whoweare/images/images/images/wwr1110_01_11.jpg"><font color="#660000" size="3" face="Verdana, Arial, Helvetica, sans-serif"><strong>NES
Group</strong></font><strong><font size="1" face="Verdana, Arial, Helvetica, sans-serif"> is a leader in providing all aspects <br>
of bank design and
project management for your new or existing facilities. <br>
<br>
The services we provide range from site <br>
acquisition, space planning,
and construction through bank products and furnishings<br>
<br>
</font><font size="1">One Source... One Company... Working together
<br>
for the future.</font><font size="1" face="Verdana, Arial, Helvetica, sans-serif"> </font></strong></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_12.jpg" width="6" height="145"></td>
</tr>
<tr>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_13.jpg" width="24" height="119"></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_14.jpg" width="160" height="119"></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_15.jpg" width="167" height="119"></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_16.jpg" width="151" height="119"></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_17.jpg" width="259" height="119"></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_18.jpg" width="6" height="119"></td>
</tr>
<tr>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_19.jpg" width="24" height="149"></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_20.jpg" width="160" height="149"></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_21.jpg" width="167" height="149"></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_22.jpg" width="151" height="149"></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_23.jpg" width="259" height="149"></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_24.jpg" width="6" height="149"></td>
</tr>
<tr>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_25.jpg" width="24" height="112"></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_26.jpg" width="160" height="112"></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_27.jpg" width="167" height="112"></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_28.jpg" width="151" height="112"></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_29.jpg" width="259" height="112"></td>
<td><img src="MenuImages/whoweare/images/images/images/wwr1110_01_30.jpg" width="6" height="112"></td>
</tr>
</table>
</div>
</td>
</tr>
</table></td>
</tr>
<tr>
<td><div align="center"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"> </font> <font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif"><em>Copyright © 2010
NES Group, Inc. All rights reserved.</em></font></div></td>
</tr>
</table>
</body> -
Div Image not showing in Live View
Why can't I see my image placed within a Div tag in Live View? Makes no sense. I've changed the z-index to 1000, also tried 1 nothing changes. Please advise if anyone can help. Thank you!
I've applied BOLD to the Div tag in question
HTML Code:
<!doctype html>
<html><!-- InstanceBegin template="/Templates/pavemend_website1.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="UTF-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Permanent Concrete and Asphalt Repair Home Page</title>
<meta name="description" content="CeraTech's Pavemend family of high performance concrete repair products have become the choice of professionals across the country for their rapid return to service, versatility, ease of use, and superior durability.">
<style type="text/css">
#apDiv8 {
position: absolute;
width: 200px;
height: 115px;
z-index: 2;
</style>
<!-- InstanceEndEditable -->
<link href="pavmend_styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
#pavemendlogo {
background-image: url(_images/NEW%202012%20PAVEMEND%20LOGO%20WHITE.png);
background-repeat: no-repeat;
height: 78px;
width: 196px;
#prochoicetype {
background-image: url(_images/pro_choice_concrete_type.png);
background-repeat: no-repeat;
height: 25px;
width: 521px;
margin-left: 200px;
margin-top: -40px;
#prochoicetype {
background-image: url(_images/pro_choice_concrete_type.png);
background-repeat: no-repeat;
height: 25px;
width: 521px;
margin-left: 200px;
margin-top: -40px;
</style>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div id="wrapper">
<div class="container">
<div id="apDiv1"><!-- InstanceBeginEditable name="HeaderLogo" --><a href="pavemend_home_page.html"><img src="_images/NEW 2012 PAVEMEND LOGO WHITE.png" width="197" height="79" class="fltlft" /></a>
<div id="resources"></div>
<!-- InstanceBeginEditable name="Header" -->
<div class="headerResources"></div>
<!-- InstanceEndEditable -->
<nav>
<ul id="menu">
<li><a href="pavemend_home_page.html">OUR PRODUCTS ▼</a>
<ul>
<li><a href="slq_product_page.html">SLQ<sup>®</sup></a></li>
<li><a href="sl_product_page.html">SL<sup>®</sup></a></li>
<li><a href="dotline_product_page.html">DOTLine™</a></li>
<li><a href="15.0_product_page.html">Pavemend 15.0<sup>®</sup></a></li>
<li><a href="TR_product_page.html">Pavemend TR<sup>®</sup></a></li>
<li><a href="VR_product_page.html">Pavemend VR<sup>®</sup></a></li>
<li><a href="IA_product_page.html">Instant Asphalt™</a></li>
<li><a href="kemrok_product_page.html">KEMROK™</a></li>
<li><a href="kemrokVR_product_page.html">KEMROK VR™</a></li>
<li><a href="firerok_product_page.html">FIREROK™</a></li>
<li><a href="antiwear_product_page.html">Anti-Wear™</a></li>
<li><a href="antiscale_product_page.html">Anti-Scale™</a></li>
</ul>
</li>
<li><a href="resources_page.html">RESOURCES</a></li>
<li><a href="technical_support.html">TECHNICAL SUPPORT</a></li>
<li><a href="contact_page.html">CONTACT US</a></li>
</ul>
</nav>
</section>
<!-- InstanceBeginEditable name="Sidebar" -->
<div class="sidebarleftlong">
<nav>
<ul>
<li><a href="#">PAVEMEND PRODUCT <br> BROCHURE</a></li>
<p><li><a href="#">KEEP TRAFFIC MOVING <br> BROCHURE</a></li></p>
<p><li><a href="#">CASE STUDIES</a></li></p>
<p><li><a href="#">INSTANT ASPHALT REPAIR</a></li></p>
<p><li><a href="#">SL PRODUCT VIDEO</a></li></p>
<p><li><a href="#">SLQ PRODUCT VIDEO</a></li></p>
<p><li><a href="#">DOTLINE FIELD <br> APPICATION VIDEO</a></li></p>
</ul>
</nav>
<div id=""></div>
<!-- end .sidebar1 --> </div>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="Content" -->
<div class="content">
<p> </p>
<img src="_images/resources_header.png" alt="slheader" width="553" height="31" class="productlogos" />
</section>
<p> </p>
<section>
<p><strong>Pavemend</strong><sup>®</sup> Rapid, Permanent Concrete and Asphalt repair products are quickly becoming the choice for Turnpike, State DOT Bridge Crews and discriminating engineers who value superior, permanent repairs and reduced traffic disruptions.</p>
<p>Typical repair applications include full and partial depth bridge deck repairs, bridge header joints, approach slabs, form & pour repairs, dowel bar retrofits, joint nosings and more. <strong>Pavemend</strong><sup>®</sup> products require only the addition of water, with no bonding agents or curing requirements and offer all season rapid repair capability.</p>
<p>Featuring technology developed here in the USA, <strong>Pavemend</strong><sup>®</sup> (by CeraTech Inc) products are easier to use, offer greater durability, provide superior return on investment, and are by far the most sustainable repair products available today.</p>
<p><img src="_images/Done Smart Logo.png" width="150" height="17" alt="donesmartlogo" />
</section>
<!-- end .content --></div>
<!-- InstanceEndEditable -->
<div class="footer"><!-- InstanceBeginEditable name="Footer Logo" --><img src="_images/NEW 2012 PAVEMEND LOGO WHITE.png" width="160" height="64" class="flt_rgt" /><!-- InstanceEndEditable -->
<table width="510" summary="footer material">
<tr>
<td width="210"><strong><em>Manufactured by</em></strong></td>
<tr>
<td><img src="_images/CTI_logo_white.png" width="200" height="47" alt=""/>
<td width="50" align="center"><a href="#../twitter.com/Pavemend">Twitter</a>
<div id="apDiv7"></div>
<td><strong><em>Planet Friendly Technology</em></strong></td>
</tr>
</table>
<div id="apDivPFT1"></div>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
<!-- InstanceEnd --></html>
CSS:
@charset "UTF-8";
/* BEGIN HORIZONTAL DROP-MENU */
#menu {
clear: left;
position: relative;
width: 100%; /**adjust width as needed**/
margin: 0;
padding: 0;
background-image: url(_images/topnavpanel.png);
color: #FFFFFF;
#menu ul {
margin: 0;
padding: 0
#menu li {
list-style: none;
float: left;
text-align: center;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #000000;
/**top level menu**/
#menu li a {
display: inline-block;
text-decoration: none;
/* adjust width as needed or use auto */
width: 13em;
padding: 8px;
font-weight: bold;
line-height: 12px;
color: #000;
border-top-style: none;
font-size: 90%;
margin-bottom: 0;
margin-left: 2%;
margin-right: 2%;
margin-top: 0;
border-bottom-style: none;
/**top menu style on mouse over**/
#menu li:hover > a {
color: #FFF;
width: 13em;
/**sub-menu**/
#menu li ul {
display: none;
text-align: center;
padding: 0;
margin-bottom: 0;
margin-left: 40px;
margin-right: 0;
margin-top: 0;
border-bottom-style: none;
/**sub-menu, help for older IE**/
#menu li:hover ul, #menu li.hover ul {
display: block;
position: absolute;
z-index:1000;
padding: 0;
#menu li:hover li, #menu li.hover li {
float: none;
background-color: #E1D5BB;
/**drop-menu style**/
#menu li:hover li a, nav li.hover li a {
width: 14em; /* adjust width as needed or use auto */
margin-top: 0;
/**drop-menu style on mouse over**/
#menu li li a:hover {
color: #FFF;
background-color: #03C;
/* Clear floated elements at the end*/
#menu:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
/**END HORIZONTAL DROP-MENUS STYLES**/
#apDiv11 {
position: absolute;
width: 190px;
height: 180px;
z-index: 2;
background-image: url(_images/WomanPhone.png);
background-position: 10px;
background-repeat: no-repeat;
margin-top: 240px;
#apDivSustainability {
position: absolute;
width: 200px;
height: 420px;
z-index: 3;
background-image: url(_images/sustainabilitySB2.png);
background-repeat: no-repeat;
#apDiv10 {
position: absolute;
width: 75px;
height: 73px;
z-index: 2;
background-image: url(_images/PFTLogo.png);
float: right;
margin-left: 650px;
margin-top: -110px;
#apDiv9 {
position: absolute;
width: 200px;
height: 207px;
z-index: 3;
background-image: url(_images/slphoto1.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivslqphoto {
position: absolute;
width: 200px;
height: 267px;
z-index: 3;
background-image: url(_images/slqphoto.jpg);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivdotlinephoto {
position: absolute;
width: 200px;
height: 267px;
z-index: 3;
background-image: url(_images/dotlinephoto.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDiv15photo {
position: absolute;
width: 200px;
height: 179px;
z-index: 3;
background-image: url(_images/15.0_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivTRphoto {
position: absolute;
width: 200px;
height: 267px;
z-index: 3;
background-image: url(_images/TR_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivAWphoto {
position: absolute;
width: 200px;
height: 150px;
z-index: 3;
background-image: url(_images/AWPhoto.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivASphoto {
position: absolute;
width: 200px;
height: 134px;
z-index: 3;
background-image: url(_images/ASphoto.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivVRphoto {
position: absolute;
width: 200px;
height: 150px;
z-index: 3;
background-image: url(_images/VR_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivIAphoto {
position: absolute;
width: 200px;
height: 162px;
z-index: 3;
background-image: url(_images/IA_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivKemrokphoto {
position: absolute;
width: 200px;
height: 207px;
z-index: 3;
background-image: url(_images/KEMROK%20pic.jpg);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivFirerokphoto {
position: absolute;
width: 200px;
height: 248px;
z-index: 3;
background-image: url(_images/Firerok_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivtechsupportphoto {
position: absolute;
width: 200px;
height: 248px;
z-index: 3;
background-image: url(_images/techsupport_photo.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDivKemrokVRphoto {
position: absolute;
width: 200px;
height: 207px;
z-index: 3;
background-image: url(_images/Kemrok%20VR%20pic.jpg);
background-repeat: no-repeat;
margin-top: 30px;
margin-left: -5px;
#apDiv8 {
position: absolute;
width: 180px;
height: 167px;
z-index: 2;
background-image: url(_images/SLbktandbag.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 520px;
#apDivslq {
position: absolute;
width: 80px;
height: 105px;
z-index: 2;
background-image: url(_images/SLQbucket.png);
background-repeat: no-repeat;
float: right;
margin-top: -125px;
margin-left: 515px;
#apDivdotlinebag {
position: absolute;
width: 88px;
height: 167px;
z-index: 2;
background-image: url(_images/dotlinebag.png);
background-repeat: no-repeat;
float: right;
margin-top: -165px;
margin-left: 280px;
#apDivkemrokbag {
position: absolute;
width: 121px;
height: 167px;
z-index: 2;
background-image: url(_images/kemrok_bag.png);
background-repeat: no-repeat;
float: right;
margin-top: -165px;
margin-left: 570px;
#apDivPFT1 {
position: absolute;
width: 121px;
height: 167px;
z-index: 2;
background-image: url(_images/PFTLogo.png);
background-repeat: no-repeat;
float: right;
margin-top: -75px;
margin-left: 470px;
#apDivkemrokVRbag {
position: absolute;
width: 121px;
height: 167px;
z-index: 2;
background-image: url(_images/kemrokvr_bag.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 590px;
#apDivFirerokbag {
position: absolute;
width: 90px;
height: 167px;
z-index: 2;
background-image: url(_images/firerok_bag.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 570px;
#apDivAWbucket {
position: absolute;
width: 90px;
height: 167px;
z-index: 2;
background-image: url(_images/firerok_bag.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 590px;
#apDivAWbucket {
position: absolute;
width: 90px;
height: 167px;
z-index: 2;
background-image: url(_images/firerok_bag.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 590px;
#apDivAWbucket {
position: absolute;
width: 80px;
height: 96px;
z-index: 2;
background-image: url(_images/AWbucket.png);
background-repeat: no-repeat;
float: right;
margin-top: -160px;
margin-left: 590px;
#apDiv15bag {
position: absolute;
width: 88px;
height: 111px;
z-index: 2;
background-image: url(_images/15.0bucket.png);
background-repeat: no-repeat;
float: right;
margin-top: -115px;
margin-left: 260px;
#apDivTRbucket {
position: absolute;
width: 80px;
height: 106px;
z-index: 2;
background-image: url(_images/TRbucket.png);
background-repeat: no-repeat;
float: right;
margin-top: -120px;
margin-left: 370px;
#apDivAWbucket {
position: absolute;
width: 205px;
height: 150px;
z-index: 2;
background-image: url(_images/AWArt.png);
background-repeat: no-repeat;
float: right;
margin-top: -140px;
margin-left: 420px;
font-size: 120%;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
#apDivASArt {
position: absolute;
width: 205px;
height: 150px;
z-index: 2;
background-image: url(_images/ASArt.png);
background-repeat: no-repeat;
float: right;
margin-top: -140px;
margin-left: 420px;
font-size: 120%;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
#apDivVRbucket {
position: absolute;
width: 80px;
height: 87px;
z-index: 2;
background-image: url(_images/VRbucket.png);
background-repeat: no-repeat;
float: right;
margin-top: -105px;
margin-left: 470px;
#apDivIAbucket {
position: absolute;
width: 251px;
height: 106px;
z-index: 2;
background-image: url(_images/IAbuckets.png);
background-repeat: no-repeat;
float: right;
margin-top: -120px;
margin-left: 400px;
body {
background-color: #666;
color: #000;
text-align: center;
background-image: url(_images/roadblurred.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
padding-top: 60px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
.formtext {
font-size: 100%;
text-align: left;
.bodyfootnote {
font-size: 70%;
margin-left: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
.red {
font-size: 70%;
color: #F00;
.popups {
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
text-transform: capitalize;
text-decoration: none;
list-style: none;
h1, h2, h3, h4, h5, h6, p {
/* [disabled]margin-top: 0; */ /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 23px;
line-height: 25px;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #FFFFFF;
text-decoration: none;
font-size: 100%;
padding: 5px;
a:visited {
color: #FFFFFF;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
background-color: #03C;
color: #FFF;
height: 12px;
alignment-baseline: text-after-edge;
/* ~~this fixed width container surrounds the other divs~~ */
.container {
width: 960px;
background-color: #FFF; /* the auto value on the sides, coupled with the width, centers the layout */
background-image: url(_images/Bridge4WebScreened.png);
background-repeat: no-repeat;
margin-bottom: 0;
margin-left: 0px;
margin-right: 0px;
margin-top: 0;
text-align: left;
.containerTS {
width: 960px;
background-color: #FFF;
margin: 0 0px; /* the auto value on the sides, coupled with the width, centers the layout */
background-image: url(_images/US_Map.png);
background-repeat: no-repeat;
text-align: left;
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background-color: #000;
background-image: url(_images/BannerBlured960.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerSL {
background-color: #000;
background-image: url(_images/PMND%20SL%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerPurchase {
background-color: #000;
background-image: url(_images/contact%20us%20pavemend%20header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerSLQ {
background-color: #000;
background-image: url(_images/PMND%20SLQ%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerDOTline {
background-color: #000;
background-image: url(_images/DOTLINE%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.header15 {
background-color: #000;
background-image: url(_images/PMND%2015.0%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerTR {
background-color: #000;
background-image: url(_images/PMND%20TR%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerAW {
background-color: #000;
background-image: url(_images/anti_wear_pavemend_header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerAS {
background-color: #000;
background-image: url(_images/anti%20scale%20pavemend%20header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerVR {
background-color: #000;
background-image: url(_images/PMND%20VR%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerIA {
background-color: #000;
background-image: url(_images/Instant%20asphalt%20packaged%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerKemrok {
background-color: #000;
background-image: url(_images/KEMROK%20packaged%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerKemrokVR {
background-color: #000;
background-image: url(_images/KEMROK%20VR%20packaged%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerFirerok {
background-color: #000;
background-image: url(_images/FIREROK%20packaged%20Header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerAntiWear {
background-color: #000;
background-image: url(_images/anti_wear_pavemend_header.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerTechSupport {
background-color: #000;
background-image: url(_images/FEBlurred.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.headerResources {
background-color: #000;
background-image: url(_images/ResourceBanner.png);
height: 229px;
background-repeat: no-repeat;
width: 960px;
.header h1 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 20pt;
font-style: normal;
font-weight: bolder;
color: #FFF;
padding-top: 150px;
padding-left: 30px;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the left instead of the right, simply float these columns the opposite direction (all left instead of all right) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
float: right;
width: 180px;
margin-left: 0px;
margin-right: 30px;
clear: none;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
font-style: italic;
background-image: url(_images/Testimonialb.gif);
background-repeat: no-repeat;
height: 456px;
text-decoration: none;
z-index: 1000;
.sidebarPurchase {
float: right;
width: 200px;
margin-left: 0px;
margin-right: 20px;
clear: none;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
font-style: italic;
background-image: url(_images/purchaseSB.png);
background-repeat: no-repeat;
height: 420px;
margin-top: 0px;
text-decoration: none;
background-color: #217CC0;
background-position: 10px 10px;
.sidebarleft {
float: left;
width: 195px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 85%;
font-style: oblique;
height: 200px;
text-decoration: none;
padding-top: 8px;
padding-left: 10px;
margin-right: 5px;
background-color: #217CC0;
vertical-align: bottom;
line-height: 30px;
font-weight: bold;
border-bottom-style: groove;
border-bottom-width: 10px;
margin-top: -4px;
.sidebarleftlong {
float: left;
width: 195px;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-style: oblique;
height: 280px;
text-decoration: none;
padding-top: 20px;
margin-right: 5px;
background-color: #217CC0;
vertical-align: bottom;
line-height: 17px;
font-weight: bold;
border-bottom-style: groove;
border-bottom-width: 10px;
margin-top: -4px;
color: #FFF;
font-size: 85%;
text-align: left;
padding-left: 10px;
.sidebargreen {
float: left;
width: 195px;
height: 410px;
text-decoration: none;
padding-top: 20px;
margin-right: 5px;
background-color: #8CC63F;
border-bottom-style: groove;
border-bottom-width: 10px;
margin-top: -4px;
padding-left: 10px;
.nav2 {
font-family: bebas-neue;
font-style: normal;
font-weight: 400;
color: #FFF;
.sidebarleft nav ul li a {
text-decoration: none;
color: #FFF;
.sidebarleftlong nav ul li a {
text-decoration: none;
color: #FFF;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: bold;
.content {
width: 730px;
float: left;
background-image: none;
background-repeat: no-repeat;
background-position: left;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
padding: 10px 0;
text-align: left;
font-size: 100%;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px;
text-decoration: none;
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
text-decoration: none;
ul.nav li {
border-bottom: 1px solid #666;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
background-color: #C6D580;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
background-color: #DFEBF3;
color: #FFF;
text-decoration: none;
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both;
background-color: #000000;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-left: 760px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
#apDiv1 {
position: absolute;
width: 900px;
height: 94px;
z-index: 1;
margin-top: 80px;
margin-left: 30px;
white-space: 3;
font-size: 100%;
text-align: left;
sllogo {
background-image: url(_images/SLwhitelogo.png);
background-repeat: no-repeat;
.slLogo {
background-image: url(_images/SLwhitelogo.png);
background-repeat: no-repeat;
height: 100px;
width: 240px;
.productlogos {
margin-left: 23px;
margin-top: 10px;
.Bold {
font-weight: bold;
.inherent {
font-style: inherit;
sup {
position: relative;
top: -1ex;
vertical-align:baseline;
font-size: 75%;
#apDiv2 {
position: absolute;
width: 650px;
height: 31px;
z-index: 2;
background-repeat: no-repeat;
padding-right: 15px;
padding-left: 15px;
margin-right: 15px;
margin-left: 15px;
top: 369px;
background-image: url(_images/homeheader.png);
.footer table tr td {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 75%;
color: #FFF;
height: 8px;
width: 160px;
margin-left: 10px;
padding-left: 15px;
border-collapse: collapse;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
.footer p {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 80%;
color: #FFF;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 30px;
.footer table tr th h4 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 75%;
color: #FFF;
float: left;
padding-left: 15px;
height: 0px;
.footer table tbody tr td a {
color: #FFF;
#wrapper {
width:970px; /**adjust as needed**/
margin:0 auto; /**centers page on screen**/
.flt_rgt {
float: right;
margin-top: 15px;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
.title {
/* [disabled]margin-right: 30px; */
margin-top: 35px;
margin-left: 10px;
background-image: ;
background-repeat: no-repeat;
/* [disabled]margin-left: 20px; */
top: 30px;
/* [disabled]margin-top: 30px; */
left: 30px;
.flt_products {
float: right;
margin-right: 30px;
background-image: ;
background-repeat: no-repeat;
.container section nav {
background-image: url(_images/topnavpanel.png);
background-repeat: no-repeat;
height: 30px;
width: 960px;
padding-top: 3px;
#apDiv3 {
position: absolute;
width: 468px;
height: 41px;
z-index: 2;
background-image: url(_images/savetimetext.png);
background-repeat: no-repeat;
margin-left: 15px;
#apDiv4 {
position: absolute;
width: 400px;
height: 41px;
z-index: 3;
background-image: url(_images/ULTRAFLOR.png);
background-repeat: no-repeat;
margin-left: 10px;
margin-top: 45px;
#apDiv5 {
position: absolute;
width: 250px;
height: 103px;
z-index: 4;
background-image: url(_images/HI%20RES%20PRODUCT%20FAMILY%20w%20IA.png);
background-repeat: no-repeat;
float: right;
right: auto;
margin-left: 675px;
margin-top: -22px;
#apDiv6 {
position: absolute;
width: 40px;
height: 38px;
z-index: 5;
background-image: url(_images/PFT%20No%20Text%20No%20Flip.png);
margin-top: -25px;
margin-left: 83px;
#apDiv7 {
position: absolute;
width: 20px;
height: 17px;
z-index: 5;
background-image: url(_images/twitter-bird-dark-bgs.png);
margin-top: -15px;
margin-left: 85px;
nav ul {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the space between the navigation on the content below */
font-size: 90%;
nav ul li {
text-decoration: none;
color: #FFF;
nav ul a:link , nav ul a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
text-align: left;
color: #FFF;
nav ul a:hover, nav ul a:active, nav ul a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
color: #FFF;
text-decoration: none;
.orange {
color: #FAA634;
.white {
color: #FFFFFF;
.red {
color: #F00;
.red1 {
color: #F00;
.toppanel {
background-image: url(_images/topnavpanel.png);
background-repeat: no-repeat;
height: 30px;
width: 960px;
#apDiv12 {
position: fixed;
width: 960px;
height: 30px;
z-index: 5;
background-image: url(_images/topnavpanel.png);
background-repeat: no-repeat;
float: left;
top: 229px;
.white {
.CeraTechLogo {
background-image: url(_images/CTI_logo_white.png);
background-repeat: no-repeat;
width: 200px;
height: 60px;
.apDivPFT {
background-repeat: no-repeat;
padding-left: px;
padding-top: 0px;
#prochoicetype {
background-image: url(_images/pro_choice_concrete_type.png);
background-repeat: no-repeat;
height: 25px;
width: 521px;
margin-left: 200px;
margin-top: -40px;
#resources {
background-image: url(_images/ResourcesType.png);
background-repeat: no-repeat;
height: 25px;
width: 521px;
margin-left: 200px;
margin-top: -40px; -
Spry UI 1.7 slideshow images cascade down page in design view
When I put in the Spry slideshow all the images go down the page in bullets. It works fine in the browsers, so it is no problem. But... it is SO annoying because I am trying to finish off the page and do some stuff under this slideshow but i can see there. So it has messed me all up because I am not good at just hand coding the website... I have to do a little of both... Others have kind of suggested to just live with it... but I just cant
The only reliable view in DW is the Live View. Design view is OK for very simple layouts and documents. As soon as it becomes more complicated, then you cannot rely on design view.
And even though Live View can give a better picture of what you are doing, you must always check your design in all of the target browsers.
Gramps -
Hope this is in the right place
I'm, having some trouble with CS5. I have a .php page containing no html that I would like to see in Live view. The page is hosted on a local server and runs just fine when I go to preview, or open it in Chrome/Firefox/IE outside of Dreamweaver. As such I'm assuming the WAMP Server i'm running for testing isn't the issue.
When I open the page and select Live View I get the loading bar just above and to the far right side of the properties inspector, but the design view remains completely white as if nothing is there.
Apache Version :
2.2.17
PHP Version :
5.3.3
If you guys have any ideas please let me know
Thank you very much in advanceThe following article describes how to set up a PHP testing server in Dreamweaver CS5:
http://www.adobe.com/devnet/dreamweaver/articles/setup_php.html. It goes through the entire process of installing XAMPP. If you already have WAMP installed, you can jump straight to the section that deals with defining a site and testing server. The WAMP equivalent of C:\xampp\htdocs is C:\wamp\www. -
I have a static site with 5 Pages all have worked fine up to now and all displayed correctly but I have added some new text to one page and when I try to preview it or look at it on Internet Explorer (uploaded to web already) the basic content is missing, my background colour and navigation bar is still there but the main title and content are missing?
Not changed any coding just added text and all other pages fine on site, anybody got any ideas? The content still shows in design view.Sorry peeps I had added the content to a table which had expanded beyond the page margins, when I resized the table within the page margins it has appeared in live view again, thought I would update the thread incase it happens to others too, although I suspect nobody is as stupid as me ha ha
-
I want to add a Facebook widget, it shows in the coding but not on the page in live view?
I'm a learning dreamweaver user. So I wanted to add a Facebook like button and followed a tutorial on widgets. However, when I insert the widget it shows up in coding in split view but not my actual page. I've tried uploading it and it still wouldn't work??? Any help will be greatly appreciated!
The script is wrong. Try this:
document.write ('<iframe src="http://www.facebook.com/widgets/like.php?locale=en_US&href=https://www.facebook.com/pages/ Lil-Bulldog-World/208706725876140&layout=standard&show_faces=true&width=450&height=150&act ion=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; border-color:#ffffff; overflow:hidden; width:450; height:150"></iframe>');
However, you'd better use Facebook's own code. It's very simple: http://developers.facebook.com/docs/reference/plugins/like/
Kenneth Kawamoto
http://www.materiaprima.co.uk/ -
Can Live View work with password protected pages?
I tried to open a page in Live View that when opened in a regular browser would bring up a login prompt (We use Siteminder based on realms). So the realm is protected and it should prompt me for a username and password. But in Live View I don't get the username/password prompt, I just get a 401 Access Denied error. Can this work with Live View?
Here's the FAQ about password protecting directories at 1&1 :
http://faq.1and1.com/webspace__access/protecteddirectories/index.html -
Jquery Mobile Website does not preview properly in Dreamweaver's Live View or in my web browser
I'm using Dreamweaver 12.0 Build 5861.
I can't figure out what I'm doing wrong. I go
File / New / Page from Sample / Mobile Starters / JQuery Mobile with theme (local).
I then save my page.
Then when I go to preview my new page in Live View, it shows a page without any styles, etc.
When I upload the page and additional files created by Dreamweaver to my server. I preview it and it will look like the default style JQuery page, but when I click on the button to see the content for that page, there is not a "back" button to come back to my home page.
Also, when I try to implement a JQuery mobile swatch, the Swatch window says "No Theme Applied."
I feel like I'm missing something really simple,,, but what? Is there a setting I need to change or am I missing a step? I have looked at many video tutorials online and I believe I am taking the same steps.You're missing the viewport meta attribute. Add ths to your <head> section.
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
And add this to Line 13:
<div data-role="page" id="page" data-add-back-btn="true">
Do this for all page IDs. -
Hi - I am new to Dreamweaver and have been following a book to understand it. I am told that one can test links in live view. (page 51 in "How-To's 100 Essential techniques" by David Karlins. I have a page that links to pictures and URLs and this works in Browser Preview. However the links do not work in live view. I am sure they did but I must have changed something to stop them. Can anyone shed some light on this.
thanks
SueI think I just responded to your other post, but to reiterate, you have done nothing wrong if your links don't "work" in Live View. The Live part of the View is seeing the hover interaction...you can test Spry menus to the extent that they appear to 'drop down' when they should, but you cannot navigate to other pages through Live View.
So continue using your Browser to check out the actual linking and moving to new pages.
Beth -
Problem: design view looks completely different than live view
I am trying to make changes to my home page in Dreamweaver, and when I am viewing the page in 'design view' the background image for the container is missing, and the divs are all over the place. When I view the same page in live view and in browser preview, it looks fine.
Because I can't really see what the page is going to look like in 'design view', I can't really make changes to the site. Any help would be much appreciated.
Link to screenshot of 'design view'
www.simply-eden.com/images/screenshot1.tiff
Link to screenshot of 'live view'
www.simply-eden.com/images/screenshot2.tiff
link for purpose of viewing the code only
www.simply-eden.com/images/index.html
Thanks for the help.When things get really goofed up, it could be caused by malformed code or orphaned div tags. Sometimes browsers will let you slide with poor code, but DW Design View won't.
Use these online code validation tools and fix any reported errors.
HTML Validator - http://validator.w3.org
CSS Validator - http://jigsaw.w3.org/css-validator/
HTML & CSS Tutorials - http://w3schools.com/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com -
Difference in design and live view
I ran into another problem lately and i still cant find any solution to this yet. I have a table within table and they look fine in the design page but when i change the page to live view or switch to browser, the table seems longer. Any idea why and how can i fix this? Any help would be greatly appreciated. Thanks in advanced and sorry for the long post!
Design page:
Live view:
Source 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>
<link href="Style/style3.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body onload="MM_preloadImages('Images/aboutusbtn_b.gif','Images/homebtn_b.gif','Images/joinbtn _b.gif','Images/partnersbtn_b.gif','Images/contactbtn_b.gif')">
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th width="319" align="left" scope="col"><table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th width="319" align="left" scope="col"><img src="Images/logo_2_01.png" width="319" height="104" border="0" usemap="#Map" /><img src="Images/banner_A_03.png" width="319" height="14" /></th>
<th width="481" align="left" scope="col"><img src="Images/banner_A_02.png" width="481" height="118" /></th>
</tr>
</table></th>
</tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th width="235" align="left" valign="top" scope="col"><table width="235" border="0" cellspacing="0" cellpadding="0">
<tr>
<th height="100" scope="col"> </th>
</tr>
<tr>
<td><table width="235" border="0" cellspacing="0" cellpadding="0">
<tr>
<th scope="col"><a href="index3.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','Images/homebtn_b.gif',1)"><img src="Images/homebtn_a.gif" name="home" width="235" height="65" border="0" id="home" /></a></th>
</tr>
<tr>
<td valign="top"><a href="aboutus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('aboutus','','Images/aboutusbtn_b.gif',1)"><img src="Images/aboutusbtn_a.gif" name="aboutus" width="235" height="65" border="0" id="aboutus" /></a></td>
</tr>
<tr>
<td><a href="activity.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('activity','','Images/actbtn_b.gif',0)"><img src="Images/actbtn_a.gif" name="activity" width="235" height="65" border="0" id="activity" /></a></td>
</tr>
<tr>
<td><a href="joinus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('joinus','','Images/joinbtn_b.gif',1)"><img src="Images/joinbtn_a.gif" name="joinus" width="235" height="65" border="0" id="joinus" /></a></td>
</tr>
<tr>
<td><a href="partners.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('partners','','Images/partnersbtn_b.gif',1)"><img src="Images/partnersbtn_a.gif" name="partners" width="235" height="65" border="0" id="partners" /></a></td>
</tr>
<tr>
<td><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','Images/contactbtn_b.gif',1)"><img src="Images/contactbtn_a.gif" name="contact" width="235" height="65" border="0" id="contact" /></a></td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
</table></th>
<th width="5" align="left" scope="col"><img src="Images/side2.jpg" width="5" height="764" /></th>
<td width="560" height="764" align="left" valign="top" id="tb_bg5" scope="col"><table width="560" border="0" align="center" cellpadding="15" cellspacing="0">
<tr>
<td height="419" align="left" scope="col"><h1>Corporate Partners</h1>
<p>Phasellus sit amet massa id nunc faucibus condimentum vel a lacus. Etiam mattis, erat nec dapibus tristique, dui elit iaculis orci, et dignissim nunc nisi a lectus. Duis semper porta nisl nec ullamcorper. </p>
<table width="530" border="0" cellpadding="0" cellspacing="0" class="table_border">
<tr>
<th width="200" align="left" scope="col"><img src="Images/partners_logo/f_logo1.png" width="197" height="136" /></th>
<td width="330" align="left" valign="top" scope="col"><table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<th align="left" scope="col"><p>Sed id nulla neque, in blandit nisi. Quisque a lorem elit. Nullam fringilla, nisi ac blandit ullamcorper, velit mauris porta metus, ut facilisis ligula orci sed tortor. Suspendisse a metus eu purus hendrerit suscipit eu eu nunc. Morbi neque metus, varius quis egestas eu, egestas nec purus.</p></th>
</tr>
</table></td>
</tr>
<tr>
<th colspan="2" align="left" scope="col"><img src="Images/divider2.png" width="522" height="7" /></th>
</tr>
<tr>
<th align="left" scope="col"><img src="Images/partners_logo/f_logo2.png" width="197" height="136" /></th>
<td width="330" align="left" valign="top" scope="col"><table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<th align="left" scope="col"><p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis dictum convallis massa sit amet mattis. Curabitur ac nisl vitae leo convallis pretium in eu magna. Donec luctus sodales lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></th>
</tr>
</table></td>
</tr>
<tr>
<th colspan="2" align="left" scope="col"><img src="Images/divider2.png" width="522" height="7" /></th>
</tr>
<tr>
<th align="left" scope="col"><img src="Images/partners_logo/f_logo3.png" width="197" height="190" /></th>
<td width="330" align="left" valign="top" scope="col"><table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<th align="left" scope="col"><p>Nam sed leo justo. Nulla a urna odio. Sed at metus lorem, a mattis justo. Pellentesque vel augue a neque auctor scelerisque. Vivamus lobortis augue sed dui luctus id consequat odio blandit. Nam convallis libero id risus sagittis lobortis. Quisque ut euismod risus. Ut faucibus ante velit, eget convallis risus. Curabitur est lorem, consequat auctor hendrerit ac, pretium sit amet metus. Proin ante massa, laoreet at commodo vitae, egestas et velit</p></th>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th colspan="2" align="left" scope="col"><img src="Images/footer.jpg" width="800" height="5" /></th>
</tr>
<tr>
<td width="400" align="left" scope="col"><p class="footer_text">Copyright © Olive Interactive. All rights reserved.</p></td>
<th width="400" scope="col"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="150" scope="col"> </th>
<th width="200" align="left" scope="col"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="80" align="center" scope="col"><p>follow us on</p></th>
<th width="55" align="left" scope="col"><p><a href="http://www.facebook.com"><img title="Facebook" img src="Images/fb_logo.jpg" alt="Facebook" width="50" height="50" /></a></p></th>
<th width="55" align="left" scope="col"><a href="http://www.twitter.com"><img title="Twitter" img src="Images/twitter_logo.jpg" alt="Twitter" width="50" height="50" /></a></th>
</tr>
</table></th>
<th width="50" scope="col"> </th>
</tr>
</table></th>
</tr>
</table>
<map name="Map" id="Map">
<area shape="rect" coords="75,3,261,105" href="index3.html" alt="Go Green" />
</map>
</body>
</html>
css style sheet:
#tb_bg5 { background-image: url(../Images/bg_2b.png); } .table_border { border: medium solid #A9D18B; } p { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; color: #333; font-weight: normal; } h1 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #84C775; font-size: 24px; font-weight: bold; }Welcome back -
It will be waaaaay easier for us to assist if you would upload all your files to your webspace and post a link here.
Please?
Meanwhile, not sure where you want space reduced, but if it's above your footer, find this cell, and reduce the cell height from 764 to 700
<td id="tb_bg5" width="560" valign="top" height="764" align="left" scope="col"> -
Color issues w/ .png and .gif files in CS5.5 Live view
Hi All,
I am having a bunch of trouble with my .png and .gif image files in Dreamweaver CS5.5. In Dreamweaver's design view everything looks fine but when I preview my pages in Live View or in a browser the colors in my .png and .gif files are way off. All my images are designed in RGB.
Any info anyone has to offer will be greatly appreciated. Thanks!GIFS contain a maximum of 216 colors (web safe palette)
PNG and JPG can contain 16 million colors (true color palette),
When you say the colors are "way off" we don't know what you mean.
Can you post a link to your web page?
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Live View Preview is only available with...
When I select preview 'server' from the Browser Lab panel in Dreamweaver I get this message:
"Live View Preview is only available with BrowserLab Local/Network preview option, please select the Local/Network preview option."Hi Mattdwm,
Yes this behavior is 100% correct, and what you observed about it only working if you toggle Live View off is what the error message was trying to tell you.
I'll try to explain - in Dreamweaver's Live View mode you can interact with your page "freeze" the javascript in intermediate states. The information about those states is only contained on the local machine. So if you were to perform a server preview from DW while in Live View, the page would only be in the base/default state in the screenshot captured by BrowserLab. So the only way BrowserLab can get the properly get the info about the intermediate state you've navigated to is if you choose the Local/Network preview option.
I suppose we could have implemented things so that it would not show you that message if you haven't done any interactions with your page in Live View, but I think that would actually be more confusing, as it would sometimes work and sometimes not work. And even if we could automatically switch over to Local/Network mode for BrowserLab while you're in DW's Live View mode, we probably wouldn't because we want that to be a choice made explicitly by our users.
Thanks for your interest in BrowserLab, I hope this helps,
Mark -
DW CS5 - what determines the font specs for design view (without Live View on)?
Says it all above. The non-Live View font I get bears no relationship to the font spec'd (and displayed) for the page in Live View. I assume I have a preference set wrong but can't find it.Help appreciated. - Jim
You won't see any custom web fonts in Design View, if that's what you mean. Design View is not and never has been 100% reliable because it is not a browser. At best Design View is an approximation of what you can expect to see in some browsers.
Nancy O.
Maybe you are looking for
-
I have been trying to work out how to use email address lists in the past few months. I recently managed to import all my contacts from Windows Mail on the old PC. They are now in "Address Book", there were a few in "Personal Address Book" but most w
-
Itunes 10.5 update no longer syncs IPhone 4
I updated my itunes on 10/11/11 when i got home from work now my iphone 4 will no longer sync my computer will recognize the connection but nothing shows in my itunes i've tried restarting my computer and uninstalling and reinstalling itunes and noth
-
MS Office Outlook Import question
Hey, I just purchased the new MS OFFice 2013 and i want to install it on my laptop. I already have office 10. How do i Import all the mails from outlook 2010 to my new 2013 Outlook?? Do i need to do something like importing all the files to a new de
-
HI Iam very new to this topic.... How to send SOAP request to BW and get back data in XML format using XMLA for Analysis Thanks In Advance Guruva
-
Before I purchase PSE 13, do you know if I can keep PSE 12 and run both programs as needed/wanted separately? I currently have PSE 12 and if I install PSE 13 I do not want it to overwrite or upgrade PSE 12 but be a separate program completely.