Autor Zpráva
Vendy
Profil
Ahoj a dobrý den,
bojuji se zapsáním Embed Code. Respektive i se samotnou definicí. Jestli se nepletu, pak Embed Code je reklamní okénko, kde se střídají dokola obrázky. Např.:
obrázek 1. - Víte co se nosí?
obrázek 2. - boty od Leonarda
obrázek 3. - KOUPIT TEĎ
a kliknutí odvede uživatele na nějakou stránku s botami. Je to ono nebo se pletu?

A mám-li pravdu, jak se kóduje? Snažila jsem se to najít přes kontrolu prvku nějakého google okna a kromě spousty dalších věcí mi tam vyšlo toto:
<img src="https: //tpc.googlesyndication.com/simgad/14805781558684228438" border="0" width="300" height="250" alt="" class="img_ad">

Tak jsem se jukla na tu URL adresu, kde jsem našla bílou stránku a v ní umístěno totéž okno, kde jsem se z kontroly prvku nedozvěděla už vůbec nic.

Nechci si na webu vytvářet reklamu, ale v šabloně je možnost vložení Embed Code nad Top Menu a já tam chtěla dát hezké grafické obrázky, které budou lákat lidi (pacienty) k zapojení se do tvorby webu. A právě proto, aby upoutaly, by se měly střídat. A protože jsem 100% lama a vše se učím "za pochodu", už nevím, co mám dělat.

Poradíte mi někdo? Jen dodatek - šablona píše, že kód nesmí začínat <src
Trejpa
Profil
Vendy:
To, co odkazuješ, je jeden animovaný obrázek ve formátu GIF. Vyrobit podobný blikající nesmysl sloučením tří obrázků zvládne každý trochu pokročilejší editor obrázků, případně jsou na to i mnohé webové služby. Takový obrázek stačí uložit na web a do stránky zadat kód obrázku obalený odkazem.
<a href="http://example.com"><img src=animovany-obrazek.gif></a>

Pokud chceš stejného chování dosáhnout se samostatnými obrázky nebo odkazy vedoucími na různé stránky, tak ke střídání bude potřeba použít JavaScript. Stejně tak ho upotřebíš při tvorbě nějakého přechodového efektu mezi snímky. Připravená řešení hledej jako js slider nebo js carousel.
Vendy
Profil
Trejpa [#2]:

To, co odkazuješ, je jeden animovaný obrázek ve formátu GIF.

To mě vůbec nenapadlo.
Zkusila jsem testovací grafiku protáhnout přes tu webovou službu, vyrobila testovací stránku a vše nahrála na uzamčenou část webu, kde testuji všechny nové pluginy apod. A ono to funguje :) Moc děkuji za tipy. Ostatní ještě otestuji, ale jsem šťastná už za tohle, trápila jsem se s tím hrozně dlouho.
Teď se jen marně pokouším to celé vycentrovat, ale klasické align="center" mi to nějak nebere.
Ale buď jak buď, už alespoň vím jak spojit grafiku ;)
Trejpa
Profil
Vendy:
Teď se jen marně pokouším to celé vycentrovat, ale klasické align="center" mi to nějak nebere.
A čemu ten align nastavuješ? Pokud obrázku, tak u něj nemůže nabývat hodnoty center. Nastav vystředění obsahu obalujícímu bloku, třeba odstavci:
<p align=center>
  <a><img></a>
</p>
Vendy
Profil
Přeskakuji mezi různými částmi, abych dotazy dávala tam, kde asi mají být.

Trejpa:
A čemu ten align nastavuješ? Pokud obrázku, tak u něj nemůže nabývat hodnoty center.
Myslela jsem si, že to nemůže být jen jednoduše vloženo a hledala to i na webu Jak psát web (je to moje html záchrana už od počátku práce s webem). Tam jsem zjistila, že to celé musím nějak zabalit, takže jsem to dávala přes <div>, ale bez úspěchu.
Mám neblahé tušení, že buď celé dávám nějak špatně, nebo mne šablona nechce pustit (což by bylo horší). Jestli je chyba "jen" v kódu, tak by to bylo dobré. Zkusila jsem to tedy s <p>, ale zase nic. Nyní kód vypadá takto:
<p align="center">
<a href="http://zivot-s-rs.cz/zivot-s-sm/testovaci-stranka/"><img src="http://zivot-s-rs.cz/zivot-s-sm/wp-content/uploads/sites/14/2015/09/output_T60fqo.gif"></a>
</p>
Je to špatně?
Trejpa
Profil
Vendy:
Zřejmě má šablona pro odstavec / oddíl nastaveno pevné zarovnání vlevo.
Buď využij centrovaný odstavec z editoru, který dostane zřejmě od šablony nějakou třídu, jež je ve stylech centrovaná, nebo zadej styly do odstavce natvrdo (styly mají před jinými formátovacími atributy přednost):

<p style=text-align:center>
<a href="#"><img src="obrazek.gif"></a>
</p>
Vendy
Profil
Tak teď už nevím. Zkusila jsem to vložit natvrdo tak, jak jsi napsal, ale stejně se to ani nehnulo. Jestliže mám dobře kód, pak je potíž v šabloně. Problém je, že na vkládání reklam (byť já tam nikdy nedávám reklamy, ale logika je obdobná) má šablona přímo ve svém nastavení určené konkrétní prostory, do kterých se vloží html a zobrazuje se to tam, kde má - pod Top Menu, pod 2. rubrikou, nad příspěvkem atd.
A tomuhle se prostě nechce uhnout ani o píď od pravé strany. Dávám tam něco prvně, tak jsem to vůbec netušila. Zřejmě to budu muset vyšťourat někde v šabloně, nebo spíše dostat kódování do child theme, ale je to v css a tam si netroufám.
Důležité pro mne je, že vím jak na úpravu obrázků, kód mám správně, jen to prostě nechce pustit šablona. To poslední budu muset nějak dořešit, ostatní je super a moc děkuji za rady ;) Vendulka
Trejpa
Profil
Vendy:
V tomto stavu bych asi už musel vidět výslednou stránku, abych zdůvodnil, proč se obrázek nezarovnává.

Není jen obrázek větší, než místo, do kterého se má vejít?
Není nějaký element přetypován v CSS přes display?
<p style="text-align: center !important; display: block !important;">
<a href="#" style="display: inline !important;"><img src="obrazek.gif" style="display: inline-block !important; width: 200px !important;"></a>
</p>
Dál může jít o nějaké neviděné okraje (padding, margin, border), odpozicování, plavání…
Vendy
Profil
Zkusila jsem zadat části kódu, který píšeš, a akorát to obrázek zmenšilo. Jinak velikost je přesně dle informací v Theme Options šablony.
S pohledem na stránky není problém, jen je odemknu. Akorát se nelekej grafiky toho gifu, je to jen zkušební blábol. A teď jsem si všimla, že "lícuje" pravým okrajem přesně s okraji widgetů, asi tam je někde nějaká spojitost (sama jsem "pacoš", vidím jen z 30%, občas mi něco unikne).
Testovací subdoména, která je jinak zamčená, protože se na ni teprve připravuje slovenský překlad webu
Trejpa
Profil
Vendy:
Dál může jít o nějaké neviděné okraje (padding, margin, border), odpozicování, plavání

V souboru style.css na řádku 193 smaž float a rovnou přidej vystředění, pak už odstavec nebude vůbec potřeba.

Takhle vypadá nyní:
#topbanner {margin: 1.4em 2em 0; float: right; padding: 0px;}

Takhle ho uprav:
#topbanner {margin: 1.4em 2em 0; text-align: center; padding: 0px;}


Když už budeš v úpravách, můžeš upravit i řádek 195:
#topbanner img {border: 0 none; vertical-align: middle;}
To, kdyby se ti nelíbila ta mezera pod obrázkem.
Vendy
Profil
Trejpa:
V souboru style.css na řádku 193 smaž float a rovnou přidej vystředění, pak už odstavec nebude vůbec potřeba.

Super a děkuji. Upravila jsem to tam a je to teď přesně na tom místě, kde má být. Moc díky, sama bych to nenašla :)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: