CSS Layout Viewing in Dreamweaver

I am using DW CS3 for the first time tonight and upon opening
existing CSS based sites, the design view doesn't read the
positioning elements for the pages. My previous version of DW (8)
showed the site exactly as it was supposed to look, but with CS3, I
am having to preview the site to see the positioning. Am I missing
a preference here or something?

I've used Firebug as well as the Webkit developer tools in Chrome and Safari which have surpassed Firebug in my opinion.  But they all suffer from the fact that the changes you make in them have to later be applied to your code which means you have to take the extra steps of trying to remember what all changes you made in Firebug and copying and pasting them back into your files.  Whereas in Dreamweaver you can Inspect, make changes directly to the code in your file, and you're done.    Not happy with the last few changes?  Undo.  Want to start completely over? File > Revert. 
Dreamweaver has excellent tools for determining what css is being applied to an element and by what means.  And it's a more streamlined and direct workflow where you work directly in your code.   I still use Firebug and the others from time to time though.  But only for very basic "spur of the moment" testing.  And usually only when I don't have immediate access to the raw files.

Similar Messages

  • Old CSS layout in new Dreamweaver 8

    I created a site with CSS layout in Dreamweaver MX. I defined
    the main page area with a div ID and then added other smaller div
    ID stacked on top with higher z indexes. This all worked fine in
    MX, but when I opened the site with Dreamweaver 8, I could not edit
    the content sections of the pages. I get a international no symbol
    and a box defining the larger page area. I assume that if I could
    select other areas, I could edit them. I tried selecting a layer,
    but there are no layers in the layers pallet. Originally I just
    hand coded the various div ids.
    I hope I'm just missing something simple. What am I doing
    wrong?
    Thank you for the help!

    > How do you recommend doing the layout if not in layers?
    It's not necessary to use any absolute positioned elements on
    a page like
    that. I would do it with stacked containers, some floated
    into position,
    some margined into position, and all just placed on the page
    by the normal
    flow of the code from top to botton. To read about what I
    mean, go here -
    http://www.macromedia.com/devnet/dreamweaver/articles/tableless_layout_dw8.html
    http://www.macromedia.com/devnet/dreamweaver/articles/css_concepts.html
    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
    ==================
    "ooo11" <[email protected]> wrote in message
    news:edrvi0$ke1$[email protected]..
    > Removing the overflow property did work. Thank you!
    >
    > How do you recommend doing the layout if not in layers?

  • How to create new pre-designed CSS layouts in DW CS4?

    Since I'm a relative newcomer to Dreamweaver and CSS, I normally begin my new pages with one of Dreamweaver CS4's pre-designed CSS layouts in the Blank Page HTML section - 2 column fixed left sidebar, 1 column elastic centered, 3 column fixed header and footer, etc.
    Lately I'm expanding to some more elaborate layouts and I'll like to be able to create new pre-designed CSS layouts of my own to add to this list. So I have a couple of questions:
    1) What types of files are these layouts? They all seem to have an accompanying style sheet in addition to having a page template. What I'm getting at is, if I were to revise one of these, how would I save my revised version so that it would show up in this list of pre-designed layouts in the future?
    2) Related to the first question, where are these pre-designed CSS layouts stored within Dreamweaver's file and folder structure? I can't seem to find them anywhere.
    I appreciate your input on this.

    Adobe scrapped the old Starter pages.  Many things have changed since they were first introduced.
    You'll find newer Templates and Starter Layouts below:
    Dreamweaver CSS Templates for beginners
    http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates.html
    New DW Starter Pages --
    http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_layouts.html
    Ultimate Multi-Column Layouts -
    http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-width s
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb
    http://alt-web.blogspot.com/

  • 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.

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

  • Mac 10.5.7 update has made golive 9 stop rendering css in layout view

    Has any one else on Mac with the mac 10.5.7 update have new issues with golive 9 not rendering css in layout view. It works still in pdf preview and if I boot to 10.5.6 all is normal again. Also in the live rendering engine it works as well...just not in layout view- its very disconcerting. Any workarounds? anyone else with this issue?
    thanks
    Adam

    I have been using an external CSS file simply for defining font styles
    site wide. The rendering of them on screen in layout view is now just
    the plain default font prior to showing the CSS altered version of it.
    Sorry, I'm not sure I understand what you mean here. You mean it shows your text in the default and *then* renders it correctly using the CSS after a delay?
    I tried torching the prefs...perhaps I did the wrong file...what file is to be deleted?
    ~/Library/Preferences/Adobe GoLive 9.0 Prefs
    ~/Library/Preferences/Adobe/GoLive/Settings9 (a folder)
    ~/Library/Preferences/com.Adobe.GoLive.plist
    Move them out to, say, the Desktop. If they are not the cause of the problem, put them back replacing the newly-created versions.
    I cloned my os prior to the update and all was fine. Rebooting to clone
    css renders normal...but in 10.5.7 its not rendering in layout view.
    I'm not seeing the same thing here with GL9/OS X 10.5.7, so it may be its something specific to your particular update. You might also want to consider doing a re-import of the site to recreate the site file and see if that helps.
    John

  • CSS layout box model?

    Hi, I'm using Dreamweaver cs4. I downloaded a diablo 3
    fansite kit from blizzard, and was looking at their code &
    style sheets and such for reference while learning to use DIV to
    layout new websites. I pretty much have the same DIV box going for
    all the content in the middle. But when i click on their DIV box,
    it shows margin on the left and the right, and while in design
    view, automatically centers their DIV box.
    I created a page, setup a div box 1000px wide, centered it,
    and it does not give me a preview of it centered while in design
    view, nor does it show me the margins & padding (displays
    diagonal white transparant stripes where the padding & margins
    goes). i made sure i clicked the "CSS Layout Box Model" in the
    visual aid menu, but it does not want to work on my page, yet i can
    turn it on and off on the fan site index page. How do i make it
    work on my page?
    Thx

    Which page? Can we see the other one too?
    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
    ==================
    "ZzarkZul" <[email protected]> wrote in
    message
    news:[email protected]...
    > Heres the code for the .css document.
    >
    >
    >
    > /* Stylesheet 1 -------------------------------*/
    >
    > body { margin:0; font:12px Tahoma; color:#FFFFDD;
    > background:url(../images/bg1.jpg) 50% 0 #170f05
    repeat-x; }
    >
    > #ev_bg {
    > background:url(../images/ev_bg1.gif) repeat-y;
    > width:1064px;
    > margin:auto;
    > }
    > #everything { width:1000px; margin:0 32px;
    > background:url(../images/stone-dark.jpg); border:1px
    solid black;
    > border-width:0px 1px; }
    >
    > #header { height:162px;
    background:url(../images/d3_header1.jpg) right
    > no-repeat; padding:0 20px; }
    > #header h1 {
    > padding-top:115px;
    > margin:0;
    > color:white;
    > }
    >
    > #middle { clear:both;
    background:url(../images/borderb1.gif) repeat-x;
    > padding:20px 10px; }
    >
    > #left_column { width:195px; float:left; }
    > .horizontal #left_column { width:auto; float:none; }
    > #navigation a { background:url(../images/button_bg1.gif)
    no-repeat;
    > width:170px; height:25px; display:block;
    padding-left:25px; margin:5px 0;
    > font-size:13px; color:white; text-decoration:none;
    line-height:25px;}
    > #navigation a:hover { background-position:0 bottom; }
    > .horizontal #navigation a { float:left; }
    > #more_information { padding-top:15px;}
    >
    > #middle_column { float:left; width:50%; margin:0px 20px;
    > #middle_column.two_column { float:left; width:75%; }
    > .horizontal #middle_column { width:auto; float:none; }
    > .date_break { font-size:19px; border-bottom:1px solid
    #680808;
    > margin-bottom:10px; }
    > .post { background:url(../images/leather-heavy.jpg);
    border:1px solid
    > #221100; margin-bottom:35px; line-height:18px; }
    > .post h1 { background:url(../images/title_bg1.gif)
    repeat-x #0d2368;
    > padding:2px 10px; margin:0; font-size:15px;
    color:white;}
    > .post_body { padding:5px 15px; }
    > .post .postedby { float:left; clear:both; }
    > .post .timestamp { float:right }
    >
    > ul { margin:20px; padding:10px; }
    > li { list-style:none;
    background:url(../images/bullet.gif) 0 5px
    > no-repeat;
    > padding-left:30px; line-height:25px; }
    > .list_left, .list_right { width:48%; float:left }
    >
    > .post_info { clear:both; padding-top:10px; }
    >
    > #right_column {
    > width:26%;
    > float:left;
    > }
    > .box { background:url(../images/leather-vdark.jpg);
    border:1px solid
    > #545454; margin:10px 0 25px 0; padding:10px; }
    >
    > #footer { clear:both; padding:20px }
    > #subnav { margin:10px 0;}
    > #subnav a { color:#7A0C0C; }
    > #subnav a:hover { color:#E51414 }
    > .copyright { font-size:10px;}
    >

  • CSS Layout issue!! Help Urgent!!

    I am having a problem with creating a css layout, in the past i used tables and am trying to convert my sites for my customers. I have layed out the website using divs and css and it looks great until i put in the cosing of the menu bar. when i put in the coding for the menu bar suddenly the bar has a padding around it but i cannot find a padding that would change this in the css coding. I need this done asap! so please help. ill show my coding below:
    this is the div coding:
    <div id=Nav>
       <ul class="dropdown" id="Bar"; width: 879px" name="Bar">
             <li class="style16" style="width: 161px; height: 22px">
       <a href="default.html" style="width: 146px">Home</a></li>
             <li class="style10" style="width: 169px; height: 23px">
       <a href="about.html" style="width: 153px">About</a></li>
         <li class="" style="height: 31px; width: 175px; left: 0px; top: 0px">
       <a href="Equipment.html" class="style18">
       <div class="style10" style="width: 156px; height: 20px;">
        Equipment</div>
       </a> <ul class="sub_menu">
                <li><a href="compressor.html">Air Compressors</a></li>
                <li><a href="compactions.html">Compaction</a></li>                            
                <li><a href="concrete.html">Concrete Equipment</a></li>
                <li><a href="forklifts.html">Fork Lifts</a></li>
                <li><a href="generators.html">Generators</a></li>                            
                <li><a href="groundthawing.html">Ground Thawing</a></li>
                <li><a href="heaters.html">Heaters</a></li>
                <li><a href="scissorlifts.html">Scissor Lifts</a></li>                            
                <li><a href="boomlifts.html">Boom Lifts</a></li>
                <li><a href="lighttowes.html">Light Towers</a></li>
                <li><a href="misc.html">Misc.</a></li>                            
                <li><a href="dirtequipment.html">Dirt Equipment</a></li>
                <li><a href="powertools.html">Power Tools</a></li>
                <li><a href="pumps.html">Pumps | Saws | Welders</a></li>                              
                     </ul>
             </li>
             <li style="width: 165px"><a href="locations.html">
       <div class="style10" style="width: 154px">
        Locations</div>
       </a>
               </li>
                 <li style="width: 180px"><a href="contact.html">
       <div class="style16" style="height: 24px">
        Contact Us</div>
       </a>         </li>
            </ul>
      </div>
    This is the css coding:
    #wrapper {
    width: 880px;
    margin-right: auto;
    margin-left: auto;
    background-color: #f4f4f4;
    #Navigation {
    background-image: url(Images/NAvigation%20BAr.jpg);
    background-repeat: no-repeat;
    width: 880px;
    visibility: visible;
    height: 3-px;
    vertical-align: top;
    Nav {
    vertical-align: top;
    margin: 0px;
    padding: 0px;
    clear: both;
    height: 20px !important;
    #wrapper1 {
    width: 876px;
    margin-right: auto;
    margin-left: auto;
    color: #F4F4F4;
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(left, #716375 0%, #E8E8E8 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(left, #716375 0%, #E8E8E8 100%);
    /* Opera */
    background-image: -o-linear-gradient(left, #716375 0%, #E8E8E8 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #716375), color-stop(1, #E8E8E8));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(left, #716375 0%, #E8E8E8 100%);
    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to right, #716375 0%, #E8E8E8 100%);
    margin-bottom: auto;
    #Bar {
    background-repeat: no-repeat;
    width: 880px;
    height: 28pt;
    overflow: visible;
    background-image: url(Images/NAvigation%20BAr.jpg);
    position: relative;
    vertical-align: top;
    #container {
    width: 880px;
    color: #000;
    background-color: #EDEDED;
    dominant-baseline: 578px;
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(left, #716375 0%, #E8E8E8 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(left, #716375 0%, #E8E8E8 100%);
    /* Opera */
    background-image: -o-linear-gradient(left, #716375 0%, #E8E8E8 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #716375), color-stop(1, #E8E8E8));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(left, #716375 0%, #E8E8E8 100%);
    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to right, #716375 0%, #E8E8E8 100%);
    margin-bottom: auto;
    #content {
    float: left;
    color: #090;
    width: 580px;
    padding-right: 6px;
    background-color: #033;
    margin-top: 20px;
    .container {
    color: #000;
    background-color: #ff6;
    width: 876px;
    #expect {
    height: 164px;
    width: 294px;
    float: right;
    position: relative;
    background-color: #C90;
    margin-left: 582px;
    padding-top: 10px;
    #hours {
    float: left;
    height: 55px;
    width: 294px;
    line-height: 4px;
    word-spacing: normal;
    white-space: normal;
    display: inline;
    letter-spacing: normal;
    padding-top: 10px;
    font-size: 13pt;
    color: #000;
    margin-left: 586px;
    background-color: #F99;
    #footer {
    height: 76px;
    width: 880px;
    background-color: #CC0;
    clear: both;
    #cards {
    float: right;
    height: 31px;
    width: 294px;
    margin-left: 582px;
    padding-top: 10px;
    background-color: #F36;
    #contact {
    float: left;
    height: 328px;
    width: 293px;
    word-spacing: normal;
    white-space: normal;
    line-height: 1px;
    color: #000;
    display: inline;
    font-size: 14pt;
    background-color: #FFF;
    padding-top: 10px;
    margin-top: 20px;
    #header {
    background-image: url(Images/Proquip%20Logo/Proquip%20logo2.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 885px;
    height: 126px;
    background-color: #000;
    margin-right: 2.5px;
    margin-left: 0px;
    #wrapper #container #contact p strong {
    color: #800000;
    font-size: 14pt;
    #wrapper #container #contact blockquote p a {
    color: #000;
    #wrapper #container #expect div {
    color: #900;
    font-size: 14pt;
    font-weight: bold;
    #wrapper #container #hours div {
    color: #900;
    font-size: 14pt;
    font-weight: bold;
    #box2 {
    background-image: url(Images/Option%201/Services/whitebox2.jpg);
    #box3 {
    background-image:url(Images/Option%201/Services/redbox2.jpg);
    background-repeat:no-repeat;
    background-position: center center;
    #gold {
    background-image:url(Images/Option%201/Logos/gold.gif);
    background-repeat:no-repeat;
    #white {
    background-image:url(Images/Option%201/ProQuip-Pics/box1.gif);
    background-repeat:no repeat;
    #forklift {
    background-image:url(Images/Option%201/ProQuip-Pics/34-01-4380.jpg);
    background-repeat:no-repeat;
    #scissorlift {
    background-image:url(Images/Option%201/ProQuip-Pics/jlg-scissor-lifts-21.jpg);
    background-repeat:no-repeat;
    /* Navigation Menu- Level one */
    ul {
    list-style: none
    ul.dropdown {
    font-size: 13pt;
    color: #000000;
    height: 25px;
    text-decoration: none !important;
    width: 860px;
    position: relative;
    vertical-align: top;
    ul#Bar.dropdown {
    width: 878px;
    position: relative;
    vertical-align: top;
    ul.dropdown li {
    font-weight: 600;
    float: left;
    zoom: 1;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13pt;
    display: block;
    width: 175px;
    color: #000000;
    top: 25px;
    text-decoration: none !important;
    text-align: center;
    ul.dropdown a:hover {
    color:#cc0000;
    ul.dropdown a:active {
    color: #000000;
    ul.dropdown li a {
    display: block;
    border-right: 1px solid#333;
    color: #000000;
    border-right-width: 1px;
    text-decoration: none !important;
    text-align: center;
    ul.dropdown li:last-child a {
    border-right:none; /* does not wotk in IE */
    text-decoration:none !important; } 
    ul.dropdown li.hover,
    ul.dropdown li.hover {
    color: #000000;
    position: relative;
    height: 28px;
    top: 0px;
    ul.dropdown li.hover a {
    color:#800000;
    /* Level Two Navigation */
    ul.dropdown ul {
    width: 180px;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 36%;
    display: block;
    float: left;
    color: #000000;
    text-decoration: none !important;
    height: 25px;
    ul.dropdown ul li {
    font-weight: normal;
    color: #000000;
    border-bottom: 1px solid #ccc;
    float: left;
    border-bottom-color: #c0c0c0;
    border-bottom-style: groove;
    display: block;
    background-color: #dbdbdb;
    text-decoration:none !important;
    /* IE 6&7 needs inline block */
    ul.dropdown ul li a {
    border-right: none;
    display: inline-block;
    height: 18px;
    line-height: 16px;
    color: #000000;
    width: 100%;
    text-decoration: none !important;
    /* Level Three Navigation */
    ul.dropdown ul ul {
    top: 100%;
    color: #000000;
    text-decoration: none !important;
    ul.dropdown li:hover>ul {
    visibility: visible;
    color: #000000;
    top: 30px;
    text-decoration: none !important;

    I have the site using tables up and running, this is a website for a client so I cant make a test site using that domain would it be ok if I screen shot'ed the problem?
    Date: Thu, 24 Apr 2014 12:19:44 -0700
    From: [email protected]
    To: [email protected]
    Subject: CSS Layout issue!! Help Urgent!!
        Re: CSS Layout issue!! Help Urgent!!
        created by Jon Fritz II in Dreamweaver support forum - View the full discussion
    Well, you're not using position:absolute, so you've got a big thumbs up from a bunch of us for that.
    Is there any chance you could post a link to this page on your server? It's much easier to troubleshoot from a browser than it is to rebuild the page from code fragments.
    If you haven't gone live with the page yet, create a folder called TEST in your site and save copies of the page and css there. Upload TEST and post a link to it here. Once the problem is found/fixed, delete TEST from the server.
    You can also attempt to use Firefox or Chrome to find your issue by right clicking > Inspect Element. All CSS that affects a given element will be displayed with file name and line numbers there.
         Please note that the Adobe Forums do not accept email attachments. If you want to embed a screen image in your message please visit the thread in the forum to embed the image at http://forums.adobe.com/message/6327947#6327947
         Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/6327947#6327947
         To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/6327947#6327947. In the Actions box on the right, click the Stop Email Notifications link.
               Start a new discussion in Dreamweaver support forum at Adobe Community
      For more information about maintaining your forum email notifications please go to http://forums.adobe.com/thread/416458?tstart=0.

  • Creating from scratch, a css layout for my website

    I am building a website from scratch and I would like to use CSS.  I am conceptualizing the design, however, I am struggling with designing it and working with the div tags.  I would like to have two sidebars, one on each side, and for them to be tri-colored, which means I have to create three small boxes and align them closely together, each a different color (the colors are part of the theme to my website). Of course the links on the sidebars would be white, and then change colors when hovered over or clicked on.  I would like to have a header and a footer, with the header containing my logo and if and only if I can get real fancy; a scrolling message.  My footer would contain additional links such as 'additional links', and 'contact us' and all the necessary copywrite info.  Please let me know, if first, my conception of this layout makes sense, and if so, what tutorial you could recommend for me to view that would assist in my web site development.
    Thank you, all you great tech minds out there!

    I'm with Murray.  I don't think you should concern yourself with HTML5 and CSS3 yet. 
    Stick with XHTML and CSS2.  When I was learning to work with CSS positioning, it was immensely helpful to use a pre-built layout.   And I learned a great deal from looking at source code.
    Look at the DW Starter pages described below:
         Dreamweaver CSS Templates for beginners
         http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates.html
         New DW Starter Pages --
         http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_layouts.html
    If you have some money to spend, Project Seven has some excellent CSS Templates.  If you plan to do more projects, CSS Layout Magic is a nice extension for prototyping inside DW.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb

  • Css layout or style sheet not showing table layout

    When I was working on my website I noticed that my tables don't show up in the browser of my site, they do however, show up in the dreamweaver design so I am wondering if when I was making changes somehow to the site if something in the css layout or style sheet got deleted.  Could someone please take a look at it and please tell me what needs to be fixed, I am not at all familiar with css so I need all the help I can get on this here is the link.  Thank you! http://angelcoilbartlett.com/index.html

    In your HTML document in Code View, remove the following embedded CSS code. This is competing with external  style sheet code and causing your site havoc.  In the future, don't create any more new styles.  You don't need them.  Stick with the established styles set up by the original designer and you will have way fewer problems.
    DELETE ALL OF THIS NONSENSE:
    <style type="text/CSS>
    <!--
    .style1 {     font-size: 12pt
    .style3 {     font-size: 18pt;
         color: #000000;
    .style6 {font-size: 12pt; color: #000000; }
    .style8 {     color: #000000;
         font-size: 14pt;
    .style9 {
         color: #990000;
         font-weight: bold;
    a:link {
         color: #666666;
         text-decoration: none;
    a:visited {
         text-decoration: none;
         color: #666666;
    a:hover {
         text-decoration: none;
    a:active {
          text-decoration: none;
    .style10 {color: #000000}
    body,td,th {
         color: #666666;
    .style7 {font-size: 12pt;
         color: #000000;
         font-weight: bold;
    .style12 {color: #666666; font-weight: bold; }
    .style14 {color: #000000; font-weight: bold; }
    .style13 {color: #666666}
    -->
    </style>
    If you want to continue working with web pages, you owe it to yourself and your employer to learn basic HTML and CSS so you can get yourself out of jam when things go wrong.
    Start learning here:  HTML & CSS Tutorials - http://w3schools.com/
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

  • If I copy/duplicate a page my css-layout changes

    If I copy/duplicate a page my css-layout changes, even though the pages are identical and use the same (external) css-file.
    This is what happens:
    I have a 2-column fixed css container. The sidebar and mainContent align perfectly on the original page, but on the duplicate page the mainContent suddenly moves to the right (it somehow adds the width of the sidebar to the margin of the mainContent).
    Does anyone know what to do about this?
    Thanks!

    Hang on. I just checked, and it only happens in the design-view inside dreamweaver. When I preview the pages in my browsers (Safari and Opera, still need to check in IE) the problem doesn't occur. So it isn't as big of a problem as I thought it was. Still very annoying though, so if anyone knows how I can fix the problem in the design/split-view, thanks...

  • Design view in Dreamweaver MX04 messed up

    I am using Dreamweaver MX 2004. I have tried to download at
    least 5 free CSS templates from various places. All of them have
    correct CSS code and they preview correctly in Internet Explorer,
    however my "Design View" is all messed up, nothing appears how it
    should. The alignment is all off, pieces are all over the place,
    nothing is as it should be. I have to modify a line or two, then
    preview in IE, the do it again and again after ever little change
    to make sure i am not screwing the whole page up. That kind of
    illiminates the whole purpose of Design mode. I am a visual person
    so staring at lines of code will not work for me, can anyone help.
    Serious answers only please.
    Please do not post "Learn the code" or any variation of that,
    i am slowly learning more about the CSS code, but for now its hard
    for me to see how it is applying to the design when the design mode
    is messing up so bad.

    I'm afraid you are just stuck. DMX2004 was a beginner at
    rendering CSS
    layouts. Without learning the code, you will be flying blind.
    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
    ==================
    "Adamtosman" <[email protected]> wrote in
    message
    news:fpaq80$3l8$[email protected]..
    >I am using Dreamweaver MX 2004. I have tried to download
    at least 5 free
    >CSS
    > templates from various places. All of them have correct
    CSS code and they
    > preview correctly in Internet Explorer, however my
    "Design View" is all
    > messed
    > up, nothing appears how it should. The alignment is all
    off, pieces are
    > all
    > over the place, nothing is as it should be. I have to
    modify a line or
    > two,
    > then preview in IE, the do it again and again after ever
    little change to
    > make
    > sure i am not screwing the whole page up. That kind of
    illiminates the
    > whole
    > purpose of Design mode. I am a visual person so staring
    at lines of code
    > will
    > not work for me, can anyone help. Serious answers only
    please.
    >
    > Please do not post "Learn the code" or any variation of
    that, i am slowly
    > learning more about the CSS code, but for now its hard
    for me to see how
    > it is
    > applying to the design when the design mode is messing
    up so bad.
    >

  • HTML 5 and CSS 3 Support In Dreamweaver CS5

    I cannot find any information on this web site about whether and how Dreamweaver CS5 supports HTML 5 and CSS 3. There are lots of other fancy high-end whiz-bang technologies highlighted in CS5, but without support for HTML 5 and CSS 3, Adobe has left a great big hole in the middle of the new Dreamweaver. If I'm going to have to code these by hand, then there's little incentive for me to upgrade from CS4. Adobe may, by this oversight, intend to extend the useful life of Flash, but if this is so it's penny wise and pound foolish. There is much to like about Flash - and much to dislike about how it works on the user side. Leaving these problems unresolved hurts Flash, and leaving HTML 5 and CSS 3 support out of Dreamweaver hurts Dreamweaver. In other words, this is a lose-lose strategy.

    Hi Scott
    Sorry for the delay in replying, but I turn my internet connection off when working, otherwise I have found I tend to do more research than work.
    Media-Queries:
    I had viewed the video on the possible implementation of media-queries when it was first released, and in most respects the implementation is as I would expect, but it would be helpful if it was, (in a future development of the use) possible to show a list of 'common' smartphone/handheld devices, (makes/models) within the dreamweaver interface that would be usable with the screen size being used, (possibly as an import from the 'device central' device list as a drop-down list). My reason for asking for this feature is primarily as a time saving feature for the css layouts via media-queries as it would then show the targeted/usable devices in a list, and possibly alleviate the requirement of developing layouts that are not really required.
    Video:
    At the moment I am using the video feature as you have indicated where possible, and am doing so with the use of IECC's for IE as a fall-back for that browser. I have tried targeting versions if Firefox and Safari that support the video element by testing for it with JavaScript, but I have found this unreliable, possibly when the standard is finalized this may be the better method.
    SVG:
    I personally have decided to go with svg in preference to canvas. I have seen a few 'wow' factor demo's produced using canvas but as they use cross-compiled java to javascript code they are in reality showing nothing that has not been done before, (If we had 4Ghz processors with multi-core in 1999 similar trial graphics in vml would have worked just as good then, showing my age here!).
    My current work-flow with svg is - Inkscape - Modify the code by hand/preview in a browser - copy/past the code into dreamweaver.
    The current in-line implementation of svg's in the IE9 preview is where I see the main future of the svg implementations, as this makes using svg's for graphic elements and basic animations much more viable/easier for the average designer/developer, and lets not forget that as it is a vector it is ideal for resizeable background images in fluid/liquid layouts.
    I should say here, that I will for the foreseeable future use flash/swf's for more complex animations, as these are still much better quality than anything that can be achieved with svg or canvas.
    I would like to see the possibility of using Fireworks for the creation of svg's, and a work flow similar to that available between fireworks and dreamweaver at the moment.
    Cache manifest and database:
    As you have rightly grouped these two together, (and I cannot really envision a situation that they would not be used so) the situation with these is for me, (when trying to create the code for use) the necessity of 'remembering' what I must include in the cache and the transfer of the data for the database.
    Both are probably better explained with a typical scenario -
    A new research/development firm has developed the technology and parts to upgrade an autos internal combustion engine to an hydrogen powered engine. However the products list is specific to the motor manufacturers engine type, and to make matters worse the sales department also wishes an off-line version of the demos and parts list to be available to its sales team and customers, (o/k, maybe this is not a typical scenario, but it does demonstrate the usage).
    When developing the 'custom' html 5' enabled page I would require the cache manifest to include all necessary javascript/images/videos that would be required for the particular auto manufacturer to be available off-line, and compiling the list must be done at present by hand making it subject to possible errors.
    As for the database, (manufacturer specific) this must also be available off-line and updateable by the sales person and customer, as they are not always on-line and no hard-copys of material will be produced, (except when printed by the mechanic).
    My solution for me regarding the cache manifest would possibly be a dialogue in dreamweaver that would show all resources associated with the auto manufacturers model type used in the html site. I have used namespaces, (or some form of identifier) for general and model specific javascript, and a model identifying code for images and videos. The dialogue would then allow me to filter the resources required using the namespaces and identifier and include them in the list as required, possibly in much the same way that items are moved from a general list to a more specific list when creating the 'favourites' toolbar in dreamweaver.
    The database is on first appearance much simpler, as I would simply download the database using the motor_id as a filter, (yes Scott, you can see where I am going with this ) for those who cannot this would be wrong. You have correctly seen the problem with doing this, but I will explain for those who have not. The sales person and the customer would not see any of the images or videos that have references stored in the database, as these are just references and not the actual images/videos, yes one could use 'BLOB' for storing the items but this is not in my experience a reliable method. What is required is some form of method that would also download these items and place them into the required file position for off-line viewing, (which is what the cache manifest would do).
    So I would also require the possibility to add dynamically to the cache manifest from an sql database at the same time as the 'save for off-line' option is generated, (I have experimented with doing this in a similar manner that xml is created from an sql database).
    That's it for the html 5.
    Accessibility:
    For checking I use the firefox accessibility extension and total validator extension first, then the WAVE evaluation tool.
    But for Dreamweaver I would like to see the inclusion of the ARIA options as standard, especially when developing 'rich-internet-applications' particularly the aria-live and role options. I often find it interesting in discussions about html 5 where it is seen by many as a 'new' mark-up' language for the web, but rarely seen in the context of helping in accessibility when used correctly. Even the html 5 spec contains a section on using the new mark-up as part of accessibility and how the ARIA roles should be applied, (see - http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.html#annotation s-for-assistive-technology-products-%28aria%29).
    The inclusion of an extra live-view option in dreamweaver that render the page in 'screen reader' mode would also be a possible accessibility checking help. This could be done by simply turning off the background-images 'on-mass' and rendering any items as they would be seen by a screen reader. As most screen readers do now parse JavaScript and css, it would illustrate the problems of using such techniques as light-boxes without using the aria-live role to tell users that the light-box in now the focus of the page.
    For anyone who has stayed with this post, my sincere thanks, and any comments on the content would be welcome.
    Paula Z

  • Output shown in Design view of Dreamweaver CS6 is not same as shown by the browsers

    I have made a yoga website http://ballychohan.co/ in Dreamweaver CS6. I faced this problem while designing the website.The results shown by Design view in Dreamweaver is not correct. It made me very confused at the starting. Please tell me how to overcome this problem of DreamWeaver. Should I install a lower version of Dreamweaver ?

    Bally Chohan wrote:
    I have made a yoga website http://ballychohan.co/ in Dreamweaver CS6. I faced this problem while designing the website.The results shown by Design view in Dreamweaver is not correct. It made me very confused at the starting. Please tell me how to overcome this problem of DreamWeaver. Should I install a lower version of Dreamweaver ?
    Does the page show correctly in a browser?
    Dreamweaver design view is not very reliable  at renedering designs exactly the way you want them to look, especailly if you use more of the complex and up-to-date css, now available. Dreamweaver is always playing catch-up in that area.

  • CSS Layout Nightmare!

    OK, I've recently decided to convert from table based layout to div layouts using CSS. I'm pretty proud of the outcome and found it a nice approach to designing. HOWEVER, when i click to edit pages in contribute, it strips out all of the css outline visual aids (like you see in wysiwig editors like Dreamweaver). This is going to be a major problem for my client and wysiwig style editing. Does anybody know how i can get contribute to display this in edit mode and also the best option for my client to select divs in order to copy and paste content.  This would be pretty easy in table based layout as contribute lets you select a table and copy and paste it. Ideal way for my client to copy and paste additional news items  same format. Any help would be gratefully appreciated. Thanks in advance.

    Not.
    Walt
    "SamDesign.be" <[email protected]> wrote in
    message
    news:ets71o$ark$[email protected]..
    > Hallo Brandon,
    > Make de "<div id="divContent">" smaller
    > Sheers
    > www.SamDesign.be
    >
    >
    > "Brandon" <[email protected]>
    a écrit dans le message
    > de news: ets5tg$9fo$[email protected]..
    >> Working on CSS Layout for the first time (always
    have used Tables) . . .
    >> can you look at the page below (in initial stages)
    and tell me how I can
    >> move everything UP? It's driving me crazy. The
    picture in the center
    >> needs to come up, the main nav buttons need to move
    up, and the "boxes"
    >> in the left column all need to move up under each
    other.
    >>
    >>
    http://www.presentationsdirect.com/2007/
    >>
    >> --
    >> Brandon
    >>
    >>
    >
    >

Maybe you are looking for

  • Getting Big Headache, What is difference between Flash Lite 3.1 and Flash Player 7

    Hello, I am asking questions about the two similar yet different programs for Pocket PC version only: 1) Which came first, Flash Lite 3.1 or Flash Player 7? 2) If I have both in my Pocket PC, will there be product incompatibility? 3) What is the diff

  • How do I copy one image onto another image?

    How do I copy one image onto another image?

  • Printer Canon MG2450 not recognized in PC

    I've acquired a new Printer Canon MG2450. After ingtalling the driver from CD and/or the official site, I see that the HW is not recognized by the PC. I've installed/uninstalled the driver several times, I've plugged/unplugged the USB cable. Even I'v

  • Export movie shrinks size of source clips

    I have a project that consists of 720X480 AVI's (24bit/uncompressed) I got it to keep the high quality by using the export/movie function as an uncompressed AVI (Microsoft AVI, no compression, 720X480, D1/DV NTSC 0.9) The output is high resolution, w

  • One to many mapping in OVD 11g

    I am trying to map the uid on a backend sun directory to two attributes in a virtual view, so the uid in the SunLDAP will be the uid & employeeNumber in the virtual view. I tried setting them both in the mapAttribute objectClass, but that did not wor