Autor Zpráva
BigBear
Profil
#1 · Zasláno: 28. 4. 2011, 11:42:32
Odpovědět Citovat
Ahojte, mám stránky ve dvousloupcovém layoutu s hlavičkou a dvěma patičkama (vysvětlím). Potřebuji, aby to fungovalo i v IE6, takže html struktura kódu je následující:
<body>
  <div id="header">hlavicka</div>
  
  <div id="main_wrapper">
    <div id="left_column">levy sloupec</div>
    
    <div id="content_wrapper">
      sloupec s obsahem a na konci tohoto sloupce je první patička (prostě div)
      <div id="footer">paticka</div>
    </div>
    
    <div class="clear_both"></div>
  </div>
  
  <div id="html_end">toto je druha "paticka"</div>
</body>
a k tomuto kódu mám následující styl (samozřejmě ořezaný, ale s těmi nejdůležitějšími prvky): 
.clear_both {
  clear: both;
  height: 0;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
}

#header {
  height: 148px;
}

#main_wrapper {
  /* to je tu jen kvuli tomu, ze potrebuji mit v pozadi obrazek */
}

#left_column {
  width: 188px;
  float: left;
}

#content_wrapper {
  margin-left: 188px;
}

#footer {
  /* obsahove klasicka paticka, ale nic duleziteho pro layout tu neni */
}

#html_end {
  /* tady je taky jen obrazek a neni tam nic duleziteho pro layout - 
     mozna by bylo dobre tu mit clear: both; a nemit pak za levym sloupcem a obsahem 
     <div class="clear_both"></div>, ale to by nemelo byt podstatne */
}
... doufám, že jsem na nic nezapomněl, ale layout funguje ve všech prohlížečích dobře. Problém nastává, chci-li v obsahu neco floatovat (v jiném případě je vše tak, jak má). Konkrétně fotogalerie - obrázky jsou floatované vlevo, aby nemuseli být v tabulce a vyplnili celou šířku obsahu. Pod obrázky je ale ještě patička. Musím tedy přidat div s vlastností clear: both; (stačilo by clear: left, ale to na tom nic nemění). Když ho ale přidám, tak se výška obsahu zarovna s levým sloupcem a teprve potom se vypíše patička, což je problém, který bych chtěl vyřešit. Lze nějak udělat to, aby se patička zobrazila hned pod obrázky (u té patičky to není tak důležité, jako když chci přidat za galerii text)? Stránka s příkladem (všimněte si, že patička je až za levým sloupcem a to nechci)
Plaváček
Profil
#2 · Zasláno: 28. 4. 2011, 12:34:26
Odpovědět Citovat
BigBear:

Asi neschůdnější možností, jak problém vyřešit, je nechat plavat (float) i obsahový blok. Do hloubky jsem ale tvůj kód nezkoumal.
BigBear
Profil
#3 · Zasláno: 28. 4. 2011, 13:55:36
Odpovědět Citovat
Nj, to by šlo, ale já jej nemohu nechat plavat, protože nevím předem jeho šířku (na každém monitoru, v každém prohlížeči je jiná) a potřebuji ho na celou šířku, aby zase fungovalo to ostatní... jedno řešení jsem našel - i když se mi nelíbí - dal jsem galerii do buňky tabulky <table><tr><td>cela galerie</td></tr></table> a odstranil jsem <div class="clear_both"></div> za tabulkou. To funguje, ale není to úplně nejlepší řešení (je dostačující, ale přál bych si, aby nebylo jediné) ;-).
Časová prodleva: 13 let

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