PDA

View Full Version : Dreamweaver CS4 problems with wysiwyg and margins


ronno
05-15-2010, 10:36 PM
I am on a Mac G5 running Mac OSX 10.5.9 Leopard.

I have two issues on the same webpage design.

1. What I see in Dreamweaver is bad wysiwyg-wise. A Flash movie is pushed off the bottom of the page for no good reason I can find. The page looks great when viewed in Liveview, Firefox and Safari, The code validates too. Is this just a quirk of DW's attempt at wysiwyg or is something more sinister at work.

2. Out of the blue a margin appeared at the top of my webpage when viewing it in browsers although it doesn't show in DW. I have the body tag margins and padding zeroed out and the nested container tag padding zeroed out with auto side margins and 0 top and 0 bottom margins. As a workaround, I can change the top margin of the container to a -20 pxs and that works, but 0 ought to do the job.

Any insight is welcome. Thanks!

DWcourse
05-15-2010, 11:15 PM
1. DW's Design View isn't an accurate reflection of what you will see in browsers. If it works in IE, Firefox, Chrome and Safari don't worry about design view.

2. We need to be able to see the page and check the code to help.

ronno
05-16-2010, 04:56 PM
<!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>Richard Merbler Rolfing</title>
<style type="text/css">
<!--
#container {
width: 960px;
background-color: #D4EDEC;
padding: 0px;
height: 920px;
background-repeat: no-repeat;
clear: none;
float: none;
margin-top: -20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.Timmy {
padding: 0px;
height: 190px;
width: 111px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 30px;
float: none;
}
#middle {
height: 660px;
padding: 0px;
margin: 0px;
width: 960px;
}
.flash_movie {
height: 660px;
width: 600px;
float: right;
margin-right: 25px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
clear: none;
}
.sidebar {
float: left;
height: 600px;
width: 220px;
margin-top: 60px;
margin-left: 65px;
border: medium none #069;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 24px;
color: #333;
font-style: normal;
padding: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#header {
background-image: url(Header3.jpg);
height: 260px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
width: 960px;
}
#navbar {
height: 35px;
width: 700px;
border: thin none #6C0;
float: right;
margin-top: 225px;
margin-right: 9px;
padding: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
body {
background-image: url(images/bg.png);
margin: 0px;
padding: 0px;
background-repeat: repeat;
}
#navbar #home {
margin: 0px;
padding: 0px;
float: left;
height: 35px;
width: 84px;
border-left-width: thin;
border-left-style: solid;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
border-right-width: thin;
border-right-style: solid;
}
#navbar #aboutrichard {
margin: 0px;
padding: 0px;
float: left;
height: 35px;
width: 158px;
text-align: center;
border-right-width: thin;
border-right-style: solid;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;

}

