Design view: huge row heights
Occasionally, a page which previews perfectly in a browser,
appears in Dreamweaver MX design view as if I had set huge row
heights, and the cursor looks about 2 inches tall. Once the page
renders this way, I can't ever see it correctly again. I have tried
cut&pasting the code to a new page, and it looks fine until I
save it, then it blows out again in design view. It still looks
fine in a browser.
Here is a screenshot of how it looks.
http://www.easternhealth.org.au/samples/spacing.html
Any idea of what is causing this and how to fix it? It also
happens on a work colleague's computer, using Dreamweaver 8.
Many thanks for any help.
DMX 6.0 or DMX6.1?
DMX was not the brightest bulb on the string when it came to
layout
rendering.... But your image looks like you have jiggered the
line heights
somehow. We would need to see the code for the page to go
further.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"kg3003" <[email protected]> wrote in
message
news:es089c$6el$[email protected]..
> Occasionally, a page which previews perfectly in a
browser, appears in
> Dreamweaver MX design view as if I had set huge row
heights, and the
> cursor
> looks about 2 inches tall. Once the page renders this
way, I can't ever
> see it
> correctly again. I have tried cut&pasting the code
to a new page, and it
> looks
> fine until I save it, then it blows out again in design
view. It still
> looks
> fine in a browser.
> Here is a screenshot of how it looks.
>
http://www.easternhealth.org.au/samples/spacing.html
>
> Any idea of what is causing this and how to fix it? It
also happens on a
> work
> colleague's computer, using Dreamweaver 8.
> Many thanks for any help.
>
Similar Messages
-
Set row height and column witdh in Report Designer
All,
Is there any way to enter value of a row height or a column width by numbers, instead of dragging them, which I find stupid, especially if several rows should have same height (or several columns same width). I looked for something like Properties-Size/Width/Height but didn't find any. Did I miss anything?
Cheers!
/RBFor those who come from other programming language specially web development, designer or Analyzer looks stupid, but it is very powerful tool. If you need to manage the width and height, then please explore the options in Table Interfaces, there you will be able to use your programming skills.
thanks.
Wond -
Interactive Report Column Headings and Row Height
I am using the div style="width:350px;" method to control the width of columns in various interactive reports. That works fine except for the following:
1. When creating filters, the <div...> stuff shows up along with the actual column heading, thus confusing some end users
2. Even when I uncheck the "Use same text for single row view" checkbox and then provide a simple single row view label, the <div> stuff still shows up on the single row view
Does anyone have a better solution?
Also, does anyone know of a way to limit the row height within an interactive report row? I have some columns of data that contain a large amount of HTML data and I'd like to be able to limit the number of rows that show on the report.
Is Oracle planning to provide some better control over the Interactive Report columns in another version? The Interactive Report is such a huge improvement in usability in APEX - it would be great to take it to another level by providing some better control over column width and row height.
Edited by: DaleB on Jun 18, 2009 8:54 AM
Edited by: DaleB on Jun 18, 2009 8:54 AMDale,
Unfortunately we don't have much we can use to do what you would like. I would have said it's impossible until version 4 but you could actually do something similar to what Roel has done. His trick is in the edit button. He changed the edit button to use an "onload" call to a JavaScript process. You could do the same but call a process that goes across the rows and styles each column. Now because you don't have a way to identify the column (can't use the order because the end user could change it) you'll have to write the code to look at the top row first and then style the appropriate column. As far as I can tell, this would be quite difficult and inefficient. Having said that if you need it that bad and would like some help with it, put up an example application on apex.oracle.com and provide the workspace/username/password and I'll take a look.
Regards,
Dan
http://danielmcghan.us
http://sourceforge.net/projects/tapigen
You can reward this reply by marking it as either Helpful or Correct ;-) -
I ftp'd the files and went to move the pictures and I cannot see the design view at all. Just code. I need to see the design view. Can you help? Usually my index page is .html not .php. I have learned on my own and I really need to fix this site. Thanks!
<?php
include ('Includes/connect.php');
$query = "SELECT id, name, project FROM projects ORDER BY name ASC";
$result = mysql_query($query);
if (!$result) {
die('Could not query:' . mysql_error());
exit;
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>BuildAPlane.org - Kids Learning Science, Math and Technology by Building Real Airplanes</title>
<link rel="stylesheet" type="text/css" href="bap.css">
</head>
<body topmargin="0" leftmargin="0" rightmargin="0">
<table border="0" width="1024" style="border-collapse: collapse">
<tr>
<td width="60" valign="top" style="background-image: url('images/sidebar.jpg'); background-repeat: repeat-y">
</td>
<td valign="top">
<div align="center">
<table border="0" width="95%" style="border-width:0; border-collapse: collapse">
<tr>
<td align="right">
<font size="2"><a href="espanol.htm">ESPANOL</a> | <a href="contact.htm">CONTACT US</a></font><br>
</td>
</tr>
<tr>
<td>
<img border="0" src="images/buildaplane-logo.jpg" width="606" height="96"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<font size="2">HOME | <a href="what-is-buildaplane.htm">WHAT IS BAP</a> | <a href="advisory_board.htm">ADVISORY BOARD</a> | <a href="donate-aircraft.htm">DONATE AN AIRPLANE</a> | <a href="start-a-project.htm">START A PROJECT</a> | <A HREF="contribute.htm">CONTRIBUTE</a> | <a href="supporters.htm">SUPPORTERS</a></font>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<div align="center">
<table border="0" width="95%" style="border-width:0; border-collapse: collapse">
<tr>
<td align="right" colspan="2"> </td>
</tr>
<tr>
<td width="50%">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0, 0,0" width="453" height="343" id="buildaplane" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="buildaplane.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> <embed src="buildaplane.swf" quality="high" bgcolor="#ffffff" width="453" height="343" name="buildaplane" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</td>
<td width="50%" rowspan="2" valign="top">
<div align="center">
<table border="1" width="80%" cellpadding="10" style="border-collapse: collapse" bordercolor="#FF0000">
<tr>
<td bordercolorlight="#FF0000" bordercolordark="#800000" bordercolor="#FF0000">
<b><font size="2" color="#FF0000">BuildAPlane Announces Teachers’ Day at AirVenture! >></b></font><br>
<font size="2">
BuildAPlane, a non-profit aviation education organization, will sponsor Teacher’s Day at the Experimental Aircraft Association's <b>AirVenture this year in Oshkosh, WI</b>. The event is scheduled for <b>July 28th, 2009</b><br>
<a href="teachersDayInfo.html">More Information</a> | <a href="teachersDay.html">Register Now</a><br><br>
</font>
<!--
<a href="news.htm">BAP In The News >></a></font></b><p>
<font size="2">Build A Plane, with the help of the
FAA and the aviation community, offers young people
with an interest in flying the chance to build
airplanes and build STEM skills.</font>
-->
</td>
</tr>
<tr>
<td><b><font size="2" color="#FF0000">
<a target="_blank" href="http://stores.ebay.com/Build-A-Plane-Aviation-Store">
BAP eBay Auction Store >></a></font></b></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="2" cellspacing="0">
<tr>
<td aligin="left" valign="top">
<b><font size="2" color="#FF0000">Current Projects >></font></b><p>
<img border="0" src="images/current-projects-shadow.jpg" width="175" height="166">
</td>
<td with="10"></td>
<td align="left" valign="top">
<form name="projects" action="projects/viewProject.php" method="post">
<select name="id" onChange="this.form.submit();">
<option value="">--VIEW A PROJECT--
<?php
for ($count = 1; $row = mysql_fetch_row($result); ++$count) {
$id = $row[0];
$name = $row[1];
$name = substr($name, 0, 12);
$project = $row[2];
$project = substr($project, 0, 12);
?>
<option value="<?=$id?>"><?=$name?>... <?=$project?>...
<?php
?>
</select>
</form>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<font size="2" color="#FF0000"><b><a href="glassair_twoweeks.html">Build A Plane's Own Plane! >></a></b></font><br><br>
<font size="2">
High school kids, working with professional assistance at the Glasair factory, built a Sportsman 2+2 in just two weeks!<br>
<a href="glassair_twoweeks.html">Read More...</a><br>
</font>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="50%">
<font size="2"><b>Build A Plane began operations in 2003 as a
non-profit organization dedicated to promoting aviation and
aerospace careers by giving young people the opportunity to
build real airplanes.</b> Aircraft construction and restoration
projects provide an exciting opportunity to motivate kids to
learn virtually any facet of science, technology, engineering
and mathematics when applied to this program.</font></td>
</tr>
<tr>
<td width="50%" align="left">
<b><font color="#FF0000" size="2">
<a href="what-is-buildaplane.htm">Learn more... >></a></font></b></td>
<td width="50%">
</td>
</tr>
<tr>
<td width="100%" align="left" colspan="2">
</td>
</tr>
<tr>
<td width="100%" align="center" colspan="2">
<table border="0" width="100%" cellspacing="1" style="border-collapse: collapse">
<tr>
<!--
<td width="33%" align="center" valign="top">
<a href="http://www.flabob.org" target="_blank"><img src="images/flabob.jpg" border="0"></a><br>
<font size="1">Thomas Wathen Foundation</font><br>
</td>
-->The page contains PHP markup, but it's not any that should interfere with your seeing something in Design view. What is interfering with that is some invalid HTML on the page. For example -
<font size="1">American Telecommunications Certification Body</font><br></td>
</td>
(note the </td> followed by another </td>)
If I remove that extra </td> then your Design view becomes visible. There are at least two other problems on this page -
There is no doctype - thus, the page will be rendered by all browsers in QUIRKS mode. That's a bad thing. You should use an HTML 4.01 Transitoinal doctype on this and other pages.
There is an improperly nested <font> tag here -
<b><font size="2" color="#FF0000">BuildAPlane Announces Teachers’ Day at AirVenture! >></b></font>
I'd fix all of these if I were you.
The page also contains PHP scripting that is connecting to an online database, and extracting information that is used to populate the <select> tag in the projects form. You will not see that tag populated with options in Design view. To see it, you would need to have Apache and PHP installed, and have a testing server defined for this site. Even then, you would only see that tag populated in Live view or on Preview, not in Design view. -
Img Does not appear in Design View
Dreamweaver 8
Have an image that I would presume has a simple enough presence in the page...
<table width="985" border="1" cellspacing="0" cellpadding="0" height="100">
<tr>
<img src="Includes/Images/ButtonsNBanners/bnrPrimaryTop.png" alt="test" width="1074" height="94" border="0" usemap="#Map1">
</tr>
</table>
...and sure enough the image appears as expected at runtime.
But within Dreamweaver Design View it does not appear at all.
Why?
I have multiple other images on this page that all appear within the designer as expected, but not this one.
My main problem right now is that I need a map associated with this image and would really like to use DW's tools to create and position the <area> tags.
Has anyone seen this sort of behavior in DW8 before?
All input welcome and appreciated!!!That was it KathH --- THANKS!!!
Had created the row w/out <td> cells to carry the top banner (sort of cheating) on spanning the cells i guess ( )
Anyway, re-wrote so that the banner table was independant and did not require span and picked up the data table independantly.
Problem solved and designer picked up the image precisely.
Thanks again!!!
Curious though that the image is dependant on the <td> tag. I would have expected any image called within the page to display in the designer regardless of location in the html.
Oh well, fixed and onto the next challenge.
Once more THANKS!!! -
Design View not displaying properly
I am pretty new to Dreamweaver. I can't get my Design view to display properly, even when tried on two different computers. The top div displays properly, then on the nav bar, only the background shows with the table items just listed in a row. There are a lot of black background segments to the page, and thin yellow lines. The main content shows at the bottom after a big chunk of black background blocks. The page shows perfectly fine in a browser. I can only work in Code view because of this. Any suggestions?
If it helps, here is my html:
<!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>dentonquiltguild</title>
<link href="includes/gallery.css" rel="stylesheet" type="text/css" />
<link href="dqgfinal_styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<!--[if lte IE 6]>
<![endif]-->
<style type="text/css">
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.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>
<div id="top">
<div id="logotemp"><img src="images/logo.gif" width="280" height="175" alt="logo" /></div><!--logotemp -->
<div id="quilt_top"><img src="images/quilt_top_01.png" width="550" height="209" alt="quilt top" /></div>
</div><!--top -->
<div id="navbar">
<ul id="MenuBar2" class="MenuBarHorizontal">
<li><a href="index.html"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/homered_03.gif',1)"><img src="images/homewhite_03.gif" alt="home button" name="Image8" width="101" height="43" border="0" id="Image8" /></a> </li>
<li><a href="general.html" class="MenuBarItemSubmenu"></a><a href="general.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/generalred_03.gif',1)"><img src="images/generalwhite_03.gif" alt="general button" name="Image9" width="101" height="43" border="0" id="Image9" /></a>
<ul>
<li><a href="meetings.html">Meetings</a></li>
<li><a href="showandtell.html">Show & Tell</a></li>
<li><a href="library.html">Library</a></li>
<li><a href="blogs.html">Blogs</a></li>
<li><a href="retreat.html">Retreat</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="members.html"></a><a href="members.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/membersred_03.gif',1)"><img src="images/memberswhite_03.gif" alt="members button" name="Image10" width="101" height="43" border="0" id="Image10" /></a>
</li>
<li><a href="community.html" class="MenuBarItemSubmenu"></a><a href="community.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','images/communityred.gif',1)"><img src="images/communitywhite_03.gif" alt="community button" name="Image11" width="101" height="43" border="0" id="Image11" /></a>
<ul>
<li><a href="kidskwilts.html">Kids Kwilts</a></li>
<li><a href="storybooks.html">Storybooks</a></li>
<li><a href="sowinghope.html">Sowing Hope</a></li>
</ul>
</li>
<li><a href="contacts.html" class="MenuBarItemSubmenu"></a><a href="contacts.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','images/contactsred_03.gif',1)"><img src="images/contactswhite_03.gif" alt="contacts button" name="Image12" width="101" height="43" border="0" id="Image12" /></a>
<ul>
<li><a href="board.html">Board</a></li>
<li><a href="bees.html">Bees</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="shops.html">Shops</a></li>
<li><a href="guilds.html">Guilds</a></li>
</ul>
</li>
</ul>
</div><!--navbar -->
<div id="quilt_bottom"><img src="images/quilt_bottom_02.png" width="550" height="128" alt="quilt bottom" /></div>
<div id="maintemp">
<div id="next">
<div id="next_meeting_text">
<div align="center">Next Meeting<br/> March 15
</div><!--center -->
</div><!--next_meeting_text -->
<div><!--speaker_text -->
<div align="center"><a href="http://americanjane.com" id="speaker_text">Sandy Klop<br/>"American Jane"</a></div><!--align -->
</div><!--speaker_text -->
<div id="calendar_button">
<div align="center"><a href="calendar.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/calendar_ro_03.gif',1)"><img src="images/calendar_03.gif" alt="calendar button" name="Image6" width="136" height="54" border="0" id="Image6" /></a></div>
</div><!--calendar_button -->
<div id="events_button">
<div align="center"><a href="events.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/events_ro_03.gif',1)"><img src="images/events_03.gif" alt="events button" name="Image7" width="136" height="54" border="0" id="Image7" /></a></div>
</div><!--events_button -->
</div><!--next -->
<div id="main_head">Welcome To The <br/>Denton Quilt Guild</div><!--main_head -->
<div id="main_text">
We are a group of over 200 quilters creating everything from traditional quilts, to art quilts, and everything in between. New members and visitors are always welcome to our meetings on the 3rd Thursday of each month.<br />
The Denton Quilt Guild provides a service to the local community by providing quilts to children in need, offering our Storybooks and Quilts To Go to our local schools, and participating in local events such as the Storytelling Festival. Quilters of all levels are welcome!
</div><!--main_text -->
<div id="bottom">
<div id="copyright"><img src="images/copyright.gif" width="127" height="8" alt="copyright" /></div><!--copyright -->
<div id="facebook"><a href="http://www.facebook.com/groups/42514709926/"><img src="images/facebook.gif" width="112" height="45" alt="facebook" /></a></div>
</div>
</div>
</div><!--maintemp -->
</div><!--wrapper -->
<script type="text/javascript">
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>I still cannot solve this problem. Can ANYONE out there help, or tell me where I can find the answer. Now I will attach two screen shots of what my Design View looks like. It happens on all pages I have created. I do like working in code view, but there are times when it's easier, almost essential for me to work in Design view. If it works for some people, why not me?
These images are the top and then the bottom of the same page. I have turned CSS rendering on and off, but nothing helps. -
CSS issue when changing the table row height to 16px
Hello,
After changing the table row height through css like this:
.table-row-cell, .table-cell {
-fx-cell-size: 16;
the table rows are correctly displayed with a 16px height but the cell bottoms seem to be incorrectly set.
For example the following css style (a red 3px bottom border):
.table-cell {
-fx-border-width: 0 0 3 0;
-fx-border-color: red;
doesn't work anymore with the new row height whereas it works with the 24px standard row height.
While investigating with Scenic View, I noticed that changing the row height changes the TableRow layoutBounds height (from 24px to 16px so that's ok) but not the boundsInParent height which remains to 27px. I think it should become 19px (16 + 1.5 + 1.5). I don't know if it's a bug.
Anyway, any help making the css red border working for a 16px row height would be greatly appreciated.
Regards,
Bruno.Q: Would this help to just use absolute div tags and give me 'ABSOLUTELY ABSOLUTE' positioning?
No. APDivs are not a good primary layout method. Use default CSS positioning (which is no positioning at all). Align page elements with margins, floats and padding.
See example -- 2-Column CSS Layout with Grids
(View Page Source in your browser to see the code)
http://alt-web.com/TEMPLATES/2-col-fixed-with-grid.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com -
Hi all, I have RS elements on a page and the following code
to repeat region, the region does not repeat row after row so I
have modified it, but nothing is shown in design view after adding
<tr> before "><?php } while ($row_poster_a2 =
mysql_fetch_assoc($poster_a2)); ?>"
<table width="229" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td width="70" class="TDHeader" valign="top"><div
align="center">Quantity</div></td>
<td width="73" class="TDHeader" valign="top"><div
align="center">Economy</div></td>
<td width="86" class="TDHeader" > </td>
</tr>
<tr>
<?php do { ?>
<td height="44" class="tableTxt" valign="top"><div
align="center"><?php echo $row_poster_a2['quantity'];
?></div></td>
<td class="tableTxtPrice"
valign="top">£<?php echo $row_poster_a2['price'];
?></td>
<td valign="top"><form target="paypal"
action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="bn"
value="webassist.dreamweaver.4_5_0" />
<input type="hidden" name="business"
value="[email protected]" />
<input type="hidden" name="item_name" value="<?php
echo $row_poster_a2['item_name']; ?>,<?php echo
$row_poster_a2['quantity']; ?>, <?php echo
$row_poster_a2['quality']; ?> " />
<input type="hidden" name="item_number" value="<?php
echo $row_poster_a2['item_id']; ?>" />
<input type="hidden" name="amount" value="<?php echo
$row_poster_a2['price']; ?>" />
<input type="hidden" name="currency_code" value="GBP"
/>
<input type="hidden" name="return" value="
http://www.email.co.uk/accepted.php"
/>
<input type="hidden" name="cancel_return" value="
http://www.printnation.co.uk/cancelled.php"
/>
<input type="hidden" name="receiver_email"
value="[email protected]" />
<input type="hidden" name="mrb"
value="R-3WH47588B4505740X" />
<input type="hidden" name="pal" value="ANNSXSLJLYR2A"
/>
<input type="hidden" name="no_shipping" value="0" />
<input type="hidden" name="no_note" value="0" />
<input type="image" name="submit" src="
http://images.paypal.com/images/x-click-but22.gif"
border="0" alt="Make payments with PayPal - it's fast, free and
secure!" />
</form></td><tr><?php } while
($row_poster_a2 = mysql_fetch_assoc($poster_a2)); ?>
</tr>
</table>Change this -
</tr>
<tr>
<?php do { ?>
to this -
</tr>
<?php do { ?>
<tr>
and this -
</form></td><tr><?php } while
($row_poster_a2 =
mysql_fetch_assoc($poster_a2)); ?>
</tr>
to this -
</form></td></tr><?php } while
($row_poster_a2 =
mysql_fetch_assoc($poster_a2)); ?>
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"The_FedEx_Guy" <[email protected]> wrote in
message
news:[email protected]...
> Hi all, I have RS elements on a page and the following
code to repeat
> region,
> the region does not repeat row after row so I have
modified it, but
> nothing is
> shown in design view after adding <tr> before
"><?php } while
> ($row_poster_a2 =
> mysql_fetch_assoc($poster_a2)); ?>"
>
> <table width="229" border="0" cellpadding="0"
cellspacing="0">
> <tr>
> <td width="70" class="TDHeader"
valign="top"><div
> align="center">Quantity</div></td>
> <td width="73" class="TDHeader"
valign="top"><div
> align="center">Economy</div></td>
> <td width="86" class="TDHeader"
> </td>
> </tr>
> <tr>
> <?php do { ?>
> <td height="44" class="tableTxt"
valign="top"><div
> align="center"><?php echo
$row_poster_a2['quantity']; ?></div></td>
> <td class="tableTxtPrice"
valign="top">£<?php
> echo
> $row_poster_a2['price']; ?></td>
> <td valign="top"><form target="paypal"
> action="https://www.paypal.com/cgi-bin/webscr"
method="post">
> <input type="hidden" name="cmd" value="_cart" />
> <input type="hidden" name="add" value="1" />
> <input type="hidden" name="bn"
> value="webassist.dreamweaver.4_5_0" />
> <input type="hidden" name="business"
> value="[email protected]" />
> <input type="hidden" name="item_name"
> value="<?php
> echo $row_poster_a2['item_name']; ?>,<?php echo
> $row_poster_a2['quantity']; ?>,
> <?php echo $row_poster_a2['quality']; ?> " />
> <input type="hidden" name="item_number"
> value="<?php
> echo $row_poster_a2['item_id']; ?>" />
> <input type="hidden" name="amount" value="<?php
> echo
> $row_poster_a2['price']; ?>" />
> <input type="hidden" name="currency_code"
> value="GBP" />
> <input type="hidden" name="return"
> value="
http://www.email.co.uk/accepted.php"
/>
> <input type="hidden" name="cancel_return"
> value="
http://www.printnation.co.uk/cancelled.php"
/>
> <input type="hidden" name="receiver_email"
> value="[email protected]" />
> <input type="hidden" name="mrb"
> value="R-3WH47588B4505740X" />
> <input type="hidden" name="pal"
> value="ANNSXSLJLYR2A" />
> <input type="hidden" name="no_shipping"
> value="0" />
> <input type="hidden" name="no_note" value="0" />
> <input type="image" name="submit"
> src="
http://images.paypal.com/images/x-click-but22.gif"
border="0"
> alt="Make
> payments with PayPal - it's fast, free and secure!"
/>
> </form></td><tr><?php } while
($row_poster_a2 =
> mysql_fetch_assoc($poster_a2)); ?>
> </tr>
> </table>
> -
Divs not aligning in design view.
Hi,
I have to divs next to each other their combined widths = the divs width I have wrapped around them so they should align perfectly. However in disign view one of the divs is pushed below the other but when I preview in the browser they are aligned how they should be. I know this isn't a huge problem as in the browser its appearing how it should but its really distracting whilst I'm still coding a site when divs aren't where they should be.
I have attached my code and css styles. If someone could advise what may be going on.
Thank you and kind regards
Elliot
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="web_design_style.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/nav_bar/home_ro.png','images/nav_bar/about_ro.png','imag es/nav_bar/packages_ro.png','images/nav_bar/portfolio_ro.png','images/home header/nav_bar/contact_home_RO.png')">
<div id="web_centre_wrap">
<div id="header_home">
<div id="top_header_home"></div>
<div id="middle_header_left_home"></div>
<div id="middle_header_right_home"></div>
<div id="menu_bar_home">
<table width="396" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="web_design_home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/nav_bar/home_ro.png',1)"><img src="images/nav_bar/home.png" name="home" width="67" height="121" border="0" id="home" /></a></td>
<td><a href="web_design_about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/nav_bar/about_ro.png',1)"><img src="images/nav_bar/about.png" name="about" width="70" height="121" border="0" id="about" /></a></td>
<td><a href="web_design_packages.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('packages','','images/nav_bar/packages_ro.png',1)"><img src="images/nav_bar/packages.png" name="packages" width="92" height="121" border="0" id="packages" /></a></td>
<td><a href="portfolio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('portfolio','','images/nav_bar/portfolio_ro.png',1)"><img src="images/nav_bar/portfolio.png" name="portfolio" width="89" height="121" border="0" id="portfolio" /></a></td>
<td><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/home header/nav_bar/contact_home_RO.png',1)"><img src="images/home header/nav_bar/contact_home.png" name="contact" width="78" height="121" border="0" id="contact" /></a></td>
</tr>
</table>
</div>
<div id="bottom_header_home">
</div>
</div><!-- end #header -->
<div id="content">
</div><!-- end #content -->
<div id="sidebar">
<div id="quote"></div>
<div id="testimonials"></div>
</div><!-- end #sidebar -->
<div id="footer">
<div id="contact"></div>
<div id="cpptu"></div>
</div><!-- end #footer -->
</div><!-- end #web_centre_wrap -->
</body>
</html>
CSS Style
@charset "utf-8";
/* CSS Document */
body {
background:#bfbfbf;}
#web_centre_wrap {
margin:0 auto;
width:860px;
height:auto;}
#header_home {
width:860px;}
#top_header_home {
background:url(images/home%20header/header_top_bg.png);
width:860px;
height:219px;}
#middle_header_left_home {
background:url(images/home%20header/banner_left_bg.jpg);
width:396px;
height:150px;
float:left;}
#middle_header_right_home {
background:url(images/home%20header/banner_monitor.png);
width:464px;
height:383px;
float:right;}
#menu_bar_home {
float:left;
height:121px;
width:396px;}
#bottom_header_home {
background:url(images/home%20header/bottom_header_bg.png);
width:396px;
height:112px;
float:left;
font-family: Verdana, Geneva, sans-serif;}
#header {
width:860px;}
#top_header {
background:url(images/top_header_bg.png);
width:860px;
height:369px;}
#bottom_header {
background:url(images/bottom_header_bg.png);
height:121px;
width:464px;
float:right;}
#menu_bar {
width:396px;
height:121px;
float:left;}
#content {
background:#fff;
height:auto;
width:589px;
float:left}
#sidebar {
background:#fff;
height:auto;
width:271px;
float:right;}
#quote {
background: url(images/quote_bg.png) no-repeat;
height:341px;
width:258px;
margin:0 auto;}
#testimonials {}
#footer {
background:url(images/footer_bg.png) repeat-x;
height:253px;}
#contact {}
#cpptu {}
.first_header_word {
color: #3181fa;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
font-size:20px;}
.header_word {
color: #a8a8a8;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
font-size:20px;}
.content_txt {
color: #a8a8a8;
text-align:left;
font-family: Verdana, Geneva, sans-serif;
font-size:18px;}Hi Murray,
Thank you for responding to my query.
I haven’t noticed any problems occurring as a result of using short hand when applying CSS styles but I will take your advice on board and start using long hand.
I have just noticed there are very few paths with spaces, I was aware that using spaces or other punctuation in paths on a website is a bad idea. I didn’t notice I let some slip through so thank you for pointing that out.
My website width is 860px and the two divs I mentioned #content & #sidebar their combined widths equal 860px. All my divs are wrapped inside #web_centre_wrap. As the two divs widths equals the website width they should sit next to each other as I have floated #content to the left and #sidebar to the right. As I said the divs sit next to each other when previewed in the browser just not in design view which is extremely distracting. Are you advising that I should wrap #content & #sidebar inside another div for example:
<div id=” content_centre”>
<div id=””>content</div>
<div id=”sidebar”>
<div id=”quote”></div>
<div id=””>testimonials</div>
</div><!-- end #sidebar -- >
</div><!-- end #content_centre -- >
Thank you again for your help
Kind regards
Elliot -
Style Message in design view with Apache Trinidad HTML components
Hi !!!
I'm using Apache Trinidad HTML components. In that components after using Table Layout I'm trying to use Row layout after dragging the row layout to the design view the following message is appearing in the design view, the same is happening in the browser window also.
style="position:absolute;width:auto;height:auto;top:0px;left:0px;bottom:0px;right:0px"
Thanks in Advance
Anil Kumar GollaRic,
First I created an application by selecting New Application from the Application Navigator. In that application window I submitted relevant names for creating the new application, after that it displayed the project window in that I given the project name then in Jdeveloper's Application window the project name is displayed from there I selected new by right clicking, in that New gallery window, I selected Web Tier > Page Template > Ok. In the Create Jsf Page template window I created a File Name and Facet Definitions namely North, West, East, South and Center. After that Jdeveloper created the new JSPX page. In that page first I dragged panel stretch layout from Adf Faces to the Jdeveloper's design view and given facet references (North, West, East, South and Center). In the North Portion I dragged the Apache Trinidad HTML's Table Layout component, after that Row layout, then in the design window I'm getting the "style="position:absolute;width:auto;height:auto;top:0px;left:0px;bottom:0px;right:0px". The same is displaying in the browser window also.
Thanks in Advance
Anil Golla -
Significant difference within design view Dreamweaver CC
Hi all
I am making a site in Dreamweaver CC and if honest, I have just noticed something that has stopped me in my tracks that I am hoping is a common occurrence. The site in question is using Dreamweaver's media queries and I have not touched the boilerplate.
Design view pre CSS styling;
Live view seems to ignore this arrangement and puts everything on the page to 100%
The HTML for this section is;
<!--START mortgage_choices section -------------------------------------->
<div class="light_grey_backround">
<div class="gridContainer clearfix">
<div class="fluid mortgage_choices_title">
<h1 class="dk_blue_text">Which type of new mortgage are you most interested in?</h1>
</div>
<div class="fluid mortgage_choices_subtitle">
<h2 class="dk_grey_text">Simply pick the category that you fall into for more information on how we can help you with your mortgage. </h2>
</div>
<div class="fluid mortgage_choices_box zeroMargin_tablet zeroMargin_desktop">
<figure class="fluid mortgage_choices_image">
<img src="_images/newhomesmortgages_htb.jpg" alt="Help to Buy Mortgages"/>
</figure>
<div class="fluid mortgage_choices_title">
<h3>HELP TO BUY MORTGAGES</h3>
</div>
<div class="fluid mortgage_choices_copy">
We specialise in the Governament backed Help to Buy mortgage scheme and the fantastic mortgage schemes available with it. Enjoy the huge
</div>
<div class="fluid mortgage_choices_action">
TELL ME MORE...
</div>
</div><div class="fluid mortgage_choices_box">
<figure class="fluid mortgage_choices_image">
<img src="_images/newhomesmortgages_mortgage_ftb.jpg" alt="First Time Buyer Mortgages"/>
</figure>
<div class="fluid mortgage_choices_title">
<h3>HELP TO BUY MORTGAGES</h3>
</div>
<div class="fluid mortgage_choices_copy">
We specialise in the Governament backed Help to Buy mortgage scheme and the fantastic mortgage schemes available with it. Enjoy the huge
</div>
<div class="fluid mortgage_choices_action">
TELL ME MORE...
</div>
</div><div class="fluid mortgage_choices_box zeroMargin_tablet">
<figure class="fluid mortgage_choices_image">
<img src="_images/newhomesmortgages_mortgage_ntb.jpg" alt="Next Time Buyer Mortgages"/> </figure>
<div class="fluid mortgage_choices_title">
<h3>HELP TO BUY MORTGAGES </h3>
</div>
<div class="fluid mortgage_choices_copy">
We specialise in the Governament backed Help to Buy mortgage scheme and the fantastic mortgage schemes available with it. Enjoy the huge
</div>
<div class="fluid mortgage_choices_action">
TELL ME MORE...
</div>
</div>
<div class="fluid mortgage_choices_box">
<figure class="fluid mortgage_choices_image">
<img src="_images/newhomesmortgages_mortgage_b2l.jpg" alt="Buy to Let Mortgages"/> </figure>
<div class="fluid mortgage_choices_title">
<h3>HELP TO BUY MORTGAGES</h3>
</div>
<div class="fluid mortgage_choices_copy">
We specialise in the Governament backed Help to Buy mortgage scheme and the fantastic mortgage schemes available with it. Enjoy the huge
</div>
<div class="fluid mortgage_choices_action">
TELL ME MORE...
</div>
</div>
</div>
</div>
<!--END mortgage_choices section ---------------------------------------->
The CSS
@charset "UTF-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
Dreamweaver Fluid Grid Properties
dw-num-cols-mobile: 4;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 25;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 85.5%;
padding-left: 2.25%;
padding-right: 2.25%;
clear: none;
float: none;
#div1 {
.title_index {
.subtitle_index {
.content_introduction {
.content_introduction_para_2 {
.mortgage_choices_title {
width: 100%;
margin-left: 0;
.mortgage_choices_subtitle {
.mortgage_choices_box {
background-color: #FFFFFF;
margin-bottom: 40px;
border-radius: 7px;
overflow-x: hidden;
overflow-y: hidden;
-webkit-box-shadow: 1px 1px 1px 1px #797979;
box-shadow: 1px 1px 1px 1px #797979;
width: 100%;
clear: both;
margin-left: 0;
.mortgage_choices_image {
width: 100%;
margin-left: 0;
.mortgage_choices_copy {
width: 100%;
margin-left: 0;
.mortgage_choices_action {
width: 100%;
margin-left: 0;
.rate_slider {
.rate_slider_header_title {
.rate_slider_subtitle {
.ratetitle {
font-family: 'Source Sans Pro', sans-serif;
font-size: 30px;
color: #0F232A;
margin-top: 35px;
font-weight: 300;
width: 90%;
margin-left: 5%;
line-height: 35px;
margin-bottom: 10px;
text-align: center;
.rate {
font-family: 'Source Sans Pro', sans-serif;
font-size: 30px;
color: #3FB0B9;
font-weight: 600;
width: 90%;
margin-bottom: -10px;
text-align: center;
margin-left: 5%;
.dealterm {
font-family: 'Source Sans Pro', sans-serif;
font-size: 22px;
color: #666666;
margin-bottom: 10px;
width: 90%;
margin-left: 5%;
line-height: 23px;
text-align: center;
.ltv {
font-family: 'Source Sans Pro', sans-serif;
font-size: 20px;
color: #666666;
margin-bottom: 10px;
width: 90%;
margin-left: 5%;
text-align: center;
.costs {
font-family: 'Source Sans Pro', sans-serif;
font-size: 17px;
color: #ccc;
font-weight: 300;
width: 49.1525%;
width: 90%;
margin-left: 5%;
margin-bottom: 10px;
text-align: center;
.erc {
font-family: 'Source Sans Pro', sans-serif;
font-size: 17px;
color: #ccc;
font-weight: 300;
width: 66.1016%;
width: 90%;
margin-left: 5%;
line-height: 20px;
margin-bottom: 10px;
text-align: center;
.revert {
font-family: 'Source Sans Pro', sans-serif;
font-size: 17px;
color: #ccc;
font-weight: 300;
width: 90%;
margin-left: 5%;
line-height: 20px;
text-align: center;
margin-bottom: 30px;
.protection_choices_title {
color: #3FB0B9;
width: 100%;
margin-left: 0;
.protection_choices_subtitle {
.protection_choices_box {
background-color:#0F232A;
margin-bottom: 40px;
width: 100%;
clear: both;
margin-left: 0;
.protection_choices_image {
width: 100%;
margin-left: 0;
.protection_choices_copy {
color: #FFFFFF;
overflow-y: hidden;
overflow-x: hidden;
border-radius: 7px;
-webkit-box-shadow: 1px 1px 1px 1px #666666;
box-shadow: 1px 1px 1px 1px #666666;
width: 100%;
margin-left: 0;
.protection_choices_action {
color: #3FB0B9;
width: 100%;
margin-left: 0;
.protection_question {
.protection_subquestion {
margin-bottom:40px;
.contact_us_number {
.contact_us_email {
.contact_us_form {
.whole_of_market_title {
.whole_of_market_subtitle {
.whole_of_market_lenders {
.downloads_library_title {
.downloads_library_subtitle {
.download_cover {
.zeroMargin_mobile {
margin-left: 0;
.download_cover_container {
.download_cover_graphic {
width: 100%;
clear: both;
margin-left: 0;
.zeroMargin_mobile {
margin-left: 0;
.hide_mobile {
display: none;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 87.75%;
padding-left: 1.125%;
padding-right: 1.125%;
clear: none;
float: none;
margin-left: auto;
#div1 {
.title_index {
.subtitle_index {
.content_introduction {
.content_introduction_para_2 {
.mortgage_choices_title {
width: 100%;
margin-left: 0;
.mortgage_choices_subtitle {
.mortgage_choices_box {
width: 48.7179%;
margin-left: 2.5641%;
clear: none;
.mortgage_choices_image {
width: 48.7179%;
margin-left: 0;
.mortgage_choices_copy {
width: 100%;
margin-left: 0;
.mortgage_choices_action {
width: 100%;
margin-left: 0;
.rate_slider {
.rate_slider_header_title {
.rate_slider_subtitle {
.ratetitle {
.rate {
.dealterm {
.ltv {
.costs {
.erc {
.revert {
.protection_choices_title {
width: 100%;
margin-left: 0;
.protection_choices_subtitle {
.protection_choices_box {
width: 48.7179%;
margin-left: 2.5641%;
clear: none;
.protection_choices_image {
width: 100%;
margin-left: 0;
.protection_choices_copy {
width: 100%;
margin-left: 0;
.protection_choices_action {
width: 100%;
margin-left: 0;
.protection_question {
.protection_subquestion {
.contact_us_number {
.contact_us_email {
.contact_us_form {
display: block;
.whole_of_market_title {
.whole_of_market_subtitle {
.whole_of_market_lenders {
.downloads_library_title {
display: block;
.downloads_library_subtitle {
display: block;
.download_cover_container {
.download_cover_graphic {
width: 100%;
clear: both;
margin-left: 0;
.hide_tablet {
display: none;
.zeroMargin_tablet {
margin-left: 0;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 78.6666%;
max-width: 1232px;
padding-left: 0.6666%;
padding-right: 0.6666%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
#div1 {
.title_index {
.subtitle_index {
.content_introduction {
.content_introduction_para_2 {
.mortgage_choices_title {
width: 100%;
margin-left: 0;
.mortgage_choices_subtitle {
.mortgage_choices_box {
width: 23.7288%;
clear: none;
margin-left: 1.6949%;
.mortgage_choices_image {
width: 100%;
margin-left: 0;
.mortgage_choices_copy {
width: 100%;
margin-left: 0;
.mortgage_choices_action {
width: 100%;
margin-left: 0;
.rate_slider {
.rate_slider_header_title {
.rate_slider_subtitle {
.ratetitle {
.rate {
.dealterm {
.ltv {
.costs {
.erc {
.revert {
.protection_choices_title {
width: 100%;
margin-left: 0;
.protection_choices_subtitle {
.protection_choices_box {
width: 23.7288%;
clear: none;
margin-left: 1.6949%;
.protection_choices_image {
width: 100%;
margin-left: 0;
.protection_choices_copy {
width: 100%;
margin-left: 0;
.protection_choices_action {
width: 100%;
margin-left: 0;
.protection_question {
.protection_subquestion {
.contact_us_number {
.contact_us_email {
.contact_us_form {
display: block;
.whole_of_market_title {
.whole_of_market_subtitle {
.whole_of_market_lenders {
.downloads_library_title {
display: block;
.downloads_library_subtitle {
display: block;
.download_cover_container {
.download_cover_graphic {
width: 15.2542%;
margin-left: 1.6949%;
clear: none;
.zeroMargin_desktop {
margin-left: 0;
.hide_desktop {
display: none;
Any help is appreciated as I am happy with what I have in design view, but it's live view that I am publishing...
Thanks in advanceThank you for looking, I have resolved this issue. I was to do with the image %'s. When I changed this, it all fell into place.
-
Design view and browser view in DW are different than when I view from local folder
I'm brand new to Dreamweaver CS5.5 and here is my problem:
I've made an html page in dreamweaver with a banner, with an additional graphic and some text on top of the banner. It displays just fine in every browser when I view from the local folder, but when I open DW and view, it displays incorrectly in all three design, live and browser views within DW. If I make changes to the css file until it views correctly in design view, it no longer displays correctly from the local folder and it still doesn't view correctly in live or browser view within DW. If what I'm doing isnt going to display accurately in any of the views provided by Dreamweaver as compared to the live server, whats the point in having this software? I could just keep building webpages in notepad and uploading with CoreFTP.
Any suggestions? Is it some setting that I dont know about that I need to change within DW? Please help.align="center" is deprecated (obsolete) code in XHTML & HTML5 doc types. Instead of styling markup with HTML, you should be using CSS.
CSS
.center {text-align:center}
HTML
<p class="center">some centered text here</p>
With respect to break tags, in XHTML doc types the correct syntax is <br /> not <br>. However your usage of line breaks is inconsistent with good symantic markup. Use headings <h1> <h2> <h3> <h4> for important keywords. Use <p> for descriptive paragraphs. Use <ul> <li> or <ol> <li> for lists. Line breaks should be used minimally if ever.
XHTML doc types require all tags to be lowercase. Uppercase tags will throw errors.
Your design is too rigid. When text size is increased in browsers, your content is unreadable. See screenshot.
SOLUTIONS:
1) DO NOT USE POSITION ABSOLUTE. You don't need it. Absolute positioning removes content from the normal document flow resulting in a jumbled mess. Use default CSS positioning (none) with margins, padding & floats to align elements.
2) Remove HEIGHT values from all CSS containers. Height limits a container's capacity to hold more content when needed. Container height should always be determined by the amount of content it holds; not explicit values. If required to reveal a background image, for example, use CSS min-height instead of height.
CSS Box Model
http://www.w3schools.com/css/css_boxmodel.asp
CSS Floats
http://www.w3schools.com/cssref/pr_class_float.asp
CSS min-height
http://www.w3schools.com/cssref/pr_dim_min-height.asp
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/ -
Design View and a CSS Div layout page
There are a few pages l
ike this. I am assuming it is because everything is layed out w
ith div tags, but there mush be a way to correct the desging view. Everything shows up great o
nline. Here is a screenshot:
Here is the code:
<body onload="initHomePage(); addReferToLinks();">
<!-- ################# TOOLBAR ############## -->
<script type="text/javascript" src="/shared_assets/toolbar_v2/toolbar.js"></script>
<!-- end TOOLBAR -->
<img src="/profile/image/logo_linknet.gif" />
<!-- Main div for entire page layout -->
<form name="frmSearch" action="" method="get" title="Resources" class="scopedSearch">
<input class="textInput" name="qt" value="THIS SECTION ONLY" id="searchField" size="20" />
<input class="button" type="submit" value="Search" name="submit" />
<input type=hidden name="col" value="mpr dno dnos1" />
</form>
<div id="main">
<!-- ###################### LEFT NEWS ################################## -->
<div id="newsBox" class="box">
<div class="boxHeader">
<div class="headerLeft"><h2>MP News</h2></div>
<div class="headerRight"><a href="/news/news/index.htm" class="more">more »</a></div>
</div>
<div class="boxContent">
<h3>
<script type="text/javascript">var x=new Date(); document.write(x.toLocaleDateString());</script>
</h3>
<div id="newsContent">
<div class="loading">
Loading...
</div>
</div>
<!-- -->
<h3>My Subscriptions</h3>
<ul style="list-style-type:none;">
<li><a href="http://rss/">Setup Subscriptions - Get Help</a></li>
<li><a href="http://">View Subscriptions</a></li>
</ul>
<!-- MEDIA CENTER -->
<div class="imgFrame"><a href=""><img src="image/mc_logo2.jpg" alt="Media Center" hspace="0" vspace="0" border="0" /></a></div>
<!-- COLUMNS -->
<div class="imgFrame"><a href="http/"><img src="image/columns.gif" hspace="0" vspace="0" border="0" alt="The Northwestern Columns" /></a></div>
</div>
</div>
<!-- #### end LEFT NEWS ########### -->
<!-- ###################### CENTER CONTENT ################################## -->
<div id="content">
<!-- MAIN CONTENT WELL -->
<!-- optional notice (visible only when critical news exists) -->
<div id="alert" class="box highlightBox">
<div class="boxHeader">
<div class="headerLeft"><h2>Important Notice</h2></div>
<div class="headerRight"> </div>
</div>
<div id="alertContent" class="boxContent">
<div class="article">
<a href="" class="headline">Avoid lock out - Install LINK 22.2 now</a>
Users who do not install LINK 22.2 before the version enforcement date of July 31 will be
unable to access their PCs.
</div>
</div>
</div>
<div id="home_page_id">) Home Page</div>
<!-- Activities -->
<div id="activities" class="box highlightBox">
<div class="boxHeader">
<div class="headerLeft">Welcome<span id="username"></span><h2>What would you like to do?</h2></div>
<div class="headerRight"> </div>
</div>
<div class="boxContent">
<div style="width:100%;">
<ul>
<li><a title="Find information and tools for recruiting new representatives" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Recruiting: <select style="font:message-box; width:19em;" onchange="if(this.value){window.navigate(appendReferer(this.value))};">
<option name="selectRecruit" selected="selected">*** make selection ***</option>
<option value="http.htm">Sourcing & Prospecting</option>
<option value="http://.htm">Selecting & Assessing Candidates</option>
<option value="http://_process.htm">Post Acceptance Process</option>
<option value="http">Developing an Internship Program</option>
<option value="http.htm">Tracking Activity, Results & Accountability</option>
<option value="http://.htm">Recruiter Development</option>
</select></a></li>
<li><a href="/objective/mpr_secure/mp_ldorgdev.htm" title="Find information and tools for developing leaders in your office" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Leadership & Organizational Development </a></li>
<li><a href="/objective/mpr_secure/mp_supvsn.htm" title="Find information and tools for effective supervision" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Supervision</a></li>
<li><a href="/objective/mpr_secure/mp_stfop.htm" title="Find information and tools for managing your office" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Staffing & Operations</a></li>
<li><a href="/objective/mpr_secure/mp_plnperform.htm" title="Find information and tools for business planning and performance monitoring" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Planning & Performance</a></li>
<li><a href="/objective/mpr_secure/mp_mngmntcompben.htm" title="Find information regarding income, fees, expenses, allowances and benefits" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Management Compensation & Benefits</a></li>
<li><a href="/objective/mpr_secure/mp_repdev.htm" title="Find information and tools regarding mentoring and professional growth" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Representative & Specialist Development</a> </li>
</ul>
<div id="slideshow1" class="activitySlideshow" style="height:212px;">
<img src="image/slideshow_photos/photo06.jpg" />
<img src="image/slideshow_photos/photo07.jpg" />
<img src="image/slideshow_photos/photo08.jpg" />
<img src="image/slideshow_photos/photo09.jpg" />
<img src="image/slideshow_photos/photo10.jpg" />
</div>
</div>
</div>
</div>
<!-- Lower div under activities (2 columns) -->
<div class="leftColumn">
<!-- Events Calendar -->
<div class="box">
<div class="boxHeader">
<div class="headerLeft"><h2>Events Calendar</h2></div>
</div>
<div class="boxContent"><ul>
<li>April 25-30<br />
<a href="http_020110.htm" target="_blank"></a></li>
<li>May 12-14<br />
<a href="http://030510.htm" target="_blank"></a></li>
<li>June 16<br />
<a href="http://.htm" target="_blank">Series conversation</a></li>
</ul>
</div>
</div>
<!-- Spotlight -->
<div class="box">
<div class="boxHeader">
<div class="headerLeft"><h2>Spotlight</h2></div>
<div class="headerRight"> </div>
</div>
<div class="boxContent">
<div class="article">
<!-- Leave "Market volatility resources available" at the top -->
<div class="headline"><a href="http.htm?tern Mutual Association dues decline form available</a> </div>
The $25 association membership fee will be charged to June 30 home
office supply bills. Representatives who wish to decline membership
may submit a <a href="http://.htm" target="_blank">decline
form</a>.
<div class="headline"><a href="http://.htm">Surplus notes information available</a> </div>
Find answers to common questions and hear insights from about the company’s recent surplus notes offering.
<div class="headline"><a href="http://.htm">Stay up to date on 2010 estate tax repeal </a> </div>
Consider the new Estate Tax Repeal page on LINKnet “home base” for information on the 2010 repeal and resources to use when talking to clients about this topic.
<div class="headline"><a href="http/index.htm">Withstanding Market Challenges</a> </div>
Access resources to highlight the company’s strength and stability, find sales strategies and share marketing and market-related materials to help address client concerns.
<div class="headline"><a href="http:///year.htm">Dividend resources available</a> </div>
The Current Year Scale page on LINKnet provides the latest information
and sales support materials based on the 2010 dividend announcement.
<!-- Leave "Market volatility resources available" at the top -->
</div>
</div>
</div>
</div>
<div class="rightColumn">
<!-- Approaching Deadlines -->
<div class="box">
<div class="boxHeader">
<div class="headerLeft"><h2>Approaching Deadlines</h2></div>
</div>
<div class="boxContent">
<ul>
<li>April 30: <a href="http.htm">Submit 2010 Commitment to Excellence Award nbominee</a></li>
<li>May 25: <a href="http.htm">Submit applications for Intern Community Service Award</a></li>
<li>June 30: <a href="http://pdf">Submit 2010 Managers Membership Award Application to NAIFA</a> <img src="/shared_assets/image/doc_icons/pdf.gif" alt="PDF File" /></li>
</ul>
</div>
</div>
<!-- Tech Alerts -->
<div id="techalerts" class="box">
<div class="boxHeader">
<div class="headerLeft"><h2>Priority Tech Alerts</h2></div>
<div class="headerRight"><a href="http://.htm" class="more">more »</a></div>
</div>
<div class="boxContent">
<div class="loading">
Loading...
</div>
</div>
<iframe name="techalerts" src="/statusdisplay/001_summary.htm" onreadystatechange="if(this.readyState=='complete'){this.previousSibling.innerHTML = formatTechAlert(frames['techalerts'].document.body.innerHTML);}"></iframe>
</div>
</div>
</div>Dreamweaver is pretty good these days at showing the page in Design View how it will be viewed when online. HOWEVER having said that it does largely depend on the way you write the css.
I guess for Dreamweaver it's impossible for it to show every concievable way you can write css correctly. Unfortuantely if your css is not compatible with what Dreamweaver likes it won't make a great job of rendering the site correctly in Design View, that's always been the case.
The css is not wrong but I've seen many display issues in Dreameaver Design View caused as a direct result of the css being overly complex to crack simple presentation. I guess it's in the lap of the gods if you are fortunate enough to have found the way to write css that Dreamweaver likes. -
How come I can see my div in design view but not in live view
Hi,
I have a div ID called "portfolio" that I can see in design view but not live view or on a browser. It's a little pink square and I want that square round also.
I ran it through validator. It picked up some things in the style.css which I changed and the boilerplate.css that I did not. Because I thought DW auto creates code for boilerplate because I don't enter that code myself.
It's also rejecting a lot of webkit code but this seems like standard webkit code that works elsewhere on the page.
BTW: at what point does this brutal hand coding pay off in money and less heartache when Wordpress looks cleaner and is so much easier to use? I feel like I barely know HTML or CSS in terms of translating vision to reality and with all-browser functionality after months and months of on-line classes. How long are the pros at it till they reach a watershed point?
here's my address: http://www.adjacentdimensionsmedia.com/home.html
Here's my html:
<body>
<div class="gridContainer clearfix">
<div id="div1" class="fluid"><img src="adtitle2.png" width="700" height="80" alt=""/></div>
<div class="fluid"><div class="box-shad"><a href="index.html"></a></div>
</div>
<div id="portfolio">Portfolio</div>
</body>
Here's my CSS:
.box-shad {
margin-top: 200px;
margin-left: 100px;
width: 900px;
height: 700px;
display: block;
background-image: url("images/Big-tree-trans1.png");
background-size: 900px 700px;
-webkit-box-shadow: 15px 15px 15px #000000 inset;
box-shadow: 15px 15px 15px #000000 inset;
-webkit-border-radius: 50%;
border-radius: 50%;
position: fixed;
.box-shad a {
display:block;
width:900px;
height:700px;
#portfolio {
width: 100px;
height: 100px;
margin-top: 0px;
margin-right: 200px;
margin-left: 200px;
margin-bottom: 0px;
border-radius: 75%;
-webkit-border-radius: 75% 75%;
background: pink;
top: -300px;
position: relative;The top:-300 is putting that div above the top of the browser viewport. Fix that and you'll see the div.
-
Certain images not showing up in Design View
Hi,
I recently switched from Dreamweaver CS5.5 to CS6 with Creative Cloud but now some of my images aren't showing up in Design View. Everything is fine in Live View.
Any help would be gratefully received. I have attached the CSS & the HTML as well as two screen shots of Design View and Live View.
The CSS is:
/* Getting the new tags to behave */
article, aside, audio,
canvas, command,
datalist, details,
embed,
figcaption, figure, footer,
header, hgroup,
keygen,
meter,
nav,
output,
progress,
section, source,
video {
display:block;
mark,
rp, rt, ruby,
summary,
time {
display:inline;
/* Global properties ======================================================== */
body {
background-color:#000;
background-repeat:no-repeat;
background-position:center top;
background-image:url(../images/body-bg.jpg);
background-attachment:fixed;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
line-height:1em;
color:#949595;
html {
min-width:967px;
html,
body {
height:100%;
/* Global Structure ============================================================= */
#main {
margin:0 auto;
width:967px;
font-size:.75em;
/* Header */
header {
position:relative;
/* Sidebar */
aside {
width:227px;
float:left;
margin-right:32px;
padding-bottom:33px;
/* Content */
section#content {
float:left;
width:675px;
padding-top:6px;
/* Footer */
footer {
padding-left:3px;
background:url(../images/border-left.png) repeat-y left top;
color:#535353;
/* Left & Right alignment */
.fleft {
float:left;
.fright {
float:right;
.clear {
clear:both;
.col-1,
.col-2,
.col-3 {
float:left;
.alignright {
text-align:right;
.aligncenter {
text-align:center;
.wrapper {
width:100%;
overflow:hidden;
/*----- form defaults -----*/
input,
select,
textarea {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
vertical-align:middle;
font-weight:normal;
fieldset {
border:0;
/*----- lists -----*/
.banners {
width:100%;
overflow:hidden;
padding-bottom:15px;
.banners li {
float:left;
padding-left:4px;
.list li {
font-size:1.17em;
padding:0 0 19px 22px;
background:url(../images/marker.png) no-repeat left 2px;
.list li.last {
padding-bottom:0;
.list1 li {
width:100%;
overflow:hidden;
padding-bottom:27px;
.list1 li img {
float:left;
margin-right:22px;
.column-list {
width:100%;
overflow:hidden;
.column-list li {
float:left;
width:200px;
margin-right:27px;
.column-list li.last {
margin:0;
.column-list li img {
margin-bottom:18px;
.events-list {
width:100%;
overflow:hidden;
.events-list li {
float:left;
line-height:1.5em;
width:320px;
margin-right:25px;
padding-bottom:20px;
.events-list li.alt {
margin-right:0;
.events-list li img {
float:left;
margin-right:11px;
.testimonials li {
line-height:1.5em;
padding-bottom:18px;
.testimonials li cite {
font-style:normal;
.testimonials li h5 {
text-align:right;
margin:0;
padding-top:6px;
/*----- other -----*/
.img-indent {
margin:0 0 20px 0;
.extra-wrap {
overflow:hidden;
p {
margin-bottom:16px;
line-height:1.5em;
dl {
line-height:1.5em;
dl dt {
font-weight:bold;
color:#4b4b4b;
margin-bottom:6px;
dl dd {
padding-bottom:20px;
dl dd.last {
padding:0;
.address dd {
clear:both;
.address dd span {
float:left;
width:96px;
.address dd a {
font-size:1.17em;
address {
font-style:normal;
line-height:1.5em;
address a {
font-size:1.17em;
address span {
float:left;
width:103px;
/*----- txt, links, lines, titles -----*/
a {
color:#12b7f4;
outline:none;
a:hover {
text-decoration:none;
h1 {
font-size:20px;
line-height:1em;
font-weight:normal;
padding:55px 0 0 3px;
h1 a {
color:#fff;
text-decoration:none;
h1 strong {
font-size:55px;
line-height:1.2em;
letter-spacing:-2px;
top:-37px;
position:relative;
h2 {
font-size:1.917em;
line-height:1.2em;
letter-spacing:-1px;
font-weight:normal;
h5 {
font-size:1em;
line-height:1.5em;
color:#4b4b4b;
margin-bottom:6px;
h5 a {
color:#4b4b4b;
.txt1 {
font-size:1.17em;
.rss {
position:absolute;
right:18px;
top:18px;
background:url(../images/rss.gif) no-repeat right top;
padding:10px 45px 8px 0;
color:#7d7d7d;
text-decoration:none;
font-size:1.17em;
text-transform:uppercase;
.rss:hover {
text-decoration:underline;
.link1 {
display:block;
position:relative;
float:left;
background-repeat:no-repeat;
background-position:right top;
background-image:url(../images/link1-right.png);
color:#fff;
line-height:1.2em;
text-transform:uppercase;
text-decoration:none;
cursor:pointer;
.link1 span {
display:block;
float:left;
background-repeat:no-repeat;
background-position:left top;
background-image:url(../images/link1-left.png);
padding:0 10px;
.link1 b {
background-repeat:repeat-x;
background-position:left top;
background-image:url(../images/link1-bgd.png);
padding:8px 7px 9px 7px;
display:block;
float:left;
.link1:hover b {
text-decoration:underline;
.link2 {
width:70px;
height:30px;
text-align:center;
text-transform:uppercase;
color:#fff;
text-decoration:none;
display:block;
float:right;
font-weight:bold;
overflow:hidden;
line-height:2.6em;
background-repeat:no-repeat;
background-position:left top;
background:url(../images/link2-bg1.png);
.link2:hover {
text-decoration:underline;
/*==================boxes====================*/
.nav-box {
width:100%;
position:relative;
padding-bottom:11px;
margin-top:-23px;
.nav-box .left {
padding-left:20px;
background:url(../images/nav-box-left.png) no-repeat left top;
.nav-box .right {
padding-right:20px;
background:url(../images/nav-box-right.png) no-repeat right top;
.nav-box nav {
height:72px;
background:url(../images/nav-box-tail.png) repeat-x left top;
.nav-box nav ul {
padding-top:13px;
width:100%;
overflow:hidden;
.nav-box nav ul li {
float:left;
font-size:1.583em;
line-height:1.2em;
letter-spacing:-1px;
.nav-box nav ul li a {
color:#535353;
display:block;
float:left;
cursor:pointer;
background:url(../images/spacer.gif);
text-decoration:none;
text-shadow:#fff 1px 1px;
.nav-box nav ul li a:hover,
.nav-box nav ul li a.active {
color:#fff;
background:url(../images/nav-act-tail.gif) repeat-x left top;
text-shadow:#fff 0 0;
.nav-box nav ul li a span {
display:block;
float:left;
background:url(../images/spacer.gif);
.nav-box nav ul li a:hover span,
.nav-box nav ul li a.active span {
background:url(../images/nav-act-left.gif) no-repeat left top;
.nav-box nav ul li a b {
display:block;
float:left;
background:url(../images/spacer.gif);
padding:10px 23px 14px 23px;
.nav-box nav ul li a:hover b,
.nav-box nav ul li a.active b {
background:url(../images/nav-act-right.gif) no-repeat right top;
.box {
width:237px;
color:#fff;
.box .top {
background-repeat:no-repeat;
background-position:left top;
background-image:url(../images/box-top.png);
height:14px;
overflow:hidden;
font-size:0;
line-height:0;
.box .bot {
background-repeat:no-repeat;
background-position:left top;
background-image:url(../images/box-bot.png);
height:15px;
overflow:hidden;
font-size:0;
line-height:0;
.box .xcontent {
background-repeat:repeat-y;
background-position:left top;
background-image:url(../images/box-tail.gif);
.box .xcontent .bg {
min-height:137px;
height:auto!important;
height:137px;
background-repeat:no-repeat;
background-position:left top;
background-image:url(../images/box-bg.jpg);
.box .inner {
padding:2px 35px 0 26px;
.box h2 {
font-size:2.417em;
font-weight:bold;
margin-bottom:4px;
text-shadow:#0b97e4 1px 1px;
.box p {
line-height:1.583em;
margin-bottom:9px;
/* box style1 */
.box.style1 .top {background-image:url(../images/box-top1.png);}
.box.style1 .bot {background-image:url(../images/box-bot1.png);}
.box.style1 .xcontent {background-image:url(../images/box-tail1.gif);}
.box.style1 .xcontent .bg {background-image:url(../images/box-bg1.jpg);}
.box.style1 .link1 {background-image:url(../images/link1-right1.png);}
.box.style1 .link1 span {background-image:url(../images/link1-left1.png);}
.box.style1 .link1 b {background-image:url(../images/link1-bgd1.png);}
.box.style1 h2 { text-shadow:#78b10b 1px 1px;}
/* box style2 */
.box.style2 .top {background-image:url(../images/box-top2.png);}
.box.style2 .bot {background-image:url(../images/box-bot2.png);}
.box.style2 .xcontent {background-image:url(../images/box-tail2.gif);}
.box.style2 .xcontent .bg {background-image:url(../images/box-bg2.jpg);}
.box.style2 .link1 {background-image:url(../images/link1-right2.png);}
.box.style2 .link1 span {background-image:url(../images/link1-left2.png);}
.box.style2 .link1 b {background-image:url(../images/link1-bgd2.png);}
.box.style2 h2 { text-shadow:#ff6900 1px 1px;}
/* box style3 */
.box.style3 .top {background-image:url(../images/box-top3.png);}
.box.style3 .bot {background-image:url(../images/box-bot3.png);}
.box.style3 .xcontent {background-image:url(../images/box-tail3.gif);}
.box.style3 .xcontent .bg {background-image:url(../images/box-bg3.jpg);}
.box.style3 .link1 {background-image:url(../images/link1-right3.png);}
.box.style3 .link1 span {background-image:url(../images/link1-left3.png);}
.box.style3 .link1 b {background-image:url(../images/link1-bgd3.png);}
.box.style3 h2 { text-shadow:#ffad07 1px 1px;}
.box1 {
width:227px;
.box1 .top {
height:49px;
overflow:hidden;
background:url(../images/box1-top.png) no-repeat left top;
.box1 .bot {
height:17px;
font-size:0;
line-height:0;
overflow:hidden;
background:url(../images/box1-bot.gif) no-repeat left top;
.main-box .box1 .border-left {
padding-left:1px;
background:url(../images/box1-border.gif) repeat-y left top;
.main-box .box1 .border-right {
padding-right:1px;
background:url(../images/box1-border.gif) repeat-y right top;
.main-box .box1 .xcontent {
width:100%;
min-height:261px;
height:auto!important;
height:261px;
padding:0;
background:url(../images/box1-tail.gif) repeat-x left top #f8f8f8;
.main-box .box1 .inner {
padding:12px 14px 20px 18px;
.box1 h2 {
font-weight:bold;
color:#fff;
padding:10px 0 0 18px;
.box2 {
width:227px;
.box2 .top {
height:15px;
overflow:hidden;
background:url(../images/box2-top.png) no-repeat left top;
.box2 .bot {
height:16px;
font-size:0;
line-height:0;
overflow:hidden;
background:url(../images/box2-bot.gif) no-repeat left top;
.main-box .box2 .border-left {
padding-left:1px;
background:url(../images/box2-border.gif) repeat-y left top;
.main-box .box2 .border-right {
padding-right:1px;
background:url(../images/box2-border.gif) repeat-y right top;
.main-box .box2 .xcontent {
width:100%;
min-height:113px;
height:auto!important;
height:113px;
padding:0;
background:url(../images/box2-tail.gif) repeat-x left top #f6f6f6;
.main-box .box2 .inner {
padding:0 14px 20px 18px;
.box2 h2 {
font-weight:bold;
color:#3c3c3c;
margin-bottom:16px;
.main-box {
width:100%;
.main-box .left-top-corner {
background:url(../images/left-top-corner.png) no-repeat left top;
height:18px;
padding-left:18px;
.main-box .right-top-corner {
background:url(../images/right-top-corner.png) no-repeat right top;
height:18px;
padding-right:18px;
.main-box .border-top {
background:url(../images/border-top.png) left top repeat-x;
height:18px;
font-size:0;
line-height:0;
width:100%;
.main-box .border-left {
background:url(../images/border-left.png) left top repeat-y;
padding-left:3px;
.main-box .border-right {
background:url(../images/border-right.png) right top repeat-y;
padding-right:3px;
.main-box .xcontent {
background:#fff;
padding:0 2px;
.main-box .tail {
background:url(../images/main-box-tail.gif) repeat-x left top;
width:100%;
.main-box .inner {
padding:3px 15px 0 8px;
.main-box .inner1 {
padding:3px 8px 0 25px;
.main-box .inner1 aside {
margin:0;
.main-box .inner1 #content {
margin-right:32px;
width:665px;
.main-box .inner2 {
padding:3px 25px 35px 25px;
.main-box .inner2 #content {
width:auto;
float:none;
/*===== content =====*/
#content h2 {
color:#3e3e3e;
letter-spacing:0;
margin-bottom:16px;
#content .indent {
padding-bottom:60px;
#content .link2 {
background-image:url(../images/link2-bg2.png);
float:left;
/*===== Sidebar =====*/
aside .indent {
margin-bottom:20px;
/*===== footer =====*/
footer .right {
padding-right:3px;
background:url(../images/border-right.png) repeat-y right top;
footer .tail {
padding:17px 0 11px 27px;
background-color:#2d2d2d;
footer .line-ver {
background:url(../images/divider.gif) repeat-y 210px 0;
width:100%;
overflow:hidden;
footer .fleft a {
color:#535353;
text-decoration:none;
footer .fleft a:hover {
text-decoration:underline;
footer .fleft {
padding-bottom:8px;
footer .fleft ul {
padding:8px 0 3px 0;
footer .fleft ul li {
display:inline;
footer .fright {
padding:0 29px 0 0;
text-align:right;
footer .fright a {
color:#12b7f4;
footer .fright ul {
padding:8px 0 5px 0;
footer .fright ul li {
display:inline;
padding-right:15px;
margin-right:12px;
background:url(../images/divider1.gif) no-repeat right 3px;
footer .fright ul li a {
text-decoration:none;
color:#535353;
footer .fright ul li a:hover,
footer .fright ul li a.active {
color:#c4c4c4;
text-decoration:underline;
footer .fright ul li.last {
background:none;
padding:0;
margin:0;
/*----- forms -----*/
#subscribe-form .rowElem {
width:100%;
overflow:hidden;
#subscribe-form span {
display:block;
width:193px;
height:26px;
margin-bottom:6px;
background:url(../images/input-bg.png) no-repeat left top;
#subscribe-form input {
background:none;
border:0;
line-height:1.2em;
vertical-align:top;
margin:5px 0 0 10px;
color:#8c8d8d;
width:173px;
#subscribe-form a.fleft {
color:#4b4b4b;
font-weight:bold;
position:relative;
left:10px;
top:7px;
/* The Nivo Slider styles */
#slider_box{ width:946px; height:370px; margin-top:-3px; margin-bottom:15px;background:url(../images/bg_img.png) 0 0 no-repeat; padding:21px 0 0 21px}
#slider{ position:relative; width:925px; height:348px; z-index:88;overflow:hidden;}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0; margin:0;z-index:60;display:none;}
/* The slices in the Slider */
.nivo-slice {display:block; position:absolute;z-index:50;height:100%;}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a { position:absolute; bottom:-34px; z-index:99; cursor:pointer;text-indent:-5000px; width:30px; height:30px; display:block;}
.nivo-prevNav { right:135px; background:url(../images/marker_left.gif) no-repeat}
.nivo-prevNav:hover{ background:url(../images/marker_left_active.gif) no-repeat}
.nivo-nextNav {right:10px; background:url(../images/marker_right.gif) no-repeat}
.nivo-nextNav:hover{ background:url(../images/marker_right_active.gif) no-repeat}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav{ position: absolute;z-index:99; right:14px; bottom:21px;}
.nivo-controlNav a {position:relative;z-index:99;cursor:pointer; text-indent:-5000px; width:16px; height:16px; float:left; margin-right:6px; background:url(../images/buttons.png) right 0 no-repeat}
.nivo-controlNav a.active { background-position:left}
/* Caption styles */
.nivo-caption { padding-top:77px; height:270px; width:345px;position:absolute; top:0px; right:20px; color:#fff; z-index:99;}
.nivo-caption .box{ display:inline-block;background:url(../images/box.png) no-repeat; font:24px Arial, Helvetica, sans-serif; color:#fff; line-height:30px; text-align:center; font-weight:bold; width:83px; margin-right:10px;}
.nivo-caption .text1{ font:36px Arial, Helvetica, sans-serif; color:#39c0f8; font-weight:bold; display:inline-block; line-height:1.2em; margin-top:-7px;}
.nivo-caption .text2{ font:48px Arial, Helvetica, sans-serif; color:#fff; font-weight:bold; display:block; line-height:1.2em; margin-top:-10px; letter-spacing:-2px;}
.nivo-caption p{ font-size:12px; color:#fff; line-height:14px; font-weight:bold; padding-top:8px;}
.nivo-caption a{ display:inline-block; position:absolute; left:0; bottom:60px; background:url(../images/button-bg.png) 0 0 no-repeat; font:40px Arial, Helvetica, sans-serif; line-height:60px; padding-bottom:3px; text-align:center; width:194px; color:#fff; text-decoration:none; letter-spacing:-2px;}
.nivo-caption a:hover{ background-position:bottom}
.color1 p{ color:#454545}
.nivo-caption .color1 .text1{ font-size:30px; display:block; color:#454545; margin-top:0}
.nivo-caption .color1 .text2{ color:#3b3b3b; display:inline-block; letter-spacing:-3px}
.nivo-caption .color1 .box{ margin-right:0px; margin-top:7px; margin-left:7px}
#contacts-form .rowElem {
height:40px;
#contacts-form .rowElem span {
display:block;
width:300px;
height:26px;
margin-bottom:6px;
background:url(../images/input-bg_2.png) no-repeat left top;
#contacts-form input {
background:none;
border:0;
line-height:1.2em;
vertical-align:top;
margin:5px 0 0 10px;
color:#8c8d8d;
width:300px;
#contacts-form .rowElem1 span {
display:block;
width:300px;
height:175px;
margin-bottom:21px;
background:url(../images/textarea-bg.gif) no-repeat left top;
#contacts-form textarea {
width:300px;
height:168px;
overflow:auto;
background:none;
border:0;
color:#8c8d8d;
padding:5px 0 2px 10px;
#contacts-form .link2 {
margin-left:15px;
/*==========================================*/
The HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>TravelSober.com Eastern Caribbean Sober Cruise</title>
<meta name="keywords" content="Sober cruise, sober cruises, sober cruise vacations, sober holidays, sober travel, sober vacation, sober vacations, aa convention, sober safari, sober travel.">
<meta name="description" content="Find out more about our Eastern Caribbean Sober Cruise or any of our other sober vacations.">
<!-- TemplateEndEditable -->
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="screen">
<script type="text/javascript" src="js/ie_png.js"></script>
<script type="text/javascript">
ie_png.fix('.png, .nav-box .left, .nav-box .right, nav, footer .right, footer, #slider, #slider .inside a, .box .top, .box .bot, .link1, .link1 span, .link1 b, .list li, .main-box .left-top-corner, .main-box .right-top-corner, .main-box .border-top, .main-box .border-left, .main-box .border-right, .box1 .top, .box2 .top, .link2, .link3, .events-list li img, #subscribe-form span');
</script>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
<style type="text/css">
body,td,th {
font-size: 92%;
</style>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-21210386-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<link href="images/favicon.ico" rel="SHORTCUT ICON">
</head>
<body id="page7">
<div id="main">
<!-- header -->
<header>
<h1><a href="index.html"><strong>TravelSober.com</strong></a></h1>
<div class="nav-box">
<div class="left">
<div class="right">
<nav>
<ul>
<li><a href="index.html"><span><b>Home</b></span></a></li>
<li><a href="about-us.html"><span><b>About Us</b></span></a></li>
<li><a href="planned-trips.html"><span><b>Planned Trips</b></span></a></li>
<li><a href="instant-specials.html"><span><b>Bob's Super Specials</b></span></a></li>
<li><a href="testimonials.html"><span><b>Testimonials</b></span></a></li>
<li><a href="contact-us.html"><span><b>Contact Us</b></span></a></li>
</ul>
</nav>
</div>
<a href="#" class="rss">RSS</a> </div>
</div>
<ul class="banners">
<li>
<div class="box">
<div class="top"></div>
<div class="xcontent">
<div class="bg">
<div class="inner">
<h2>Sober Cruises</h2>
<p>Our cruises go to the best destinations on earth on a budget or in 6 Star luxury.</p>
<div class="wrapper"><a href="planned-cruises.html" class="link1"><span><b>more</b></span></a></div>
</div>
</div>
</div>
<div class="bot"></div>
</div>
</li>
<li>
<div class="box style1">
<div class="top"></div>
<div class="xcontent">
<div class="bg">
<div class="inner">
<h2>Friends of Lois Trips</h2>
<p>Al-Anon conferences and vacations</p>
<div class="wrapper"><a href="friends-of-lois-trips.html" class="link1"><span><b>more</b></span></a></div>
</div>
</div>
</div>
<div class="bot"></div>
</div>
</li>
<li>
<div class="box style2">
<div class="top"></div>
<div class="xcontent">
<div class="bg">
<div class="inner">
<h2>Conventions</h2>
<p>We take advantage of the many worldwide AA conventions combining them with tours.</p>
<div class="wrapper"><a href="sober-cruise-greece-2013.html" class="link1"><span><b>more</b></span></a></div>
</div>
</div>
</div>
<div class="bot"></div>
</div>
</li>
<li>
<div class="box style3">
<div class="top"></div>
<div class="xcontent">
<div class="bg">
<div class="inner">
<h2>Recovery</h2>
<p>Check out our sober resources page for all fellowships and the chance to meet new friends.</p>
<div class="wrapper"><a href="recovery-resources.html" class="link1"><span><b>more</b></span></a></div>
</div>
</div>
</div>
<div class="bot"></div>
</div>
</li>
</ul>
</header>
<div class="main-box">
<div class="left-top-corner">
<div class="right-top-corner">
<div class="border-top"></div>
</div>
</div>
<div class="border-left">
<div class="border-right">
<div class="xcontent">
<div class="tail">
<div class="inner2">
<!-- content -->
<section id="content">
<h2><b>Costa Caribbean Cruise on the Mediterranea
- November 30 – December 10, 2012</b><br><br>
<b>From $699 Per Person / Double-Occupancy. 10 days for the price of 7!</b></h2>
<p> <img src="images/costa-mediterranea-sober-cruise- caribbean-2012.jpg" alt="sober_cruise_caribbean" width="320" height="204" align="right"></p>
<h5>Enjoy the Bahamas, Jamaica, Grand Cayman Islands, Roatan, Belize and Cozumel with a round-trip from Miami. You will experience great Italian cuisine, fabulous entertainment and famous <i>In This Life</i> Custom Excursions. We will feature the best of snorkeling, scuba, golf, dolphin encounter and much more!<p></p>Get on board for one of our latest once in a lifetime opportunities. Costa Cruises has reached out to showcase their ships and famous Italian ambience. We have traveled extensively with Costa on one of their best vessels, the Mediterranea. <p></p>This is one of the most popular vessels in the Costa fleet and has been enjoyed by hundreds of <i>In This Life</i> clients. Costa has extended special rates because of the unfortunate accident in Europe. They are giving <i>In This Life</i> guests 10 days for the price of 7 with free upgrades on their November 30 combination Eastern-Western Caribbean cruise.<p></p>Join us for various meetings onboard everyday!</h5>
<h5>10-day itinerary includes: <dir>
<p>Day 1: Depart 9.00pm: Miami, Florida,<br>
Day 2: 9.00am - 6.00pm: Nassau, Bahamas,<br>
Day 3: At Sea,<br>
Day 4: 12.00pm - 7.00pm: Ochos Rios, Jamaica,<br>
Day 5: 9.00am - 6.00pm: Grand Cayman,<br>
Day 6: At Sea,<br>
Day 7: 8.00am - 6.00pm: Roatan, Honduras,<br>
Day 8: 8.00am - 5.00pm: Belize,<br>
Day 9: 8.00am - 7.00pm: Cozumel, Mexico,<br>
Day 10: At Sea,<br>
Day 11: Miami, Florida: Arrive 8.00am.</p>
</dir><h2>ITL special - Save up to $200 per person! These are exclusive prices ONLY AVAILABLE from <i>Travel Sober</i>. </h2>
<img src="images/Cribbean-sober-cruise-2012.jpg" alt="sober_cruise_caribbean" width="394" height="264" align="right">
<h5><p></p>Inside Cabin: $699<br>Ocean View Cabin: $699<br>Deluxe Ocean View Cabin: $899<br>Veranda Cabin: $899</p>
<p></p>
<p>Book an Inside Cabin for $699 and be upgraded for free to Ocean View.
<p></p>Book Deluxe Ocean View for $899 and be upgraded for free to Veranda.
Other free upgrades within categories – placement on first come, first served basis.
<p></p>This is a Sober Cruise. Get a group together and get extra PERKS!
</p>
<p><h2>Deposit now for best cabin placement, specials and free upgrades!</h2><br><br>
<img src="images/in-this-life-logo.jpg" alt="sober_cruise_caribbean" width="300" height="214" align="middle">
<h5><h2>
Call or Email Us Today</h2></a>
<p></p><h2>Office: (805) 927-6910</h2>
<h2>Toll Free: (800) 531-7578</h2>
<p></p><br>
<h2>Email:<a href="mailto:[email protected]" class="txt1"> [email protected]</h2></a><br>
<h2>Email:<a href="mailto:[email protected]" class="txt1"> [email protected]</h2></a>
</p></h5>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- footer -->
<footer>
<div class="right">
<div class="tail">
The MORE buttons aren't images. They are in the HTML and appear to be styled with CSS to look like button images.
<span><b>more</b></span>
Unfortunately, Design View is incapable of displaying CSS border-radius, gradients, shadows and other CSS level 3 properties. That's why we have Live View which behaves more like a real browser.
If you can't live with this, disable CSS in DW by going to View > Style Rendering > untick display styles.
Or, use a Design-Time Style Sheet that contains no CSS level 3 properties.
Nancy O.
Maybe you are looking for
-
I have a Time Capsule of the 4th generation and I am pretty impressed since I just had a fried harddrive on my 3 month old Imac and Time Capsule restored it fully including all programs etc. without having me to put in all serial numbers etc. for tha
-
Safari 2.0.1 Crashes upon opening
Try as I might, I can't get the updated version of safari to open. I just installed OSX 10.4 (From a brand new DVD I just purchased from the Apple Store) And was running a much older version of Safari (1.2 or so) I have attempted to remove all the fi
-
Photoshop Element 6 and Mac OS 10.8 Mountain Lion
Does anyone knows if PE 6 works fine with OS10.8 ? Actually i'm under OS 10.6.8 Thank's Have a good day lannig
-
Hello Experts. We have a problem here. There is an employee say : X in position ABC which belongs to Org Unit XYZ. Now, there is a change in the Org Structure. The postion has not changed, the employee belongs to the same position. But the Org Unit h
-
Not Getting F1 help Documentation
Hi All, In any Field if i press f1 Performance assistant box is opening but it is blank. Can any one help me to get the documentation in the performance Assistance box. Thanks Partha