Skipped content of type multipart/alternative-------------- next part
--------------
A non-text attachment was scrubbed...
Name: map.phtml
Type: application/octet-stream
Size: 10529 bytes
Desc: not available
Url :
http://www.faunalia.com/pipermail/pmapper-users/attachments/20051013/29deff73/map.obj
-------------- next part --------------
A non-text attachment was scrubbed...
Name: default.css
Type: text/css
Size: 3015 bytes
Desc: not available
Url :
http://www.faunalia.com/pipermail/pmapper-users/attachments/20051013/29deff73/default.css
-------------- next part --------------
A non-text attachment was scrubbed...
Name: layout.css
Type: text/css
Size: 3055 bytes
Desc: not available
Url :
http://www.faunalia.com/pipermail/pmapper-users/attachments/20051013/29deff73/layout.css
From [EMAIL PROTECTED] Thu Oct 13 22:12:54 2005
From: [EMAIL PROTECTED] (Armin Burger)
Date: Thu Oct 13 22:13:26 2005
Subject: [Pmapper-users] Re: layout
In-Reply-To: <[EMAIL PROTECTED]>
References: <[EMAIL PROTECTED]>
Message-ID: <[EMAIL PROTECTED]>
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;
> }
