Autor Zpráva
Josef Pavlovský
Profil *
Přeji pěkný den,
dostal jsem se do nepříjemné situace. Kdysi dávno jsem použil a pro své potřeby upravil třísloupcový layout Svatý Grál
http://interval.cz/clanky/trisloupcovy-layout-svaty-gral/

Odstranil jsem hlavičku a patičku. Dále jsem tento layout předělal na fixně široký a vystředil ho.
Vše fungovalo a funguje perfektně.. Jediný problém se naskytl nečekaně až nyní. Pokud použiji záložku (kotvu) a zavolám tuto stránku s adresou této záložky, takřka všechny dnešní prohlížeče oříznou vše, co je nad touto záložkou... Jedině Opera se chová bezproblémově. Také proto jsem na tento problém přišel až nyní, ladím v Opeře..

Nechť je následující kód zdroj pro stránku "index.html"... po zavolání "index.html#kotva" dojde k popsanému jevu.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    
    <style>
    
    #container
    {
      padding-left: 200px;
      padding-right: 190px;
      position: relative;
      width: 300px;  
      border: 1px solid red;
      margin: 40px auto 0 auto;
    }
    #container .column
    {
      position: relative;
      float: left;
    }
    #center
    {
      padding: 10px 20px;
      width: 300px;
      font-size: 35px;
    }
    #left
    {
      width: 180px;
      padding: 0 10px;
      right: 240px;
      margin-left: -300px;
    }
    #right
    {
      width: 130px;
      padding: 0 10px;
      margin-right: -300px;
    }
    
    #container
    {
      overflow: hidden;
    }
    #container .column
    {
      padding-bottom: 1001em;
      margin-bottom: -1000em;
    }

    </style>
     
  </head>
  <body>
        
        <div id="container">
        
          <div id="center" class="column">
           
            <!-- TOTO JE OBSAH KTERY BUDE URIZNUT -->
            <p>
            Lorem ipsum dolor sit amet consectetuer dapibus et lacus mauris condimentum. Faucibus elit cursus nulla nibh Nulla Nullam mattis tempor convallis sed. Libero rutrum nec sagittis
            <br><br>
            <!-- AZ SEM -->
            
            <a name="kotva">TADY JE KOTVA</a>
            <br><br>
            
            Lorem ipsum dolor sit amet consectetuer dapibus et lacus mauris condimentum. Faucibus elit cursus nulla nibh Nulla Nullam mattis tempor convallis sed. Libero rutrum nec sagittis
            Lorem ipsum dolor sit amet consectetuer dapibus et lacus mauris condimentum. Faucibus elit cursus nulla nibh Nulla Nullam mattis tempor convallis sed. Libero rutrum nec sagittis
            Lorem ipsum dolor sit amet consectetuer dapibus et lacus mauris condimentum. Faucibus elit cursus nulla nibh Nulla Nullam mattis tempor convallis sed. Libero rutrum nec sagittis
            </p>  
          </div>
          <div id="left" class="column">
            <p>Toto je levý panel</p>
          </div>
          <div id="right" class="column">
            <p>Toto je pravý panel</p>
          </div>
          
        </div>
     
  </body>
</html>



Dlouhé hodiny neúspěšného hledání řešení tohoto problému mě přivedli k poznání, že by s tímto mohl mít co do činění "overflow: hidden;".. pokud ho smažu, kotvy fungují, ale layout není v tu chvíli takový, jaký má být - sloupce se dole "nezaříznou". Snažil jsem se problém zjednodušit až do naprostého primitiva - do zdroje výše.

Když se mi nedařilo najít podstatu chyby v layoutu, zkoušel jsem i patřičně nastylovat samotné kotvy a hrát si u nich s pozicí, okrajema apod.. nepodařilo se.. spíše jsem experimentoval..

Jsem bezradný a budu neskonale vděčný za jakoukoli radu, či v mých divokých snech, snad za vyřešení problému.

Děkuji Vám,
s pozdravem Josef Pavlovský..
kelvin
Profil
Pokud ten kód použiju: http://obrazky.milichovsky.com/nechat/gral/index.html , vidím v Internet Exploreru 6 jen http://obrazky.milichovsky.com/nechat/gral/gral-ie6.png . Asi je to oproti originálu zjednodušené až moc ;).

Jinak potvrzuji, Opera ok, Firefox, Internet Explorer (krom 6, viz výše), Chrome, Safari to ořízne, zajímavé...

To jsou ty úžasné šablony s parametry typu padding-bottom: 1001em; margin-bottom: -1000em, někde se to projevit muselo... Vykašlal bych se na grál a nakódoval si něco normálního.
Josef Pavlovský
Profil *
Tento layout jsem pro IE 6 opravoval podmíněným komentářem.. Ale není to v tuto chvíli zásadní..
Vždycky jsem si říkal, že pokud nejsem CSS guru, což nejsem, je lepší používat právě osvědčená řešení od profíků, která jsou uznávaná a ozkoušel je čas.. bohužel, i guess :DD Nyní jsem ve fázi projektu, kdy si nemohu dovolit zásadnější změnu layoutu..
Každopádně, je nějaký nápad, jak "přepsat" tento layout na něco "normálního"? Je třeba tří sloupců, obsahový MUSÍ být v kódu jako první.. popřípadě nějaký další pohled? Díky moc..
kelvin
Profil
Existuje mnoho řešení tří sloupců. Jen se u postranních sloupců musí nastavit pozadí opakujícím se obrázkem, ale i řešení bez toho budou existovat... Ale třeba ještě někdo něco poradí v normální denní čas ;).
panther
Profil
Josef Pavlovský:
Každopádně, je nějaký nápad, jak "přepsat" tento layout na něco "normálního"?
Pokud používáš fixní šířky, jak píšeš, je pro tebe grál zbytečný.

Nyní jsem ve fázi projektu, kdy si nemohu dovolit zásadnější změnu layoutu..
co to je za fázi? Je jednodušší napsat kód, kterému budeš rozumět a bude časově výhodnější než kód, který nechápeš. To rozhodně není ta správná cesta. A možná sis to měl uvědomit na začátku projektu.

Je třeba tří sloupců, obsahový MUSÍ být v kódu jako první
nejjednodušší pro tebe bude začít znovu, než předělávat grál. Pokud nemáš dostatečné znalosti CSS, úplně nejjednodušší pro tebe bude následující struktura:
div
  div content ... /div
  div left ... /div
/div
div right ... /div

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0