Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts

    DW Flexi CSS Layouts?

    Is anybody familiar with Dreamweaver FlexiCSS layouts?
    If not maybe you can still assist.
    FlexiCSS layouts help make the template for a website.
    I assume this is making the CSS file and the DW assists in making the HTML file.
    I thought templates are easy to work with and all you would need to do is add your content images and your done. It doesn't seem to be so easy.

    1 (template image) My template(you can see I am trying to place 3 photos in the 3 squares)
    2 Layout Live View in DW DWLive views (I created Draw Ap Div and inside I placed the images) I have to add borders etc. Notice how its off.
    3 Reality (how it displays inside a browser)
    4 No tool used I tried not using the Draw ApDiv tool and it is better but how can I get them in the middle of each box perfectly?

    It appears the FlexiCSS layout assists in making wrappers padding margins etc. but then when I go to see it live its all messed up:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>Untitled Document</title>
    
    <link href="includes/CSSLayouts/CSSLayouts.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript" src="includes/CSSLayouts/debug_plus.js"></script>
    
    <link href="includes/CSSLayouts/psnew.css" rel="stylesheet" type="text/css" />
    
    <link href="includes/CSSLayouts/psnew_user.css" rel="stylesheet" type="text/css" />
    
    <style type="text/css">
    
    #apDiv1 {
    
    position:absolute;
    
    left:243px;
    
    top:591px;
    
    width:224px;
    
    height:368px;
    
    z-index:1;
    
    }
    
    #apDiv2 {
    
    position:absolute;
    
    left:550px;
    
    top:583px;
    
    width:262px;
    
    height:202px;
    
    z-index:1;
    
    }
    
    #apDiv3 {
    
    position:absolute;
    
    left:256px;
    
    top:579px;
    
    width:244px;
    
    height:247px;
    
    z-index:2;
    
    }
    
    #apDiv4 {
    
    position:absolute;
    
    left:909px;
    
    top:584px;
    
    width:198px;
    
    height:231px;
    
    z-index:3;
    
    }
    
    </style>
    
    </head>
    
     
    
    <body class="psnew_body_design">
    
    <div id="apDiv2"><img src="images/storesm.jpg" width="291" height="202" /></div>
    
    <div id="apDiv3"><img src="images/chairsm.jpg" width="221" height="211" /></div>
    
    <div id="apDiv4"><img src="images/firesm.jpg" width="195" height="226" /></div>
    
    <div class="psnew">
    
      <!-- (CSSLayouts Begin)  #psnew #build_version=1.1.284;pack=;category=;layout=;layoutType=page;scheme =;cssSource=file;assets=;halign=center;minwidth=960px;maxwidth=960px;w idth=960px;bc=;bl=-->
    
      <div class='cssLO psnew_wrapper_layout'>
    
        <div class='wrapper cssLI psnew_wrapper_design'>
    
          <div class='cssLO psnew_header_layout'>
    
            <div class='header cssLI psnew_header_design'>
    
              <!-- header Content Starts Here -->
    
     
    
              <!-- header Content Ends Here -->
    
            </div>
    
          </div>
    
          <div class='cssLO psnew_content_layout'>
    
            <div class='content cssLI psnew_content_design'>
    
              <div class='cssLO psnew_row_1_layout'>
    
                <div class='row_1 cssLI psnew_row_1_design'>
    
                  <!-- row_1 Content Starts Here -->
    
     
    
                  <!-- row_1 Content Ends Here -->
    
                </div>
    
              </div>
    
              <div class='cssLO psnew_row_2_layout'>
    
                <div class='row_2 cssLI psnew_row_2_design'>
    
                  <div class='cssLO psnew_chair_layout'>
    
                    <div class='chair cssLI psnew_chair_design'>
    
                      <!-- chair Content Starts Here -->
    
     
    
                      <!-- chair Content Ends Here -->
    
                    </div>
    
                  </div>
    
                  <div class='cssLO psnew_shop_layout'>
    
                    <div class='shop cssLI psnew_shop_design'>
    
                      <!-- shop Content Starts Here -->
    
     
    
                      <!-- shop Content Ends Here -->
    
                    </div>
    
                  </div>
    
                  <div class='cssLO psnew_firewater_layout'>
    
                    <div class='firewater cssLI psnew_firewater_design'>
    
                      <!-- firewater Content Starts Here -->
    
                       <!-- firewater Content Ends Here -->
    
                    </div>
    
                  </div>
    
                  <div class='cssLClearC'></div>
    
                </div>
    
              </div>
    
              <div class='cssLClearR'></div>
    
            </div>
    
          </div>
    
          <div class='cssLO psnew_footer_layout'>
    
            <div class='footer cssLI psnew_footer_design'>
    
              <!-- footer Content Starts Here -->
    
     
    
              <!-- footer Content Ends Here -->
    
            </div>
    
          </div>
    
          <div class='cssLClearR'></div>
    
        </div>
    
      </div>
    
      <div class="cssLClearL"></div>
    
      <!-- #psnew (CSSLayouts End) -->
    
    </div>
    
    </body>
    
    </html>
    Thanks
    Attached Thumbnails Attached Thumbnails DW Flexi CSS Layouts?-layoutliveview.jpg.jpg   DW Flexi CSS Layouts?-notoolused.jpg   DW Flexi CSS Layouts?-template.png   DW Flexi CSS Layouts?-reality.jpg.jpg  
    Last edited by xxnonamexx; 08-02-2011 at 01:48 PM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •