| Autor | Zpráva | ||
|---|---|---|---|
| Manďa Profil |
#1 · Zasláno: 25. 1. 2013, 19:06:59
Ahoj,
měla bych prosbu. Stáhla jsem si na stránku javascript - když najedu myší na nějaký odkaz (v mém případě obrázek), tak se pod ním zobrazí "bublina" a v ní je něco napsáno, vše funguje jak má, jen kromě jedné věci... Ten JS je vyrobený na odkazy, ale já ho potřebuji použít na obrázek. Pravděpodobně je tam ale definováno, kde má být umístěn, protože když jsem místo odkazu (textu) použila obrázek, tak se při najetí bublina zobrazí v polovině obrázku a ne pod ním. Potřebovala bych, aby se šipka s bublinou zobrazovala pod obrázkem. Obrázek má rozměry 135 x 120 px. Živá ukázka mé stránky - když se najede na obrázek shora, tak to funguje jak má (bublina i šipka jsou těsně nad obrázkem), ale jakmile se najede na obrázek zespodu, tak se šipka s bublinou zobrazuje v polovině obrázku, což není pěkné. Děkuji moc za každou radu. Zkoušela jsem se v JS špárat, ale nic jsem nevymyslela :-( |
||
| Str4wberry Profil |
#2 · Zasláno: 25. 1. 2013, 22:36:50
Dnes už by si možná šlo vystačit jen s CSS (dostal jsem chuť si trochu hrát a vzešla z toho ukázka). Pokud by nevadilo, že se popisek bude zobrazovat vždy dole.
|
||
| Manďa Profil |
Str4wberry: děkuji moc. Vypadá to skvěle! Ještě lépe než ten JS! :) Jen mě to pořád nefunguje. Při najetí na obrázek je bublina, ale nejenže je u obrázku, ale ty samé bubliny se objeví o pár řádků výš a jsou tam fixní, nezávisle na tom, jestli najedu na obrázek nebo ne. Nevíš prosím, co s tím? Přitom jsem style nahrála do style.css a zbytek (divy) mám na stránce stejně jako ty - viz má stránka.
Děkuji. |
||
| Str4wberry Profil |
#4 · Zasláno: 27. 1. 2013, 11:54:58
Vím, dělá to
top: -999px, který jsem použil pro skrytí popisku, pokud se na něj nenajede, je to málo na to, aby se popisek na stránce i tak neobjevil. Asi bude lepší použít display: block/none + popisek zobrazovat hned u kraje (upravil jsem příklad).
|
||
| Manďa Profil |
#5 · Zasláno: 27. 1. 2013, 13:36:47
Super! Už to funguje. Jsi fakt machr, díky moc :-) Ještě mi prosím poraď, jak dát ty dva malé obrázky na střed a vedle sebe... Přes <p align="center"></p> mi to nejde. Nemáš nějaký nápad jak to dát vedle sebe? :)
|
||
| Manďa Profil |
#6 · Zasláno: 27. 1. 2013, 14:59:34 · Upravil/a: Manďa
Tak jsem to vycentrování už nějak vykoumala, ale teda je to dost složité a nešikovné - obalila jsem ty obrázky ještě jedním divem a mu dala parametry (podle toho, kolik je tam obrázků, každý má svůj vlastní obal) - stejně to ale není úplně na středu, jen tak aby se neřeklo :-D.. Pokud by měl někdo jiný lepší nápad, budu za něj moc vděčná! Jen jsem tedy ještě nepřišla na to, jak mezi obrázky udělat mezeru :-)
Jo a ještě něco. Když mám ty obrázky s bublinami úplně na konci stránky (kde pod tím už není žádný text), tak jsem tam musela dát hodně prázdných řádků, jinak se bublina zobrazí jen do půlky. |
||
| joe Profil |
#7 · Zasláno: 27. 1. 2013, 15:19:41
Vycentrovat obrázky můžeš tak, že těm elementům s třídou img dáš do CSS:
.img {
position: relative;
width: 135px;
float: left;
left: -50%;
margin: 0 5px; /* okraj mezi obrázky*/
}a ty elementy zanoříš ještě do jednoho divu, kterému nastavíš float: left; position: relative; left: 50%; Manďa: „Když mám ty obrázky s bublinami úplně na konci stránky (kde pod tím už není žádný text), tak jsem tam musela dát hodně prázdných řádků, jinak se bublina zobrazí jen do půlky.“ Té bublině dej třídu například top, která ti bude určovat, že se bublina bude zobrazovat nad a ne pod obrázkem.
A do CSS pak .tooltip.top {
top: auto; /* nastavi zpet vychozi hodnotu */
bottom: 100%;
}pak změnit tu šipku... |
||
| Manďa Profil |
#8 · Zasláno: 27. 1. 2013, 15:31:24
joe: to je super, díky moc. Já se s tím tady piplala tak nešikovně a ono to jde tak krásně a jednoduše :-) Děkuji moc! A jak otočím tu šipku? :-) Děkuji opravdu moc.
|
||
| Str4wberry Profil |
#9 · Zasláno: 27. 1. 2013, 16:34:39
Ta šipka je taková hračka, co využívá kreslení pomocí okrajů (z tohoto příkladu to bude možná snazší k pochopení). S tím, že v tomto případě jsou ještě dvě přes sebe. První je černá a druhá bílá, která tu černou překrývá tak (pomocí
marginů), že z té černé zbude jen okraj. Upravil jsem předchozí ukázku.
|
||
| Manďa Profil |
Str4wberry: podle tvého vzoru mi to nefunguje vůbec - nahrála jsem to úplně stejně jako to máš ty včetně těch obrázků a všeho a všechny obrázky měly bubliny nahoře )i když podle tvého vzoru byla bublina i dole), ale obrázky nebyly vedle sebe, ale pod sebou. Už jsem z toho nešťastná. Sedím tu nad tím už od 17 hodiny.. :-( Jak to napsal joe, tak to funguje - všechny bubliny jsou dole na středu i s mezerou. Zde mi nefunguje jen ta bublina nad obrázkem, nevím, jak změnit tu šipku - bublina je nad obrázkem, ale nevím, jak dolů přidat tu šipku...
Podle příspěvku od joe jsem sestavila CSS kód, který mi funguje: - těm top bublinám jsem jen přidala k jejich názvu s (tooltips, arrows, inners). pro ty arrows a inners jsem použila kód od Str4wberryho pro top bubliny, ale stejně to nefunguje a špika se dole prostě neukazuje :-( - to all je obalový div - to tooltips mi nefunguje jen když tam je top: auto; bottom: 100% - to se tam ta bublina vůbec nezobrazí a obsah bubliny je fixní pod obrázkem - nevím proč. Funguje to jen když tam mám i ten zbytek kódu. .img {position: relative; width: 135px; float: left; left: -50%; margin: 0 5px;} /* šířka podle obrázku */
.tooltip {position: absolute; left: 0; top: 100%; display: none; width: 250px; border: 1px solid #666; padding: 10px; background: #fff; z-index: 100}
.tooltips {position: absolute; left: 0; top: auto; bottom: 100%; display: none; width: 250px; border: 1px solid #666; padding: 10px; background: #fff; z-index: 100}
.img:hover .tooltip {display: block;}
.img:hover .tooltips {display: block;}
.img .arrow, .img .arrow-inner {position: absolute; top: -10px; left: 5%; width: 0px; height: 0px; border: solid transparent; border-width: 0 10px 10px 10px; border-bottom-color: #000}
.img .arrows, .img .arrow-inners {top: auto; bottom: -10px; border-width: 10px 10px 0 10px ; border-top-color: #000; border-bottom-color: transparent;}
.img .arrow-inner {border-bottom-color: #fff; margin: 1px 0 0 1px; border-width: 0 9px 9px 9px}
.img .arrow-inners {border-top-color: #fff; border-width: 9px 9px 0 9px; margin: 0 0 1px 1px;}
.img table {width: 100%}
.img th {text-align: left;}
.all
{float: left; position: relative; left: 50%;}Fakt nevím, kde dělám chybu :-( Děkuji moc všem za vaše odpovědi. |
||
| Str4wberry Profil |
#11 · Zasláno: 27. 1. 2013, 19:48:05
Mělo by stačit přidat
<div>u s třídou img ještě třídu top:
<div class='img top'> A potom příslušný styl: .top .tooltip {top: auto; bottom: 100%;}
.top .arrow, .top .arrow-inner {top: auto; bottom: -10px; border-width: 10px 10px 0 10px ; border-top-color: #000; border-bottom-color: transparent;}
.top .arrow-inner {border-top-color: #fff; border-width: 9px 9px 0 9px; margin: 0 0 1px 1px;} |
||
| Manďa Profil |
#12 · Zasláno: 27. 1. 2013, 20:09:14
Udělala jsem vše podle tvých pokynů a bubliny nahoře jdou - což je super! Jsem moc ráda a moc děkuji :-) ALE..... :-D ony jsou ty bubliny nahoře i u obrázků, kde je div definován takto <div class='img'>, tomu nerozumím. Jak se to může zobrazovat nahoře když to nemá název třídy 'img top', ale jen 'img'?
|
||
| Str4wberry Profil |
#13 · Zasláno: 27. 1. 2013, 20:21:10
Je to tím, že celý prostřední sloupec je v
<div>u s třídou top. :–)
<!-- CONTENT -->
<div id="content">
<div class="indent">
<div class="wrapper">
<div class="col-1">
<div class="box">
<div class="top">
<div class="bot"> |
||
| Manďa Profil |
#14 · Zasláno: 27. 1. 2013, 20:53:07
Aha, to je ten problém.. Ono tam už jednou top je :-D A já si říkala, že je to divné.
Jde to, jde to! Hip hip hurá! Děkuji moc joe a Str4wberry! |
||
|
Časová prodleva: 11 let
|
|||
0