Autor Zpráva
venca12
Profil
#1 · Zasláno: 2. 8. 2006, 09:59:37 · Upravil/a: venca12
Odpovědět Citovat
Zdravím všechny designery,

mám dvousloupcový layout, kde je levý sloupec s pevně danou šířkou a pravý sloupce s proměnlivou (přes zbytek stránky). V tom proměnlivém sloupci mám umístěnou tabulku. Pokud zmenším šířku okna prohlížeče (FireFox) a tabulka se kvůli svému obsahu nemůže už dál zúžit, objeví se mi dole horizontální posuvník, vše je v pořádku. Problém bohužel nastane v exploreru, kde se po zůžení také objeví posuvník, ale tabulka mi odskočí dolů, o výšku obsahu levého sloupce. Nezapadne pod něj, ale jenom se posune.

Zkoušel jsem různě vnořovat divy, obalovat tabulku, ale bez výsledku. (Obalit tabulku například musím, pokud jí nastavím šířku na 100%. Explorer to tam nějak divně počítá a tabulka je potom stejně široká jako div+margin).

Stránka je tady http://venca12.wz.cz/public/test.php

A kód vypadá nějak takhle:

styly: 

  <style>



    /* sloupce s pevne stanovenou sirkou */

    #levySloupec {

      float:left;

      width:200px;

      

      background-color:#00FF00;

    }

  

    /* sloupec s promenlivou sirkou */

    #pravySloupec {

      margin-left:200px;

      

      background-color:#FF0000;

    }



  </style>



html: 

    <!-- levy sloupec -->

    <div id="levySloupec">

      <p>jedna</p>

      <p>dva</p>

      <p>tri</p>

    </div>



    <!-- pravy sloupec -->

    <div id="pravySloupec">

      <table>

        <tr>

          <td>Ja jsem zla tabulka, ktera pri male sirce internet exploreru skace pod vysku obsahu v levem sloupci</td>

          <td>Ja jsem zla tabulka, ktera pri male sirce internet exploreru skace pod vysku obsahu v levem sloupci</td>

          <td>Ja jsem zla tabulka, ktera pri male sirce internet exploreru skace pod vysku obsahu v levem sloupci</td>

        </tr>

      </table>

    </div>


Díky všem, za každý nápad, Venca
Plaváček
Profil
#2 · Zasláno: 2. 8. 2006, 10:14:41 · Upravil/a: Plaváček
Odpovědět Citovat
Kdysi jsem se s podobným problémem taky potýkal, tuším, že zabere toto řešení:

<style>

/* sloupce s pevne stanovenou sirkou */
#levySloupec {
float:left;
width:200px;

background-color:#00FF00;
}

/* sloupec s promenlivou sirkou */
#pravySloupec {
margin-left:200px;

background-color:#FF0000;
}
/* blok pro tabulku */
.table {
width: 100%;
overflow: hidden;
}
/* tabulce nastavit sirku */
table {
width: 100%;
}
/* tabulce nastavit sirku */
</style>

HTML

<!-- levy sloupec -->
<div id="levySloupec">
<p>jedna</p>
<p>dva</p>
<p>tri</p>
</div>

<!-- pravy sloupec -->
<div id="pravySloupec">
<!-- blok pro tabulku -->
<div class="table">
<table>
<tr>
<td>Ja jsem zla tabulka, ktera pri male sirce internet exploreru skace pod vysku obsahu v levem sloupci</td>
<td>Ja jsem zla tabulka, ktera pri male sirce internet exploreru skace pod vysku obsahu v levem sloupci</td>
<td>Ja jsem zla tabulka, ktera pri male sirce internet exploreru skace pod vysku obsahu v levem sloupci</td>
</tr>
</table>
</div>
<!-- blok pro tabulku -->
</div>
<!-- pravy sloupec -->

Jinak řečeno, tabulku vrazíš do DIVU s nastavenou šírkou na 100% a overflow: hidden. Pak by se to mělo chovat způsobně. Viz http://klient.plavacek.net/tabulka.html

Občas pomůže i nastavení minimální šířky, ale to se pro IE musí řešit pomocí expressions. Mnou uvedené řešení je v tomto případě asi elegantnější a jednodušší.
venca12
Profil
#3 · Zasláno: 2. 8. 2006, 10:25:11
Odpovědět Citovat
Díky,

při pročítání diskuse, mě ještě napadlo to řešit, pomocí levého sloupce s position:absolute. Díky tomu bude levý vyjmut z obsahu stránky a explorer nenapadne ani při totálním zůžení s ním nějak počítat, takže neodskakuje obsah.

viz. http://venca12.wz.cz/public/test2.php

styl 

    /* sloupce s pevne stanovenou sirkou */

    #levySloupec {

      width:200px;

      

      position:absolute;

      top:0px;

      background-color:#00FF00;

    }


...jdu vyzkoušet Plaváčkovo řešení
venca12
Profil
#4 · Zasláno: 2. 8. 2006, 10:32:28
Odpovědět Citovat
Tak jsem to otestoval a je tam problém. Horizontální posuvník se nezobrazí, dokud není šířka prohlížeče menší, než levý sloupec. Zbytek stránky se prostě zanoří kamsi za okraj a nevyvolá posuvník. Ani na IE, ani na FF.
Plaváček
Profil
#5 · Zasláno: 2. 8. 2006, 10:38:49
Odpovědět Citovat
Pak zkus toto řešení:

<style>
/* minimalni sirka */
#main {
min-width: 770px;
_width: expression(document.body.clientWidth < 770?"770px": "auto" )
}
/* minimalni sirka */
/* sloupce s pevne stanovenou sirkou */
#levySloupec {
float:left;
width:200px;

background-color:#00FF00;
}

/* sloupec s promenlivou sirkou */
#pravySloupec {
margin-left:200px;

background-color:#FF0000;
}
/* blok pro tabulku */
.table {
width: 100%;
overflow: hidden;
}
/* tabulce nastavit sirku */
table {
width: 100%;
}
/* tabulce nastavit sirku */
</style>

HTML

<!-- hlavni blok -->
<div id="main">
<!-- levy sloupec -->
<div id="levySloupec">
<p>jedna</p>
<p>dva</p>
<p>tri</p>
</div>

<!-- pravy sloupec -->
<div id="pravySloupec">
<!-- blok pro tabulku -->
<div class="table">
<table>
<tr>
<td>Ja jsem zla tabulka, ktera pri male sirce internet exploreru skace pod vysku obsahu v levem sloupci</td>
<td>Ja jsem zla tabulka, ktera pri male sirce internet exploreru skace pod vysku obsahu v levem sloupci</td>
<td>Ja jsem zla tabulka, ktera pri male sirce internet exploreru skace pod vysku obsahu v levem sloupci</td>
</tr>
</table>
</div>
<!-- blok pro tabulku -->
</div>
<!-- pravy sloupec -->
</div>
<!-- hlavni blok -->

Viz refresh http://klient.plavacek.net/tabulka.html . Nemusíš použít podtržítkový hack, můžeš simulaci min-width uklidit do separátního stylu pomocí podmíněných komentářů.
venca12
Profil
#6 · Zasláno: 2. 8. 2006, 10:45:44
Odpovědět Citovat
Díky, tohle maká vyborně
Časová prodleva: 18 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0