Equal div heights

Similar Questions

• Even two div height

  Hello!

  I wonder if there is a way to have two divs side by side with the same height... so if there is more text in a div, the other div will have a larger image.

  This is especially a problem when the screen shrinks. I googled for some time, but couldn't find anything.

  I tried both methods, but none works...

  EVISSI: Coconut water

  and

  EVISSI: Coconut water

  Mobos wrote:

  Hi Osgood and Daps,

  Thanks again for your support!
  I ' v tried something, it works with color as the background, but the picture doesn't do it what I want

  EVISSI: Coconut water

  I feel you want to do large images as large as the text boxes?

  If so, you need to use background pictures.

  Give each

  a single as class below - trees of coconut: (and remove the image of the line of the div)

  Style coconut trees

  using the css:

  {.coconut-trees

  background-image: url (http://evissi.com/imgs/coconut-water-quality.jpg);

  background-size: cover;

  background-position: center Center;

  }

  Repeat for the other areas.

• AutoScaling parent < div >, height: auto; does not.

  Hello everyone.

  Well, I'm here, once again, whit a newbie question!

  so I will insert an example to do what I want to clear:

  :

  the blue box is the parent div (divs are inside) and it SHOULD evolve according to the position of others the divs, but... This isn't

  and the Red stays outside... why?

  Here is the relevant code:

  HTML:

  < div id = 'Hand' >

  < div id = "partnerfloat" >

  < div id = "partnerinterno" >

  < ul class = "bland" >

  < li > < a href = "#" > I < /a > < /li > partners

  < li > < a href = "#" > Partner II < /a > < /li >

  < li > < a href = "#" > partner III < /a > < /li >

  < li > < a href = "#" > partner IV < /a > < /li >

  < li > < a href = "#" > partner V < /a > < /li >

  < li > < a href = "#" > partner VI < /a > < /li >

  < li > < a href = "#" > partner VII < /a > < /li >

  < li > < a href = "#" > partner VIII < /a > < /li >

  < li > < a href = "#" > partner IX < /a > < /li >

  < li > < a href = "#" > partner X < /a > < /li >

  < /ul >

  < / div >

  < / div >

  < div id = "partnerpercheest" >

  < div id = "partnerwhyext" >

  < p > reason by cui become partner, como diventarlo, pole, quando, prezzo, etc... < /p >

  < / div >

  < / div >

  "" < div > < img src = "... / Pictures/Photos/carlo speaker.jpg" class = "partnerdestra" > < / div >

  < / div >

  CSS (only the relevant part) (without Javascript, CSS3 only):

  #Main {}

  background-color: #FFF;

  right margin: 15%;

  margin left: 15%;

  border-radius: 15%;

  border-top-left-radius: 0%;

  border-top-right-radius: 0%;

  text-align: center;

  box-shadow: 15px 10px 15px rgba (0,0,0,0.5);

  margin-top:-2%;

  Padding: 3%;

  height: auto;

  }

  {body

  background-image: url (.. / Images/sfondo.png);

  background-repeat: no-repeat;

  background-attachment: fixed;

  margin: 0;

  padding: 0;

  }

  {#partnerpercheest}

  Background: url (.. / Images/Sfondo%20video.png);

  border: thin beginning #000;

  border-radius: 15% 15% 0% 0%;

  margin: 3%;

  Padding: 1%;

  float: right;

  box-shadow: 15px 10px 15px rgba (0,0,0,0.5);

  Width: auto;

  }

  {#partnerwhyext}

  Background: #fff;

  border: thin beginning #000;

  border-radius: 15% 15% 0% 0%;

  box-shadow: 5px 5px 1px rgba (0,0,0,0.5);

  Padding: 1%;

  Width: inherit;

  }

  {.partnersinistra}

  float: left;

  Padding: 1%;

  Background: #fff;

  box-shadow: 15px 10px 15px rgba (0,0,0,0.5);

  border: #000 insert thin;

  }

  {.partnerdestra}

  float: right;

  Padding: 1%;

  border: thin beginning #000;

  Background: #fff;

  box-shadow: 15px 10px 15px rgba (0,0,0,0.5);

  }

  I thank everyone for their patience, once more!

  Note that I can not answer for a few days, sometimes, this does not mean that the tread is dead and I'm not going to ask for more

  Edit:

  This Javascript help?

  <script type="text/javascript">
    var div = document.getElementById('yourDiv');

    div.style.height = document.body.clientHeight + 'px';
</script>

  EDIT 2:

  partnerdestra = right partner
  partnersinistra = there partner
  partnerpercheest = partner why outdoor

  Reason by cui become partner, como diventarlo, pole, quando, prezzo, etc. = be a partner, how to become one, why, when, price, etc...

  Post edited by: T.T.

  By default, all tags div auto is in height.  You don't need to specify it.

  To prevent the collapse of the margin on the parent div containing floats, use overflow: hidden.

  #Main {}

  overflow: hidden;

  background-color: #FFF;

  Width: 960px;  / * adjust as needed in px, % or em * /.

  margin: 0 auto;  / * with width, it is centered * /.

  -webkit-border-radius: 0 0 15px 15px;

  border-radius: 0 0 15px 15px;

  text-align: center;

  box-shadow: 15px 10px 15px rgba (0,0,0,0.5);

  Padding: 3%;

  }

  You must also add a float of compensation after the floats are no longer needed.

  Nancy O.

• DIV height 100%

  Does anyone know how to get a vacuum/no filled DIV to fill completely, vertical, a browser screen? When I apply a 100% height to a DIV, it appears correctly, to fill the window of the browser vertically, ONLY Firefox and Netscape, but appears as big as the content it contains in IE. Even when I place a clearing DIV to try to force the window vertically, it always not to expand in IE6. The code that I have attached appears correctly in Firefox (1.5) and Netscape (8.2)

  You can't, really.

  > #leftNav {}
  > position: absolute;
  > float: left;

  An element with absolute positioning is floating.

  Try to add to the CSS, though.

  HTML, body {height: 100% ;}}

  --
  Murray - ICQ 71997575
  Adobe Community Expert
  (If you * MUST * write me, don't don't LAUGH when you do!)
  ==================
  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
  ==================

  "JS3der" wrote in message
  News:ereufm$BEJ$1@forums. Macromedia.com...
  > Is - anyone know how to get a DIV empty/not filled to fill completely.
  > vertically, a browser screen? When I apply a height to 100% to a DIV, it
  > is displayed correctly, to fill the window of browser vertically, ONLY, in both
  > Firefox
  > and Netscape, but appear as large as the content it contains in Internet Explorer.
  > Even
  > When I place a clearing DIV to try to force the window vertically, it
  > still
  > do not expand in IE6. The code that I have attached appears correctly in
  > Firefox (1.5)
  > and Netscape (8.2)
  >
  > In HTML:

