Hi Armin,
I'll continue to study Pmapper and try to solve the problems about layout.
I'll send you news.
Luca
Armin Burger ha scritto:
> Luca,
>
> thanks for the files. I tried them but have slight problems with the results.
See the screenshots in a separate mail.
>
> I saw that you are mainly using absolute positioning for the styles. In my
opinion that makes a flexible positioning a bit more complicated.
>
> For me the main issue to be solved is how can I place the map with the
surrounding bars (top, bottom, tools) flexibly on a page and have TOC and
refmap sized automatically according to the map/mapframe height. And find a way
to have the values for the zoombox correctly set (if possible avoiding playing
with offsets). And how can I easily specify that by resizing the browser window
either the map or the TOC should be resized (and have them resized correctly,
including zoombox settings etc.).
>
> A good but now a bit more difficult to understand example is the ka-map
project from DM Solutions.
>
> Armin
>
>
>
> luca orlandini wrote:
>
>> Hi Armin,
>> I send you the files I changed to have a base layout completely based on DIV
( pmapper 1.9.4. I tryed it using Firefox/Mozilla and css validator W3C).
>> For a better layout, i changed width(880) and heigh(700) in
javascript:openNew into the file index.html.
>>
>> Bye
>>
>>
>> ------------------------------------------------------------------------
>>
>> /****************************************
>> MAIN STYLES
>> *****************************************/
>>
>> /* * DEFAULTS FOR BODY AND TABLES *********************************/
>> BODY {
>> font-size : 11px;
>> font-family: Arial, Helvetica, sans-serif;
>> color: #000000;
>> background : #003366;
>> cursor: default;
>> overflow: hidden;
>> }
>> TH {
>> font-size: 11px;
>> font-family: Arial, Helvetica, sans-serif;
>> text-align: left;
>> color: #000000;
>> }
>>
>> TD {
>> font-size: 11px;
>> font-family: Arial, Helvetica, sans-serif;
>> text-align: left;
>> color: #000000;
>> }
>>
>> A {
>> color: #FFFFFF;
>> text-decoration: none;
>> }
>>
>> IMG {
>> border-width: 0px;
>> border-color: #FF0000;
>> }
>>
>>
>> /* TOOL BUTTONS IN TOOLBAR.PHTML Used for mouseDown/Up and mouseOver/Out
actions */
>> .TOOLBAR {
>> color: #000000; }
>>
>> .TOOLBARTD{
>> padding: 2px;
>> /*border: 1px solid #B1BBC5;*/
>> }
>>
>> .TOOLBARTD_ON{
>> padding: 1px;
>> background-color: #CCCCCC; /*#336699;*/ border-top: 1px solid
#666666;
>> border-bottom: 1px solid #F0F0F0;
>> border-right: 1px solid #F0F0F0;
>> border-left: 1px solid #666666; }
>> .TOOLBARTD_OVER{
>> padding: 1px; border-top: 1px solid #F0F0F0;
>> border-bottom: 1px solid #666666;
>> border-right: 1px solid #666666;
>> border-left: 1px solid #F0F0F0;*/
>> }
>>
>>
>> .TOOLBAR IMG {
>> border: 0px;
>> }
>>
>> #tsep {
>> /*padding-left: 6px;*/
>> text-align: center;
>> }
>>
>> .TOPBOTTOM {
>> background-color: #999999;
>> }
>>
>> /* * TOOL FRAME AROUND MAP ************************/
>> .TOOLFRAME {
>> background-color: #B1BBC5; /*#B1BBC5;#C0C0C0;*/
>> color: #000000; }
>>
>>
>> .TOOLFRAME TD {
>> font-size: 12px;
>> color: #000000; vertical-align:middle;
>> }
>>
>> .TOOLFRAME vc{
>> vertical-align:baseline;
>> }
>>
>> /* FRAME FOR HEADER AND FOOTER */
>> .FRAME1 {
>> color: #FFFFFF;
>> font-size: 11px;
>> background-color: #336699;
>> border-top: 1px solid #E0E0E0;
>> border-bottom: 1px solid #E0E0E0;
>> }
>>
>>
>> .FRAME1 TABLE TD {
>> padding-left: 4 px;
>> }
>>
>>
>>
>> /* HEADING, e.g. in top frame*/
>> .HEADING1 {
>> color: #FFFFFF;
>> text-align:center;
>> font-size:16px;
>> font-weight:bold;
>> }
>>
>>
>>
>>
>>
>> /* FORM ELEMENTS ************************************/
>> INPUT { font-size : 12px;}
>>
>> .TOOLFRAME input {
>> background-color : #EBEBEB;
>> border-color : #003366;
>> border-style : solid;
>> border-width : 1px;
>> font-size : 12px;
>> }
>>
>> /* Input Button colors on/off */
>> .TOOLFRAME input.button_on, .FRAME1 input.button_on {
>> background-color : #003366;
>> color: #FFFFFF;
>> border-color: #FFFFFF;
>> }
>>
>> .TOOLFRAME input.button_off, .FRAME1 input.button_off {
>> background-color : #EBEBEB;
>> }
>>
>>
>> .FRAME1 input {
>> background-color : #EBEBEB;
>> border-color : #003366;
>> border-style : solid;
>> border-width : 1px;
>> font-size : 12px;
>> }
>> select {
>> background-color : #EBEBEB;
>> border-color : #003366;
>> border-style : solid;
>> border-width : 0px; width : 100px;
>> font-size : 12px;
>> }
>>
>>
>>
>> /* ADDITIONAL TABLE TD */
>> .TDAL{text-align:left;}
>> .TDAR{text-align:right;}
>> .TDAC{text-align:center;}
>>
>>
>>
>> ------------------------------------------------------------------------
>>
>> .mapTab {
>> background-color: #eeeeee;
>> }
>>
>> #general {
>> position: absolute;
>> left:38px; top:50px; width:604px;
>> height:517px;
>> /*left:27px;
>> top:87px;
>> width:864px;
>> height:584px;
>> border-color:#FF0000;
>> background-color:trasparent;*/
>> }
>>
>> #map {
>> position: relative;
>> left : 0;
>> top : 0;
>> background-color: #000000;
>> }
>>
>> #logo {
>> position: absolute;
>> left:0px;
>> width: 120px;
>> height: 26px;
>> top: -1px;
>> }
>>
>> #Mapserver {
>> position: absolute;
>> left : 192px;
>> top : -7px;
>> height: 27px;
>> width: 367px;
>>
>> }
>>
>>
>> #mapFrame {
>> position:absolute;
>> left:2px; top:47px; width:580px;
>> height:519px;
>> background-color: #B1BBC5;
>> border-color:#333333;
>> }
>>
>>
>> #zoom {
>> position:absolute;
>> width:258px;
>> height:56px;
>> right:60px;
>> top: -1px;
>> left: 266px;
>> }
>>
>> #piumeno {
>> position:absolute;
>> width:200px;
>> height:24px;
>> right:0px;
>> top: 3px;
>>
>> left: 64px;
>>
>> }
>> #piu{
>> position:absolute;
>> width:12px;
>> height:8px;
>> left:2px;
>> top: 11px;
>>
>> }
>>
>> #barra {
>> position:absolute;
>> height:8px;
>> left: 19px;
>> top: 10px;
>> width: 167px;
>> }
>> #ScaleandZoom {
>> position:absolute;
>> width:579px;
>> height:33px;
>> top: 1px;
>> left: 0px;
>> }
>> #Scale {
>> position: absolute;
>> width:135px;
>> height:10px;
>> left: 1px;
>> top: -1px;
>> }
>> #toolBar {
>> position: absolute;
>> right : 0px;
>> top : 7px;
>> z-index : 5;
>> left: 534px;
>> }
>>
>> #bottomMapFrame {
>> position: absolute;
>> left : 0px;
>> /*bottom : 0px;*/
>> top: 480px;
>> width: 558px;
>> height: 40px;
>> z-index : 3;
>> }
>>
>> #topMapFrame {
>> position: absolute;
>> left : 0px;
>> top : 0px;
>> width: 574px;
>> height: 53px;
>> z-index : 3;
>>
>>
>> }
>>
>>
>> #top {
>> position: absolute;
>> left : 0;
>> top : 0;
>> width: 100%;
>> height: 35px;
>> z-index:15;
>> }
>>
>> #bottom {
>> position: absolute;
>> left : -40px;
>> bottom: 0px;
>> width: 100%;
>> height: 35px;
>> z-index:15;
>> top: 629px;
>> }
>> #toc2 { position:absolute; left:1px; top:3px; width:219px; height:15px; }
>>
>>
>> zoombox {
>> position: relative;
>> visibility: visible;
>> width: 1px;
>> height: 1px;
>> border-color : #FF0000;
>> border-width : 1px;
>> border-style : solid;
>> z-index:95;
>> background:#eeeeee;
>> layer-background-color:#eeeeee;
>> filter: alpha(opacity=40); -moz-opacity:0.4;
>> }
>>
>>
>> /* STYLE FOR MEASURE ELEMENTS */
>> #measureLayer {
>> position:relative; visibility: visible;
>> z-index:94;
>>
>> }
>>
>>
>> /* STYLE FOR REFERENCE MAP */
>> refmap {
>> background-color: #000000;
>> }
>>
>> /* STYLE FOR REFERENCE MAP BOX */
>> refbox {
>> visibility: visible;
>> overflow: hidden;
>> position: absolute;
>> border-color : #FF0000;
>> border-width : 2px;
>> border-style : solid;
>> }
>>
>>
>> /* STYLE FOR REFERENCE MAP CROSS */
>> refcross {
>> visibility: hidden;
>> position: absolute;
>> }
>>
>>
>> /* STYLE FOR REFERENCE MAP BOX */
>> sliderbox {
>> visibility: hidden;
>> overflow: hidden;
>> position: absolute;
>> border-color : #FF0000;
>> border-width : 1px;
>> border-style : solid;
>> background:#eeeeee;
>> layer-background-color:#eeeeee;
>> filter: alpha(opacity=60); -moz-opacity:0.6;
>> }
>>
>> ref {
>> position: absolute;
>> }
>>
>>
>>
>>
>> #mImg {
>> background-color : #FF0000;
>> }
>
>
> _______________________________________________
> Pmapper-users mailing list
> [EMAIL PROTECTED]
> http://faunalia.it/cgi-bin/mailman/listinfo/pmapper-users
