Dreamweaver Layout Mode [Dreamweaver]

Prev: Error Message : regarding designer.xml
Next: requires elevation?

From: TC2112 on 8 Dec 2007 21:16

Hi Krista,

Could you provide a link or paste the code for the whole page?

It's hard to tell from the snippet. It could be default margins for the <p>
tags that are causing the space, or an issue with the col/row spans. Might
even be something as simple as invalid code, for example in the snippet
there's no closing table tag. Is it on the page?
There are definitely some issues, like cells with a height different than
the image heights within different cells in the same row...just not sure how
it's all connected without seeing the big picture.

Thanks,
Tim

"keeptheoceanclean" <webforumsuser(a)macromedia.com> wrote in message
news:fjf4pa$5ld$1(a)forums.macromedia.com...
> Whoops, sorry for the dbl posting, I don't think I responded in the
> correct
> manner the first time!
>
> Hi Tim,
>
> Attached is a sample of the code from the navigation cells, they're all
> identical. When reading the code line by line however, the first
> navigation
> cell, "home" is written, and then is followed by an empty cell where I
> will be
> inserting flash is the center of the page, and then depicts 3 images/cells
> that
> are aligned on the right hand side of the page. These three cells are in
> their
> own layout table. When I had them in the same layout table as the
> navigation
> cells, although they looked fine in design view, when tested online there
> would
> be significant spacing added in between them. The rest of the navigation
> code
> then follows in sequence.
> Thanks for having a look, Krista
>
> <td width="179" height="22" valign="middle"><blockquote>
> <p>Home</p>
> </blockquote></td>
> <td colspan="4" rowspan="13" valign="top"> 
>
> </td>
> <td colspan="4" rowspan="13" valign="top"><table width="100%" border="0"
> cellpadding="0" cellspacing="0">
> 
> <tr>
> <td width="180" height="120" valign="baseline"><a
> href="http://www.reefcheck.org/petition/petition.php"><img
> src="IMAGES/images/images/webtemplate_new_14.jpg" alt="boxfish"
> width="178"
> height="122" /></a></td>
> <td width="6"> </td>
> </tr>
> <tr>
> <td height="107" valign="top"><a href="http://www.iyor.org/"><img
> src="IMAGES/images/images/webtemplate_new_15.jpg" alt="iyor logo"
> width="178"
> height="118" /></a></td>
> <td> </td>
> </tr>
> <tr>
> <td height="109" valign="top"><a href="http://www.reefcheck.org/"><img
> src="IMAGES/images/images/webtemplate_new_18.jpg" alt="rcint logo"
> width="178"
> height="104" /></a></td>
> <td> </td>
> </tr>
>
>
>
> </table> </td>
> <td></td>
> </tr>
> <tr>
> <td height="22" valign="middle" nowrap="nowrap"><blockquote>About Reef
> Check</blockquote></td>
> <td></td>
> </tr>
> <tr>
> <td height="22" valign="middle" nowrap="nowrap"><blockquote>
> <p>Join Us</p>
> </blockquote></td>
> <td></td>
> </tr>
> <tr>
>

From: keeptheoceanclean on 8 Dec 2007 22:56

Hi Tim,

I've attached the code for the entire page. Working w/ Drmwvr is obviously
new to me, so I can't really recognize an error in the code. I think some of
the pixel dimensions within cells have been slightly altered as I've tried to
fix/align cells as they should look. For example, when I switched the font of
the navigation cells, this caused a white space to appear in the middle of my
image banner at the top of the page...? By changing the pixel width slightly,
I was able to get rid of the unwanted space...

I appreciate any input or advice you have-

Thanks much, Krista