• How to make a div less height with more content.

  Hello

  as in the video tutorial "using the transition css Panel" I want to reduce my div (height) and enlarge them if the transition is applied. But when I try to do my background color is smaller and the works of transition, but the content is in the show, even on top of the div beneath them.

  See: deleteproductions.nl

  Help, please. I tried everything that I have geussed would do it.

  Welcome,

  Fabian

  ADMIN: Please lock topic. It is therefore most any use to anyone.

• Reconcile the heights of two Div tags?

  Hi all

  Good then, I have two boxes with CSS styles.  One is my nav side, floated on the left, clear: both (width: 213) and placed under a model div locked (with a height and width), floated to the left.  The other is the content div (width: 696), floating to the right.  The content div increases as text is added and has no fixed height.

  The problem is I want the nav div height to match the current height of the content div.  Because they do not have the same part of the page, I have trouble reconciling the heights to match evenly.  Ideally, I would like to the side nav div to grow as does the content div.

  Any suggestions?

  The technique of fake columns can be difficult for me because my site is not positioned absolutely.

  Fake columns do not need to use APDivs.  All you need is a width declared on your div #container and a BG image that is the same width.

  EXAMPLE:

  http://ALT-Web.com/templates/2-column-fixed-width-template.shtml

  BG Image here

  http://ALT-Web.com/images/GRN-BG.jpg

  Nancy O.
  ALT-Web Design & Publishing
  Web | Graphics | Print | Media specialists
  www.Alt-Web.com/
  www.Twitter.com/ALTWEB
  www.Alt-Web.blogspot.com

• Why does my div still display some experience when I inserted an image?

  I did a layout which is sensitive, so I put my div height to auto. When I insert an image in the div, it does, however, leaves what looks like 1% of padding inside the div and compensates for the entire page.  As follows; no idea why this is happening?

  Here is my code;

  {.sectionsmall1}

  Width: 15.8%;

  right margin: 1%;

  height: auto;

  float: left;

  margin-bottom: 1%;

  background-position: center;

  background-size: cover;

  background-repeat: no-repeat;

  background-color: #7E2123;

  }

  "" < div class = "sectionsmall1" > < img src = "... / Modules/Graphics/product TN_iMod_Web-Images/practicesmall.jpg" alt = "" / > < / div >

  Have a look here html - why my div still displays some experience when I inserted an image? - stack overflow

• Bidi text JTextPane and JTextArea changes the row height

  You can use the following example to demonstrate the problem. When you run, copy and paste an Arab character of http://www.alanwood.net/unicode/arabic.html in the display area. This creates a condition of bidi in the document. The circumflex replaces one with a flag at the top to indicate ownership LTR or RTL of the character. The height of the display line, going at a lower height. I am able to detect the State of bidi. I can't get any action to indicate what was the change of line height. I've exhausted all measuring height of possible line that I could find. The size reported by all methods does not State non-bidi bidi State, even if the row height is significantly reduced. Anyone else encounter this? Any proven way to measure the difference?
  
  to import javax.swing.JFrame;
  Import javax.swing.JTextPane;
  
  public class HelloSwing {}
  
  Public Shared Sub main (String [] args) {}
  JFrame frame = new JFrame ("HelloWorldSwing");
  OSname string = new String();
  OSname = System.getProperty ("os.name");
  JTextPane tp = new JTextPane();
  frame.getContentPane () .add (tp);
  tp.setText (OSname);
  frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE);
  Frame.Pack ();
  frame.setSize (400, 200);
  frame.setLocationByPlatform (true);
  frame.setVisible (true);
  }
  }

  I think that Eclipse does not use JEditorPane but own component. GUI editors has monospaced fonts of equal width/height for each tank and fixed a height for all rows. It is much easier to manage several sizes of fonts on the same line.

• Put a &lt; div &gt; or &lt; td &gt; at the top of a table &lt; td &gt; &lt; table &gt;

  Me once again.

  And there isn't any simpler than this.

  He spent 6 hours trying to do something simple - in a table 2 x 8, in each box, put another table that scrolls, when height becomes too great.

  Top: header

  Downstairs: < div > containing a table. < div > height is adjusted to make table after 5 lines.

  Without enough items, the internal table or < div > stays in the middle of the box.

  I broke it down for just a box.

  Here is the code:

  . tablescrollingholder {
  Width: 80%;
  height: 400px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1% :}
  {TD.tablescrollingholder}
  padding: 0px ;}
  
  . divhead {
  background: #C4C4F7;
  color: #FFF;
  Width: 100%;
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  text-align: center ;}
  < / style >
  < / head >

  < body >

  "< table class ="tablescrollingholder">."
  «< tr > < td > < div class = "divhead" > < a href = "Procedures.html" > procedures < /a > < / div > < table > < /tr > ""»
  < /table >

  < / body >
  < / html >

  -----------------------------------------------------------------

  No matter what I do, this < div > isolated remains in the vertical center of the cell in the table.

  (I can align left and right)

  I used vertical-align, align top, margin: 0 auto, margin-top: 0 - all the stuff I learned from you.

  I got a lot of hair and is not that much left.

  Any ideas?

  Are you sure have need to use tables?

  It work?

  Procedures

• Div moves down when the window is resized

  Hello

  Here's my problem: when I resize my browser window the main div is scaled up to a certain point when it just fell below all other content.

  How can I stop this from happening?  I have div the upper and lower the value of width of the car, so I can't understand what goes wrong.

  Here is the site if you want to see for yourself: www.hondovfd.org

  Here's a code in my template file:

  <!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" />
  <!-- TemplateBeginEditable name="Title" -->
  <title>Untitled Document</title>
  <!-- TemplateEndEditable -->
  <meta name="description" content="Hondo Fire and Rescue serves the Arroyo Hondo and Canada Village areas of Santa Fe County, NM." />
  <meta name="keywords" content="hondo, hondo fire, hondo vfd, hondo fire department, santa fe county fire department, santa fe county, volunteer fire department, hondo volunteer fire department" />
  <link href="../stylesheet1.css" type="text/css" rel="stylesheet" />
  <!--[if IE]>
  <style type="text/css"> 
  #mainContent, #sidebar1 { zoom: 1;}
  </style>
  <![endif]-->
  <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
  <link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
  </head>
  
  <body class="thrColLiqHdr">
  
  <div id="container">
   <div id="header"></div>
    <div id="sidebar1">
    <h3>Navigation : </h3>
    <ul id="MenuBar1" class="MenuBarVertical">
    <li><a href="/index.php">Home</a></li>
  <li><a href="/support.php">Support Hondo</a></li>
    <li><a class="MenuBarItemSubmenu" href="#">Information Menu</a>
      <ul>
        <li><a href="/people.php">Our People</a></li>
        <li><a href="http://www.google.com/maps/ms?ie=UTF8&hl=en&msa=0&msid=101620713606637979698.00045b6ead4ab4ea70b78&z=11" target="_blank">Response Area</a></li>
        <li><a href="/medical.php">Medical</a></li>
        <li><a href="/apparatus.php">Apparatus</a></li>
        <li><a href="/training.php">Training</a></li>
        <li><a href="/volunteer.php">Volunteer</a></li>
        <li><a href="/statistics.php">Statistics</a></li>
        <li><a href="/patchtrading.php">Patch Trading</a></li>
      </ul>
    </li>
    <li><a href="/gallery2/main.php">Photo Gallery</a></li>
    <li><a href="/calendar.php">Calendar</a></li>
    <li><a href="/news.php">Blog/News</a></li>
    <li><a href="/links.php">Links</a></li>
    <li><a href="/contact.php">Contact Us</a></li>
  </ul>
  <br />
  <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <span class="lefttext">
  <input type="hidden" name="cmd" value="_s-xclick">
  <input type="hidden" name="hosted_button_id" value="8567201">
  <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" align="middle" />
  <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" align="absmiddle" >
  </img></input></input>
    </span>
  </form>
  <span class="lefttext"><br />
  </span>
  <center>
    <span class="lefttext"><a href="http://www.facebook.com/pages/Santa-Fe-NM/Hondo-Volunteer-Fire-Department/74284233488" target="_blank" class="lefttext">Hondo VFD on Facebook</a></span>
  </center> 
    <!-- end #sidebar1 --></div>
    <div id="sidebar2">  
      <p><a href="/membersonly/login.php">Log In</a> | <a href="/membersonly/logout.php">Log Out</a><br />
      <a href="/membersonly/register.php">Register</a></p>
      <p><img src="/firedanger/Moderate.jpg" width="127" height="100" /></p>
      <p>Call Statistics as of:<br />
      <?php
  $myFile = "/home/hondovf1/public_html/membersonly/month.txt";
  $fh = fopen($myFile, 'r');
  $theData = fread($fh, filesize($myFile));
  fclose($fh);
  echo $theData;
  ?><?php
  $myFile = "/home/hondovf1/public_html/membersonly/date.txt";
  $fh = fopen($myFile, 'r');
  $theData = fread($fh, filesize($myFile));
  fclose($fh);
  echo $theData;
  ?></p>
    <table width="90%" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
      <td width="60%">EMS Calls</td>
      <td width="40%"><?php
  $myFile = "/home/hondovf1/public_html/membersonly/emscalls.txt";
  $fh = fopen($myFile, 'r');
  $theData = fread($fh, filesize($myFile));
  fclose($fh);
  echo $theData;
  ?></td>
    </tr>
    <tr>
      <td>Fire Calls</td>
      <td><?php
  $myFile = "/home/hondovf1/public_html/membersonly/firecalls.txt";
  $fh = fopen($myFile, 'r');
  $theData = fread($fh, filesize($myFile));
  fclose($fh);
  echo $theData;
  ?></td>
    </tr>
      <tr>
      <td>Other Calls</td>
      <td><?php
  $myFile = "/home/hondovf1/public_html/membersonly/othercalls.txt";
  $fh = fopen($myFile, 'r');
  $theData = fread($fh, filesize($myFile));
  fclose($fh);
  echo $theData;
  ?></td>
    </tr>
  </table>
    
    <hr />
         <!-- Begin Google Search Element -->
      <div id="cse" style="width: 100%;">Loading</div>
  <script src="http://www.google.com/jsapi" type="text/javascript"></script>
  <script type="text/javascript">
    google.load('search', '1', {language : 'en'});
    google.setOnLoadCallback(function(){
      var googleNumSearchResults = 5;
       var customSearchControl = new google.search.CustomSearchControl('002969495656254731547:rhlwwedx2hi');
      customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
      customSearchControl.draw('cse');
    }, true);
  </script>
  <link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
         <!-- End Google Search Element -->
  </div>
    <!-- end #sidebar2 -->
  
    <div id="mainContent">
    <div class="topleft"></div><div class="top"><div class="topright"></div></div>
    <div class="wrap">
  <!-- TemplateBeginEditable name="Main Content" -->
      <table width="95%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td height="47" class="h2">Header</td>
        </tr>
        <tr>
          <td>Text Goes Here!</td>
        </tr>
      </table>
    <!-- TemplateEndEditable -->
    </div><br class="clearfloat" />
  <div class="bottomleft"></div><div class="bottom"><div class="bottomright"></div></div></div>
  </div>
  </div>
  </div>
    
       <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
    <div id="footer">
      <p align="center">&copy; Copyright 2009 Hondo Volunteer Fire Department | <a href="mailto:[email protected]">Contact Us</a><a href="http://www.legalhelpers.com/chapter-13-bankruptcy/chapter13.html"></a><br />Hosting provided by <a href="http://studiox.com/" target="_blank">Studio X</a></p>
    <!-- end #footer --></div>
  <!-- end #container --></div>
  <script type="text/javascript">
  <!--
  var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
  //-->
  </script>
  <?php include_once("/home/hondovf1/public_html/analyticstracking.php"); ?>
  </body>
  </html>
  
  

  And here is my CSS file:

  body {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 12px;
       width: auto;
       color: #333333;
       margin-top: 0;
       margin-right: 0;
       margin-bottom: 0;
       margin-left: 0;
       padding-top: 0;
       padding-right: 0;
       padding-bottom: 0;
       padding-left: 0;
       background-image: url(images/main-right.png);
       background-repeat: repeat-y;
  }
  .thrColLiqHdr #container {
       width: 95%; /* this overrides the text-align: center on the body element. */
       margin-top: 0;
       margin-right: auto;
       margin-bottom: 0;
       margin-left: auto;
       height: auto;
       background-image: url(/images/halftone1.png);
  } 
  .thrColLiqHdr #header {
       padding: 0 10px;
       height: 100px;/* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
       background-image: url(images/header.jpg);
       background-repeat: no-repeat;
       background-position:center;
       border-bottom-width: 5px;
       border-bottom-style: solid;
       border-bottom-color: #000;
  }  
  .thrColLiqHdr #navbar {
       height:45px;
  } 
  .thrColLiqHdr #header h1 {
       margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
       padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
  }
  
  /* Tips for sidebars:
  1. Since we are working in percentages, it's best not to use side padding on the sidebars. It will be added to the width for standards compliant browsers creating an unknown actual width. 
  2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".thrColLiqHdr #sidebar1 p" rule.
  3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
  */
  .thrColLiqHdr #sidebar1 {
       float: left; /* this element must precede in the source order any element you would like it be positioned next to */
       width: 15%; /* top and bottom padding create visual space within this div  */
       height: 100%;
       padding-top: 15px;
       padding-right: 0;
       padding-bottom: 15px;
       padding-left: 0;
       min-width: 150px;
       
  }
  .thrColLiqHdr #sidebar2 {
       float: right; /* this element must precede in the source order any element you would like it be positioned next to */
       width: 15%; /* top and bottom padding create visual space within this div */
       padding-top: 0px;
       padding-right: 0;
       padding-bottom: 15px;
       padding-left: 0;
       min-width: 150px;
  }
  .thrColLiqHdr #sidebar3 {
       float: right; /* this element must precede in the source order any element you would like it be positioned next to */
       width: 275px; /* top and bottom padding create visual space within this div */
       padding-top: 0px;
       padding-right: 0;
       padding-bottom: 15px;
       padding-left: 0;
       min-width: 150px;
  }
  .thrColLiqHdr #sidebar1 p, .thrColLiqHdr #sidebar1 h3, .thrColLiqHdr #sidebar2 p, .thrColLiqHdr #sidebar2 h3 {
       margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
       margin-right: 10px;
       text-align: center;
  }
  
  /* Tips for mainContent:
  1. the space between the mainContent and sidebars is created with the left and right margins on the mainContent div.
  2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 300px or smaller (this includes images).
  3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
  */
  .thrColLiqHdr #mainContent {
       margin-top: 10px;
       margin-bottom: 10px;
       float: left;
       width: 65%;
       background-image: url(images/main-right.png);
       background-repeat: repeat-y;
       background-position: right;
  }
       
  
  .h2 {
       color: #B4241B;
       font-size: 20px;
       letter-spacing: -2px;
       font-weight: 100;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       padding-top: 0px;
       padding-right: 0px;
       padding-bottom: 0px;
       padding-left: 0px;
       line-height: normal;
  }
  
  .thrColLiqHdr #footer {
       text-align: center;
       color: #666;
       font-size: 11px;
       padding: 10px;
       background: #f7f7f7;
       border-top: 1px solid #aaa;
       width: auto;
  } 
  .thrColLiqHdr #footer p {
       margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
       padding: 2px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
  }
  
  /* Miscellaneous classes for reuse */
  .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
       float: right;
       margin-left: 8px;
  }
  .fltlft { /* this class can be used to float an element left in your page The floated element must precede the element it should be next to on the page. */
       float: left;
       margin-right: 8px;
  }
  .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
       clear:both;
      height:0;
      font-size: 1px;
      line-height: 0px;
  }
  .topleft {
       height:22px;
       width:19px;
       background-image:url(images/top-left.png);
       float: left;
  }
  .top {
       height:23px;
       background-image: url(images/top.png);
       background-repeat:repeat-x;
       width: auto;
  }
  .topright {
       height:22px;
       width:28px;
       background-image:url(images/top-right.png);
       float: right;
  }
  .textarea{
  }
  .wrap{
       text-align: justify;
       padding-right: 40px;
       padding-left: 40px;
       background-repeat: repeat-y;
       float:left;
       background-image: url(images/main-left.png);
       width: auto;
       clear: left;
  }
  .wrapright {
       width:4px;
       background-image:url(images/main-right.png);
       background-repeat: repeat-y;
       float: right;
  }
  .bottomleft {
       height:22px;
       width:19px;
       background-image:url(images/bottom-left.png);
       float: left;
       clear: left;
  }
  .bottom {
       height:23px;
       background-image: url(images/bottom.png);
       background-repeat:repeat-x;
       width: auto;
  }
  .bottomright {
       height:22px;
       width:27px;
       background-image:url(images/bottom-right.png);
       float: right;
  }
  
  

  It's one of the problems with the liquid (%) according to. In your default.css file, replace the top 2o selection rules with the following:

  {body
  do-family: Verdana, Arial, Helvetica, without serif.
  do-size: 12px;
  Color: #333;
  margin: 0;

  padding: 0;
  background: url(images/main-right.png) repeat-y;
  }
  .thrColLiqHdr #container {}
  Width: 95%;

  min-width: 870px; / * prevent collapsing page * /.
  Auto margin: 0;
  background: url(/images/halftone1.png);
  }

  Nancy O.
  ALT-Web Design & Publishing
  Web | Graphics | Print | Media specialists
  http://ALT-Web.com/
  http://Twitter.com/ALTWEB
  http://ALT-Web.blogspot.com

