xxnonamexx
08-02-2011, 12: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
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