Dreamweaver CS4 Layout
Why, when I lay things out in Dreamweaver, everything looks bunched up, but it looks normal when tested in Internet Explorer?
Here's how my Dreamweaver screen looks...
Here's how my Internet Explorer test screen looks...
Is there a DreamWeaver setting that I'm missing? I'd like to be able to edit everything and view it the same way in Internet Explorer.
Help!
Thanks,
Jared
Hi Murray... I know the rules and I apologize for not posting the code...
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.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="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
-->
</style>
</head>
<body id="siteBackground">
<p align="center"><img src="images/header.png" width="1000" height="164" id="header" />
</p>
<p align="right"><img src="images/dogcare.png" alt="Dog Care" width="246" height="70" id="dogcare"></p>
<p align="right"> </p>
<p align="left"> </p>
<p align="right"><img src="images/catcare.png" alt="Cat Care" width="243" height="70" id="catcare"></p>
<p align="right"> </p>
<p align="center"> </p>
<p align="right"><img src="images/everybody_else.png" width="243" height="82" id="everybodyelse"></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><img src="images/footer.png" width="1000" height="170" id="footer" /></p>
</body>
</html>
Style Sheet
#dogcare {
margin-right: 153px;
float: right;
#catcare {
margin-right: 153px;
float: right;
#everybodyelse {
margin-right: 153px;
float: right;
#siteBackground {
background-color: #352E28;
#footer {
margin-bottom: -30px;
#header {
margin-top: -18px;
Again, for reference, here is the DreamWeaver layout...
...and here's how it looks when tested in Internet Explorer...
Thanks, Murray!
-Jared
Similar Messages
-
Hi
I am using Dreamweaver CS4. When i am designing my web page, I get a totally different look when I am in design view and when I switch to live view. Can you tell me why is this???It's because Design view is only a rough approximation and shouldn't be used as a final word for how the page will look in the browser. Live view is an actual browser (WebKit = Safari), and should render the page as it would look, in Safari at least.
If you are seeing a big difference between the two, however, then it's likely you have some underlying coding issues. Does your page validate here?
http://validator.w3.org -
DREAMWEAVER CS4 LAYOUT (DESIGNED IN PHOTOSHOP)..
Hi everyone,
Just wondering if anyone can help me with this... checkout this website of mine (Im a guitar teacher) http://www.jlgtuition.com
(jpeg exported from photoshop used as background design) click here advice on how to lay this out again (site needs updated flash links dont work on android tablets/phones etc...) If I were to go for the same layout and design would it be best to slice it in photoshop and uss CSS for the layout (using divs) OR maybe as I had tried without much success use divs in CSS and draw (as in the old way) layers and place text that way... Problem there was in iexplore it jumps to the left compared to firefox where text was staying static...it needs to expand with the various browers. Also was looking rough on iphones as well which I presume were using Safari...?
What do yo think is the best solution..Im not great with CSS and prefer (if I can) to use Design option in DW to layout the pages in DW... Any help much appreciated...
Cheers JamesThere's a lot of really bad information on YouTube. You get what you pay for.
You're right about tables. That's the old school way of doing things. Responsive Web Design is all based on CSS Media Queries -- different layouts for different screen widths (mobile, tablet & desktops).
Start learning CSS and it's relationship to HTML. Coding skills are essential. Bookmark these sites.
http://www.html.net/
http://w3schools.com/
http://www.csstutorial.net/
http://phrogz.net/css/HowToDevelopWithCSS.html
http://webdesign.tutsplus.com/sessions/web-design-theory/
Creating your first web site in DW CC-
http://www.adobe.com/devnet/dreamweaver/articles/CS6/first_website_pt1.html
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
Nancy O. -
Issues editing Layouts using Dreamweaver CS4 (ShopOnline)
Hi Everyone,
I am having Issues editing Layouts using Dreamweaver CS4 (ShopOnline). May be someone has encounter this problem. When I open the large_product.html in dreamweaver (after installing the extension for BC) the file opens, but when I go to the property inspector, I can not modify any of the css rules currently defined and no css is linked to this file. I looked at all the available css's and I could not find any with the defined rules in this page.
I need help. Thanks.It must be a module template layout that is being used. If you're on the latest interface it's under
Site Manager > Module Templates > Online Shop Layouts > Individual Product (small or large)
and if you're on the older interface it's
Ecommerce > Products > Advanced Layout customization (under the “related” box at the bottom right) -
In Dreamweaver CS4, can't get sidebar background to expand to 100%
I'm using the standard Dreamweaver-CS4-generated template for a fixed-width 2-column page (i.e., left menu column and main column) with a header and footer. This is the "2 column fixed, right sidebar, header and footer."
I'd like to have an overall body background (x,y repeated - that seems easy to do) and a left menu column repeated (x,y repeated ). Alas, the comments that are generated with the template imply that you just can't do that. I've tried all sorts of height=100% conbinations, but they don't seem to work.
Any ideas?Unlike table columns, CSS columns don't communicate with each other. The height of a division is determined by how much content is inside it. And that value may be longer or shorter than adjacent columns.
TO CREATE EQUAL HEIGHT CSS COLUMNS:
Option 1. Start with an Equal Height CSS Layout
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Option 2. Faux Columns (repeating background image). The easiest method.
http://forums.adobe.com/message/2653416#2653416
Option 3. JavaScript -- may not work in all layouts.
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Dreamweaver CS4 SPRY Menu Problems in IE
I am trying to have a drop-down menu on my site using the SPRY option in Dreamweaver CS4. In all browsers it looks exactly like it should. Unofrtunately in IE it pops out to the side instead of down. Anyone know a fix around this. The site is http://mtltechnologies.com/
Here is the SPRY CSS.
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 12px;
cursor: default;
width: auto;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 154px;
float: left;
height: 25px;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 154px;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 5px;
color: #FFF;
text-decoration: none;
background-image: url(../images/button_bg.jpg);
text-align: center;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FFF;
background-image: url(../images/button_bg_down.jpg);
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(../images/button_bg.jpg);
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(../images/button_bg_down.jpg);
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(../images/button_bg_down.jpg);
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
Anyone know a fix?
Thanks,The code is too long. Let's do it this way, did you change anything on the default css of the SPRY menu?
just my thought, why don't you remove it from the table? That might be the cause. Try to think of an alternative way like using divs and css. -
Problems controlling divs with dreamweaver cs4
Hi all, so I have been hard coding my website and have had great success with the layout and everything. I am having trouble with dreamweaver cs4, does anyone know if cs4 is compatible with html5? My silicone cupcake liners website looks great but a nice transition to dreamweaver would save a lot of work.
DWCS4 won't be able to correctly read the html5 semantic tags like <nav><aside> or <header> while in Live View. The built in version of the quasi-webkit browser is just too old.
Design View will work for the most part, but does get confused by certain things within HTML5 specific tags, so that will look even more broken than normal.
It also will not automatically generate any HTML5 specific code, there are no HTML5 menu options and there is no update to make it do that.
The program itself is no longer supported by Adobe, being the 5th version removed from "current"...
DWCC
DWCS6 Cloud
DWCS6 Disk
DWCS5.5
DWCS5
DWCS4 -
Dreamweaver CS4 running on a Mac was working fine. Then one day I got 2 messages and the app will not run, it shutsdown. Does anyone know how to fix it? These are the messages I get and in the order I get them.
This first one is:
XML parsing fatal error: Invalid document structure,line: 1, file: /Users/mynameishere/Library/Application Support/Adobe/Dreamweaver CS4/en_US/Configuration/Workspace/Designer.xml
The second one is:
The following panel layout is missing or could not be read:
Macintosh
HD:Users:mynameishere:Library:Application Support:Adobe:Dreamweaver CS4:en_US:Configuration:Workspace:Designer.xml
The Application will not have correct layout. Please load one from Windows ->Workspace.
I click OK after both, then Dreamweaver unexpectedly quits. Any ideas how to fix?Locate your personal configuration folder (instructions are here: http://forums.adobe.com/thread/494812). Either delete the folder or rename it to Configuration_old.
When you start Dreamweaver again, it should generate a new configuration folder with the default settings. -
Dreamweaver CS4 and Web Widgets
Hey All,
I wanted to let you know that the new version of Dreamweaver
is now available.
We rounded out the form validation widget support in this
version and we now support HTML data sets. We have also added some
stater pages for Spry pages: Master/Detail pages and other common
page layouts.
Some of you here were asking about widgets from other
frameworks that you saw mentioned in the public beta.
We are also announcing web widgets for Dreamweaver. These are
widgets that other developers have packaged for use in Dreamweaver.
You can see the first batch now at
http://www.adobe.com/cfusion/exchange/index.cfm?s=5&from=1&o=desc&cat=290&l=-1&event=produ ctHome&exc=3
Phatfusion and mootools is first to go up, with YUI and
jQuery widgets to follow very soon.
How did they make these widget extensions?
They used the just released web widget Packager:
http://labs.adobe.com/wiki/index.php/Dreamweaver_Widget_Packager
This takes a XML file that the developer makes that describes
the widget. They feed that into the Packager and it automatically
creates the extension. It's pretty slick.
Check them out!
Thanks,
Donald Booth
Adobe Spry (and Dreamweaver) Teamquote:
Originally posted by:
dels2004
quote:
I wanted to let you know that the new version of Dreamweaver
is now available.
We rounded out the form validation widget support in this
version and we now support HTML data sets. We have also added some
stater pages for Spry pages: Master/Detail pages and other common
page layouts.
just checked out today, Dreamweaver CS4 still use Spry
1.6.1....
so where we can find updated "form validation widget" and
"HTML data sets"? is it available in Spry 1.6.1 zip package? or it
only available on DW CS4?
I think you misunderstand the message. Those
widgets are newly add to the Dreamweaver panels (dataset wizzard
now allowes you to choose HTML data sets and XML data sets) and the
validation widgets can be found in the insert panel.
The widgets are not new, they just have been add to
Dreamweaver. -
How do I move a table in Dreamweaver CS4?
Hi,
I am creating my home page in Dreamweaver CS4 and I made a table. I cannot figure out how to move the table up to the top of the page where I want it. Any ideas on how to move a table?
Thanks,
ashmic19Add this to your CSS code:
body {margin:0; padding:0}
And your table code should begin immediately after the <body> tag in your HTML.
<body>
<table>
<tr>
<td> something here</td>
</tr>
</table>
</body>
Incidentally, table-based layouts are NOT the best approach. You might like to take this opportunity to learn how to work with CSS Layouts. It is the modern web standard.
From Tables to CSS Web Design Part 1 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html
From Tables to CSS Web Design Part 2 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt2.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Disabling community search in Dreamweaver CS4
I've looked through every configuration window, and searched around, but can find no way to remove the community search box from Dreamweaver CS4. It wouldn't be so bad, but since the beta, and even to this point the search box in question is surrounded by a horrible peach box and makes the window title bar and menu misaligned.
Does anyone know how I can turn this off, or at least when (if not already) it will be fixed? Thanks.plucinskij wrote:
Unfortunately neither seem to be the issue here. My clean install comes from a Microsoft-supplied ISO, with no branding or addon installs whatsoever. My video drivers are also up to date also and yet the problem remains.
I have finally managed to track down what appears to be the problem. It's not video drivers, but the colour profile that apparently causes this problem. The following comes from a Dreamweaver engineer who researched the problem:
There is a color profile "TPFLX.ICM" that fixes the problem with the color being
off.
It is interesting in the steps to install this Monitor file it does
not explicitly reference which color profile to use
18. Select TPLCD.ICM
or TPFLX.ICM and click the Add button.
I am guessing TPFLX is for the
Quadro FX 570M Adapter
Here are the instructions on how to install this
from the Lenovo site.
http://www-307.ibm.com/pc/support/site.wss/document.do?sitestyle=lenovo&lndocid=MIGR-62923 &velxr-layout=printLenovo. -
Dreamweaver CS4 - Update Template Files dialog box doesn't appear
I've just made a small change to my website's template file in Dreamweaver CS4, but I can't figure out how to apply the change to all pages on my site.
As I understand it, a dialog box is supposed to appear immediately after you hit 'Save'. This gives you 'Update' or 'Don't Update' options.
The box does not appear for me. No idea why - I saved the revised template and nothing happened!
Is there another way of updating the webpage files with the revised template? Or can it only be done though the dialog box? If so, how can I bring the box up?
Thanks for any tips, tricks, or explanations...Well, I'm not sure what rule I've broken. I followed the procedure set out in that tutorial to make my template in the first place, although I used Janine Warner's book 'Teach yourself Dreamweaver CS4' which goes through the same steps as the web tutorial - with the exception of the 'Apply your Dreamweaver template' section, which seems to suggest that you create your web pages first, and turn them into templates later.
I simply created my basic page layout, saved it as a template, and then created every page on my site by clicking 'New from template'. No problems, everything worked well.
I don't see why it would be necessary to create a new page from a template, and then apply the template to the page. Doesn't that amount to using two different methods to do the same thing twice? In any case, there's nothing in the book about 'Applying' a template, so I didn't do it. That's the only point of difference. But is it the problem? Is the book wrong?
Now I've got the book open in front of me at page 196 - 'Edit a template to update web pages created with it'. Interestingly, I may have discovered why it was not possible to edit my link in the Property Inspector.
The book remarks, more or less as an afterthought tacked on to the end of the page, that in order to use the Property Inspector to edit a template, I must first click on the element I wish to edit and then click 'Modify', 'Templates', and 'Make Attribute Editable'. Only then can changes be made.
The book says nothing about editing elements *without* using the Property Inspector, as I attempted when I tried the 'Insert Hyperlink' method, so I'm not sure whether this is possible or not. As it didn't work for me, I'd say not - but it would be nice if the book was specific on this point!
It's amazing how vague some of these tutorials can be - and also rather baffling that they can differ so much from each other. Website construction is all about specifics after all - everything is either 100% right, or 100% wrong. There shouldn't be any room for fuzziness. As it seems I have a specific problem, it must come from a specific, identifiable cause. It should be possible to say, "Ah, now if THAT is going wrong, the error must be HERE. Fix it by doing THIS."
Well, I'll try making the attributes of my elements editable now. I'm not sure if a text link counts as an element (that's another point on which my book is a little vague), but I dare say I'll find out shortly! -
Dreamweaver CS4 link help................
I recently built a site on Dreamweaver CS4. Here is the basic layout of what i did. My site is based off of a template, i have set it up using both a spry menu bar (vertical) and using a image based nav bar (not at the same time, but tried both in my efforts to get rid of my problem). I have run into the same issue with both nav options. I linked all of my pages together and everything worked fine, until i decided to add a couple of extra pages and change a few things on the site. when i try linking to these pages from the nav bar the links will not work. The only links that will work are the original ones i set up. Hope somone can help............
Thank Youshane,
here is the code, it is actually a hyperlink that is not working
<div align="left">
<h2 align="center"><u>Demand Industrial Packing</u></h2>
<p><a href="packing_graph.html">Graphite</a><a href="packing_graph.html"></a></p>
<p align="center"> </p>
<p align="center"><a href="packing_ptfe.html">PTFE</a></p>
<p> </p>
<h2 align="center"> </h2>
<p> </p>
</div>
thank you,
jesse -
Question about Dreamweaver CS4 Preview in Browser
Good morning,
as a newcomer to Dreamweaver CS4, I find myself in a strange position: I managed to create several pages that work correctly, but whenever I transfer those pages in the server of the company I work for, they show up with a different format for the text parts, and the divs show up as shorter than they should be. And yet, I pretty much copy-and-pasted the original working html pages from my C to the server... why does this problem happen?
Thank you very much.I can't really say without seeing your code. But some things that may cause issues:
- make sure your code is valid by running it through a validator: http://validator.w3.org/ and fixing any issues noted
- Some older versions of IE have a different way of handeling the box-model concept and this can cause sizing and layout issues. You can read all about it on the internet.
But I would focus on making sure your code is valid - most rendering issues are caused by invalid code like missing closing tags, improperly nested elements, etc. -
Export to F4V and Dreamweaver CS4
I've learned that if I rename the extension of an FV4 file (H.264) created with PPro to ".FLV" I'm then able to place it on a Webpage using Dreamweaver CS4. Dreamweaver will not recognize FV4 otherwise. Any reason that this is a really bad idea (seems to be the workaround recommended in Web articles)?
I also noticed that the F4V Export presets default to an aspect ratio that did not match my D3s '640x424' original. So I just manually set the output to a 3:2 shape (300x200) and that seems to have worked fine. Otherwise I ended up with black bars on the top/bottom. Here too... is this an appropriate way to deal with this?
I really do feel like one of those bothersome students who just won't stop asking questions :-)
Thank you!
RussellThere's also TextStitch (free) and TextExporter (so cheap it's almost free) from Rorohiko. These tools are pretty useful, but for some layouts "manually connect all stories into logical order to export a single RTF" is still a mandatory part of our workflow. There are many kinds of document (trifold brochure, overdesigned poster) that can't be automagically connected into a single story in logical order. However, if you don't deal with layouts like that, or if you don't care that your trifold brochure exports are not in the order in which they'd be read, then you'd have a lot less manual threading to do - perhaps none at all.
Maybe you are looking for
-
XML Publisher Report not displaying Chart/Graph in Excel Output
Hi All, We are currently on Oracle EBS 11.5.10.2 I am facing an issue with XML Publisher based report when i try to fetch the output in Excel. We have created an RTF in which i have embedded a graph. While viewing the output in PDF everything seems t
-
How Can I send iphotos by email to BCCs?
How can I send iPhoto pictures using e mail to BCCs?
-
How to create a new partion in my HP (Compaq LE1902x )PC that has already 4 primary partitions ?
How to create a new partion (to save my files & Folders) in my HP (Compaq LE1902x )PC that has already 4 primary partitions ? when something goes wrong along with OS(C) drive my all files are lost. so i want to create a new partition & dedicate it to
-
All Firefox versions crash when I open them
I haven't been able to open Firefox at all for several months. I have tried everything that's listed in the support section and none of that applies. I click to open it and two seconds later it crasher and I get a message that says "Firefox had a pro
-
How to define a specific export path?
Hello, I'm using Crystal Reports XI. In older versions it was possible to define an own standard path for the export. In CRXI it is now always the windows folder "own documents..." How is it possible to set my own path?? Regards