| Autor | Zpráva | ||
|---|---|---|---|
| Gappa Profil |
#1 · Zasláno: 27. 9. 2008, 11:59:09 · Upravil/a: Gappa
Ahoj,
mám menší problém s tím, že nevím, jak vyřešit jednu relativní prkotinku, ale o to víc mě to vadí :) Možná o problému přemýšlím zcela špatně a proto dostávám špatné výsledky. Ale k věci: Mám výpis článků, do leva floatovaný obrázek, který tam být může, ale nemusí. Vše ostatní tedy bude napravo od floatovaného obrázku. Až sem to problém vůbec není. Problém nastává, když vedle floatovaného obrázků chci mít nějaký blokový prvek, který má pozadí/border. Jelikož obrázek má nějaký ten border/padding/margin, tak pozadí toho blokového prvku pokračuje až k levému okraji vyhrazeného prostoru a je vidět pod obrázkem - což nechci. Což je předpokládám korektní chování. IE6/7 to naopak nedělá (což je ale zase myslím v rozporu se správným chováním). No, radši přiložím ještě obrázek: 
Nahoře je aktuální chování, ale tak to nechci; dole je kýžené chování. Přikládám ještě kus zjednodušeného kódu, pozadí je na ul ul, které má svá <li> nastavené na display: inline. <ul>
<li>
<img src="..." alt="..." title="..." />
<ul>
<li>Datum článku</li>
<li><a href="#" title="...">Kategorie článku</a></li>
<li>Autor článku</li>
</ul>
<h3><a href="#" title="...">Nadpis článku</a></h3>
<p>Úryvek z článku</p>
<p><a href="#">Celý článek</a></p>
</li>
</ul> |
||
| yFang Profil |
#2 · Zasláno: 27. 9. 2008, 12:10:13
Gappa
Nemáš živou ukázku? |
||
| Gappa Profil |
#3 · Zasláno: 27. 9. 2008, 12:18:25
yFang
Živou ukázku přímo na webu bohužel nemohu prozatím publikovat, mohl bych ale problém znovu vytvořit na samostatném webu. Pokusím se. |
||
| Miloš Profil |
#4 · Zasláno: 27. 9. 2008, 12:21:42
Dalo by se to řešit následovně:
<div class="obal">
<img>
<p>text</p>
</div>
.obal {position: relative;}
.obal img {position: absolute;}
.obal p {margin-left: šířka_obrázku+pár_px_pro_margin;} |
||
| Gappa Profil |
#5 · Zasláno: 27. 9. 2008, 12:33:10
Miloš
Mělo by to fungovat s i bez obrázku, margin proto použít nelze: "Živější" ukázka http://upload.djgappa.com/test.html |
||
| Miloš Profil |
#6 · Zasláno: 27. 9. 2008, 12:40:02
Gappa
Tam, kde není obrázek, by buď odpadl ten div, nebo by tam byl div obalující víc odstavců, ale ne class="obal" – zkrátka výsledek by byl ten, že by měly přepsané marginy jen ty odstavce, které jsou napravo od obrázku. |
||
| habendorf Profil |
#7 · Zasláno: 27. 9. 2008, 12:40:41
Možná špatně chápu zadání, ale není to toto:
http://diskuse.jakpsatweb.cz/index.php?action=vthread&forum=7&topic=18 369&page=0 ? |
||
| Gappa Profil |
#8 · Zasláno: 27. 9. 2008, 12:43:42 · Upravil/a: Gappa
Miloš
Musel jsem si to přečít asi 3x, ale začínám tomu rozumět :-) Napodmínkovat to vlastně můžu, tím pádem asi vyřešeno. Ozkouším a dám vědět. Prozatím děkuji za pomoc. habendorf To zatím nevím, prokoušu se tím a dám vědět. Díky za tip. |
||
| Gappa Profil |
#9 · Zasláno: 27. 9. 2008, 13:07:43
„Možná špatně chápu zadání, ale není to toto:“
„http://diskuse.jakpsatweb.cz/index.php?action=vthread&forum=7&topic= 18 369&page=0 ?“ Koukal jsem na to a není to tak uplně ono, v mém případě je problém s pozadím, které se dostane pod floatovaný obrázek. Je to něco na způsob toho, co ve zmiňovaném threadu zmiňovala už. Petra, podíval bych se na tebou poskytnuté řešení, ale habendorf.plavacek.net už neexistuje. Miloš Díky, vyřešil jsem to napodmínkováním při vypisování a přidávám tam extra třídu podle toho, je-li přítomen obrázek, nebo není. Extra elegantní řešení to není, ale funguje a to je důležité :) |
||
|
Časová prodleva: 16 let
|
|||
0