How to correct design view?

I got a strange problem in Design View: I set up Foundation 3. Works fine, shows exactly as it should be in a browser preview. But it shows horrible in design. Normally I work in the split view. Code on top, design below. Right now I might as well work with Notepad only.
It is possible it's a border problem, I had that in the past. Removing the border on a div solved the issue. But I can't do that here, because that is the very basis on which Foundation 3 works.
How do I correct this?

Perhaps CS7 will be on a par with modern browsers. CS6 is still about as
good as a 5 year old browser - sometimes. If you are using fairly
complex CSS, I would simply turn off CSS rendering in Design View so you
can edit content and rely on Live View (fairly good in CS6) or a real
browser preview to check your page.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998

Similar Messages

How to access design view in DW CC?

I am new to DW and am working in fluid grid. tutorial references design view (maybe with a toggle switch) - cannot find how to access 'design view'. any help would be appreciated.

If you use CC 2014.1 (October release) or 2014.1.1 (February release) you can't get to Design View b/c it was removed from FGLayouts.
New Features in CC 2014.1 October Release
http://helpx.adobe.com/dreamweaver/using/whats-new.html
New Features in CC 2014.1.1 February Release
https://helpx.adobe.com/dreamweaver/using/whats-new.html#Enhancements%20to%20Live%20View%2 0editing
Nancy O.

How to see Design View when using ?php require("header.htm"); ?

Hello
I'm new to DW CS4 and have what's probably a simple question, but I can't figure it out. I have a basic html website in which I'm using php require to call header.htm and footer.htm files. In CS4, when I open any page in the Design or Split view, it displays the header.htm file. The only way I have been able to view the content of the page is to delete the php require code in Code View. I then edit the page after which I have to paste the require code for the header.htm file back in before saving.
Is there an easy fix for this?
Many Thanks!

Thanks for your response. All of my pages are php pages in which I use the php require command to display a header and footer. In CS4, when I open any page from my site in Design or Split view, all I can see is the header.htm file. I cannot see any of the content from that particular page. I have to go into code view and delete the <?php require("header.htm"); ?> from the code. The I can view and edit that page's content after which I have to paste the <?php require("header.htm"); ?> command back in and load the saved file to the server. A royal pain in the butt.

It's in the code, but not in Design View...

I'm making a few small changes to the template of my site, and an odd problem has cropped up...
Here's the front page of the site: http://www.nemesis.to
The whole site has the same basic layout (only the "maincontent" div, the big space with a black background, has different stuff from page to page).
I'm trying to make some changes to the links in the grey panel at the top of every page - this is a div named "header2".
Somehow, I've managed to make the entire "header2" div vanish from Design View. But its code is still present and correct in Code View.
In Design View, I just see the white panel at the top of the page (the div named "header") with all its content, then the big area with the black background (the "maincontent" div), also with all its content. The grey panel which should sit between them has gone. But its code is all there!
I have no idea what caused this, or how to get Design View to show everything. I don't dare save the template, or upload any of my changes, in case the links panel disappears from my site, but I've undone all my changes so the code I'm looking at in Dreamweaver is exactly as it appears if you look at 'View Source' on the uploaded pages...
Unless, of course, I've missed something. All wise words gratefully received, because I 'm lost!

This is the style sheet for the problem page....and I think I may have spotted an error. "header2" is only 300 pixels wide by 50 pixels tall. That's way smaller than it should be!
Having said that, I have no idea how that could've changed, since I didn't (knowingly) alter anything...
I'm also not sure why I have so many font declarations. Again, I didn't knowingly do it that way. I was under the vague impression that Dreamweaver flagged up redundant code...
Anyway, here comes the CSS. "header 2" should be the same width as "header" so I think that's where the problem lies...
body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; background-color: #333; text-align: center; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; height: 40px; width: 960px; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; } #container { font-family: Arial, Helvetica, sans-serif; font-size: 100%; background-color: #000; text-align: left; width: 960px; margin-top: 0px; margin-right: auto; margin-bottom: 20px; margin-left: auto; border: 4px solid #FFF; padding: 0px; } #header { background-color: #FFF; width: 940px; height: 268px; padding-top: 2px; padding-right: 0px; padding-bottom: 0px; padding-left: 20px; } #header2 { text-align: left; width: 300px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 4px; border-left-width: 0px; border-bottom-style: solid; border-bottom-color: #FFF; background-color: #CCC; font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding-top: 5px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; color: #000; border-top-color: #FFF; float: right; height: 50px; } #maincontent { font-family: Arial, Helvetica, sans-serif; color: #FFF; background-color: #000; text-align: left; width: 920px; overflow: hidden; padding-top: 10px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } #footer { background-color: #CCC; text-align: center; padding: 10px; width: 940px; border-top-width: 4px; border-top-style: solid; border-top-color: #FFF; overflow: hidden; } #footer2 { color: #000; width: 920px; border-top-width: 4px; border-top-style: solid; border-top-color: #FFF; background-color: #CCC; height: 90px; overflow: hidden; padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; } a { font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 24px; font-weight: bold; } #container #header #masthead { background-color: #FFF; text-align: left; float: left; height: 260px; width: 550px; padding-left: 15px; } #container #header #topadbox { background-color: #FFF; border: 4px solid #666; } #container #header #topadbox { background-color: #FFF; float: right; height: 250px; width: 300px; padding: 0px; margin-right: 0px; border-top-width: 6px; border-right-width: 20px; border-bottom-width: 6px; border-left-width: 20px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #CCC; border-right-color: #CCC; border-bottom-color: #CCC; border-left-color: #CCC; } #container #footer #bannerbox { height: 90px; width: 728px; overflow: hidden; float: none; margin-right: auto; margin-left: auto; } #container #footer2 #creditsbox { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; line-height: normal; color: #000; background-color: #CCC; text-align: left; float: left; height: 90px; width: 250px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 15px; } #container #footer2 #creativecommonsbox { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #000; background-color: #CCC; text-align: left; float: left; height: 90px; width: 500px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 20px; line-height: 14px; } #container #footer2 #backtotopbox { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; background-color: #CCC; text-align: left; float: left; height: 80px; width: 100px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 20px; } .floatleft { float: left; margin-right: 8px; margin-top: 0px; margin-bottom: 8px; margin-left: 0px; } #container #footer2 a { } #container #footer2 a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 14px; } .overalltitle { font-family: Arial, Helvetica, sans-serif; font-size: 38px; font-weight: bold; color: #FF0; } .headlineband { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #FFF; } .supportband { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; color: #FFF; } .datedetails { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-style: italic; font-weight: bold; font-variant: normal; color: #FFF; } .maintext { font-family: Arial, Helvetica, sans-serif; font-size: 17px; font-weight: normal; line-height: 19px; } .floatright { margin-top: 6px; margin-bottom: 6px; margin-left: 8px; } #container #maincontent #archiveboxleft { font-family: Arial, Helvetica, sans-serif; float: right; width: 400px; margin-right: 40px; } #container #maincontent #archiveboxright { font-family: Arial, Helvetica, sans-serif; float: left; width: 400px; padding: 0px; margin-left: 40px; } #maincontent #archiveboxright p a { font-family: Arial, Helvetica, sans-serif; color: #F00; } #container #footer2 #creditsbox a { } #container #header2 a { font-family: Arial, Helvetica, sans-serif; font-size: 16px; } #container #maincontent #archiveboxright p a { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; color: #FFF; } #container #maincontent #archiveboxleft a { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; color: #FFF; } #container #maincontent .maintextbigger a { font-family: Arial, Helvetica, sans-serif; font-size: 20px; } #container #maincontent .maintextbigger a { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; } .centreimage { text-align: center; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #container #maincontent .linkbox { background-color: #000; height: auto; width: 500px; margin-top: 0px; margin-right: 210px; margin-bottom: 0px; margin-left: 210px; padding-left: 20px; } #container .searchsection { text-align: center; height: 30px; width: 660px; border-top-width: 4px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #FFF; border-right-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF; background-color: #CCC; padding-top: 10px; padding-right: 150px; padding-bottom: 10px; padding-left: 150px; margin-right: auto; margin-left: auto; overflow: inherit; } .specialheading { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-style: normal; line-height: normal; font-weight: bold; color: #FF0; } .specialheading2 { font-family: Arial, Helvetica, sans-serif; font-size: 36px; font-weight: bold; } .searchtext { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .frontpagecreditstext { font-family: Arial, Helvetica, sans-serif; font-size: 10px; } .maintextbandname { font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #FF0; font-weight: bold; } #navigationbox { background-color: #CCC; float: left; height: 50px; width: 550px; }

Why some times jdeveloper does not show a coreect design view ?

Hi
thank you for reading my post
why jdeveloper does not show a correct design view of jsf pages sometimes?
It does not shows labels and ... , just show tag names like : form , ... ?
here is a picture for this :
1-incorrect page:
http://www.flickr.com/photos/59086726@N00/217556594/
2-correct page :
http://www.flickr.com/photos/59086726@N00/217556595/
I just closed and open the IDE and page designer shows incorrect pages
thanks

Also try this...go to the project properties for the View project. Look at the JSF Libraries and remove the two JSF libraries and then re-add them....this sometimes helps.
Regards
Grant Ronald

Problem with Design View display

Hi,
Working happily in Design view using RH 10, and from one moment to the next the Design View display changed. The font display has changed to a truncated style and the word wrap has disappeared.
I tried rebooting and then reinstalling and no luck in getting rid of the issue.
The output is fine and as expected, so I am presuming that it isn't the CSS. Which I haven't edited for eons anyway so it really shouldn't be that anyway.
This is happening on all my help projects - each with a different CSS - so it can't be the css unless RH did some sort of strange global change behind the scenes without my knowledge.
Any thoughts on how to get Design View to display normally would be much appreaciated,
Thanks,
Tannis

Hi there
One possible suspect you may be unaware of is pressing and holding the Ctrl key as you rotate the wheel of a mouse. There may be a keyboard shortcut that would do this too.
Cheers... Rick

Dreamweaver CC - Design view images broken

A client contacted me today about how his DW design view is no longer showing external images. He thought it was the code. Now I don't use the design view very often, but it's doing it for me too. Every older project I open has broken images in design view. These are all images that are online and are using external links (HTML emails) so there is no reason for those images to be broken. They show in the Live View just fine, but my client can't edit with Live View. So, I updated DW and then found that they are also offering what looks like a new version, DW CC 2014. I downloaded that one and am having the same problem.
I've searched for about an hour now and can't find any solution to this. Does anyone know what is wrong here?

Hello jennisue,
Apologies for the issue you are facing but this is a known issue & sadly would not be taken up for a fix.
I would urge you instead to try out the new Live view editing capabilities in DW CC 2014.
-Subhadeep

In design view the cursor doesn't display correctly with text how to fix

When working in the design view in a text block the cursor shows in one spot but the code view show it is over a few characters so you have a real hard time editing text in that mode. How do you fix this. I have had this issue in several version of DW I am in 5 now.

I don't have this problem.
Which OS are you on?
Does this happen with all your sites or just one?
Are you working with valid HTML and CSS code?
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
Can you post a link to a page in which this occurs?
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

How to view correct image dimensions in design view?

I am new to Dreamweaver cs6. In previous version, the dimensions of an image is directly reflected in the design view. Now it doesnt appear to do so. Does anyone know if there is a setting to fix this? It looks fine when I preview in the browser, but I'd like to see how my page elements fit together in the design view. Any suggestions?

Here is the code for a similar example:
<td width="409" height="37"><img width="409" height="1" border="0" style="display:block; line-height:0;" src="http://offers2.compuware.com/rs/compuware/images/spacer.png" alt=""></td>
Although the height is set to 1, it is showing a height much larger than that (in both the design view and browser preview)
Thanks! I really appreciate the help.

Swing - Design View not shown correctly

I am using swing Layout Managers to design a JFrame. The problem is that the design view does not show correctly how the components are laid out. But when I run the application, the components are placed properly as expected. Why can't then jdeveloper show the components properly in the design view.
regards,
nirvan.

Just bouncing this one, in case it has eluded expericened eyes.

How to center page in Split and Design view?

When I look at my template in Design or Split View, it is flush right on my screen with a top margin of 20 px or so. But when I check it in Live View, or when I preview it on Firefox/Safari/Chrome/Opera, it is centered and flush against the top of the screen.
I should add that the template was fine in Design and split, until I started mucking about the a spry menu. My page fell apart, I deleted the spry with plans ot start over. But then I discovered my template flush right (in Design and Split, anyway).
Can anyone please tell me how to correct this? I suppose it's more of a nuisance than a tragedy, as long as the page is centered when it goes online. But it is a nuisance to work on the right side of the screen.
Coding follows:
    margin-top: 0px;
    margin-left: 0px;
#wrapper {
    background-image: url(../template%20images/mainBody.jpg);
    background-repeat: repeat;
    overflow: hidden;
    width: 800px;
    background-color: #CCC;
    margin-right: auto;
    margin-left: auto;
#wrapper #header {
    height: 150px;
    width: 800px;
    background-color: #CCC;
    background-image: url(../template%20images/header.jpg);
#wrapper #navBar {
    height: 55px;
    width: 800px;
    background-color: #666;
    background-image: url(../template%20images/navBar.jpg);
#wrapper #mainBody {
    width: 80%;
    margin: 0 auto;
    padding-top: 20px;
    font-family: Arial, Helvetica, sans-serif;
#wrapper #footer {
    background-image: url(../template%20images/footer.jpg);
    width: 800px;
    height: 60px;
    text-align: center;
    font-size: 16pt;
    clear: both;
<!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>2000_template</title>

<link href="../CSS/layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="navBar">
</div>
<div id="mainBody">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dolor libero, aliquam vitae scelerisque in, malesuada non neque. </p>
<p>Phasellus dignissim arcu eget velit posuere vel varius magna dapibus. Phasellus pharetra imperdiet nunc, vel interdum dolor fermentum id. Integer luctus mollis tempor. Nunc lacus urna, blandit sollicitudin cursus at, ultrices et erat. Sed rhoncus, ipsum vitae dictum scelerisque, diam felis euismod augue, a facilisis massa augue ut nibh. </p>
<p>Sed ac ante magna. Nulla consequat posuere ullamcorper. In interdum, elit sed tempor suscipit, quam mauris egestas justo, sed lobortis sem magna a mi. Etiam tincidunt fringilla sapien, congue condimentum augue adipiscing ut. Nam pretium egestas lacus in elementum. Vivamus eros erat, varius nec aliquam quis, congue at orci.</p>
<p>Vivamus eget felis purus, in porta tellus. Nullam ac orci eu arcu luctus ornare. Aliquam quis ligula metus. Morbi congue cursus justo, et sagittis sem adipiscing blandit. </p>
<p>Quisque sed bibendum nisi. Curabitur ultrices imperdiet lacus in ullamcorper. Etiam pulvinar magna et neque congue eu aliquam metus semper. </p>
</div>

<div id="footer">
<p> ‹ ‹ Previous    1 :: 2 :: 3 :: 4    Continue › ›</p>
</div>
</div>
</body>
</html>

Get rid of this.
    margin-top: 0px;
    margin-left: 0px;
The universal selector (asterisk) applies whatever styles you give it to EVERY PAGE ELEMENT regardless of where it is. So unless you know exactly what you're doing, don't use universal selectors.
To center your page
body {
width:900px /**some width in pixels, ems or %}
margin:0 auto;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

CS4 Design view does not render CSS correctly but browser does !?!?

I am designing a layout using primarily CSS. I want to insert a table inside one of the div's. In design view the table gets pushed way out of position but in live view and on the web, the page looks correct. Why? Am I missing something in design view?
Here is the actual page I am working on Sample Page
Here is what I see in design view Design View
This glitch is making it difficult to add content to the table.
I tried to edit the page with Contribute CS4 and the table gets pushed so far out of position that it is impossible to access it. The page looks fine when I am connected but as soon as I try to edit it does not render properly.

This question comes up almost daily, and I dont recall seeing an answer that is much different. It comes down to that it does not matter what DV shows, it is the browser view that counts. How frustrating it is to spend time and effort to correct a view in DW Design, only to find out it throws your browser view all askew. Its hard enough to make x number of different browsers all look good with however many screen resolutions, to worry about something that in the end does not matter.....
Work more in code view, let F12 be your companion.
Gary

JDeveloper ESB designer view points a server, how to change this to another

Hi,
I have developed a ESB service that deployed and tested on my Local system. Its tested and running well.
However now I have to develop another service that has to be registered under one of the existing service group.
But in the eSB designer view I can see only localsysem specific EBS systems/and service groups. How to change this to point to other server.
-- Khaleel

Hi Chandrasekhar,
Thanks for your reply. Yes thats correct. Infact after doing some research finally I got it.
However I hope a restart of the JDeveloper as a 4th step is required. but it works well.
Thanks.
--Khalee

How to add addtitional pages in design view?

How do I create additional pages in design view? I have tried using NEW PAGE AFTER, but that doesnt add another page in design view, like I need.
I am creating a report that uses 8 subreports per page to dynamically create labels. Currently I have a report header, and am using the page header to arrange the subreports so the top of each subreport prints on the top of each label. The fields in the subreports can grow, and fill in the label from the top down.
I need to create a multiple pages using this format, but I dont know how to add more pages in design view. Essentially I need subreports 1-8 on page 1, 9-16 on page 2, etc. I would like to preserve the formatting I have created thus far, but I can always change it if I have to.

In attempting to create the label sheets I needed, I ended up creating 14 separate reports (which report on 6 individual queries), because there are 14 pages worth of labels that need to be created. What I wish to accomplish is to condense these 14 reports down to 6 reports. One for each query. What I absolutely cant find a way to do, is to get Crystal Reports to allow me to customize subreports on consecutive pages. Again, I have 8 subreports on each page, which have been formatted to fit on 8 labels when printed. Each subreport is identical in design, but has a different range selected (i.e. my driving value in each subreport has been modified with Select Expert to be between 1 and 5, or 6 and 10, or 11 and 15). This is how I have been able to return 5 consecutive results on each label, with the next label returning the following 5 results.
My ultimate question: Is it possible to create a multi-page report using this method?

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.

How to correct design view?

Similar Messages

Maybe you are looking for