Changeset 202

Show
Ignore:
Timestamp:
10/10/06 23:10:23 (2 years ago)
Author:
d.reszka
Message:

first experimental results with testing an approach inspired by Yahoo grids

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • sites/example/index.htm

    r92 r202  
    44/*  
    55* WYMstyle - The free CSS framework 
    6 * Copyright (C) 2006 Daniel Reszka 
     6* Copyright (C) 2006 H.O.net e-solutions 
    77* 
    88* Licensed under the terms of the GNU Lesser General Public License: 
    …… 
    1717* FILE NAME: 
    1818* FILE DESCRIPTION:     Example of a html file compatible with WYMstyle framework 
    19 * FILE AUTHORS:         Daniel Reszka (daniel@pixarea.com - http://www.pixarea.com - http://blog.pixarea.com) 
     19* FILE AUTHORS:         Daniel Reszka (daniel@pixarea.com - http://daniel.pixarea.com - http://blog.pixarea.com) 
     20* CONTRIBUTIONS: 
    2021*/ 
    2122--> 
    …… 
    3233<body> 
    3334<div id="page">  
    34         <div id="header"> 
    35         <div class="wrapper"> 
    36         <h1><a href="" title="">test local</a></h1> 
    37         </div> 
     35        <div id="hd"> 
     36               <div class="w"> 
     37               <h1><a href="" title="">test local</a></h1> 
     38               </div> 
    3839        </div> 
    3940 
    40         <div id="content">       
    41             <div id="content_wrapper"> 
    42              
    43                 <div id="main" class="content"> 
    44                 <div class="wrapper"> 
    45                 <h2 class="accessibility">Main content</h2> 
     41        <div id="bd" class="t1"> 
     42                <div id="main"> 
    4643 
    47                  
    48                 <h3>HTML Structure:</h3> 
     44                        <div class="g"> 
     45 
     46                                <div class="b first"> 
     47 
     48                                        <div class="g"> 
     49                                                <div id="c1" class="b first"> 
     50                                                        <div class="w"> 
     51                                                        <h2 class="access">Main content</h2> 
     52                                                        <p>Lorem ipsum dolor sit <a href="#">amet</a> consectetuer tortor porta elit lacinia Vivamus. Nulla convallis a pede nascetur dolor ridiculus Sed at Nam malesuada. Feugiat Ut consequat eros mi nunc eros sociis ut justo metus. Et In elit sed pretium vitae Nam auctor mus habitasse ac. Velit et Vestibulum eu Nunc lobortis Mauris vel leo nec adipiscing. </p> 
     53                                                        <p>Orci Nam lacinia ligula porta habitasse Sed et lacinia lacinia eros. Tincidunt Curabitur quis nibh porttitor neque a congue dolor vel sit. Lorem fermentum tristique Phasellus elit sit porttitor consequat condimentum libero vel. Laoreet Vestibulum nec sem ultrices Sed tempor tortor auctor et suscipit. Augue purus elit pede laoreet pretium interdum eu nulla.</p> 
     54                                                        <p>Ridiculus Vestibulum pulvinar a euismod a elit Nulla hendrerit vestibulum orci. Morbi Vestibulum iaculis tempor pellentesque elit sed volutpat pretium urna tincidunt. Dapibus condimentum velit tempus eu eget ut massa at consectetuer Donec. Nunc at tellus ullamcorper sed Ut est quis Quisque augue eros. Leo elit eros Nulla et urna Nam at ligula et justo. </p> 
     55                                                        <p>Eu nulla semper id ridiculus id ligula id Sed Vivamus Curabitur. Habitant quis aliquam adipiscing pretium enim dapibus Curabitur laoreet at quis. Nunc adipiscing condimentum id netus fringilla ligula lacus faucibus ac et. Nibh quis massa Fusce Vestibulum laoreet congue et enim orci Vivamus. Lacus tempor quis dolor Curabitur iaculis volutpat vitae congue orci nibh. Egestas neque sem pretium Sed lacinia non Curabitur id laoreet convallis. Justo quis.</p> 
     56                                                        </div> 
     57                                                </div><!-- end div#c1 --> 
     58 
     59                                                <div id="c2" class="b"> 
     60                                                        <div class="w"> 
     61                                                        <h2 class="access">Additionnal content</h2> 
     62                                                        <p>Lorem ipsum dolor sit <a href="#">amet</a> consectetuer tortor porta elit lacinia Vivamus. Nulla convallis a pede nascetur dolor ridiculus Sed at Nam malesuada. Feugiat Ut consequat eros mi nunc eros sociis ut justo metus. Et In elit sed pretium vitae Nam auctor mus habitasse ac. Velit et Vestibulum eu Nunc lobortis Mauris vel leo nec adipiscing. </p> 
     63                                                        </div> 
     64                                                </div><!-- end div#c2 --> 
     65                                        </div> 
     66                                </div> 
     67                                 
     68                                 
     69                                <div class="b first"> 
     70 
     71                                        <div class="g"> 
     72                                                <div id="n2" class="b nav "> 
     73                                                        <div class="w"> 
     74                                                                <h2 class="access">Local navigation</h2> 
     75                                                                <ul> 
     76                                                                        <li><a href="#">nav-sec one</a></li> 
     77                                                                        <li><a href="#">two</a></li> 
     78                                                                        <li><a href="#">three</a> 
     79                                                                                <ul> 
     80                                                                                <li><a href="#">nav-sec one</a></li> 
     81                                                                                <li><a href="#">two</a></li> 
     82                                                                                <li><a href="#">three</a></li> 
     83                                                                                </ul> 
     84                                                                        </li> 
     85                                                                        <li><a href="#">nav-sec on--e</a></li> 
     86                                                                </ul> 
     87                                                        </div> 
     88                                                </div><!-- end div#n2 --> 
     89                                        </div> 
     90                                </div> 
     91 
     92 
     93</div> 
     94 
     95                        </div> 
     96 
     97                </div><!-- end div#main --> 
     98            
     99        <div id="n1"  class="b nav"> 
     100                <div class="w"> 
     101                        <h2 class="accessibility">Main navigation</h2> 
    49102                        <ul> 
    50                         <li>html 
    51                                 <ul> 
    52                                  <li>head</li> 
    53                                  <li>body 
    54                                         <ul> 
    55                                         <li>div#page 
    56                                                 <ul> 
    57                                                 <li>div#header</li> 
    58                                                 <li>div#content 
    59                                                         <ul> 
    60                                                         <li>div#content_wrapper</li> 
    61                                                                 <ul> 
    62                                                                 <li>div.content#main</li> 
    63                                                                 <li>div.content#sub</li> 
    64                                                                 <li>div.nav#nav-sec</li> 
    65                                                                 </ul> 
    66                                                         <li>div.nav#nav-pri</li> 
    67                                                         <li>div.nav#nav-lang</li> 
    68                                                         </ul> 
    69                                                 </li> 
    70                                                 <li>div#footer</li> 
    71                                                 <li>div.extradiv#extradiv01</li> 
    72                                                 <li>div.extradiv#extradiv02</li> 
    73                                                 </ul> 
    74                                         </li> 
    75                                         </ul> 
    76                                  </li> 
    77                                 </ul> 
    78                         </li> 
    79                         </ul> 
    80                          
    81                     <div id="cols"> 
    82                         <div id="col1"> 
    83                                 <p>1 Ridiculus Vestibulum pulvinar a euismod a elit Nulla hendrerit vestibulum orci. Morbi Vestibulum iaculis tempor pellentesque elit sed volutpat pretium urna tincidunt. Dapibus condimentum velit tempus eu eget ut massa at consectetuer Donec. Nunc at tellus ullamcorper sed Ut est quis Quisque augue eros. Leo elit eros Nulla et urna Nam at ligula et justo. </p> 
    84                         </div> 
    85                         <div id="col2"> 
    86                                 <p>2 Orci Nam lacinia ligula porta habitasse Sed et lacinia lacinia eros. Tincidunt Curabitur quis nibh porttitor neque a congue dolor vel sit. Lorem fermentum tristique Phasellus elit sit porttitor consequat condimentum libero vel. Laoreet Vestibulum nec sem ultrices Sed tempor tortor auctor et suscipit. Augue purus elit pede laoreet pretium interdum eu nulla.</p> 
    87                                 <p>Ridiculus Vestibulum pulvinar a euismod a elit Nulla hendrerit vestibulum orci. Morbi Vestibulum iaculis tempor pellentesque elit sed volutpat pretium urna tincidunt. Dapibus condimentum velit tempus eu eget ut massa at consectetuer Donec. Nunc at tellus ullamcorper sed Ut est quis Quisque augue eros. Leo elit eros Nulla et urna Nam at ligula et justo. </p> 
    88                         </div> 
    89                         <div id="col3"> 
    90  
    91 <form name="Form1" method="post" action="index.aspx" id="Form1"> 
    92 <table id="ctr_input" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td> 
    93         <div class="field"> 
    94         <label for=""><span id="lbl_firstname">Prénom: </span><em>*</em></label> 
    95         <input name="txt_firstname" type="text" id="txt_firstname" /> 
    96         </div> 
    97  
    98         <div class="field"> 
    99         <label for="txt_name"><span id="lbl_name">Nom: </span><em>*</em></label> 
    100         <input name="txt_name" type="text" id="txt_name" /> 
    101         </div> 
    102          
    103         <div class="field"> 
    104         <label for="txt_address"><span id="lbl_address">Addresse: </span></label> 
    105         <input name="txt_address" type="text" id="txt_address" /> 
    106         </div> 
    107          
    108         <div class="field"> 
    109         <label for="txt_cp"><span id="lbl_cp">Code postal: </span></label> 
    110         <input name="txt_cp" type="text" id="txt_cp" /> 
    111         </div> 
    112          
    113         <div class="field"> 
    114         <label for="txt_city"><span id="lbl_city">Ville: </span></label> 
    115         <input name="txt_city" type="text" id="txt_city" /> 
    116         </div> 
    117          
    118         <div class="field"> 
    119         <label for="txt_country"><span id="lbl_country">Pays: </span></label> 
    120         <input name="txt_country" type="text" id="txt_country" /> 
    121         </div> 
    122          
    123         <div class="field"> 
    124         <label for="txt_tel"><span id="lbl_tel">Téléphone: </span></label> 
    125         <input name="txt_tel" type="text" id="txt_tel" /> 
    126         </div> 
    127          
    128         <div class="field"> 
    129         <label for="txt_email"><span id="lbl_email">E-mail: </span></label> 
    130         <input name="txt_email" type="text" id="txt_email" /> 
    131         </div> 
    132          
    133         <div class="field"> 
    134         <label for="txt_message"><span id="lbl_message">Message: </span><em>*</em></label> 
    135         <textarea name="txt_message" rows="8" cols="30" id="txt_message"></textarea> 
    136         </div> 
    137          
    138         <div class="submit"> 
    139         <input type="submit" name="bt_submit" value="Envoyer" onclick="if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(); " language="javascript" id="bt_submit" /> 
    140         </div> 
    141 </td></tr> 
    142 </table> 
    143 </form> 
    144  
    145                         </div> 
    146                     </div> 
    147                 <p>Lorem ipsum dolor sit <a href="#">amet</a> consectetuer tortor porta elit lacinia Vivamus. Nulla convallis a pede nascetur dolor ridiculus Sed at Nam malesuada. Feugiat Ut consequat eros mi nunc eros sociis ut justo metus. Et In elit sed pretium vitae Nam auctor mus habitasse ac. Velit et Vestibulum eu Nunc lobortis Mauris vel leo nec adipiscing. </p> 
    148                 <p>Orci Nam lacinia ligula porta habitasse Sed et lacinia lacinia eros. Tincidunt Curabitur quis nibh porttitor neque a congue dolor vel sit. Lorem fermentum tristique Phasellus elit sit porttitor consequat condimentum libero vel. Laoreet Vestibulum nec sem ultrices Sed tempor tortor auctor et suscipit. Augue purus elit pede laoreet pretium interdum eu nulla.</p> 
    149                 <p>Ridiculus Vestibulum pulvinar a euismod a elit Nulla hendrerit vestibulum orci. Morbi Vestibulum iaculis tempor pellentesque elit sed volutpat pretium urna tincidunt. Dapibus condimentum velit tempus eu eget ut massa at consectetuer Donec. Nunc at tellus ullamcorper sed Ut est quis Quisque augue eros. Leo elit eros Nulla et urna Nam at ligula et justo. </p> 
    150                 <p>Eu nulla semper id ridiculus id ligula id Sed Vivamus Curabitur. Habitant quis aliquam adipiscing pretium enim dapibus Curabitur laoreet at quis. Nunc adipiscing condimentum id netus fringilla ligula lacus faucibus ac et. Nibh quis massa Fusce Vestibulum laoreet congue et enim orci Vivamus. Lacus tempor quis dolor Curabitur iaculis volutpat vitae congue orci nibh. Egestas neque sem pretium Sed lacinia non Curabitur id laoreet convallis. Justo quis.</p> 
    151                 </div> 
    152                 </div> 
    153                                  
    154                 <div id="sub" class="content"> 
    155                 <div class="wrapper"> 
    156                 <h2 class="accessibility">Additionnal content</h2> 
    157                 <p>Lorem ipsum dolor sit <a href="#">amet</a> consectetuer tortor porta elit lacinia Vivamus. Nulla convallis a pede nascetur dolor ridiculus Sed at Nam malesuada. Feugiat Ut consequat eros mi nunc eros sociis ut justo metus. Et In elit sed pretium vitae Nam auctor mus habitasse ac. Velit et Vestibulum eu Nunc lobortis Mauris vel leo nec adipiscing. </p>     
    158                 </div> 
    159                 </div>   
    160  
    161                 <div id="nav-sec" class="nav"> 
    162                 <div class="wrapper"> 
    163                 <h2 class="accessibility">Local navigation</h2> 
    164                 <ul> 
    165                 <li><a href="#">nav-sec one</a></li> 
    166                 <li><a href="#">two</a></li> 
    167                 <li><a href="#">three</a> 
    168                         <ul> 
    169                         <li><a href="#">nav-sec one</a></li> 
    170                         <li><a href="#">two</a></li> 
    171                         <li><a href="#">three</a></li> 
    172                         <li><a href="#">nav-sec one</a></li> 
    173                         <li><a href="#">three</a></li> 
    174                         <li><a href="#">three</a></li> 
    175                         <li><a href="#">three</a></li> 
    176                         </ul> 
    177                 </li> 
    178                 <li><a href="#">nav-sec on--e</a></li> 
    179                 <li><a href="#">two</a></li> 
    180                 <li><a href="#">three</a></li> 
    181                 <li><a href="#">three</a></li> 
    182                 <li><a href="#">nav-sec one</a></li> 
    183                 <li><a href="#">two</a></li> 
    184                 <li><a href="#">three</a></li> 
    185                 <li><a href="#">three</a></li> 
    186                 <li><a href="#">three</a></li> 
    187                 </ul> 
    188                 </div> 
    189                 </div>   
    190                          
    191             </div> 
    192          
    193                 <div id="nav-pri"  class="nav"> 
    194                 <div class="wrapper"> 
    195                 <h2 class="accessibility">Main navigation</h2> 
    196                 <ul> 
    197                 <li><a href="#">nav-pri one</a> 
    198                         <ul> 
    199                         <li><a href="#">nav-pri <br /> one</a></li> 
    200                         <li><a href="#">nav-pri one</a></li> 
    201                         <li><a href="#">two</a></li> 
    202                         <li><a href="#">three</a> 
    203                                 <ul> 
    204                                 <li><a href="#">aaaaaaaa aaaaaaaaaaa</a></li> 
    205                                 <li><a href="#">bbbbbbbb bbb</a></li> 
    206                                 <li><a href="#">ccc ccccc cccccccc</a> 
    207                                         <ul> 
    208                                         <li><a href="#">aaaaaaaa aaaaaaaaaaa</a></li> 
    209                                         <li><a href="#">bbbbbbbb bbb</a></li> 
    210                                         <li><a href="#">ccc ccccc cccccccc</a> 
    211                                         </li>            
    212                                         </ul> 
    213                                 </li>            
    214                                 </ul>            
    215                         </li> 
    216103                        <li><a href="#">nav-pri one</a></li> 
    217104                        <li><a href="#">nav-pri one</a></li> 
    218105                        <li><a href="#">two</a></li> 
    219                         </ul>            
    220                 </li> 
    221                 <li><a href="#">nav-pri one</a></li> 
    222                 <li><a href="#">two</a></li> 
    223                 <li><a href="#">three</a> 
     106                        <li><a href="#">three</a></li> 
     107                        <li><a href="#">nav-pri one</a></li> 
     108                        <li><a href="#">nav-pri one</a></li> 
     109                        <li><a href="#">two</a></li> 
     110                        </ul> 
     111                </div> 
     112        </div> 
     113 
     114        <div id="n_lang" class="b nav"> 
     115                <div class="w"> 
     116                        <h2 class="access">Choose language:</h2> 
    224117                        <ul> 
    225                         <li><a href="#">aaaaaaaa aaaaaaaaaaa</a></li> 
    226                         <li><a href="#">bbbbbbbb bbb</a></li> 
    227                         <li><a href="#">ccc ccccc cccccccc</a> 
    228                                 <ul> 
    229                                 <li><a href="#">aaaaaaaa aaaaaaaaaaa</a></li> 
    230                                 <li><a href="#">bbbbbbbb bbb</a></li> 
    231                                 <li><a href="#">ccc ccccc cccccccc</a> 
    232                                 </li>            
    233                                 </ul> 
    234                         </li>            
    235                         </ul>            
    236                 </li> 
    237                 <li><a href="#">nav-pri one</a></li> 
    238                 <li><a href="#">nav-pri one</a></li> 
    239                 <li><a href="#">two</a></li> 
    240                 </ul>            
     118                        <li><a href="#">FR</a></li> 
     119                        <li><a href="#">EN</a></li> 
     120                        <li><a href="#">NL</a></li> 
     121                        </ul> 
    241122                </div> 
    242                 </div>                   
    243  
    244                 <div id="nav-lang" class="nav"> 
    245                 <div class="wrapper"> 
    246                 <h2 class="accessibility">Choose language:</h2> 
    247                 <ul> 
    248                 <li><a href="#">FR</a></li> 
    249                 <li><a href="#">EN</a></li> 
    250                 <li><a href="#">NL</a></li> 
    251                 </ul> 
    252                 </div> 
    253                 </div>   
     123        </div>   
    254124                         
    255125        </div> 
     126        <!-- end div#bd --> 
    256127 
    257         <div id="footer"> 
    258         <div class="wrapper"> 
     128        <div id="ft"> 
     129        <div class="w"> 
    259130                <p>[Footer]</p> 
    260131        </div> 

  • sites/example/www.example.local/screen.css

    r133 r202  
    11/* 
    22* WYMstyle - The free CSS framework 
    3 * Copyright (C) 2006 Daniel Reszka 
     3* Copyright (C) 2006 H.O.net e-solutions 
    44* 
    55* Licensed under the terms of the GNU Lesser General Public License: 
    …… 
    1111* 
    1212* NOTES:                recommended tab width = 8 spaces 
    13 * FILE TYPE:            WYMstyle example screen css file 
     13* FILE TYPE:           WYMstyle example screen css file 
    1414* FILE NAME: 
    1515* FILE DESCRIPTION:     Example for project-specific screen styles 
    16 * FILE AUTHORS:         Daniel Reszka (daniel@pixarea.com - http://www.pixarea.com - http://blog.pixarea.com) 
     16* FILE AUTHORS:         Daniel Reszka (daniel@pixarea.com - http://daniel.pixarea.com - http://blog.pixarea.com) 
    1717*/ 
    1818 
    19 /*IE4 SUPPORT*/ 
    20         @import url(../../../trunk/core/ie4.css); 
    21         @import "../../../trunk/core/ie4-undo.css"; 
     19/*DEV*/ 
     20        body            { background: gray;  } 
     21        #hd,#bd,#ft     { background: white } 
     22        .g              { background: yellow } 
     23        .u              { background: #ffff66 } 
     24        .u.first        { background: #ff0066 } 
     25        .b ul           { background: white;} 
     26        #hd             { background: red; height: 100px; } 
     27        .b              { background: #ccff66 } 
    2228 
    23 /*MODULES*/ 
    24 /*      @import "../../../trunk/core/typo-reset.css";                   /**/ 
    25 /*      @import "../../../trunk/core/layout-fixed.css";                 /**/ 
    26 /*      @import "../../../trunk/core/cols-2-mx.css";                    /**/ 
    27 /*      @import "../../../trunk/core/cols-2-xm.css";                    /**/ 
    28 /*      @import "../../../trunk/core/cols-3-msn.css";                   /**/ 
    29 /*      @import "../../../trunk/core/cols-3-nms.css";                   /**/ 
    30 /*      @import "../../../trunk/core/cols-equal.css";                   /**/ 
    31 /*      @import "../../../trunk/core/navpri-horizontal.css";            /**/ 
    32 /*      @import "../../../trunk/core/navpri-horizontal-menudown.css";   /**/ 
    33 /*      @import "../../../trunk/core/navlang-topright.css";                     /**/ 
    34 /*      @import "../../../trunk/core/dev.css";                          /**/ 
     29/*grids*/ 
     30        .g              { width: 100%; float: right;} 
     31        .g .u           { width: 49.5%; float: right; *overflow-x: hidden;} 
     32        .first, 
     33        .g .first       { float: left;} 
     34        .g .g           { width: 49.5%; *overflow-x: hidden;} 
    3535 
    36 /*PRE-MADE SKIN*/ 
    37         @import "../../../trunk/skins/wymstyle03/all.css";                      /**/ 
     36/*cols-equal*/ 
     37        .u, .g          { padding-bottom: 1000px; margin-bottom: -1000px; } 
     38        #main, 
     39        .g              { overflow: hidden;} 
     40        #main           { float:left; width: 70%; } 
    3841 
    39 /*PRE-MADE FORM*/ 
    40         @import "../../../trunk/addons/forms/form02.css";                       /**/ 
     42/*navtop*/ 
     43        #bd             { position: relative; *height: 1%; } 
     44        #bd:after       { content: "."; display: block; height: 0; clear: both; visibility: hidden;} 
     45        .navtop         { position: absolute; top: 0; width: 100%; *clear: both; } 
     46        .navtop ul      { list-style: none; margin: 0; padding: 0;  } 
     47        .navtop ul      { position: absolute; bottom: 0; width: 100%; } 
     48 
     49        /*default nav styling*/ 
     50        .navh ul      { list-style: none; margin: 0; padding: 0;} 
     51        .navh ul      { float: left; width: 100%;} 
     52        .navh li      { float: left; margin-right: 5px; } 
    4153         
    42 /*BRANDING*//* 
    43         #header h1 a            { background: url()} 
    44  
    45 /*COLUMNS IN MAIN CONTENT*//* 
    46         #col1, #col2, #col3     { float: left;  padding: 0 2%; width: 33%; w\idth: 29%;  background: white; padding-bottom: 30000px; margin-bottom: -30000px; border: solid 0;} 
    47         #cols                   { float: left; width: 100%; overflow: hidden; margin-bottom: 20px; position: relative; left: 0.5%; font-size: 0.8em;} 
    48         #col1                   { margin-left:  66%; display: inline; border-width: 0 1px 0 0;} 
    49         #col2                   { margin-left: -66%; display: inline; border-width: 0 1px 0 0;} 
    50         #col3                   { margin-left: -99%; display: inline; border-width: 0 1px;} 
    51 */ 
    52  
    53  
    54 /*FORMS*/ 
    55         form                    { float: right;} 
    56  
    57 /*IE 5.5 DEBUG*/ 
    58         * html .nav li          { float: left;} 
     54/*LAB*/