Autor Zpráva
xsigik
Profil
#1 · Zasláno: 29. 9. 2006, 10:09:32
Odpovědět Citovat
Mám v galerii zmenšeniny fotek pod sebou, chtěl bych vedle obrázku vpravo vypisovat info z db... no to je fuk, prostě nějakej text. Vypadá to asi takhle:

<div class="galerie_item">
<div class="img"><a href="#"><img src=# /></a></div>
<div class="text">Zde je nějaký text</div>
</div>

<style>
.galerie_item {display: block;}
.img {display: block; float: left}
.text {display: block; float: left}
</style>

Když je to takhle, tak se to zobrazí tak napůl pod sebe, napůl vedle sebe, pač se to nestihne obtéct. Zkusil sem dát do .galerie_item clear: both; což se potom vypíše správně pod sebe, ale na prvek nefunguje padding ani margin. Nevíte co s tim? :-)
Knopi
Profil
#2 · Zasláno: 29. 9. 2006, 12:54:55 · Upravil/a: Knopi
Odpovědět Citovat
Je to ono? Z dotazu mi moc není jasné co je Vaším cílem. Je potřeba si uvědomit, že rodičovský prvek by měl mít uvedenou šířku, protože tam jsou plovoucí bloky a tím že i jim zadáte také šířku, tak tím rozhodně nic nezkazíte. Určitě je potřeba tam dát ten čistič. V ukázce neuvádím odsazení, tam bude potřeba matrjoška http://ie-brouci.dero.name/box-model.html , nebo použití hacku... Přišlo mi zbytečné, tam dávat tolik divů, tak jsem si dovolil ukázat trošku sémantičtější řešení. Také mi není jasné proč děláte z bloku - blok, div je blokový element, takže je to naprosto zbytečné, je to výchozí hodnota.

<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
}

body {
background: silver;
}

.clear {
clear: both; /* ukonci obtekani prvku a pozadi se vykresly */
height: 1px;
font-size: 1px;
line-height: .3;
}

.galerie {
background: gray;
width: 300px;
}

img {
float: left;
}

p {
float: right;
background: red;
width: 198px;
}
</style>

html:
<div class="galerie">
<a href="#" title="Pěkný obrázek"><img src="obrazek.jpg" width="102" height="120" /></a>

<p>Tdam ta dádádídádá Tdam ta dádádídádá Tdam ta dádádídádá.
Tdam ta dádádídádá Tdam ta dádádídádá Tdam ta dádádídádá.
Tdam ta dádádídádá Tdam ta dádádídádá Tdam ta dádádídádá.</p>

<div class="clear">&nbsp;</div> <!-- ukonci obtekani prvku a pozadi se vykresly -->
</div>
Časová prodleva: 18 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0