• 2 3 - neck collar

  My site in DW CS4 with template index.dwt (homepage) is a liquid 2-col header.  Can I convert the entire site to a barrette of liquid 3-col without recreating all the pages?

  -In #container, not the "width: 990px; / * fixed width * / *"change how space will behave in different browsers, because it is a model of"liquid "?

  Yes.  Available to your liquid does not work well.  Resize browser to 800px window and you'll see what I mean.  By changing from liquid to fixed width page layout, you will have a lot fewer problems manage your layout. And your page centered on all the screens above 990px.

  -On the # sidebar1″, I already have the CSS code for "* padding: 15px 0;"  Is the "6th 0; ' so different?

  Yes.  I moved the menu down to put more emphasis on the content.

  Why 'background-color: maroon; * I may not have wanted to change the background color on the left space. This change just the bar menu itself or the background color of top down, in this space all the left side?

  I put a background color on the sidebar1″ for demonstration purposes.  You can change it to what you want.

  This does not change the menu.  Nor does equal to height with the content sidebar.  To do this, you use a method of image and fake columns bottom expandable 2-tone.

  http://ALT-Web.com/templates/2-column-fixed-width-template.shtml

  -In #mainContent, is it the * margin: 25%; which prevents the text from wrapping under the sidebar?

  Margin: Albums | good | bottom | left.   25% left margin prevents #mainContent of packaging.

  Is the "border-left: 5px double gold;" * create a vertical line between the maincontent and area sidebar1″ all the way to the bottom of the page?

  A vertical line, Yes.  All the way to the bottom of the page depends on the amount of content it is.

  -Even if I don't want the text to fill the 24% of the #container left, I don't want to use this space for ads, links, input field, etc.  What is the space below the sidebar to the left of the maincontent div become usable for various functions with these coding changes?

  Sure.  Just put ads or links within the #sidbar1 and below your menu.

  Good luck

  Nancy O.
  ALT-Web Design & Publishing
  Web | Graphics | Print | Media specialists
  http://ALT-Web.com/
  http://Twitter.com/ALTWEB

