| Autor | Zpráva | ||
|---|---|---|---|
| tom-a-spol-sro Profil * |
#1 · Zasláno: 14. 4. 2009, 09:37:20
Zdravím
Měl bych jeden dotaz ohledně divů o výšce 0px. Mám třísloupcovou stránku, přičemž celou bez problému vykreslím. Úplně poslední prvek stránky je (pod patičkou) <div>, který je 0px vysoký o obsahuje pár dalších divů, které pak relativně posunu nahoru do stránky. Tím docílím toho, že můžu mít např. v lvém sloupci těsně nad patičkou obrázek na pozadí, který se podle obsahu stránky vždy posune společně s patičkou. Firefox? Bez problémů. V IE to funguje taky, ale spodní div má místo 0px výšku adekvátní k nejvyššímu <divu>, který je v něm schovaný. Dalo by se to nějak řešit, ať už pomocí CSS, nebo HTML? Javě bych se chtěl vyhnout. Vzorový příklad: <html>
<head>
<style>
.levysloupec {
background-color: red;
width: 200px;
}
.pravysloupec {
background-color: red;
width: 200px;
}
.telo {
background-color: orange;
}
.paticka {
background-color: green;
text-align: center;
}
.fix {
height: 0px;
font-size: 0px;
line-height: 1px;
background-color: silver;
}
.bg {
width: 100px;
height: 100px;
background-color: black;
position: relative;
top: -130px;
left: 20px;
}
</style>
</head>
<body>
<table><tbody><tr><td class="levysloupec">toto je levy sloupec</td>
<td class="telo">
Dobry den!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere bibendum ipsum. Etiam diam quam, elementum nec, vulputate ut, laoreet at, urna. Morbi felis mauris, posuere et, ultricies eu, cursus sagittis, tortor. Phasellus et sem in turpis tempor fermentum. Etiam semper tellus a ante. Duis porttitor nulla sit amet eros. Nulla facilisi. Integer mattis vehicula sapien. Donec lobortis tristique tellus. Suspendisse lacus. Vestibulum ac metus non velit fermentum ultrices. Curabitur mattis dictum arcu. Morbi odio magna, placerat et, luctus id, elementum eu, lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin lacus dignissim diam. Proin semper nunc eu augue. Donec ornare cursus felis. Donec consectetur augue ut nunc. Vivamus nibh neque, rutrum a, gravida ac, fringilla in, ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam placerat est sit amet eros. Mauris aliquam pretium metus. Ut eget orci. Aliquam imperdiet tellus aliquet nulla. Phasellus magna justo, ultricies id, placerat vitae, aliquet et, lorem. Duis facilisis lorem in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quam. Mauris lorem eros, scelerisque at, tristique sit amet, convallis non, quam. Ut justo odio, gravida et, mollis sit amet, eleifend eu, tellus. Curabitur pharetra. Mauris justo elit, imperdiet vitae, dignissim nec, cursus rutrum, nisi. In vestibulum nisi non orci. Curabitur lectus. Praesent at felis. Integer eleifend ultricies eros. Morbi quam arcu, aliquam eu, ullamcorper lobortis, hendrerit vitae, odio. Aliquam tincidunt dui. Aenean consectetur. Maecenas ut sapien non nulla interdum interdum. Donec ornare bibendum neque. Maecenas suscipit. Nullam mi quam, viverra at, lobortis id, congue id, mauris.
</td><td class="pravysloupec">toto je pravy sloupec</td></tr>
<tr><td class="paticka" colspan="3">toto je paticka</td></tr>
</tbody></table>
<div class="fix"><div class="bg"></div></div>
</body>
</html>Pokud si stáhnete okno prohlížeče ve FF, vše je ok. Pokud v IE, tak jakmile dojdete ke 100 pixelům pod patičkou, objeví se scrollbar. :/ Díky moc za názory a odpovědi. |
||
| xpun Profil |
#2 · Zasláno: 16. 4. 2009, 08:55:16 · Upravil/a: xpun
Nevím, jak to má být v prohlížečích podle standardu správně, ale problém je v tom, že vnitřní div roztáhne ten vnější a pak se teprve odsune.
Dalo by se to pozicovat absolutně, ale to ty asi nechceš. Akorát nevím, proč to zavíráš do toho divu fix. |
||
| Bubák Profil |
#3 · Zasláno: 16. 4. 2009, 15:44:17
„V IE to funguje taky, ale spodní div má místo 0px výšku adekvátní k nejvyššímu <divu>, který je v něm schovaný.“
Tak to je v IE6 a starších. IE7 a v IE8 se v tomto případe ve standardním režimu chovají podle specifikace. http://css.interval.cz/clanky/pracovni-rezimy-prohlizecu/ Jak to vyřešit v IE6, nevím. |
||
| Plaváček Profil |
#4 · Zasláno: 16. 4. 2009, 16:49:12
xpun
Bubák možná tvou otázku pochopil, já moc ne. K čemu je dobrá taková tabulková kulišárna? Řekl bych, že se dá najít spousta jiných bezproblémových řešení. |
||
| tom-a-spol-sro Profil * |
#5 · Zasláno: 17. 4. 2009, 15:26:48
Správně, bubák to pochopil...
Ještě jednou: Celý web je roztahovací na výšku, přičemž výška je vždy adekvátní nejvyššímu sloupci. Myslím že tabulky jsou v tomhle ohledu menší zlo, než divy s marginem 20000+. Dole pod stránkou je div "fix". Ten slouží k tomu, že do něj strčím přávě všechny prvky, které chci, aby se posunovaly společně s patičkou dokumentu (v příkladu "bg"). Fix má nulovou výšku a firefox to vůbec netrápí. Bubák tvrdí, že IE7 to chápe správně, to je možné. Na tom jsem to nezkoušel. Jenom ta přiblblá šestka ten nulový div prostě roztáhne. Zřejmě to udělám s podmínkou na IE 6, kde se to nevykreslí, nebo přinejhorším absolutně a v ostaních to nechám takhle. Každopádně alespoň děkuju za snahu pomoct/pochopit to :D Kdyby náhodou někoho něco dodatečně napadlo, názory uvítám. Ale upřímně o tom pochybuju :/ |
||
| tiso Profil |
#6 · Zasláno: 17. 4. 2009, 15:37:59
tom-a-spol-sro
.fix {
height: 0px;
font-size: 0px;
line-height: 1px;
background-color: silver;
position: relative;
}
.bg {
width: 100px;
height: 100px;
background-color: black;
position: absolute;
top: -130px;
left: 20px;
} |
||
| tom-a-spol-sro Profil * |
#7 · Zasláno: 17. 4. 2009, 16:01:24
tiso
perfektní, to je přesně to co jsem hledal :) nečekal jsem že to bude až tak drobná úprava. Díky mockrát, moc mi to pomohlo. |
||
|
Časová prodleva: 15 let
|
|||
0