<!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>Reef Check Hawai`i </title>
<style type="text/css">

</style>
<script type="text/javascript">

</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body
onload="MM_preloadImages('IMAGES/images/images/webtemplate_rollovers_02.jpg','IM
AGES/images/images/webtemplate_rollovers_03.jpg','IMAGES/images/images/webtempla
te_rollovers_04.jpg','IMAGES/images/images/webtemplate_rollovers_05.jpg','IMAGES
/images/images/webtemplate_rollovers_06.jpg')" tracingsrc="IMAGES/template.jpg"
tracingopacity="55">
<table width="911" border="0" cellpadding="0" cellspacing="0"
bgcolor="#FFFFFF">

<tr>
<td colspan="2" rowspan="2" valign="top"><img
src="IMAGES/images/webtemplate_new_01.jpg" alt="Reef Check Hawaii" width="453"
height="93" /></td>
<td width="113" height="54" valign="top"><a href="#"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Home','','IMAGES/images/images/webtemplate_rollovers_
02.jpg',1)"><img src="IMAGES/images/webtemplate_new_02.jpg" name="Home"
width="113" height="54" border="0" id="Home" /></a></td>
<td width="71" valign="top"><a href="#" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('About
Us','','IMAGES/images/images/webtemplate_rollovers_03.jpg',1)"><img
src="IMAGES/images/webtemplate_new_03.jpg" name="About Us" width="71"
height="54" border="0" id="About Us" /></a></td>
<td colspan="2" valign="top"><a href="#" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Join &
Donate','','IMAGES/images/images/webtemplate_rollovers_04.jpg',1)"><img
src="IMAGES/images/webtemplate_new_04.jpg" name="Join & Donate" width="107"
height="54" border="0" id="Join & Donate" /></a></td>
<td width="76" valign="top"><a href="#" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Schedule','','IMAGES/images/images/webtemplate_rollov
ers_05.jpg',1)"><img src="IMAGES/images/webtemplate_new_05.jpg" name="Schedule"
width="76" height="54" border="0" id="Schedule" /></a></td>
<td width="84" valign="top"><div align="left"><a href="#"
onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact
Us','','IMAGES/images/images/webtemplate_rollovers_06.jpg',1)"><img
src="IMAGES/images/webtemplate_new_06.jpg" name="Contact Us" width="83"
height="54" border="0" id="Contact Us" /></a></div></td>
<td width="5"> </td>
<td width="1"></td>
</tr>
<tr>
<td colspan="7" rowspan="2" valign="top"><div align="left"><img
src="IMAGES/images/webtemplate_new_07.jpg" alt="antlercoral" width="450"
height="199" /></div></td>
<td height="39"></td>
</tr>
<tr>
<td height="160" colspan="2" valign="top"><img
src="IMAGES/images/webtemplate_new_08.jpg" alt="fromtheocean" width="453"
height="160" /></td>
<td></td>
</tr>
<tr>
<td width="179" height="22" valign="middle"><blockquote>
<p>Home</p>
</blockquote></td>
<td colspan="4" rowspan="13" valign="top"><script type="text/javascript">
AC_FL_RunContent(
'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#
version=9,0,28,0','width','525','height','350','title','Get
Involved','src','flashfiles/HOMEPAGE','quality','high','pluginspage','http://www
..adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi
e','flashfiles/HOMEPAGE' ); //end AC code
</script><noscript><object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve
rsion=9,0,28,0" width="525" height="350" title="Get Involved">
<param name="movie" value="flashfiles/HOMEPAGE.swf" />
<param name="quality" value="high" />
<embed src="flashfiles/HOMEPAGE.swf" quality="high"
pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Versio
n=ShockwaveFlash" type="application/x-shockwave-flash" width="525"
height="350"></embed>
</object></noscript> </td>
<td colspan="4" rowspan="13" valign="top"><table width="100%" border="0"
cellpadding="0" cellspacing="0">

<tr>
<td width="180" height="120" valign="baseline"><a
href="http://www.reefcheck.org/petition/petition.php"><img
src="IMAGES/images/images/webtemplate_new_14.jpg" alt="boxfish" width="178"
height="122" /></a></td>
<td width="6"> </td>
</tr>
<tr>
<td height="107" valign="top"><a href="http://www.iyor.org/"><img
src="IMAGES/images/images/webtemplate_new_15.jpg" alt="iyor logo" width="178"
height="118" /></a></td>
<td> </td>
</tr>
<tr>
<td height="109" valign="top"><a href="http://www.reefcheck.org/"><img
src="IMAGES/images/images/webtemplate_new_18.jpg" alt="rcint logo" width="178"
height="104" /></a></td>
<td> </td>
</tr>

</table> </td>
<td></td>
</tr>
<tr>
<td height="22" valign="middle" nowrap="nowrap"><blockquote>About Reef
Check</blockquote></td>
<td></td>
</tr>
<tr>
<td height="22" valign="middle" nowrap="nowrap"><blockquote>
<p>Join Us</p>
</blockquote></td>
<td></td>
</tr>
<tr>
<td height="22" valign="middle" nowrap="nowrap"><blockquote>Get
Involved</blockquote></td>
<td></td>
</tr>
<tr>
<td height="22" valign="middle" nowrap="nowrap"><blockquote>
<p>Schedule</p>
</blockquote></td>
<td></td>
</tr>
<tr>
<td height="22" valign="middle" nowrap="nowrap"><blockquote>
<p>Surveys</p>
</blockquote></td>
<td></td>
</tr>
<tr>
<td height="22" valign="middle" nowrap="nowrap"><blockquote>
<p>Beach Clean-Ups</p>
</blockquote></td>
<td></td>
</tr>
<tr>
<td height="22" valign="middle" nowrap="nowrap"><blockquote>
<p>Special Events</p>
</blockquote></td>
<td></td>
</tr>
<tr>
<td height="22" valign="middle" nowrap="nowrap"><blockquote>
<p>Ocean Updates</p>
</blockquote></td>
<td></td>
</tr>
<tr>
<td height="22" valign="middle" nowrap="nowrap"><blockquote>
<p>Sponsors</p>
</blockquote></td>
<td></td>
</tr>
<tr>
<td height="22" valign="middle" nowrap="nowrap"><blockquote>
<p>Related Links</p>
</blockquote></td>
<td></td>
</tr>
<tr>
<td height="22" valign="middle" nowrap="nowrap"><blockquote>
<p>Contact Us</p>
</blockquote></td>
<td></td>
</tr>
<tr>
<td height="93"> </td>
<td></td>
</tr>
<tr>
<td height="0"></td>
<td width="273"></td>
<td></td>
<td></td>
<td width="86"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td height="1"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td width="21"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

From: TC2112 on 9 Dec 2007 01:28

Hi Krista,

As Patty said, Layout mode does not work well.
The white space you described when you changed the font is exactly one the
issues caused by all of the merged cells (colspans and rowspans).
The layout is very fragile, and changing something like a font size ripples
throughout the page.

Please see this for some great information:

http://apptools.com/rants/spans.php

As far as your trouble with the spacing in your navigation, you need to
control the margins with CSS or the browsers use their default margins.
Different browsers have different defaults, so it's better to define it with
CSS.

Just add this to your CSS and adjust as desired:

p {margin: 0px;}
blockquote {margin: 0px 10px;}

Regarding advice, I second what Patty said:.
"switch out of Layout Mode and use regular Design View, and post back
with your questions."

The code that "Layout Mode" built is going to cause more trouble.
Open the page in Firefox and enlarge the text. (ctrl+ +)
The page comes apart for the same reason you saw the gap when you changed
the font, and the reason that is described in the link I listed above.

The part of the page with your navigation, flash element and 3 images on the
right can be fixed by using a large 3 column table instead of all the merged
cells.
In the first column, insert (nest) another table with multiple rows for your
navigation.
Insert your flash image in the middle column.
In the third column, nest a table with three rows, one for each image.
The page will be much more stable and not come apart like it does now.

If you do that, you can also get rid of all the merged cells above
containing all the image slices and just use a 1 cell, 1 row table with 1
image.

I hope this helped.

Take care,

Take care,
Tim

"keeptheoceanclean" <webforumsuser(a)macromedia.com> wrote in message
news:fjfp0m$oms$1(a)forums.macromedia.com...
> Hi Tim,
>
> I've attached the code for the entire page. Working w/ Drmwvr is
> obviously
> new to me, so I can't really recognize an error in the code. I think some
> of
> the pixel dimensions within cells have been slightly altered as I've tried
> to
> fix/align cells as they should look. For example, when I switched the
> font of
> the navigation cells, this caused a white space to appear in the middle of
> my
> image banner at the top of the page...? By changing the pixel width
> slightly,
> I was able to get rid of the unwanted space...
>
> I appreciate any input or advice you have-
>
> Thanks much, Krista
>
>
>
> <!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>Reef Check Hawai`i </title>
> <style type="text/css">
> 
> </style>
> <script type="text/javascript">
> 
> </script>
> <script src="Scripts/AC_RunActiveContent.js"
> type="text/javascript"></script>
> </head>
>
> <body
> onload="MM_preloadImages('IMAGES/images/images/webtemplate_rollovers_02.jpg','IM
> AGES/images/images/webtemplate_rollovers_03.jpg','IMAGES/images/images/webtempla
> te_rollovers_04.jpg','IMAGES/images/images/webtemplate_rollovers_05.jpg','IMAGES
> /images/images/webtemplate_rollovers_06.jpg')"
> tracingsrc="IMAGES/template.jpg"
> tracingopacity="55">
> <table width="911" border="0" cellpadding="0" cellspacing="0"
> bgcolor="#FFFFFF">
> 
> <tr>
> <td colspan="2" rowspan="2" valign="top"><img
> src="IMAGES/images/webtemplate_new_01.jpg" alt="Reef Check Hawaii"
> width="453"
> height="93" /></td>
> <td width="113" height="54" valign="top"><a href="#"
> onmouseout="MM_swapImgRestore()"
> onmouseover="MM_swapImage('Home','','IMAGES/images/images/webtemplate_rollovers_
> 02.jpg',1)"><img src="IMAGES/images/webtemplate_new_02.jpg" name="Home"
> width="113" height="54" border="0" id="Home" /></a></td>
> <td width="71" valign="top"><a href="#"
> onmouseout="MM_swapImgRestore()"
> onmouseover="MM_swapImage('About
> Us','','IMAGES/images/images/webtemplate_rollovers_03.jpg',1)"><img
> src="IMAGES/images/webtemplate_new_03.jpg" name="About Us" width="71"
> height="54" border="0" id="About Us" /></a></td>
> <td colspan="2" valign="top"><a href="#"
> onmouseout="MM_swapImgRestore()"
> onmouseover="MM_swapImage('Join &
> Donate','','IMAGES/images/images/webtemplate_rollovers_04.jpg',1)"><img
> src="IMAGES/images/webtemplate_new_04.jpg" name="Join & Donate"
> width="107"
> height="54" border="0" id="Join & Donate" /></a></td>
> <td width="76" valign="top"><a href="#"
> onmouseout="MM_swapImgRestore()"
> onmouseover="MM_swapImage('Schedule','','IMAGES/images/images/webtemplate_rollov
> ers_05.jpg',1)"><img src="IMAGES/images/webtemplate_new_05.jpg"
> name="Schedule"
> width="76" height="54" border="0" id="Schedule" /></a></td>
> <td width="84" valign="top"><div align="left"><a href="#"
> onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact
> Us','','IMAGES/images/images/webtemplate_rollovers_06.jpg',1)"><img
> src="IMAGES/images/webtemplate_new_06.jpg" name="Contact Us" width="83"
> height="54" border="0" id="Contact Us" /></a></div></td>
> <td width="5"> </td>
> <td width="1"></td>
> </tr>
> <tr>
> <td colspan="7" rowspan="2" valign="top"><div align="left"><img
> src="IMAGES/images/webtemplate_new_07.jpg" alt="antlercoral" width="450"
> height="199" /></div></td>
> <td height="39"></td>
> </tr>
> <tr>
> <td height="160" colspan="2" valign="top"><img
> src="IMAGES/images/webtemplate_new_08.jpg" alt="fromtheocean" width="453"
> height="160" /></td>
> <td></td>
> </tr>
> <tr>
> <td width="179" height="22" valign="middle"><blockquote>
> <p>Home</p>
> </blockquote></td>
> <td colspan="4" rowspan="13" valign="top"><script
> type="text/javascript">
> AC_FL_RunContent(
> 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#
> version=9,0,28,0','width','525','height','350','title','Get
> Involved','src','flashfiles/HOMEPAGE','quality','high','pluginspage','http://www
> .adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi
> e','flashfiles/HOMEPAGE' ); //end AC code
> </script><noscript><object
> classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
> codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve
> rsion=9,0,28,0" width="525" height="350" title="Get Involved">
> <param name="movie" value="flashfiles/HOMEPAGE.swf" />
> <param name="quality" value="high" />
> <embed src="flashfiles/HOMEPAGE.swf" quality="high"
> pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Versio
> n=ShockwaveFlash" type="application/x-shockwave-flash" width="525"
> height="350"></embed>
> </object></noscript> </td>
> <td colspan="4" rowspan="13" valign="top"><table width="100%"
> border="0"
> cellpadding="0" cellspacing="0">
> 
> <tr>
> <td width="180" height="120" valign="baseline"><a
> href="http://www.reefcheck.org/petition/petition.php"><img
> src="IMAGES/images/images/webtemplate_new_14.jpg" alt="boxfish"
> width="178"
> height="122" /></a></td>
> <td width="6"> </td>
> </tr>
> <tr>
> <td height="107" valign="top"><a href="http://www.iyor.org/"><img
> src="IMAGES/images/images/webtemplate_new_15.jpg" alt="iyor logo"
> width="178"
> height="118" /></a></td>
> <td> </td>
> </tr>
> <tr>
> <td height="109" valign="top"><a
> href="http://www.reefcheck.org/"><img
> src="IMAGES/images/images/webtemplate_new_18.jpg" alt="rcint logo"
> width="178"
> height="104" /></a></td>
> <td> </td>
> </tr>
>
>
>
> </table> </td>
> <td></td>
> </tr>
> <tr>
> <td height="22" valign="middle" nowrap="nowrap"><blockquote>About Reef
> Check</blockquote></td>
> <td></td>
> </tr>
> <tr>
> <td height="22" valign="middle" nowrap="nowrap"><blockquote>
> <p>Join Us</p>
> </blockquote></td>
> <td></td>
> </tr>
> <tr>
> <td height="22" valign="middle" nowrap="nowrap"><blockquote>Get
> Involved</blockquote></td>
> <td></td>
> </tr>
> <tr>
> <td height="22" valign="middle" nowrap="nowrap"><blockquote>
> <p>Schedule</p>
> </blockquote></td>
> <td></td>
> </tr>
> <tr>
> <td height="22" valign="middle" nowrap="nowrap"><blockquote>
> <p>Surveys</p>
> </blockquote></td>
> <td></td>
> </tr>
> <tr>
> <td height="22" valign="middle" nowrap="nowrap"><blockquote>
> <p>Beach Clean-Ups</p>
> </blockquote></td>
> <td></td>
> </tr>
> <tr>
> <td height="22" valign="middle" nowrap="nowrap"><blockquote>
> <p>Special Events</p>
> </blockquote></td>
> <td></td>
> </tr>
> <tr>
> <td height="22" valign="middle" nowrap="nowrap"><blockquote>
> <p>Ocean Updates</p>
> </blockquote></td>
> <td></td>
> </tr>
> <tr>
> <td height="22" valign="middle" nowrap="nowrap"><blockquote>
> <p>Sponsors</p>
> </blockquote></td>
> <td></td>
> </tr>
> <tr>
> <td height="22" valign="middle" nowrap="nowrap"><blockquote>
> <p>Related Links</p>
> </blockquote></td>
> <td></td>
> </tr>
> <tr>
> <td height="22" valign="middle" nowrap="nowrap"><blockquote>
> <p>Contact Us</p>
> </blockquote></td>
> <td></td>
> </tr>
> <tr>
> <td height="93"> </td>
> <td></td>
> </tr>
> <tr>
> <td height="0"></td>
> <td width="273"></td>
> <td></td>
> <td></td>
> <td width="86"></td>
> <td></td>
> <td></td>
> <td></td>
> <td></td>
> <td></td>
> </tr>
>
>
>
>
> <tr>
> <td height="1"></td>
> <td></td>
> <td></td>
> <td></td>
> <td></td>
> <td width="21"></td>
> <td></td>
> <td></td>
> <td></td>
> <td></td>
> </tr>
> </table>
> </body>
> </html>
>

|
Pages: 1
Prev: Error Message : regarding designer.xml
Next: requires elevation?