#navbar #aboutrolfing {
margin: 0px;
padding: 0px;
float: left;
height: 35px;
width: 151px;
border-right-style: solid;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
border-right-width: thin;

}
#navbar #qandq {
margin: 0px;
padding: 0px;
float: left;
height: 35px;
width: 68px;
border-right-width: thin;
border-right-style: solid;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;

}
#navbar #articles {
margin: 0px;
padding: 0px;
float: left;
height: 35px;
width: 106px;
border-right-width: thin;
border-right-style: solid;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;

}
#navbar #contact {
margin: 0px;
padding: 0px;
float: left;
height: 35px;
width: 111px;
border-right-width: thin;
border-right-style: solid;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
}

}
#seo li {
display: none;
height: 20px;
width: 120px;
margin: 0px;
padding: 0px;
list-style-type: none;
font-family: 0;
font-size: 0px;
float: none;
}
#seo ul {
display: none;
margin: 0px;
padding: 0px;
}
#header em {
display: none;
margin: 0px;
padding: 0px;
}
-->
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<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('Nav Buttons/Home2.jpg','Nav Buttons/About-Richard-2.jpg','Nav Buttons/About-Rolfing-2.jpg','Nav Buttons/QandA-2.jpg','Nav Buttons/Contact-2.jpg')">
<div id="container">
<div id="header">
<h1><em>Richard Merbler</em></h1>
<h2><em>certified advanced rolfer rolfing structural integration</em></h2>
<div id="seo">
<ul>
<li>home</li>
<li>about richard</li>
<li>about rolfing</li>
<li>q&amp;a</li>
<li>articles</li>
<li>contact</li>
</ul>
</div>
<div id="navbar">
<div id="home"><a href="http://ronwilliamsstudio.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home Button','','Nav Buttons/Home2.jpg',1)"><img src="Nav Buttons/Home1.jpg" name="Home Button" width="84" height="35" border="0" id="Home Button" /></a></div>
<div id="aboutrichard"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About Richard','','Nav Buttons/About-Richard-2.jpg',1)"><img src="Nav Buttons/About-Richard-1.jpg" name="About Richard" width="158" height="35" border="0" id="About Richard" /></a></div>
<div id="aboutrolfing"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About Rolfing','','Nav Buttons/About-Rolfing-2.jpg',1)"><img src="Nav Buttons/About-Rolfing-1.jpg" name="About Rolfing" width="151" height="35" border="0" id="About Rolfing" /></a></div>
<div id="qandq"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Q&amp;A','','Nav Buttons/QandA-2.jpg',1)"><img src="Nav Buttons/QandA-1.jpg" name="Q&amp;A" width="68" height="35" border="0" id="Q&amp;A" /></a></div>
<div id="articles"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Articles','','Nav Buttons/Articles-2.jpg',1)"><img src="Nav Buttons/Articles-1.jpg" name="Articles" width="106" height="35" border="0" id="Articles" /></a></div>
<div id="contact"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','Nav Buttons/Contact-2.jpg',1)"><img src="Nav Buttons/Contact-1.jpg" name="Contact" width="111" height="35" border="0" id="Contact" /></a></div>
</div>
</div>
<div id="middle">
<div class="sidebar">
<div class="Timmy"><img src="LittleBoyLogo.gif" width="111" height="190" alt="Rolfing Logo" /></div>
<p>&quot;Some individuals may perceive their losing fight with gravity as a sharp pain in their back, others as the unflattering contour of their body, others as a constant fatigue, yet others as an unrelentingly threatening environment. Those over 40 may call it old age. And yet all these signals may be pointing to a single problem, so prominent in their own structure, as well as others, that it has been ignored: they are off balance. They are at war with gravity.&quot;<br />
ó Ida P. Rolf, Ph.D.</p>
</div>
<div class="flash_movie">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="600" height="660" id="FlashID" title="Willie Nelson Emmitt Smith Rolfing Movie">
<param name="movie" value="flash_movie.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you donít want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flash_movie.swf" width="600" height="660">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /> </a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</div>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>

Corrosive
05-16-2010, 05:02 PM
Try adding h1 {margin: 0; padding: 0;} to your styles and see what you get.

DWcourse
05-16-2010, 05:53 PM
What's the purpose of the hidden "seo" menu?

ronno
05-17-2010, 02:59 AM
Since the header is a Photoshop developed graphic and the navbar elements are PSP as well, I typed the header copy in with H1 and H2 tags and gave them a display of none. I typed in an unordered list with the navbar titles and gave them a display of none too. H1 and H2 tags and unordered lists are important for search engines and indexing. I got this tidbit from the "Photoshop to HTML" class wrapping up this Tuesday at Creativetechs.com.

ronno
05-17-2010, 03:08 AM
I made a css rule for h1 and zeroed out the padding and margins. It didn't help. I appreciate the ideas.

DWcourse
05-17-2010, 03:27 AM
I think you need to add:

h1 {margin: 0; padding: 0;}
h2 {margin: 0; padding: 0;}

Since the header is a Photoshop developed graphic and the navbar elements are PSP as well, I typed the header copy in with H1 and H2 tags and gave them a display of none. I typed in an unordered list with the navbar titles and gave them a display of none too. H1 and H2 tags and unordered lists are important for search engines and indexing. I got this tidbit from the "Photoshop to HTML" class wrapping up this Tuesday at Creativetechs.com.

Using visibility:hidden isn't a good idea for a couple of reasons. The main one is that the objects still take up space on the page (using display:none will keep the objects from taking up space).

But as a general principle putting content into your page for search engines and hiding it isn't a great idea and can even get your page dropped from the index if the intent is malicious. But, since you're just duplicating graphic content, it's probably OK.

Since I can't see your menu images, I can't judge them but a better SEO tactic is to use text-based CSS-style menus (you can use background images to liven them up).

You can also place images like your logo as the background of a div with the same dimension as your image and overflow set to hidden. Then insert your <h1> into the div and give the <h1> enough margin or padding to push it below the bottom of the div.

And there's always the alt, id and name attributes (which search engines don't value as much as test).

ronno
05-17-2010, 05:43 AM
Zeroing out the padding and margins of the h1 and h2 tags got the margins working properly again. Thanks!

Also I realize the ethics of using hidden h1, h2 and unordered lists for seo purposes. I am only putting what is in the graphics already so I'm not trying to scam.

On the navbar I did try text-based css first and got it to work fine. In the hover state I had to use padding to get the background color to fill the block. Each block has a different width and required tweaking each one separately. I made a change to the borders and everything went haywire and no amount of tweaking would work.

I'm pretty new at this and probably screwed something up and went to simple rollover inserts to bail me out. I may play with css text-based again though.

Again thanks for your help.