Layout / Design View questions

This is the sort of thing I've wondered about before, but
would really like to get to the bottom of.
Sometimes things seem to go a bit funny in design view -
although the page will display correctly in a browser - but can
anyone let me know if there is something not quite right somewhere,
or if it actually really matters?
As an example, I've posted some screenshots on the link
below. The only difference is that the 'footer' div has been added
to the second page. They're both fine in the browser, but as you
can see from the screenshots, the first is fine in design view, but
the second (the bottom two screenshots) it all looks wrong.
Basically is this anything to worry about?
Even if it isn't, it is a bit annoying, as from a design POV
it's good to see things as they should be!
screenshot
1
My second question is about TD widths - in these pages I have
a wrapper div set at 780px, and in the table containing the
navigation, they navigation buttons/graphics seem to need to be one
px narrower than they actually are (54 instead of 55px etc) in
order for them to line up to the total 780px, as per the screenshot
below :
screenshot
2
If anyone could shed any light on any of this it would be
greatly appreciated.
Cheers,
Iain

dukla wrote:
> Basically is this anything to worry about?
No its nothing to worry about.
I don't know what version of DW you are using but all
versions up to
2004 didn't handle css that well.
I believe DW8 has improved. However having said that I have
found a lot
of the time that it also has a lot to do with how you write
the css. I
can't believe version 8 can possible cover all eventualities
so it
probably still shows the odd thing or two incorrectly.
Personally I never had much trouble with DW04. It works
pretty well with
the css I write.
> Even if it isn't, it is a bit annoying, as from a design
POV it's good to see
> things as they should be!
Yeah it does get a bit annoying but you have to work through
it.
> My second question is about TD widths - in these pages I
have a wrapper div
> set at 780px, and in the table containing the
navigation, they navigation
> buttons/graphics seem to need to be one px narrower than
they actually are (54
> instead of 55px etc) in order for them to line up to the
total 780px, as per
> the screenshot below :
>
>
http://www.handprintwebdesign.co.uk/CollinsBartholomew/tableDesign.htm
>
> If anyone could shed any light on any of this it would
be greatly appreciated.
I don't think this web thing is totally precise and sometimes
you have
to 'hack' it to do the job. Usually if thing are a px out I
don't bother
unless it screws the design up in too mmnay browsers.

Similar Messages

Flash Builder 4.7 and design view question

I have programmed a large, commercial level mobile application using Flash Builder 4.6. It is working GREAT when ran on both iOS and Android devices.
I was using the trial version of Flash Builder 4.6 to develop this application. I used the states feature that FB has built in to handle Portrait, Landscape, and Phone / Tablet configs. This means that I built 4 different layouts for all 8 of my views in my mobile application. Using the design view in FB 4.6 was what allowed me to do this.
I have to say that I LOVE Flash Builder so far. GREAT tool.
My trial ended just last week. I had to purchase version 4.7 of the software, only to find out that they REMOVED the design view from the software.
All complaining aside, what have other programmers who are in the same boat as me done as a solution? I would like to continue to program in AS and Flash Builder as I have taken the time to write the application and learn the whole platform.
As it stands now, I am in the process of downgrading my liscence keys from 4.7 to 4.6, but in order to do this I had to RETURN my retail version of FB 4.7 premium (bought online) and buy a volume liscening version (NOT through adobe, only allowed to do this through a reseller such as CDW). then once I have a key for 4.7 through volume liscencing, it can be downgraded to 4.6.
I'm hoping to get input from others in the same boat. Did you change Programming languages? if so, to what? Did you change IDE's? If so, to what?

Joe -
     I actually never completed the downgrade to 4.6 so I've been using 4.7 without the design view.    In 4.6, I would put a control on the view within design view. Then I would change each state, move it around, and it would be placed that way. In my case, each view has 4 states - portraitPhone, landscapePhone, portraitTablet, and landscapeTablet.   I had to do this 4 times for each control under 4.6
     So I went back and looked at my code in 4.7 and all the resulting code was these explicit x, y, height, and width values. See the code below:
<s:states> <s:State name="portraitPhone" stateGroups="phone,portrait"
/>
<s:State name="landscapePhone" stateGroups="phone,landscape"/>
<s:State name="portraitTablet" stateGroups="tablet,portrait"/>
<s:State name="landscapeTablet" stateGroups="tablet,landscape"/>
</s:states>
<s:List id="lstMake" x="10" y="19" height="25%" allowMultipleSelection="false"borderVisible="
true" click="changeMake(event)" labelField="label"width.landscapePhone="
295" height.landscapePhone="105"x.landscapeTablet="
25" y.landscapeTablet="54" width.landscapeTablet="461"height.landscapeTablet="
292" fontSize.landscapeTablet="24"width.portraitPhone="
182" height.portraitPhone="175"x.portraitTablet="
16" y.portraitTablet="35" width.portraitTablet="399"height.portraitTablet="
360" fontSize.portraitTablet="24">
<s:dataProvider>
<s:ArrayList id="makeCollection">
<fx:Object label="Cadillac" data="18"/>
<fx:Object label="Chevrolet" data="1"/>
<fx:Object label="Dodge" data="2"/>
<fx:Object label="Ford" data="3"/>
<fx:Object label="GMC" data="4"/>
<fx:Object label="Isuzu" data="6"/>
<fx:Object label="Jeep" data="7"/>
<fx:Object label="Licoln" data="8"/>
<fx:Object label="Mazda" data="9"/>
<fx:Object label="Mercury" data="10"/>
<fx:Object label="Nissan" data="11"/>
<fx:Object label="Oldsmobile" data="12"/>
<fx:Object label="Sterling" data="20"/>
<fx:Object label="Suzuki" data="13"/>
<fx:Object label="Toyota" data="14"/>
</s:ArrayList>
</s:dataProvider>
</s:List>
<s:Label x="10" y="8" fontSize="11" text="Vehicle Make"x.landscapeTablet="
10" y.landscapeTablet="23" fontSize.landscapeTablet="24"fontSize.portraitTablet="
24"/>
<s:Label x="143" y="11" fontSize="11" text="Vehicle Year"x.landscapePhone="
354" y.landscapePhone="10"x.landscapeTablet="
517" y.landscapeTablet="23" width.landscapeTablet="143"height.landscapeTablet="
26" fontSize.landscapeTablet="24"x.portraitPhone="
204" y.portraitPhone="8"x.portraitTablet="
446" y.portraitTablet="11" fontSize.portraitTablet="24"/>
<s:List id="lstYear" x="145" y="20" height="25%" allowMultipleSelection="false"borderVisible="
true" click="doYearChange(event)" dataProvider="{yearCollection}"labelField="
value"x.landscapePhone="
313" y.landscapePhone="19" width.landscapePhone="157"height.landscapePhone="
105"x.landscapeTablet="
524" y.landscapeTablet="54" width.landscapeTablet="343"height.landscapeTablet="
292" fontSize.landscapeTablet="24"x.portraitPhone="
200" y.portraitPhone="19" height.portraitPhone="194"x.portraitTablet="
453" y.portraitTablet="37" width.portraitTablet="276"height.portraitTablet="
358" fontSize.portraitTablet="24">
</s:List>
<s:List id="lstModel" x="10" y="147" height="30%" borderVisible="true"dataProvider="
{modelCollection}" labelFunction="lblFunct"width.landscapePhone="
460" height.landscapePhone="99"x.landscapeTablet="
13" y.landscapeTablet="384" width.landscapeTablet="992"height.landscapeTablet="
309" fontSize.landscapeTablet="24"x.portraitPhone="
10" y.portraitPhone="221" width.portraitPhone="301"height.portraitPhone="
184" allowMultipleSelection="false"click="doModelSelected(event)" fontSize.portraitPhone="
12"x.portraitTablet="
16" y.portraitTablet="428" width.portraitTablet="742"height.portraitTablet="
521" fontSize.portraitTablet="24"></s:List>
<s:Label x="12" y="132" fontSize="11" text="Vehicle Model"x.landscapeTablet="
10" y.landscapeTablet="354" fontSize.landscapeTablet="24"x.portraitPhone="
10" y.portraitPhone="207"x.portraitTablet="
10" y.portraitTablet="401" width.portraitTablet="154"height.portraitTablet="
21" fontSize.portraitTablet="24"/>
So instead of continuing to try and modify these values by hand, then run the program, using trial and error, I took a different tact.   I removed ALL x y height and width values. Then, I wrapped all the mxml code in either <s:HGroup or <s:Vghroup tags depending on what I wanted. Then I would just set the vertical and horizontal align on these groups. This allows everything to scale correctly based on the size of the view (each device really is a little different).   Finally, I hand entered things like font sizes by using State Groups like this:   fontSize.phone="12" fontSize.tablet="22".    It still took testing on the screen to see how my layouts worked but it just makes the UI so much easier to change around and works so much better with out all the static stuff in it.
If you have some time , I would suggest taking one of your 4.6 views that has all these static variables and trying to modify it to work like I said above.    My modified code (to do the same thing as above) is below:
<s:states> <s:State name="portraitPhone" stateGroups="phone,portrait"
/>
<s:State name="landscapePhone" stateGroups="phone,landscape"/>
<s:State name="portraitTablet" stateGroups="tablet,portrait"/>
<s:State name="landscapeTablet" stateGroups="tablet,landscape"/>
</s:states>
<s:VGroup height="100%" width="100%" verticalAlign="top">
<s:HGroup paddingTop="10" width="100%" height="50%">
<s:VGroup width="60%" paddingLeft="5">
<s:Label fontSize="11" text="Vehicle Make"fontSize.tablet="
24"/>
<s:List id="lstMake" width="100%" allowMultipleSelection="false"borderVisible="
true" click="changeMake(event)" labelField="label"fontSize.tablet="
24" fontSize.phone="12">
<s:layout>
<s:VerticalLayout horizontalAlign="contentJustify" requestedMaxRowCount.portraitTablet="8" requestedMaxRowCount.phone="6" requestedMaxRowCount.landscapeTablet="4"gap="
0" rowHeight.phone="28" variableRowHeight="false" rowHeight="55"verticalAlign="
middle"/>
</s:layout>
<s:dataProvider>
<s:ArrayList id="makeCollection">
<fx:Object label="Cadillac" data="18"/>
<fx:Object label="Chevrolet" data="1"/>
<fx:Object label="Dodge" data="2"/>
<fx:Object label="Ford" data="3"/>
<fx:Object label="GMC" data="4"/>
<fx:Object label="Isuzu" data="6"/>
<fx:Object label="Jeep" data="7"/>
<fx:Object label="Lincoln" data="8"/>
<fx:Object label="Mazda" data="9"/>
<fx:Object label="Mercury" data="10"/>
<fx:Object label="Nissan" data="11"/>
<fx:Object label="Oldsmobile" data="12"/>
<fx:Object label="Sterling" data="20"/>
<fx:Object label="Suzuki" data="13"/>
<fx:Object label="Toyota" data="14"/>
</s:ArrayList>
</s:dataProvider>
</s:List>
</s:VGroup>
<s:VGroup width="30%">
<s:Label fontSize="11" text="Vehicle Year"fontSize.tablet="
24"/>
<s:List id="lstYear" width="100%" allowMultipleSelection="false" borderVisible="
true" click="doYearChange(event)" dataProvider="{yearCollection}"labelField="
value" fontSize.phone="12" fontSize.tablet="24">
<s:layout>
<s:VerticalLayout horizontalAlign="contentJustify" requestedMaxRowCount.portraitTablet="8" requestedMaxRowCount.phone="6" requestedMaxRowCount.landscapeTablet="4"gap="
0" rowHeight.phone="28" variableRowHeight="false" rowHeight.tablet="55"verticalAlign="
middle"
/>
</s:layout>
</s:List>
</s:V

Design View question

Good evening,
I'm working on a site using a Dreamweaver template and for
some reason my "Design View" shows up only like you'll see in the
top image on this page:
http://community.middlebury.edu/~nmeiers/question.htm
I want the pages to appear like the template I put on the
bottom so I can see the design. It used to look like that and I
don't know what I changed. Any ideas?
(Yeah, I know Design View isn't ideal, but I'm not very good
at this and I like seeing the graphics.)
Thank you,
Nick

Looks like for the top image the style sheet isn't attached.
Walt
"Topkdlfs" <[email protected]> wrote in
message
news:gcro26$pnf$[email protected]..
> Good evening,
> I'm working on a site using a Dreamweaver template and
for some reason my
> "Design View" shows up only like you'll see in the top
image on this page:
>
>
http://community.middlebury.edu/~nmeiers/question.htm
>
> I want the pages to appear like the template I put on
the bottom so I can
> see
> the design. It used to look like that and I don't know
what I changed. Any
> ideas?
>
> (Yeah, I know Design View isn't ideal, but I'm not very
good at this and I
> like seeing the graphics.)
>
> Thank you,
> Nick
>

Se80 layout design: view context properties slow to update

In the view layout designer on the properties of each UI element, for. e.g, when I change a status by clicking a check box property on 'active' or 'hide/show' properties, the UI takes a while to synchronize and update its status changes.
If I move the mouse to another dependent property or a drop down, the changes are not reflected.
Does the sapgui need tuning? I have a powerful laptop with 1.5Gig memory and processor intel core duo at 1.8 Ghz.
Sapgui version is 7100.1.0.3050 and backend is WAS release 700 SPS 11.
Do you have any idea?
Message was edited by:
Guest

Hi there,
one of my colleagues is facing the same performance problem. It happens that he waits up to 5 minutes for the SE80 to react on a single click on of of the UI elements. The performance at runtime is quite good, but only the development seems to be slowed down.
I was wondering if anyone has experienced the same problem and has found a solution by now. It is quite urgent and most of all it makes the development really annoying. We're working on a 7.00 System with patch 13 btw.
Many thanks in advance.
Sebastian
p.s.: No there is not any SAP note, there isn't some help entry and as far as I searched this seems to be the only thread about this problem.

DW CS5 "Design view" question

Let me start by saying I'm very new to using DW and I'm getting all my GoLive sites moved over slowly.
For some odd reason in Design View, DW CS5 (Win) displays all the text on the page in bold type - making it impossible to tell what is or is not bolded in the actual view. It's very inefficient to have to check everything in the Live View to see what's bold and what isn't that needs to be.
I've looked though all the settings and options menus I could find, but can't locate where I can fix this glitch. Help would be MOST appreciated!
THANKS.

GoliveFan wrote:
My problem isn't with live sites, it's when I'm working on my computer with any site pages that all the text in the Design View is in bold. When I switch views to "Live View" it displays correctly.
Can you post a link to the code then if it has been something since you started? It's possible you may have discovered some odd bug with the code on your page but unless you post a link we are just shooting in the dark and can only guess.

Design View - problems, but does it matter?

Another design view question - I've looked through other
posts but not seen anything that's similar.
(Firstly, can't give a URL as I'm sensibly(?) doing a site
redesign offline...)
I've got a page that consists of three columns - each floated
left, each with nested divs (the nested divs are fixed width).
In design view, everything was fine with this structure - as
was preview in browser, and the page validates with DWCS3's
checker. But adding content to the first of the columns (within a
nested div) made the next two columns drop below the first in
design view - although DWCS3 validation and previewing is still
fine.
Through judicious deleting etc., I've found that it was a
floated element in a nested div within the first column, that
caused the subsequent elements to drop below the first column.
So my main question is - should I be worried by the design
view problems, or is It just an inconvenience?
(And if there's any other obvious problems I'm inviting by
structuring the page this way, please feel free to (gently) point
it out...!).
Thanks, Matt.

> So my main question is - should I be worried by the
design view problems
Yes. I'd say more, but I cannot see your page.
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
==================
"theboyfromthefens" <[email protected]>
wrote in message
news:fgaou7$hgv$[email protected]..
> Another design view question - I've looked through other
posts but not
> seen
> anything that's similar.
>
> (Firstly, can't give a URL as I'm sensibly(?) doing a
site redesign
> offline...)
>
> I've got a page that consists of three columns - each
floated left, each
> with
> nested divs (the nested divs are fixed width).
>
> In design view, everything was fine with this structure
- as was preview
> in
> browser, and the page validates with DWCS3's checker.
But adding content
> to
> the first of the columns (within a nested div) made the
next two columns
> drop
> below the first in design view - although DWCS3
validation and previewing
> is
> still fine.
>
> Through judicious deleting etc., I've found that it was
a floated element
> in a
> nested div within the first column, that caused the
subsequent elements to
> drop
> below the first column.
>
> So my main question is - should I be worried by the
design view problems,
> or
> is It just an inconvenience?
>
> (And if there's any other obvious problems I'm inviting
by structuring the
> page this way, please feel free to (gently) point it
out...!).
>
> Thanks, Matt.
>

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();">

<script type="text/javascript" src="/shared_assets/toolbar_v2/toolbar.js"></script>

<img src="/profile/image/logo_linknet.gif" />

<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">

<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>
    
    <div class="imgFrame"><a href=""><img src="image/mc_logo2.jpg" alt="Media Center" hspace="0" vspace="0" border="0" /></a></div>
    
    <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>


<div id="content">
   
   
   <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>
   
   <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>
   
   <div class="leftColumn">
   
    <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>
     
     <div class="box">
      <div class="boxHeader">
       <div class="headerLeft"><h2>Spotlight</h2></div>
       <div class="headerRight"> </div>
      </div>
      <div class="boxContent">
              <div class="article">
      
   <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.

               </div>
      </div>
     </div>
   </div>
   <div class="rightColumn">
   
    <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>
    
    <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.

Design view of CSS layout is innacurate

Hello all -
I'm beginning to redraft my company's hompage using a full
CSS layout instead of our current nested table layout. Since I need
to ensure that other staff members can edit pages freely - and I'm
the only person comfortable doing straight code - it's important
that the design view is as accurate as possible.
When editing in Dreamweaver 8, my three column layout (a left
table of contents, a center content column, and an additional
content right column) breaks so that the table of contents
dissapears. Some people have spoken with have suggested that my
problem might be the negative margins I'm using to position the
floated columns that form the meat of the page.
You can view the page here:
http://www.southernenvironment.org/test/home_redraft.html
The CSS is here:
http://www.southernenvironment.org/test/style_redraft.css
In addition, the header navbar also appears strangely. In
Design View, two word titles (ie. "Our Programs") break on to two
separate lines, instead of staying in one line as they do in
browsers I've tested.
The frustrating thing about this is that my design seems to
work in most browsers - but without a somewhat accurate
representation in Dreamweaver, I won't be able to sell the idea of
a standards-based revamp to other staff here.
Any ideas?
Matt

Your CSS is not tight enough to get accurate columns. You
shouldn't try to
define the columns with the body tag. For a purely CSS site,
you really find
out why the code is called 'cascading' styles. They cascade
all right. We've
just finished wrestling with a similar re-design with CSS and
the order of
how tags and files come into play is very important.
We have defined the body tag with background color, 0 margins
and font
family, color and size only. Header/footer and columns are
defined by ID.
The three "content" columns are within a page container,
header and footer
outside the page container. How these elements are placed is
important, as
they cascade.
We use 3 linked main css files, 1) Page Layout (3 or 4
different options) 2)
Page presentation (all text styles) 3) Page menu styles (only
menu styles).
They are in that order, as the only body tag is in Page
Layout.
If a page has a watermarked background we import the code
just for the
watermark.
This is not true for the home page, but all other pages in
the site.
http://www.nic.bc.ca/index.asp
I hope this helps.
Marianne
"homestar79" <[email protected]> wrote in
message
news:[email protected]...
> Hello all -
>
> I'm beginning to redraft my company's hompage using a
full CSS layout
> instead
> of our current nested table layout. Since I need to
ensure that other
> staff
> members can edit pages freely - and I'm the only person
comfortable doing
> straight code - it's important that the design view is
as accurate as
> possible.
>
> When editing in Dreamweaver 8, my three column layout (a
left table of
> contents, a center content column, and an additional
content right column)
> breaks so that the table of contents dissapears. Some
people have spoken
> with
> have suggested that my problem might be the negative
margins I'm using to
> position the floated columns that form the meat of the
page.
>
> You can view the page here:
>
>
http://www.southernenvironment.org/test/home_redraft.html
>
> The CSS is here:
>
>
http://www.southernenvironment.org/test/style_redraft.css
>
> In addition, the header navbar also appears strangely.
In Design View,
> two
> word titles (ie. "Our Programs") break on to two
separate lines, instead
> of
> staying in one line as they do in browsers I've tested.
>
> The frustrating thing about this is that my design seems
to work in most
> browsers - but without a somewhat accurate
representation in Dreamweaver,
> I
> won't be able to sell the idea of a standards-based
revamp to other staff
> here.
>
> Any ideas?
>
> Matt
>

Discrepancy between browser & design view; Hor. Rule Question

These are actually two issues, but I'm using one page as an example. I'm encountering this throughout other pages on the site.
Design view is absolutely killing me. I get the layout correct, but in brower view (this is both FF and IE) the margin space is not consistent at top and bottom and throws the design out of whack. Additionally, I love the look of horizontal rules, but there's a LOT of margin space around it. I'd like to reduce it. When I look in the code, I'm not seeing any errant p tags or line breaks.
Be advised the page I'm sending you is a child page from a template. I've set up one editable region. I've edited the padding / margin for the editable div on the template, which works well site-wide. There's also a little bit of padding in the CSS "body_text" that controls the formatting. It's cool site-wide as well.
I don't have this page linked yet, so it's not published. However, I've attached PDFs of the browser and design views, as well as the code as a word doc. The actual editable text region has been shaded gray so you don't have to wade through the template stuff.
Thanks.
W!

Often when you fix one code validation error, it takes care of several others.
Line 153 and 156 - take out the background="filename.html" attribute in your <td> tags
<td background="anniversaries.html"
<td background="firstfedonthemove.html"
Line 179 - change this
... Masters of Education Degree in Instructional Technology.</div>
to this
... Masters of Education Degree in Instructional Technology.</p> </div>
Republish the page and see if that helps.
Gotta run now. Maybe Murray can pick up from here.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics |
Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

How to view semantic css based layouts in design view in dreamweaver?

Hi all,
I havent had a lot to do with CSS based layouts (tables have alwasy just worked for me fine) but I am wondering how do I view the semantic/css based layout in design view in Dreamweaver?
As when I write the code, in design view its not showing me what the page will look like, I have to click on "Live View" to see what the page actually looks like.
I guess I am asking is there a way to using WYSIWYG on css layouts in design view??? Just like I do table layouts (In design view I can grab the edge of the table and resize etc)?
Any help would be great

Lou yeah I don't think the term WYSIWYG really applys to dreamweaver anymore when building CSS layouts.
The term "WYSIWYG" never applied to DW. It was never such a thing, nor was any other HTML authoring, no matter what the marketing hype said. It's not possible to deliver wysiwyg layouts when there are so many different browsers/platforms/versions to worry about. This is particularly true when you go back to the era when WYSIWYG was actively used (but not with DW, which was not advertised in such a way) - Netscape 4, and IE5/Mac would alone be enough to destroy any layout....
The view you are getting in Design view is happening because your CSS is misplaced BELOW the <body> tag - it should be in the head of the page (i.e., above </head>). Your CSS should never be placed within the body of the page.

Live View worse than Design view, both bad, CSS & layout not applying

Howdy,
So I'm trying to do some work on the the page seen here:
http://www.juniper.net/us/en/products-services/network-management/
(I've attached a screenshot of it.)
I view the source for that page and copy it into a new blank page in code view using DW CS4.
I copy all the relevant related files, as far as I know, including at least all the CSS and image files.
I view the page in Design View, and some of the styles, primarily on the text are clearly being applied. The layout, though, is all wrong, with the navigation spread out over the top without any text styling or background images, tho a few other images do show up (one in the header area and some in the body, ones that should all be about in the same directory), and the content area pushed waay out the right.
Live View is even worse, no styling at all on any of the text, and it doesn't seem to be able to locate any of the images, so it's all plain default HTML-styled text.
This is a fresh installation of CS4.
DW 8 seemed to have a similar problem rendering this layout in design view, but appplying a few design-time stylesheets, ones that should have been applying, but somehow weren't, seemed to do it, or at least pretty close. That same strategem did not seem to work here. Plus, doesn't the fact that the correct stylesheets show up as "related files" in the related files bar mean that DW knows about them and are/should be doing its level best to be applying them already?
I'm not sure how much more I can share, but does anyone have any thoughts about how to make DW render correctly?

So here's a little more info for a more complete picture of the problem...
I do have access to the original CSS, JS, and image files...When I said that I copied all the files that I believe to be relevant, I mean that I downloaded all the files from the \assets and \shared directories from the content management system, which should contain all the CSS, JS, and image files that the page uses.
When I view the file into which I saved the page's View Source on my testing server via an actual browser window, the page looks as expected.
So, to sum up:
All the support files and "related files" seem to be in place.
When viewed through a browser fed by a web server, the file/page looks as expected. Checked in Firefox v3.5.3, IE 8, and Chrome v3.0.195.24.
When viewed in Design View, the layout looks wonky, some of the styles seem not to be applied to the navigation/header area (notably, I guess, the positioning of the navigation and content area relative to the navigation, as well as some of the text styling on the navigation), and most if not all the styling (text formatting, layout) seems to be applying in the content area. The Related Files bar seems to list all the expected related files.
When viewed in Live View, no styling is being applied anywhere. Live View is based on an integrated WebKIT browser, so it should render most closely to Chrome, right?
I know little to nothing about relevant web server configuration. Could it be possible there's some web server configuration that's set up on Juniper's web server that Dreamweaver doesn't mimic, at least by default? Are there web server configuration settings for the integrated Live View "server" that I could check?

Print Layout Designer question

In Trial Balance there is a checkbox that I can select to "Hide Titles", but this same checkbox is not available in the Trial Balance Budget Report. How can I hide the titles for Trial Balance Report in Print Layout Designer? (Hide Titles is variable 156)
Any help is appreciated, thank you.

The Titles get dynamically populated to the Account Name field on the PLD. Without the Hide Titles check box there is no logic to intelligently hide just the Titles. If you hide this field on the PLD all account names would be hidden.

Layout Problems in Design View

Our wedsites use server side includes that control the way
the page is laid out. My design view is not laid out the way it
should be. If I go to the preview, it is perfect, but from the
design view in Dreamweaver things are out of order. My navigation
menu is hanging over my text, and I can't seem to get it to
properly lay out on the page. Does anyone know how to fix this? I
can email a copy of the page view if anyone wants to see it.
Thanks!

DW is perhaps confused by your doctype which seems to be
suggesting both
XHTML Strict and XHTML Transitional -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I would say fix that, and the other validation errors from
http://validator.w3.org first,
and then we'll look at the page again.....
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
==================
"TyhitiaF" <[email protected]> wrote in
message
news:ecl1dh$5a3$[email protected]..
>I can show you what is is suppose to look like. If you go
to the page
>below
> you can see what the pages look like online. My problem
is, in design
> view of
> dreamweaver, the information about section to the left
is placed over the
> information to the right. Then all of it is shifted to
the left.
>
>
http://www.ualr.edu/admissions/
>

Design view not showing actual layout

I have a test page where I have a navigation div element
created and it floats to the left. When I preview the page in IE,
this navigation div element shows up as it should on the left part
of the page but in the Design view of Dreamweaver CS3, the nav
element box is centered and it makes it difficult if not impossible
to type my content in because the nav box is sitting dead in the
middle of the page where the content is supposed to go. Please
help.

Let's see the page's code, please. Can you post a link to it?
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
==================
"Johnny the boy" <[email protected]> wrote
in message
news:fkhdn3$3vi$[email protected]..
>I have a test page where I have a navigation div element
created and it
>floats
> to the left. When I preview the page in IE, this
navigation div element
> shows
> up as it should on the left part of the page but in the
Design view of
> Dreamweaver CS3, the nav element box is centered and it
makes it difficult
> if
> not impossible to type my content in because the nav box
is sitting dead
> in the
> middle of the page where the content is supposed to go.
Please help.
>

Layout dosn't look right in design view

I have made the following to re-create the cross pattern I used for a FrontPage website:
http://www.benedictines-cib.org/demo/cross.html
It looks right in the browser, but when I view the page in design view (CS4) the navigation lines up on the left with the blue header and underneath it. Is this just something that happens? Or can I do something to avoid it? It looks fine in Live View.

This happens sometimes and it can be disconcerting, but the reality is design view is meaningless. I'd much rather have it perfect in the browser and not in DV thn the other way around. Code looks good, I'd not worry about it and let F12 be your freind.
Gary

Layout / Design View questions

Similar Messages

Maybe you are looking for