|  Login   

   Home       Design       SkinConverter       Gallery       Resources       Site Map   
    Wednesday, September 08, 2010         Design  Containers  EcoScroll Container Welcome Guest   

   
 
   Sample Without Scroll   
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla euismod. Sed ut risus. Donec placerat, magna eu varius porta, eros dolor tristique elit, et vulputate ligula leo vel risus. Maecenas nunc. Aliquam quis justo. Proin non ipsum bibendum ante auctor accumsan. Aenean nec ipsum. Sed turpis est, pharetra ac, adipiscing nec, molestie eu, sapien. Nullam vestibulum leo luctus augue. Duis bibendum eleifend mauris. Nulla facilisi. In hac habitasse platea dictumst. Suspendisse interdum sem id felis. Nulla dolor justo, hendrerit non, rhoncus ac, aliquet non, ipsum. Pellentesque posuere massa eu dui. Quisque dolor. Phasellus odio arcu, molestie nec, nonummy non, vulputate vel, elit. Vestibulum eros lorem, tincidunt non, suscipit sit amet, accumsan non, purus. Maecenas nonummy metus eget est tincidunt cursus.
 
   EcoScroll Container   

This is the EcoScroll container that is a variant of the EcoBrick with a fixed height for the part of the content and that, when the content occupies more of the space available, appears a vertical bar of scroll with which we can move to see all the content.

This container does not have superior nor inferior margins and can be piled up of a continuous way.

This container has for the content a fixed height  of 160 pixels. This allows to be able to have 2 piled up containers of this type within one page and that we can see the page completly, as we can see in this example.

This system of scroll is very simple, but the height value is unique by form. It will be better that each module instance had properties of own height and/or width and the possibility of scroll.

   How to ... put scroll in a container   

Content.NET container normally has a set of tables (it can be a single one) overlapped in whose cells it can have images or container objects ( they go between brackets [  ]).

Scroll normally must to work only in the content.

We can obtained it with:

  • Style overflow: auto
  • That will display a scroll bar if the width is greater of the indicated in the style height: 999px
  • This style only work with a DIV
  • For that reason we will have to surround the object [ModuleContent] with a DIV with the indicated style.

For example: [ModuleContent]

The tag DIV must have a style "OVERFLOW:auto; HEIGHT:160px;"

With this we will obtain that it appears the bar of vertical scroll when the contained text gets to exceed the 160 px of height.

It can happen that the object [ModuleContent] was surrounded by another TAG, like a SPAN. In this case we must to replace the SPAN by the DIV and to put in this DIV all the attributes of the previous TAG, adding also the scroll attributes.

 
   Sample with scroll   

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla euismod. Sed ut risus. Donec placerat, magna eu varius porta, eros dolor tristique elit, et vulputate ligula leo vel risus. Maecenas nunc. Aliquam quis justo. Proin non ipsum bibendum ante auctor accumsan. Aenean nec ipsum. Sed turpis est, pharetra ac, adipiscing nec, molestie eu, sapien. Nullam vestibulum leo luctus augue. Duis bibendum eleifend mauris. Nulla facilisi. In hac habitasse platea dictumst. Suspendisse interdum sem id felis. Nulla dolor justo, hendrerit non, rhoncus ac, aliquet non, ipsum. Pellentesque posuere massa eu dui. Quisque dolor. Phasellus odio arcu, molestie nec, nonummy non, vulputate vel, elit. Vestibulum eros lorem, tincidunt non, suscipit sit amet, accumsan non, purus. Maecenas nonummy metus eget est tincidunt cursus.