• Questions from five and a half years?  !

  The layout of my site is like below although the colors will be different

  It's all in a wrapper div 960px wide and no height
  

  top div on the page, I called header div is 960px wide and 134px high (to adapt the image of the logo)
  

  below a div for navigation - project probably seven - 960px wide and high of 30px

  the green zone is a div of class called "bodyleft".

  the black area is a div of class called "bodyright".

  Question No. 1 should be bodyleft and bodyright in a div eventually called mainbody?

  Question 2 photographs must go in a div or they better get a div? -J' I will be linking to enlarge the image. (Updates a table in a div looking for bad or is it quite logical)?  -C' is the question half!
  

  Question 3, I want a blue border down both sides, but it stops at the navigation bar - as you can see in the photo. How can I get the border to go at the bottom of page?
  

  Question 4 would I better give 'bodyleft' and 'bodyright' height to make them line up at the bottom?

  Question 5 should divs 'bodyleft' and 'bodyright' Div ID rather than Div class?
  

  
  

  

  As usual,.

  Any help will be greatly appreciated.

  Michael

  MichaelCo wrote:

  The layout of my site is like below although the colors will be different

  It's all in a wrapper div 960px wide and no height

  top div on the page, I called header div is 960px wide and 134px high (to adapt the image of the logo)

  below a div for navigation - project probably seven - 960px wide and high of 30px

  the green zone is a div of class called "bodyleft".

  the black area is a div of class called "bodyright".

  Question No. 1 should be bodyleft and bodyright in a div eventually called mainbody?

  Not necessarily. You can always add another

  in the two at a later stage, if you need something like columns of same height where you would use a background image that is repeated in the parent

  for example.

  Question 2 photographs must go in a div or they better get a div? -J' I will be linking to enlarge the image. (Updates a table in a div looking for bad or is it quite logical)?  -C' is the question half!

  Photographs do not need to go a

  . The goal is to produce as little code as possible to make a site work. Its common for new users to assume everything MUST go one

  or his own

  . It's just as bad as the use of a table comlpex for the design structure.

  You can put a table in a

  If necessary, probably as a last resort, or when its faster to throw something using a grid system.

  Question 3, I want a blue border down both sides, but it stops at the navigation bar - as you can see in the photo. How can I get the border to go at the bottom of page?

  Add overflow: hidden; to your css wrapper (I'm assuming that all other are within the 'wrapper')

  . The bodyleft and the bodyright are launched to enable them to sit side-by-side and as a guest, you MUST clear the floats so that the other elements on the page to assume their correct positioning.

  Question 4 would I better give 'bodyleft' and 'bodyright' height to make them line up at the bottom?

  Absolutely not! See my answer to question 1, which refers to the use of a background image "Fake" equal column heights.

  
  Now if you wrap the bodyleft and the bodyright in their own
  and apply the image of babckground to that or apply the background directly image on the packaging

  is your decision. If the package already has a background image applied, you must create a new free

  to apply the background image. Google for the columns of 'false '.

  You should never assign a height to one

  UNLESS you know how high it will be, and the only two instances when that will occur is if you have only one image or images in the

  or when you set the

  to a particular size to evoke a scrolling text area.

  Question 5 should divs 'bodyleft' and 'bodyright' Div ID rather than Div class?

  IDS are more powerful classes, but can only be used once in the code of pages while classes can be used several times on each page.

  Because bodyleft and bodyright will be only used once on your page, it is much more efficient and of good practices to use ids instead of classes.

  

  As usual,.

  Any help will be greatly appreciated.

  Michael

• How to fix the page navigation bar &amp; banner does not advance when other scrol region

  Hi, I have an obligation to keep the banner of crumbs of bread and top of page the page all the time when the other region of report can scroll down. So that the crumbs of bread and the page banner are always visible to the user. Any suggestion to do this? Thanks in advance.

  It is the same procedure as above, simply by replacing the model you are using and the theme. The breadcrumb container is < div id = "t20BreadCrumbsLeft" & gt #REGION_POSITION_01 # < / div > in this case, the #header div is closed after this line.

  I see this theme 20A already a div of #t20PageHeader header, but the breadcrumb area is outside it. It might be interesting to experience what happens when if the #t20BreadCrumbsLeft div is placed within the #t20PageHeader div header and does not add the extra #header div... ?

  The basic approach is the same regardless of the theme/template: look at the definition of the model, understand what the facts were set, wrap them in a container and apply the position property sets and the appropriate height and padding equals the height to the body so that the rest of the page header.

  Where this becomes complex/impossible, is if the content of these elements is changed so as to affect the height (for example because of the content regions 6 and 7), or the page template is built using tables in such a way that it is not possible to place the elements required in a separate container.

• Overlap two images, ordinary java works, and not in BlackBerry JDE 5

  I have an application for swing of simple java that takes two images and overlaps the other. While trying to this port in JDE5, I got out there is no class BufferedImage in the api of BB, but a similar class of the Bitmap. It's brought to BB mixing function is unable to produce an image that overlap. It shows a blank white screen.

  Here's the plain java function

  public BufferedImage blend( BufferedImage bi1, BufferedImage bi2,            double weight )   {     if (bi1 == null)          throw new NullPointerException("bi1 is null");
  
        if (bi2 == null)          throw new NullPointerException("bi2 is null");
  
        int width = bi1.getWidth();       if (width != bi2.getWidth())          throw new IllegalArgumentException("widths not equal");
  
       int height = bi1.getHeight();     if (height != bi2.getHeight())
  
            throw new IllegalArgumentException("heights not equal");
  
          BufferedImage bi3 = new BufferedImage(width, height,              BufferedImage.TYPE_INT_RGB);      int[] rgbim1 = new int[width];        int[] rgbim2 = new int[width];        int[] rgbim3 = new int[width];
  
        for (int row = 0; row < height; row++)     {         bi1.getRGB(0, row, width, 1, rgbim1, 0, width);           bi2.getRGB(0, row, width, 1, rgbim2, 0, width);
  
           for (int col = 0; col < width; col++)          {             int rgb1 = rgbim1[col];               int r1 = (rgb1 >> 16) & 255;                int g1 = (rgb1 >> 8) & 255;             int b1 = rgb1 & 255;
  
                  int rgb2 = rgbim2[col];               int r2 = (rgb2 >> 16) & 255;                int g2 = (rgb2 >> 8) & 255;             int b2 = rgb2 & 255;
  
                  int r3 = (int) (r1 * weight + r2 * (1.0 - weight));               int g3 = (int) (g1 * weight + g2 * (1.0 - weight));               int b3 = (int) (b1 * weight + b2 * (1.0 - weight));               rgbim3[col] = (r3 << 16) | (g3 << 8) | b3;            }
  
             bi3.setRGB(0, row, width, 1, rgbim3, 0, width);       }
  
         return bi3;   } 
  

  Here's the java function of BB

    public Bitmap blend( Bitmap bi1, Bitmap  bi2,                      double weight )        {
  
                if (bi1 == null)                       throw new NullPointerException("bi1 is null");
  
                  if (bi2 == null)                       throw new NullPointerException("bi2 is null");
  
                  int width = bi1.getWidth();            if (width != bi2.getWidth())                   throw new IllegalArgumentException("widths not equal");
  
                 int height = bi1.getHeight();          if (height != bi2.getHeight())
  
                          throw new IllegalArgumentException("heights not equal");
  
           Bitmap bi3 = new Bitmap(width, height);         int[] rgbim1 = new int[width];         int[] rgbim2 = new int[width];         int[] rgbim3 = new int[width];
  
                  for (int row = 0; row < height; row++)         {
  
                         bi1.getARGB(rgbim1,0,width,0,row, width,1);                       bi2.getARGB(rgbim2,0,width,0,row, width,1); 
  
                         for (int col = 0; col < width; col++)                  {                              int rgb1 = rgbim1[col];                                int r1 = (rgb1 >> 16) & 255;                           int g1 = (rgb1 >> 8) & 255;                            int b1 = rgb1 & 255;
  
                            int rgb2 = rgbim2[col];                                int r2 = (rgb2 >> 16) & 255;                           int g2 = (rgb2 >> 8) & 255;                            int b2 = rgb2 & 255;
  
                            int r3 = (int) (r1 * weight + r2 * (1.0 - weight));                            int g3 = (int) (g1 * weight + g2 * (1.0 - weight));                            int b3 = (int) (b1 * weight + b2 * (1.0 - weight));                            rgbim3[col] = (r3 << 16) | (g3 << 8) | b3;                     }
  
                       bi3.setARGB(rgbim3, 0, width, 0,  row,width, 1);
  
                  }
  
               return bi3;    }
  

  The weight of the arg is a value from 1 to 100.

  For reference, the full plain java source

  /* * To change this template, choose Tools | Templates * and open the template in the editor. */
  
  package imagetest;
  
  /** * * @author COMPUTER */// Blender1.java
  
  import java.awt.*;import java.awt.image.*;
  
  import javax.swing.*;import javax.swing.event.*;
  
  /** * This class describes and contains the entry point to an application that * demonstrates the blending transition. */
  
  public class Blender1 extends JFrame{  /**    *     */   private static final long serialVersionUID = 1L;
  
      /**    * Construct Blender1 GUI.     */
  
   public Blender1() {     super("Blender #1");      setDefaultCloseOperation(EXIT_ON_CLOSE);
  
          // Load first image from JAR file and draw image into a buffered image.
  
       ImageIcon ii1 = new ImageIcon(getClass().getResource("x.png"));       final BufferedImage bi1;      bi1 = new BufferedImage(ii1.getIconWidth(), ii1.getIconHeight(),              BufferedImage.TYPE_INT_RGB);      Graphics2D g2d = bi1.createGraphics();        int h = ii1.getImage().getHeight(null);       System.out.println("Blender1.Blender1()--------> height :" + h);       g2d.drawImage(ii1.getImage(), 0, 0, null);        g2d.dispose();
  
        // Load second image from JAR file and draw image into a buffered image.
  
          ImageIcon ii2 = new ImageIcon(getClass().getResource("y.png"));       final BufferedImage bi2;      bi2 = new BufferedImage(ii2.getIconWidth(), ii2.getIconHeight(),              BufferedImage.TYPE_INT_RGB);      g2d = bi2.createGraphics();       int h2 = ii2.getImage().getHeight(null);      System.out.println("Blender1.Blender1()--------> height :" + h2);      g2d.drawImage(ii2.getImage(), 0, 0, null);        g2d.dispose();
  
        // Create an image panel capable of displaying entire image. The widths       // of both images and the heights of both images must be identical.
  
       final ImagePanel ip = new ImagePanel();       ip.setPreferredSize(new Dimension(ii1.getIconWidth(), ii1             .getIconHeight()));       getContentPane().add(ip, BorderLayout.NORTH);
  
         // Create a slider for selecting the blending percentage: 100% means      // show all of first image; 0% means show all of second image.
  
        final JSlider slider = new JSlider(JSlider.HORIZONTAL, 0, 100, 100);      slider.setMinorTickSpacing(5);        slider.setMajorTickSpacing(10);       slider.setPaintTicks(true);       slider.setPaintLabels(true);      slider.setLabelTable(slider.createStandardLabels(10));        slider.setInverted(true);     ChangeListener cl;        cl = new ChangeListener()     {         public void stateChanged( ChangeEvent e )         {             // Each time the user adjusts the slider, obtain the new              // blend percentage value and use it to blend the images.
  
                 int value = slider.getValue();                ip.setImage(blend(bi1, bi2, value / 100.0));          }     };        slider.addChangeListener(cl);     getContentPane().add(slider, BorderLayout.SOUTH);
  
         // Display the first image, which corresponds to a 100% blend     // percentage.
  
        ip.setImage(bi1);
  
         pack();       setVisible(true); }
  
     /**    * Blend the contents of two BufferedImages according to a specified weight.   *     * @param bi1  *            first BufferedImage  * @param bi2  *            second BufferedImage     * @param weight   *            the fractional percentage of the first image to keep     *     * @return new BufferedImage containing blended contents of BufferedImage  *         arguments   */
  
   public BufferedImage blend( BufferedImage bi1, BufferedImage bi2,         double weight )   {     if (bi1 == null)          throw new NullPointerException("bi1 is null");
  
        if (bi2 == null)          throw new NullPointerException("bi2 is null");
  
        int width = bi1.getWidth();       if (width != bi2.getWidth())          throw new IllegalArgumentException("widths not equal");
  
       int height = bi1.getHeight();     if (height != bi2.getHeight())
  
            throw new IllegalArgumentException("heights not equal");
  
          BufferedImage bi3 = new BufferedImage(width, height,              BufferedImage.TYPE_INT_RGB);      int[] rgbim1 = new int[width];        int[] rgbim2 = new int[width];        int[] rgbim3 = new int[width];
  
        for (int row = 0; row < height; row++)     {         bi1.getRGB(0, row, width, 1, rgbim1, 0, width);           bi2.getRGB(0, row, width, 1, rgbim2, 0, width);
  
           for (int col = 0; col < width; col++)          {             int rgb1 = rgbim1[col];               int r1 = (rgb1 >> 16) & 255;                int g1 = (rgb1 >> 8) & 255;             int b1 = rgb1 & 255;
  
                  int rgb2 = rgbim2[col];               int r2 = (rgb2 >> 16) & 255;                int g2 = (rgb2 >> 8) & 255;             int b2 = rgb2 & 255;
  
                  int r3 = (int) (r1 * weight + r2 * (1.0 - weight));               int g3 = (int) (g1 * weight + g2 * (1.0 - weight));               int b3 = (int) (b1 * weight + b2 * (1.0 - weight));               rgbim3[col] = (r3 << 16) | (g3 << 8) | b3;            }
  
             bi3.setRGB(0, row, width, 1, rgbim3, 0, width);       }
  
         return bi3;   }
  
     /**    * Application entry point.    *     * @param args     *            array of command-line arguments  */
  
   public static void main( String[] args )  {     Runnable r = new Runnable()       {         public void run()         {             // Create Blender1's GUI on the event-dispatching             // thread.
  
                new Blender1();           }     };        EventQueue.invokeLater(r);    }}
  
  /** * This class describes a panel that displays a BufferedImage's contents. */
  
  class ImagePanel extends JPanel{ /**    *     */   private static final long serialVersionUID = 4977990666209629996L;    private BufferedImage bi;
  
     /**    * Specify and paint a new BufferedImage.  *     * @param bi   *            BufferedImage whose contents are to be painted   */
  
   void setImage( BufferedImage bi ) {     this.bi = bi;     repaint();    }
  
     /**    * Paint the image panel.  *     * @param g    *            graphics context used to paint the contents of the current   *            BufferedImage    */
  
   public void paintComponent( Graphics g )  {     if (bi != null)       {         Graphics2D g2d = (Graphics2D) g;          g2d.drawImage(bi, null, 0, 0);        } }}
  

  Full java BB source

  /* * ImageScreen.java * * © ,  * Confidential and proprietary. */
  
  package src;
  
  /** *  */
  
  import java.io.OutputStream;import javax.microedition.io.Connector;import javax.microedition.io.file.FileConnection;import net.rim.device.api.system.Bitmap;import net.rim.device.api.ui.Field;import net.rim.device.api.ui.FieldChangeListener;import net.rim.device.api.ui.UiApplication;import net.rim.device.api.ui.component.BitmapField;import net.rim.device.api.ui.component.ButtonField;import net.rim.device.api.ui.component.Dialog;import net.rim.device.api.ui.component.LabelField;import net.rim.device.api.ui.container.HorizontalFieldManager;import net.rim.device.api.ui.container.MainScreen;import net.rim.device.api.ui.component.GaugeField;/** * The main screen to display an image taken from the camera demo. */public final class ImageScreen extends MainScreen{    /** The down-scaling ratio applied to the snapshot Bitmap */    private static final int IMAGE_SCALING = 7;
  
      /** The base file name used to store pictures */    private static final String FILE_NAME = System.getProperty("fileconn.dir.photos") + "IMAGE";
  
      /** The extension of the pictures to be saved */    private static final String EXTENSION = ".bmp";
  
      /** A counter for the number of snapshots taken */    private static int _counter;    Bitmap image1,image2; BitmapField imageField;     /** A reference to the current screen for listeners */    private ImageScreen _imageScreen;
  
     /**    * Constructor    * @param raw A byte array representing an image    */    public ImageScreen( final byte[] raw1,final byte[] raw2 )    {        // A reference to this object, to be used in listeners        _imageScreen = this;
  
          setTitle("Blend and Save");
  
          // Convert the byte array to a Bitmap image        image1 = Bitmap.createBitmapFromBytes( raw1, 0, -1, 1 );        image2 = Bitmap.createBitmapFromBytes( raw2, 0, -1, 1 );        // Create two field managers to center the screen's contents        HorizontalFieldManager hfm1 = new HorizontalFieldManager( Field.FIELD_HCENTER );        HorizontalFieldManager hfm2 = new HorizontalFieldManager( Field.FIELD_HCENTER );        HorizontalFieldManager hfm3 = new HorizontalFieldManager( Field.FIELD_HCENTER );        // Create the field that contains the image//blend(image1, image2, 50/ 100.0)        imageField = new BitmapField(blend(image1, image2, 50/ 100.0) ){
  
             public int getPreferredWidth(){ return 250;}           public int getPreferredHeight(){ return 150;}
  
           };
  
          hfm1.add( imageField ); 
  
          GaugeField scroller = new GaugeField("Adjust (alt + < >)",0,100,50,Field.EDITABLE | Field.FOCUSABLE);        //scroller.setBackground( net.rim.device.api.ui.decor.BackgroundFactory.createSolidBackground(0x00000000));          scroller.setChangeListener( new GaugeFieldListener() );         hfm2.add(scroller);         // Create the SAVE button which returns the user to the main camera        // screen and saves the picture as a file.        ButtonField photoButton = new ButtonField( "Save" );        photoButton.setChangeListener( new SaveListener(raw1,raw2) );        hfm3.add(photoButton);
  
          // Create the CANCEL button which returns the user to the main camera        // screen without saving the picture.        ButtonField cancelButton = new ButtonField( "Cancel" );        cancelButton.setChangeListener( new CancelListener() );        hfm3.add(cancelButton);
  
          // Add the field managers to the screen        add( hfm1 );        add( hfm2 );        add( hfm3 );scroller.setFocus();//scroller.setValue(50);    }    public Bitmap blend( Bitmap bi1, Bitmap  bi2,                      double weight )        {
  
                if (bi1 == null)                       throw new NullPointerException("bi1 is null");
  
                  if (bi2 == null)                       throw new NullPointerException("bi2 is null");
  
                  int width = bi1.getWidth();            if (width != bi2.getWidth())                   throw new IllegalArgumentException("widths not equal");
  
                 int height = bi1.getHeight();          if (height != bi2.getHeight())
  
                          throw new IllegalArgumentException("heights not equal");
  
           Bitmap bi3 = new Bitmap(width, height);         int[] rgbim1 = new int[width];         int[] rgbim2 = new int[width];         int[] rgbim3 = new int[width];
  
                  for (int row = 0; row < height; row++)         {            // bi -> int startX, int startY, int w, int h, int[] rgbArray, int offset, int scansize) 
  
               // bit - > int[] argbData, int offset, int scanLength, int x, int y, int width, int height) 
  
                         bi1.getARGB(rgbim1,0,width,0,row, width,1);//  row, width, 1, , 0, width);                       bi2.getARGB(rgbim2,0,width,0,row, width,1); 
  
                         //bi1.getRGB(0, row, width, 1, rgbim1, 0, width);                       //bi2.getRGB(0, row, width, 1, rgbim2, 0, width);
  
                         for (int col = 0; col < width; col++)                  {                              int rgb1 = rgbim1[col];                                int r1 = (rgb1 >> 16) & 255;                           int g1 = (rgb1 >> 8) & 255;                            int b1 = rgb1 & 255;
  
                            int rgb2 = rgbim2[col];                                int r2 = (rgb2 >> 16) & 255;                           int g2 = (rgb2 >> 8) & 255;                            int b2 = rgb2 & 255;
  
                            int r3 = (int) (r1 * weight + r2 * (1.0 - weight));                            int g3 = (int) (g1 * weight + g2 * (1.0 - weight));                            int b3 = (int) (b1 * weight + b2 * (1.0 - weight));                            rgbim3[col] = (r3 << 16) | (g3 << 8) | b3;                     }                    //bi -> int startX, int startY, int w, int h, int[] rgbArray, int offset, int scansize)                     //bit -> (int[] data, int offset, int scanLength, int left, int top, int width, int height)                      bi3.setARGB(rgbim3, 0, width, 0,  row,width, 1);
  
                      // bi3.setRGB(0, row, width, 1, rgbim3, 0, width);                }
  
               return bi3;    }
  
     /**    * Handles trackball click events    * @see net.rim.device.api.ui.Screen#invokeAction(int)    */       protected boolean invokeAction(int action)    {        boolean handled = super.invokeAction(action); 
  
          if(!handled)        {            switch(action)            {                case ACTION_INVOKE: // Trackball click.                {                                 return true;                }            }        }                return handled;              }
  
   /**    * A listener used for the "Save" button    */    private class GaugeFieldListener implements FieldChangeListener    {        public void fieldChanged(Field field, int context)        {          int value =  ((GaugeField)field).getValue(); if (value==0){return;}          imageField.setBitmap( blend(image1, image2, value/ 100.0) );          ((GaugeField)field).setLabel("Adjust (alt + < >)"+value);        }    }   /**    * A listener used for the "Save" button    */    private class SaveListener implements FieldChangeListener    {        /** A byte array representing an image */        private byte[] _raw1,_raw2;
  
         /**        * Constructor.        * @param raw A byte array representing an image        */        SaveListener(byte[] raw1,byte[] raw2)        {            _raw1 = raw1;            _raw2 = raw2;        }
  
         /**        * Saves the image as a file in the BlackBerry filesystem        */        public void fieldChanged(Field field, int context)        {            try            {                       // Create the connection to a file that may or                // may not exist.                FileConnection file = (FileConnection)Connector.open( FILE_NAME + _counter + EXTENSION );
  
                  // If the file exists, increment the counter until we find                // one that hasn't been created yet.                while( file.exists() )                {                    file.close();                    ++_counter;                    file = (FileConnection)Connector.open( FILE_NAME + _counter + EXTENSION );                }
  
                  // We know the file doesn't exist yet, so create it                file.create();
  
                  // Write the image to the file                OutputStream out = file.openOutputStream();                out.write(_raw1);
  
                  // Close the connections                out.close();                file.close();            }            catch(Exception e)            {                Dialog.alert( "ERROR " + e.getClass() + ":  " + e.getMessage() );            }
  
              // Inform the user where the file has been saved            Dialog.inform( "Saved to " + FILE_NAME + _counter + EXTENSION );
  
              // Increment the image counter            ++_counter;
  
              // Return to the main camera screen            UiApplication.getUiApplication().popScreen( _imageScreen );        }    }
  
     /**    * A listener used for the "Cancel" button    */    private class CancelListener implements FieldChangeListener    {       /**        * Return to the main camera screen        */        public void fieldChanged(Field field, int context)        {            UiApplication.getUiApplication().popScreen( _imageScreen );        }    }}
  

  Yes, your original code:

  for (int col = 0; col < width; col++){int rgb1 = rgbim1[col];int r1 = (rgb1 >> 16) & 255;int g1 = (rgb1 >> 8) & 255;int b1 = rgb1 & 255;
  
  int rgb2 = rgbim2[col];int r2 = (rgb2 >> 16) & 255;int g2 = (rgb2 >> 8) & 255;int b2 = rgb2 & 255;
  
  int r3 = (int) (r1 * weight + r2 * (1.0 - weight));int g3 = (int) (g1 * weight + g2 * (1.0 - weight));int b3 = (int) (b1 * weight + b2 * (1.0 - weight));rgbim3[col] = (r3 << 16) | (g3 << 8) | b3;}
  

  Labour Code:

  for (int col = 0; col < width; col++)
  {
  int rgb1 = rgbim1[col];
  int a1 = (rgb1 >> 24) & 255;
  int r1 = (rgb1 >> 16) & 255;
  int g1 = (rgb1 >> 8) & 255;
  int b1 = rgb1 & 255;
  
  int rgb2 = rgbim2[col];
  int a2 = (rgb2 >> 24) & 255;
  int r2 = (rgb2 >> 16) & 255;
  int g2 = (rgb2 >> 8) & 255;
  int b2 = rgb2 & 255;
  
  int a3 = (int) (a1 * weight + a2 * (1.0 - weight));
  int r3 = (int) (r1 * weight + r2 * (1.0 - weight));
  int g3 = (int) (g1 * weight + g2 * (1.0 - weight));
  int b3 = (int) (b1 * weight + b2 * (1.0 - weight));
  rgbim3[col] = (a3 << 24) | (r3 << 16) | (g3 << 8) | b3;
  }
  

• The sensible scaling of composition edge animating in Dreamweaver checkerboard to fluid

  I've created an animation on board animate and placed in the header of a checkerboard fluid to Dreamweaver. I put it in a div in itself so it can be disabled in the mobile layout. When I test the layout in a browser, the composition of edge animate changes adapted to the size of the window, but the height of the div that it's actually not. The width of the div changes with the width of the window, but the div height remains the same. Because the height of the div does not change, as the animation responds and resizes it leaves a big empty space between the bottom of the animation and the content that follows it in the page.

  The div itself doesn't have a rule for its height that are associated with. It seems to me that the div gets its height from the original size of the html object that is the animation. I tried to remove the rule of height of the object, but then the div at the bottom of the animation clips, and yet once, it is not resize the window.

  Is it possible that I can get the height of the div resize to the size of the animation as it changes?

  This should help you.

  Using compositions dashboard animate reactive in Dreamweaver «Adobe Edge animate Team Blog»

  Nancy O.