[CSS] Automatisch schalen plaatjes en tables? - Softwareontwikkeling

dinsdag 17 april 2007 14:44

Acties:

martdj

Topicstarter

Ik heb een pagina die uit de volgende onderdelen bestaat:
verticaal:

Header
Main
Footer

Dit stuk is opgebouwd uit 3 DIVs

Horizontaal is het "Main" deel ook verdeel in 3 delen:

Left Navigation
Content
Quick Links

Dit "Main" deel heb ik, na allerlei problemen waar ik met DIVs tegenaan liep, opgebouwd uit een tabel met 3 cellen, waarvan de 1e en laatste een vaste breedte hebben. De hele pagina moet schalen met de breedte van het scherm van de gebruiker, waarbij alle onderdelen binnen een page container zitten met breedte 98% die horizontaal in het midden van het scherm staat.

Het probleem waar ik nu tegenaan loop is dat als ik een tabel of een plaatje heb die meer ruimte inneemt dan daarvoor in het Content deel beschikbaar is, deze het content deel naar buiten drukt (aangezien ik de beide navigatie kollommen niet schaalbaar heb gemaakt). Er verschijnt dan dus een horizontale scrollbalk. Dit zou nog niet zo erg zijn als de header en footer dan ook meegingen, maar dat doen ze niet. De mooiste oplossing wat mij betreft zou zijn als zo'n (content)plaatje automatisch zou schalen, dus automatisch een kleinere width zou krijgen als er niet genoeg ruimte is en idem als een tabel automatisch samengedrukt werd. Kan dit via CSS?
De tweede beste oplossing is als de header en footer ook netjes meegaan en dus buiten het zichtbare gebied vallen. Weet iemand hoe ik dat zou kunnen bereiken?

Even wat code om de boel wat te verduidelijken:

code:

<body>
  <!-- Main Page Container -->
  <div class="page-container">
    <!-- A. HEADER -->      
    <div class="header">
      <!-- A.1 HEADER TOP -->
      <div class="header-top">
        <!-- Sitelogo and sitename -->
        <p class="sitelogo" &nbsp;></p>
        <!-- Sitelogo and sitename -->
        <div class="sitename">
          <h1>Titel</h1>
        </div>
        <!-- Logo-->
        <p class="logo" &nbsp;></p>
        <!-- TABS -->
        <span class="tab">
            <table>
                <tr><td class="selected">Home</td>
                                      <td><a href="#">Messaging</a></td>
                                      <td><a href="#">Mobile</a></td></tr>
            </table>
        </span>
      </div>
      
       <!-- A.4 HEADER BREADCRUMBS -->

      <!-- Breadcrumbs -->
      <div class="header-breadcrumbs">
        <ul>
          <li><a href="#">Home</a></li>
         (etc)
        </ul>
      </div>
      <div class="header-breadcrumbs-right" &nbsp;></div>
    </div>
     <!-- B. MAIN -->
    <div class="main">
 
    <table class="contenttable"><tr><td class="main-navigation" width="200px">
      <!-- B.1 MAIN NAVIGATION -->
      <!-- <div class="main-navigation" style="display:inline">-->

        <!-- Navigation Level 3 -->
        <div class="round-border-topright"></div>
        <h1 class="first">Navigation Title</h1>

        <!-- Navigation with grid style -->
        <dl class="nav3-grid">
          <dt><a href="#">Navlink 11</a></dt>
          <dt><a href="#">Navlink 12</a></dt>
            <dd><a href="#">Navlink 121</a></dd>
            <dd><a href="#">Navlink 122</a></dd>
            <dd><a href="#">Navlink 123</a></dd>        
          <dt><a href="#">Navlink 13</a></dt>
          <dt><a href="#">Navlink 14</a></dt>
          <dt><a href="#">Navlink 15</a></dt>
        </dl>                        
      </div>
     </td>
     <td>
      <div class="main-content">
          (content met een te groot plaatje of een te grote tabel)
     </div>
     </td>
     <td width="200px" class="main-subcontent">
      <div>
        <h1 class="first">Quick Links</h1>
                (quick links stuk)
      </div>
     </td></tr></table>
    </div>
    <!-- C. FOOTER AREA -->      
    <div class="footer">
      <p>sitemap | Splash page | Feedback</p>
    </div>      
  </div>
</body>

en het relevante deel van het bijbehorende stylesheet

code:

.page-container {width:98%; margin:0px auto; margin-top:10px; margin-bottom:10px; border:solid 1px rgb(150,150,150); font-size:1.0em; text-align: left /*IE6*/;}
.main {clear:both; width:100%; background:transparent url(../img/bg_main_withnavleft.jpg) top left repeat-y;}
.main-content {margin-left:15px; margin-right:15px; padding-bottom:20px;}
.main-subcontent {background:url(../img/bg_main_withnavright.jpg) top left repeat-y;}
.footer {clear:both; width:100%; padding:7px 0 7px 0; background:rgb(225,225,225) url(../bg_head_bottom_nav28.gif) repeat-x; font-size:10px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}

/* HEADER */
.header {width:100%; font-family:Verdana,arial,sans-serif;}
.header-top {width:100%; height:74px; background:rgb(0,82,111); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.header-bottom {width:100%; height:40px; background:rgb(255,255,255) url(../img/bg_head_breadcrumbs.jpg) repeat-y;}
.header-breadcrumbs {display:inline; float:left; clear:left; width:95%; padding:1.0em 0 1.5em 0; background:rgb(255,255,255) url(../img/bg_head_breadcrumbs_left.jpg) repeat-y; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.header-breadcrumbs-right {display:inline; float:right; clear:right; width:5%; padding:0 0 37px 0 !important /*Firefox*/; padding:0 0 25px 0 /*IE6*/; background:rgb(255,255,255) url(../img/bg_head_breadcrumbs_right.jpg) top right repeat-y; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
/*TABS*/
.tab table {position:absolute; top:57px; z-index:2; border-spacing: 0px; border-collapse:collapse; background:url(../img/bg_head_bottom_nav28.gif) repeat; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/; top:57px !important /*Firefox*/; top: 46px /*IE6*/;}
.tab table tr td {height:28px; line-height:28px; border-right:solid 1px rgb(0,82,111); font-size:13px; font-weight:bold; color: rgb(100,100,100); cursor:pointer;}
.tab table tr td a{text-decoration:none; float:left; padding:0 16px 0 16px; color:rgb(150,150,150);}
/*Non-IE6*/
.tab table tr td:hover a {background-color:#5D5D5D; color:#FFFFFF; text-decoration:none;}
/*IE6*/
.tab table tr td a:hover {background-color:#5D5D5D; color:#FFFFFF; text-decoration:none;}

.selected {cursor:default; color:rgb(00,82,111); padding:0 16px 0 16px; background:url(../img/bg_head_breadcrumbs_left.jpg) repeat-y #FFFFFF;}

Reageer