| Autor | Zpráva | ||
|---|---|---|---|
| Los Profil * |
Zdravím,
koukal jsem že toto téma se tu probíralo několikrát, ale bohužel ať sem se snažil sebe víc nejde mi to nastavit. Potřeboval bych v galerii nastavit přes nově vložený obrázek něco jeko "Nové" mohlo by to být v textové verzi nebo jako průhldný obrázek s textem přes jiný obrázek. Jedná se o galerii takže nelze použít obrázek na pozadí ani pozicování absolute protože by se všechny popisky Nové objevovali na stejném místě přes sebe no a při použití relative se mi to uplně rozháže. Někde bude chyba ale nevim kde. Přikládám zjednodušený zdojový kód (finální podoba by měla vypadat tak že budou např. na každém řádku 3 obrázky) Díky za pomoc <style>
body{background-color:#000;font-size:10px; font-family: Verdana, Arial, sans-serif;color: #fff}
.obsah {position: absolute;margin: 0px 0px 0px 15px; width: 728px; top: 262px; left: 200px; border:2px solid #red;}
.foto {padding: 0px 0px 20px 35px;margin: 5px 0px 5px 0px;text-align: left; border:0px solid #fff;}
.popsany img {position: relative;margin: 0px 18px 0px 18px;border:2px solid #969594;width: 120px; height: 80px;}
.NEpopsany img {position: relative;margin: 0px 18px 0px 18px;border:2px solid #fff;width: 120px; height: 80px;}
p {padding: 0px 0px 0px 0px;margin: 0;position: relative;top: -18px;left: 112px;width: 25px; height: 12px;border:2px solid #969594;}
</style>
<body>
<div class="obsah">
<div class="foto">
<span class="popsany">
<img src="1.jpg">
<p>Nový</p>
</span>
<span class="popsany">
<img src="1.jpg">
<p>Nový</p>
</span>
<span class="popsany">
<img src="1.jpg">
<p>Nový</p>
</span>
</div>
<div class="foto">
<span class="popsany">
<img src="1.jpg">
<p>Nový</p>
</span>
<span class="NEpopsany">
<img src="1.jpg">
</span>
<span class="NEpopsany">
<img src="1.jpg">
</span>
</div>
</div>
</body>Moderátor Joker: Vkládej prosím kódy mezi značky [pre] a [/pre] (stačí kliknout na
 ). |
||
| panther Profil |
#2 · Zasláno: 18. 7. 2010, 09:39:42
Los:
osobně bych použil na popisek absolutní pozici. Tzn. spanu nastavit rozměry a relativní pozici. |
||
| Los Profil * |
#3 · Zasláno: 18. 7. 2010, 09:49:32
panther:
No právě to jsem taky zkoušel ale když tomu dám absolutní pozici tak bych musel ke každému obrázku napozicovat popisek zvlášť a to je hodně nepraktický, když se to bude často měnit. teda jestli nedělám něco špatně. |
||
| Bubák Profil |
#4 · Zasláno: 18. 7. 2010, 10:20:41 · Upravil/a: Bubák
Los:
„Přikládám zjednodušený zdojový kód“ Je k ničemu. Proč máš obrázky s popisem pod sebou, to tak má být? Proč jsou obrázky s popisem v DIVu se třídou "foto", to má nějaký význam? „"Nové" mohlo by to být v textové verzi nebo jako průhldný obrázek s textem“ Obojí je možné, jednodušší to bude obrázkem, má pevný rozměr, třebas nějak takto: <!DOCTYPE HTML>
<style>
body {background-color:#000;font-size:10px; font-family: Verdana, Arial, sans-serif;color: #fff;}
.obsah {margin: auto; width: 728px; border: 2px solid red;}
.foto {font-size: 0; word-spacing: 0;}
img {width: 120px; height: 80px; margin: 10px 20px; border: 2px solid silver; font-size: 12px;}
img.popis {width: 36px; height: 24px; margin: -15px 0 13px -59px; border: 0px none red;}
</style>
<body>
<div class="obsah">
<div class="foto">
<img src="1.jpg" alt="test">
<img class="popis" src="http://img4.net/public/36323/nove.png">
<img src="1.jpg" alt="test">
</div>
</div>Dodatek: Los: „teda jestli nedělám něco špatně“ Nepochybně, to, co popisuje panther, je tzv. zanořená pozice, jak to přesně funguje, najdeš na www.jakpsatweb.cz/css/position.html |
||
| Los Profil * |
#5 · Zasláno: 18. 7. 2010, 10:48:54
Bubák:
Obrázky mají být po třech v řadě jak píšu. Ty divy jak tam mám tam májí význam. Kód je ořezán o další, v tomhle případě nedůležité, prvky. takhle jak to píšeš jsem to prvně zkoušel taky ale nedovedl jsem to sledit ve FF a IE každý tam dělá jiný mezery. a u toho pozicování jsem zjistil že jsem pozici relative dával k obrázku :-(, tak sem to opravil, ale opět problém je ve sladění FF a IE |
||
| Los Profil * |
#6 · Zasláno: 18. 7. 2010, 11:16:04
Ještě doplním:
v případě té obrázkové varianty se po vložení obrázku <img class="popis" src="http://img4.net/public/36323/nove.png"> se ve firefoxu zmenší mezera mezi těma dvěma obrázky v řadě a to docelo o dost a nejde mi to vyladit. a v případě pozicování se v IE v základu objevuje popisek v levo nahoře u obrázku a ve FF vlevo dole a pak to samozřejmě nejde vyladit souřadnicema |
||
| Bubák Profil |
#7 · Zasláno: 18. 7. 2010, 11:17:42
Los:
„tak sem to opravil, ale“ Ale tajíš jak a nevím, proč tomu říkáš oprava, když to máš rozbité. Tohle vypadá skoro stejně napříč prohlížeči, upravil jsem jen hodnotu jednoho marginu, porovnej sedmý řádek: <!DOCTYPE HTML>
<style>
body {background-color:#000;font-size:10px; font-family: Verdana, Arial, sans-serif;color: #fff;}
.obsah {margin: auto; width: 728px; border: 2px solid red;}
.foto {font-size: 0; word-spacing: 0;}
img {width: 120px; height: 80px; margin: 10px 20px; border: 2px solid silver; font-size: 12px;}
img.popis {width: 36px; height: 24px; margin: -15px 22px 13px -59px; border: 0px none red;}
</style>
<body>
<div class="obsah">
<div class="foto">
<img src="http://teststranek.kvalitne.cz/images/obrazek-1.jpg" alt="test">
<img class="popis" src="http://img4.net/public/36323/nove.png">
<img src="http://teststranek.kvalitne.cz/images/obrazek-1.jpg" alt="test">
<img class="popis" src="http://img4.net/public/36323/nove.png">
<img src="http://teststranek.kvalitne.cz/images/obrazek-1.jpg" alt="test">
<img class="popis" src="http://img4.net/public/36323/nove.png">
<img src="http://teststranek.kvalitne.cz/images/obrazek-1.jpg" alt="test">
<img class="popis" src="http://img4.net/public/36323/nove.png">
<img src="http://teststranek.kvalitne.cz/images/obrazek-1.jpg" alt="test">
<img src="http://teststranek.kvalitne.cz/images/obrazek-1.jpg" alt="test">
<img src="http://teststranek.kvalitne.cz/images/obrazek-1.jpg" alt="test">
<img src="http://teststranek.kvalitne.cz/images/obrazek-1.jpg" alt="test">
</div>
</div>Pokud ti to nebude fungovat, tak se něco "bije" s tvým kódem a bez něj ti neporadím. Píšeš, že obrázky mají být v řadě po třech, uprav si pravé/levé marginy, já ti ukázal princip, jak to funguje. |
||
| panther Profil |
#8 · Zasláno: 18. 7. 2010, 11:18:05
Los:
„a v případě pozicování se v IE v základu objevuje popisek v levo nahoře u obrázku a ve FF vlevo dole a pak to samozřejmě nejde vyladit souřadnicema“ nevěřím. Dej sem odkaz na web (ne tunu kódu zase), něco děláš špatně. |
||
| Bubák Profil |
#9 · Zasláno: 18. 7. 2010, 11:41:01
panther:
Když Los neví, jak funguje margin a jak funguje abrolutní/relativní pozicovámí a že třebas do obrázku nejde vložit element, proto nejde využít na vnořenou pozici, tak to je pak těžké vysvětlování. |
||
| Los Profil * |
#10 · Zasláno: 18. 7. 2010, 13:24:26
Bubák:
Opravil jsem to tak že jsem dal pozicování relative na ten span a ne na img jak sem to měl úplně poprvé v kódu, myslel sem že to je z toho pochopitelný, ale to je jedno udělal jsem to s tím obrázkem a už to funguje. Netušil jsem že stačí porovnat margin, kdybych to věděl včera nestrávil bych u toho takovou dobu :-( místo toho jsem hledal jiný způsob jak to vyřešit. Tady je kdyžtak výsledek: http://www.jkfotogalerie.cz/fauna.html Pokud by se vám to zobrazovalo špatně dejte prosím vědět. Díky moc za pomoc panther: už sem to měl přepsaný, ale asi tam byla nějaká moje chyba |
||
| panther Profil |
#11 · Zasláno: 18. 7. 2010, 13:28:31
Los:
„Pokud by se vám to zobrazovalo špatně dejte prosím vědět.“ schválně se ti zobrazuje na prvním řádku jen jedna jediná fotka? Udělal bych klikací celou oblast obrázku, nevidím důvod, proč by měl být text „Nové“ neklikatelný. |
||
| Bubák Profil |
#12 · Zasláno: 18. 7. 2010, 14:07:35
panther:
„Udělal bych klikací celou oblast obrázku, nevidím důvod, proč by měl být text ‚Nové‘ neklikatelný.“ Přesně tak, přitom úprava kódu je triviální, stačí přemístit koncovou značku odkazu. |
||
| Los Profil * |
#13 · Zasláno: 18. 7. 2010, 16:40:43
panther, Bubák:
Ani sem si toho nevšim že to neni klikací. Už jsem to opravil a i tu jednu fotku na 1.řádku. Díky |
||
|
Časová prodleva: 14 let
|
|||
0