...

View Full Version : DW Flexi CSS Layouts?



xxnonamexx
08-02-2011, 01:42 PM
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:

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum