| Autor | Zpráva | ||
|---|---|---|---|
| WeeHool Profil * |
#1 · Zasláno: 11. 5. 2012, 00:25:12
tak sem oravdu zvědavej, kdo mi dokáze proadit..
mám kód cca: <div id="table06">
<div class="bunka02">
<div class="obal01">
<div class="bunka03"><div class="image"><img src="http://www.hlinikoveschudky.cz/image/data/produkty/8643_001_300x450.jpg" alt="Hliníkové štafle, Hailo L 90 Stepke, 2 x 3 stupně" height="150"></div></div>
</div>
<div class="obal01">
<div class="bunka03"><div class="image"><img src="http://www.hlinikoveschudky.cz/image/data/produkty/4321_001_300x450.jpg" alt="Hliníkové štafle, Hailo L 90 Stepke, 2 x 2 stupně" height="150"></div></div>
</div>
<div class="obal01">
<div class="bunka03"><div class="image"><img src="http://www.hlinikoveschudky.cz/image/data/produkty/4423_001_300x450.jpg" alt="Hliníkové štafle, Hailo ChampionsLine L90 225, 2 x 3 stupně" height="150"></div></div>
</div>
<div class="obal01">
<div class="bunka03"><div class="image"><img src="http://www.hlinikoveschudky.cz/image/data/produkty/4422_001_300x450.jpg" alt="Hliníkové štafle, Hailo ChampionsLine L90 225, 2 x 2 stupně" width="150"></div></div>
</div>
<div class="obal01">
<div class="bunka03"><div class="image"><img src="http://www.hlinikoveschudky.cz/image/data/produkty/4392_801_300x450.jpg" alt="Hliníkové schůdky, Hailo K30, 2 stupně" height="150"></div></div>
</div>
</div<
</div>#table06 {
position: relative;
width: 875px;
float: left;
.bunka02 {
width: auto;
height: 250px;
}
.bunka03 {
width: 150px;
height: 150px;
border: 1px solid #cccccc;
text-align: center;
display: table;
margin-left: 12.5px;
}
.obal01 {
width: 175px;
height: 250px;
float: left;
}
.image {
display: table-cell;
vertical-align: middle;
background: #c8ffff;
}
}vo co de: ve čtverečku 150x150 se mi z databáze načítaj obrázky a někdy maj třeba 140x150, někdy třeba 150x140, ale prostě ne více, než 150x150 no a problém je.. že se mi objevuje 5px mezera pod obrázkem v barvě backgroundu .image jak se do prkýnka tý mezery zbavím?? já už sem z toho celej jalovej.. moc díky za odpověď.. |
||
| Davex Profil |
#2 · Zasláno: 11. 5. 2012, 00:31:00
Stačí zadat nadpis tohoto tématu do vyhledávače a vyskočí na tebe Mezera pod obrázkem nebo Mezera pod obrázkem.
|
||
| WeeHool Profil * |
#3 · Zasláno: 11. 5. 2012, 00:51:39 · Upravil/a: WeeHool
no samozřejmě, že sem to už hledal.. jinak bych to nepsal.. display: block mi zničí vertical-align
rámeček má správnou velikost, jak je ten čtvrtý.. samozřejmě díky tomu, že se tam objeví 5px mezera zvětší se rámeček u ostatních, kde je obrázek o výšce 150px na 155px a přihodil sem teda ještě: .image img {
display: block;
}tak vertical-align drží, ale zase to je všechno vlevo.. |
||
| WeeHool Profil * |
#4 · Zasláno: 11. 5. 2012, 08:07:36
vyřešeno:
.image {
display: table-cell;
vertical-align: middle;
line-height: 0px;
} |
||
| Trejpa Profil |
#5 · Zasláno: 11. 5. 2012, 08:35:00
WeeHool:
V odkázaných příkladech jsem display: block nedoporučoval, jen ho uvedl jako náhradní řešení s drobnými problémy. Starší Internet Explorer hodnotu display: table-cell neumí. Vertikální zarovnání jednoho řádku v elementu známé výšky je velmi prosté: .image img { vertical-align: middle; }
.image { line-height: 150px; } |
||
|
Časová prodleva: 12 let
|
|||
0