Copy link to clipboard
Copied
DW21: After new version install "flt_lft","flt_rgt" don't follow when doing Realtime_preview.
Has something changed again?
Thanks in advance,
Ingemar
Copy link to clipboard
Copied
Presumably, "flt_lft" and "flt_rgt" are classes that have their style rules created in a CSS dicument.
Copy link to clipboard
Copied
Actually, the problem concerned Images and they have their own "floats"; .imgFloatLft[...etc]
Having fixed that: Still, the Realtime_preview does not show correct layout.
Yellow sign says: "Could not commit changes in Line View."
Hence, I changed to Code view and Saved all. Did not help either. ???
Copy link to clipboard
Copied
The answer lies in the code. Please copy and paste the HTML and the CSS here. Or better still, if the site is live, please supply the URL.
Copy link to clipboard
Copied
Hi Ben,
Thanks for helping out.
Ingemar
<!DOCTYPE html>
<html lang="EN">
<head>
<meta charset="utf-8"/>
<title>Saevfors, Bamboo, DRR</title>
<!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8;" name="viewport" content="width=device-width,initial-scale=1"/>-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
* { box-sizing: border-box; } body { background-repeat: repeat-x; font-family: "Times New Roman", Times, serif; font-size: 18px; font-weight: bolder; background-color: #8EBC48; color: #FFF; background-image: url('http://www.saevfors.se/Images/Home_page_bckgr.jpg'); }
/* Logo */ .logo { width: 95%; margin: 0 auto; padding: 20px 0; } .logo h1 { font-family: Vijaya; font-size: 48px; text-align: center; margin: 0; padding: 0; } /* Wrapper */ .wrapper { font-family: Verdana, Geneva, sans-serif; font-size: 20px; color: #000; width: 95%; background-color: #FFF; margin: 0 auto 0 auto; }
/* Navigation */ .nav { list-style: none; margin: 0; padding: 0; text-align: center; background-color: #9F0; } .nav li { display: inline-block; min-width: 8em; margin: 0; padding: 0; text-align: center; padding: 8px 15px; } .nav li a:link, .nav li a:visited { background-color: rgb(204,153,51); color: rgb(85, 85, 102); display: block; padding: 5px; text-decoration: none; font-weight: bold; border-radius: 3px; -webkit-box-shadow: 3px 3px 3px 3px rgba(43, 43, 77, 0.5); -moz-box-shadow: 3px 3px 3px 3px rgba(43, 43, 77, 0.5); box-shadow: 3px 3px 3px 3px rgba(43, 43, 77, 0.5); margin: 0 0 0.2em 0; } .nav li a:hover { background-color: rgba(255,153,0,0.8); color: rgb(43, 43, 77); } a:visited { background-color: #6F9; }
/* Left side */ .left_side { padding: 10px; float: left; width: 48%; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: #000; background-color: #EFEFE0; font-style: normal; font-weight: 300; }
/* Right side */ .right_side {
padding: 10px;
float: right;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333;
background-color: #EFEFE0;
width: 48%;
font-weight: lighter;
} /* footer */ .footer { font-family: Verdana, Geneva, sans-serif; font-size: 14px; color: #003; background-color: #C96; font-style: italic; text-align: center; padding: 15px; } /* Clear floats */ .clear { clear: both; }
/*Smartphone and tablet*/ @media screen and (max-width:768px){ .left_side{ float: none; width: 100%; background-color: #F7F782; } .right_side{ float: none; width: 100%; background-color: #DFEAF0; } }
</style>
<link href="/Ing_July_2021.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="logo"><h1>Saevfors Consulting</h1></div>
<div class="wrapper">
<ul class="nav">
<li><a href="index.html" >Rationale</a></li>
<li><a href="#"><span class="focus"> Contact</span> </a></li>
<li><a href="Bamboo.html">Bamboo</a></li>
<li><a href="Archive.html">Archives</a></li>
<li><a href="Multistory.html">Multistory</a></li>
<li><a href="Parametrics.html">Parametrics</a></li>
<li><a href="Space_Frames.html" title="spaceframes" target="_blank">Space Frames</a></li>
<li><a href="Structural Specials.html" title="Structural Specials" target="_blank">Structural Specials</a></li>
</ul>
<div class="clear"></div>
<div class="left_side">
<img src="Images/Ing_contact_page.jpg" alt="" width="120" height="149" class="flt_rgt marg"/>
<p><strong>Ingemar Saevfors</strong></p>
<p>ingemar@saevfors.se <br>
Kallangsvag 73, 18144 Lidingo, Sweden +46 703936761 www.saevfors.se</p>
<p class="p70">Architect/Urban planner with longtime links to Africa, the Americas and SE Asia, specializes in innovative building technologies for low income regions.</p>
<p><strong>IN FOCUS NOW</strong>: The daunting perspective of housing <strong>another three billion people until 2050</strong> is now further exacerbated by the fast climate change. </p> <img src="Images/SolarHugePark.jpg" alt="solarPark" width="280" height="154" class="imgFloatLft"/>
<p> In the wake of Glasgow-COP26 there is now intensified focus on Solar energy.
However, solar panel parks of the quantities needed will demand enormous space on fairly flat land. The challenge will then be to sacrifice farm-land for a constantly growing world population.</p><p><strong>New technology under way</strong> <br>Recent progress with transparent solar panels has windows as the obvious target but can also be combined with agriculture. Large structures supporting the transparent solar panels may permit sufficient light for farming below. Some crops can even have a certain advantage by the protection from scorching sun and violent down-pours of tropical rains.
<img src="Images/AgriSolar.jpg" alt="" width="350" height="123" class="imgFloatLft"/>
</p><img src="Images/Lombok space frame.jpg" alt="" width="200" height="150" class="imgFloatRt"/>
<p>
A totally planar surface is important for the solar panels. The secret is the triangulation of connector nodes by the pole elements of the same length.
Such support structures, often in form of space frames, are today mostly made from aluminium profiles, often more expensive than the solar panels they support.
The same space frame structures could actually be made from bamboo, a local material made resistant to insects by low-toxic borax treatment. The cost difference compared to aluminium is gigantic. In addition the benefits of local materials and rural livelihoods are obvious.</p>
</div>
<div class="right_side">
<b>
<p style="font-weight: bold"> Testing</p>
<img src="SolarAgriPlant.jpg" alt="" width="400" height="286" class="imgFloatLft"/>
<p style="font-weight: lighter">A pilot project is now under planning in Thailand where the feasibility and cost consequence could be explored. Space frame structures of 16 x 16 m will be spaced allowing 4 m gaps for drainage/irrigation canals and access paths in between. Such a single unit 16x16 could already be instrumental to an evaluation of the concept.</p><b><b><b>
<img src="SolPanelFixSpaceframe.jpg" alt="" width="250" height="242" class="imgFloatRt"/>
<p>Solar panel fixture to PetCrown, bamboo space frame connector.</p>
<p style="font-weight: lighter">Stress analysis by KTH (Royal Institute of Technology, Stockholm) of the bamboo poles, considering upwind wind effects of 30 m/s, indicates a max axial compression force of 9.8 kN. (Corresponding to 14.3 MPa, much below allowable tension)</p>
<img src="KTH_2022_upwind.JPG" alt="" width="416" height="139" class="imgFloatLft"/>
</div>
<div class="clear"></div>
<div class="footer">1 July 2022 | Copy with reference to www.saevfors.se | ingemar@saevfors.se | All rights reserved</div>
</div>
</body>
</html>
---------
CSS:
@charset "utf-8";
/* CSS Document
.rationale { font-family: "Courier New", Courier, monospace; font-size: 36px; color: #FFF; font-weight: bold; padding: 50px; margin-top: 60px; font-style: normal; text-shadow: 5px 5px 3px #066; }*/
body {
background-repeat: repeat-x;
font-family: "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bolder;
background-color: #8EBC48;
color: #FFF;
background-image: url(Images/Home_page_bckgr.jpg);
}
.wrapper {
width: 95%;
background-color: #FFF;
margin-top: 20px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
font-size: 20px;
color: #000;
font-family: Verdana, Geneva, sans-serif;
float-offset: 10px;
float: left;
}
/*@import url("Ing22Nov.css");
.rationale { font-family: "Courier New", Courier, monospace; font-size: 36px; color: #FFF; font-weight: bold; padding: 50px; margin-top: 60px; font-style: normal; text-shadow: 5px 5px 3px #066; }
*/
.rationale { font-family: "Courier New", Courier, monospace; font-size: 36px; color: #FFF; font-weight: bold; padding: 50px; margin-top: 60px; font-style: normal; text-shadow: 5px 5px 3px #066;
}
.flt_rgt {
float: right;
padding-left: 5px;
}
.flt_lft {
float: left;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
.marg {
margin: 10px;
}
.imgFloatLft{
float: left;
margin: 10px;
}
.imgFloatRt{
float: right; margin: 10px;
}
.pleft{width: 300px;float: left;margin: 5px
}
.pright{width: 300px;float: right;margin: 5px
}
.clear{clear: both;
}
.pleft500{width: 500px;float: left;margin: 5px}
.pleft600{width: 600px;float: left;margin: 5px}
.
Copy link to clipboard
Copied
Works ok for me in a normal browser, is it just inside Dreamweaver preview the floats are not working?
Copy link to clipboard
Copied
Yes, exactly. I didn't try to lanch it live over FTP yet. Now since you say OK I will.
Thanks
Copy link to clipboard
Copied
Yes, exactly. I didn't try to lanch it live over FTP yet. Now since you say OK I will.
Thanks
By @ingo9
Just check the page layout in a local browser, like Chrome or Firefox, Edge etc. Im not sure if Dreamweaver preview is reliable.
Copy link to clipboard
Copied
Use right-click on open tab and select Open in Browser.
Previewing in local browser is reliable.
Real-Time Preview is sometimes hit & miss because it relies on Adobe's servers. You may turn off RTP in Preference settings. See screenshot.
Copy link to clipboard
Copied
Real time previews are the worst. With complex modern style and Javascript sites these just are pointless. I hate when CMS's or systems try to use this or have it as the main site builder tool. They just fall over a lot of the time trying to render in frame websites CSS and JS plus any tool and code on top to make editing or previews work.
AS everyone said ingo9, just preview in the browsers the sites intended for.