Issue with container divs, and absolute/fixed positioning
hello everyone, have issue getting divs function properly. have container div , want table div float inside (and move page resize). right doesnt move page (see photo).
however, when change position relative of div, moves under container div , locks there.(second photo)
any great! thanks!
picture one:
picture two
<!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="doctitle" --> <title>davide marchetti architetto</title> <!-- templateendeditable --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> <link href="ttp://mottie.github.com/tablesorter/css/theme.blue.css" rel="stylesheet"> <script type="text/javascript" src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script> <script type="text/javascript" src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#mytable").tablesorter(); } ); </script> <style type="text/css"> body { font: 100%/1.4 verdana, arial, helvetica, sans-serif; background-color: #ffffff; margin: 0; padding: 0; color: #000; background-image: url(); background-repeat: no-repeat; } /* ~~ element/tag selectors ~~ */ ul, ol, dl { /* due variations between browsers, it's best practices 0 padding , margin on lists. consistency, can either specify amounts want here, or on list items (li, dt, dd) contain. remember here cascade .nav list unless write more specific selector. */ padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p { margin-top: 0; /* removing top margin gets around issue margins can escape containing div. remaining bottom margin hold away elements follow. */ padding-right: 15px; padding-left: 15px; /* adding padding sides of elements within divs, instead of divs themselves, gets rid of box model math. nested div side padding can used alternate method. */ } img { /* selector removes default blue border displayed in browsers around image when surrounded link */ border: none; } /* ~~ styling site's links must remain in order - including group of selectors create hover effect. ~~ */ a:link { color:#414958; text-decoration: underline; /* unless style links extremely unique, it's best provide underlines quick visual identification */ } a:visited { color: #4e5869; text-decoration: underline; } a:hover, a:active, a:focus { /* group of selectors give keyboard navigator same hover experience person using mouse. */ text-decoration: none; } /* ~~ container surrounds other divs giving them percentage-based width ~~ */ .container { width: 80%; max-width: 1260px;/* max-width may desirable keep layout getting wide on large monitor. keeps line length more readable. ie6 not respect declaration. */ min-width: 780px; margin: 0 auto; /* auto value on sides, coupled width, centers layout. not needed if set .container's width 100%. */ } /* ~~ layout information. ~~ 1) padding placed on top and/or bottom of div. elements within div have padding on sides. saves "box model math". keep in mind, if add side padding or border div itself, added width define create *total* width. may choose remove padding on element in div , place second div within no width , padding necessary design. */ .content { padding: 10px 0; font-size: x-small; } /* ~~ grouped selector gives lists in .content area space ~~ */ .content ul, .content ol { padding: 0 15px 15px 40px; /* padding mirrors right padding in headings , paragraph rule above. padding placed on bottom space between other elements on lists , on left create indention. these may adjusted wish. */ } /* ~~ miscellaneous float/clear classes ~~ */ .fltrt { /* class can used float element right in page. floated element must precede element should next on page. */ float: right; margin-left: 8px; } .fltlft { /* class can used float element left in page. floated element must precede element should next on page. */ float: left; margin-right: 8px; } .clearfloat { /* class can placed on <br /> or empty div final element following last floated div (within #container) if overflow:hidden on .container removed */ clear:both; height:0; font-size: 1px; line-height: 0px; } body,td,th { font-family: "courier new", courier, monospace; font-size: 12px; } #apdiv1 { position: relative; width: 618px; height: 268px; z-index: 1; left: 186px; top: 147px; overflow: hidden; } #apdiv2 { position: relative; width: 698px; height: 299px; z-index: 1; left: 266px; top: 117px; overflow: scroll; } table.tableizer-table { border: 1px solid #ccc; font-family: courier new, courier, monospace; font-size: 12px; } .tableizer-table td { padding: 4px; margin: 3px; border: 1px solid #ccc; } .tableizer-table th { background-color: #000000; color: #fff; font-weight: bold; } #apdiv4 { position: relative; width: 697px; height: 299px; z-index: 1; left: -141px; top: -636px; overflow: scroll; } #apdiv3 { position: relative; width: 700px; height: 300px; z-index: 2; } h1,h2,h3,h4,h5,h6 { font-family: "courier new", courier, monospace; } </style> <!-- templatebegineditable name="head" --> <!-- templateendeditable --> </head> <div class="container"> <div class="container"><img src="../images/davide.png" width="800" height="600" usemap="#map" border="0" /> <div id="apdiv2"> <map name="map" id="map"> <area shape="rect" coords="48,416,125,435" href="../news.html" /> <area shape="rect" coords="262,416,304,436" href="../studio.html" /> <area shape="rect" coords="490,416,545,435" href="../projects.html" /> <area shape="rect" coords="702,415,751,436" href="../contact.html" /> </map> <table id="mytable" class="tableizer-table"> <thead> <tr class="tableizer-firstrow"> <th>year </th> <th>project</th> <th>location</th> <th>category</th> <th>status</th> </tr> </thead> <tbody> <tr> <td>2013</td> <td>expo 2015 - italian pavilion</td> <td>milan - italy</td> <td>culture</td> <td>competition</td> </tr> <tr> <td>2012</td> <td>requalification of "almerici", "bufalini" , "fabbri" squares</td> <td>cesena - italy</td> <td>urban planning</td> <td>competition</td> </tr> <tr> <td> </td> <td>re-thinking shanghai: sustainable intervention along suzhou creek</td> <td>shanghai - china</td> <td>mixed use</td> <td>competition</td> </tr> <tr> <td> </td> <td>vcc flat</td> <td>rome - italy</td> <td>interior design</td> <td>commission / built</td> </tr> <tr> <td>2011</td> <td>london 2012 olympic games information pavilion</td> <td>london - uk</td> <td>culture</td> <td>competition</td> </tr> <tr> <td> </td> <td>enhancement project sacred area of sanctuary of hercules victor</td> <td>tivoli - italy</td> <td>culture</td> <td>competition</td> </tr> <tr> <td>2010</td> <td>vtl flat </td> <td>rome - italy</td> <td>interior design</td> <td>commission / built</td> </tr> <tr> <td> </td> <td>bnc flat</td> <td>rome - italy</td> <td>interior design</td> <td>commission / built</td> </tr> <tr> <td> </td> <td>expansion of "farnesina" high school</td> <td>rome - italy</td> <td>education</td> <td>competition / selected project</td> </tr> <tr> <td> </td> <td>neanderthal art center</td> <td>pilo�a - spain</td> <td>culture</td> <td>competition</td> </tr> <tr> <td> </td> <td>new pedestrian & cycling footpath in site of "san leopoldo ii" old bridge</td> <td>poggio caiano - italy</td> <td>infrastructure</td> <td>competition</td> </tr> <tr> <td> </td> <td>proposition 2065 - st. leonards site</td> <td>sidney - australia</td> <td>mixed use</td> <td>competition</td> </tr> <tr> <td> </td> <td>meis - national museum of italian judaism , shoah </td> <td>ferrara - italy</td> <td>culture</td> <td>competition / 3rd prize</td> </tr> <tr> <td> </td> <td>36 calls design competition</td> <td>leeds - uk</td> <td>offices</td> <td>competition</td> </tr> <tr> <td> </td> <td>europan 10: masterplan harbour area</td> <td>rudk�bing - denmark</td> <td>urban planning</td> <td>competition</td> </tr> <tr> <td>2009</td> <td>"scuola in piazza levante" - kindergarten , public areas</td> <td>bisceglie - italy</td> <td>education</td> <td>competition</td> </tr> <tr> <td> </td> <td>cibaf - city of kids </td> <td>frattamaggiore - italy</td> <td>education</td> <td>competition</td> </tr> <tr> <td> </td> <td>designing in teheran</td> <td>teheran - iran</td> <td>mixed use</td> <td>competition / selected project</td> </tr> <tr> <td>2008</td> <td>dawntown 2008: waterworks</td> <td>miami - usa</td> <td>mixed use</td> <td>competition</td> </tr> <tr> <td> </td> <td>venice biennale new australian pavillion</td> <td>venice - italy</td> <td>culture</td> <td>competition / 1st prize</td> </tr> <tr> <td> </td> <td>new pedestrian , cycling bridge</td> <td>civita di bagnoregio - italy</td> <td>infrastructure</td> <td>competition</td> </tr> <tr> <td> </td> <td>renovation of "san ciro" square</td> <td>portici - italy</td> <td>urban planning</td> <td>competition / 2nd phase selected / 3rd prize</td> </tr> <tr> <td> </td> <td>renovation of "umberto i�" square</td> <td>san ferdinando di puglia - italy</td> <td>urban planning</td> <td>competition</td> </tr> <tr> <td> </td> <td>historic renovation of "corsie sistine" hospital wards </td> <td>rome - italy</td> <td>culture</td> <td>tender competition (design/bid/build)</td> </tr> <tr> <td> </td> <td>cupboard</td> <td>rome - italy</td> <td>furniture design</td> <td>commission / built</td> </tr> <tr> <td> </td> <td>office table , lighting system</td> <td>rome - italy</td> <td>furniture design</td> <td>commission / built</td> </tr> <tr> <td> </td> <td>new city library</td> <td>legnano - italy</td> <td>library</td> <td>competition</td> </tr> <tr> <td> </td> <td>office table</td> <td>rome - italy</td> <td>furniture design</td> <td>concept design</td> </tr> <tr> <td> </td> <td>volleyball arena, hotel , commercial spaces</td> <td>rome - italy</td> <td>mixed use</td> <td>concept design</td> </tr> <tr> <td>2007</td> <td>new provincial archaeological museum in santa scolastica monastery</td> <td>bari - italy</td> <td>culture</td> <td>competition / 5th prize</td> </tr> <tr> <td> </td> <td>the city of water , health</td> <td>rome - italy</td> <td>mixed use</td> <td>competition</td> </tr> <tr> <td> </td> <td>parkway iconic bridge</td> <td>sheffield - uk</td> <td>infrastructure</td> <td>competition</td> </tr> <tr> <td> </td> <td>renovation of "loveno 84" sport center</td> <td>menaggio - italy</td> <td>sport</td> <td>competition</td> </tr> <tr> <td> </td> <td>"guardia di finanza" corp main headquarters</td> <td>catanzaro - italy</td> <td>mixed use</td> <td>competition</td> </tr> <tr> <td> </td> <td>"lega lombarda" real estate complex urban development</td> <td>rome - italy</td> <td>mixed use</td> <td>tender competition (design/bid/build) </td> </tr> <tr> <td> </td> <td>necklace</td> <td>rome - italy</td> <td>jewellery design</td> <td>prototype </td> </tr> <tr> <td> </td> <td>moon putter</td> <td>rome - italy</td> <td>product design</td> <td>prototype</td> </tr> <tr> <td> </td> <td>aleale coffee table</td> <td>rome - italy</td> <td>furniture design</td> <td>concept design</td> </tr> <tr> <td>2006</td> <td>"1st october" public square</td> <td>santa maria capua vetere - italy</td> <td>urban planning</td> <td>competition / 1st prize / built</td> </tr> <tr> <td> </td> <td>"attilio pecile" new square , sustainable mixed use building</td> <td>rome - italy</td> <td>mixed use</td> <td>competition / 1st prize</td> </tr> <tr> <td> </td> <td>renewal of "porta nuova" old tower</td> <td>venice - italy</td> <td>culture</td> <td>competition / 2nd prize</td> </tr> <tr> <td> </td> <td>"meno e pi� 4": civic center , pre-school building</td> <td>rome - italy</td> <td>mixed use</td> <td>competition / mention</td> </tr> <tr> <td> </td> <td>urban renewal of historic building , public squares</td> <td>conversano - italy</td> <td>urban planning</td> <td>competition / 2nd prize</td> </tr> <tr> <td> </td> <td>new seafront , beach accesses</td> <td>fregene - italy</td> <td>urban planning</td> <td>competition / mention</td> </tr> <tr> <td> </td> <td>requalification of main streets , squares of old city centre</td> <td>bari - italy</td> <td>urban planning</td> <td>competition</td> </tr> <tr> <td> </td> <td>gyeonggi-do jeongok prehistory museum</td> <td>jeongok-ri - south korea</td> <td>culture</td> <td>competition / honourable mention</td> </tr> <tr> <td> </td> <td>low-income housing development</td> <td>guadalajara/ceuta - spain</td> <td>residential</td> <td>competition</td> </tr> <tr> <td> </td> <td>shop extension</td> <td>rome - italy</td> <td>retail</td> <td>commission / concept design</td> </tr> <tr> <td> </td> <td>temporary concert hall</td> <td>rome - italy</td> <td>culture</td> <td>concept design</td> </tr> <tr> <td> </td> <td>office space interior design - new seat of lombardy regional government </td> <td>milan - italy</td> <td>office</td> <td>tender competition (design/bid/build)</td> </tr> <tr> <td>2005</td> <td>europan 8 - urban requalification</td> <td>istanbul - turkey</td> <td>urban planning</td> <td>competition</td> </tr> <tr> <td> </td> <td>natural park visitor center, kindergarten , primary school</td> <td>funes - italy</td> <td>education</td> <td>competition</td> </tr> <tr> <td> </td> <td>coastal area development</td> <td>latina - italy</td> <td>urban planning</td> <td>competition</td> </tr> <tr> <td> </td> <td>requalification of 3 squares</td> <td>benevento - italy</td> <td>urban planning</td> <td>competition</td> </tr> <tr> <td> </td> <td>office , data center new building in ministry of defense headquarters</td> <td>rome - italy</td> <td>office</td> <td>concept design</td> </tr> <tr> <td>2004</td> <td>jcd floating pearl store</td> <td>tokio - japan</td> <td>retail</td> <td>competition / 2nd phase selected </td> </tr> <tr> <td> </td> <td>requalifications of rome�s beachfront , coastal areas</td> <td>ostia - italy</td> <td>urban planning</td> <td>competition / 1st prize</td> </tr> <tr> <td> </td> <td>40 apartments building , sport center</td> <td>rome - italy</td> <td>mixed use</td> <td>competition / 2nd prize</td> </tr> <tr> <td> </td> <td>nmba new beaux-art museum</td> <td>lausanne - switzerland</td> <td>culture</td> <td>competition</td> </tr> <tr> <td> </td> <td>the dubai residence , hotel towers</td> <td>dubai - uae</td> <td>mixed use</td> <td>concept design</td> </tr> <tr> <td> </td> <td>shoes , accessories shop</td> <td>rome - italy</td> <td>retail</td> <td>commission / concept design</td> </tr> <tr> <td>2003</td> <td>pedestrian , cycling bridge </td> <td>rome - italy</td> <td>infrastructure</td> <td>competition</td> </tr> <tr> <td> </td> <td>temporary pavillion car show</td> <td>rome - italy</td> <td>retail</td> <td>commission / concept design</td> </tr> <tr> <td> </td> <td>belvedere tower</td> <td>castellammare di stabia - italy</td> <td>infrastructure</td> <td>concept design</td> </tr> </tbody> </table> </div> </div> <!-- end .container --></div> </body> </html>
no positioning required of this. positioning removes content normal document flow. default positioning (none specified or static) keep within container div.
nancy o.
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment