Autor Zpráva
Vendy
Profil
Dobrý den a ahoj,
mám lamovský dotaz, ale nedaří se mi pochopit, respektive uchopit "plovoucí objekt" a rozměry "margin", proto se obracím s prosbou o pomoc na vás.
Potřebovala bych do widgetů umístit několik obrázků s popisem a odkazy. První jsem to napsala na nečisto ve zkušební verzi webu a celkem úspěšně. Jenže když jsem dohodila další obrázky, něco je v zápisu špatně a já nevím, kde hledat a jak opravit chybu. Prostě text odskočí. Tuším, že je to zakopáno kdesi v nepřítomnosti "clear", ale s tím jsem nikdy nepracovala a nedaří se mi.

Abych jen neplácala, nechala jsem zkušební verzi (odkazy jsou buď stejné nebo blbiny, takže to neberte vážně), kde v pravých widgetech uvidíte i oddíl "foto" a tam je znát, jaký boj svádím: zivot-s-rs.cz/zivot-s-sm

A zápis, který tam mám a vy jej jistě zkritizujete:
<p>
<a href="http://zivot-s-rs.cz/zivot-s-sm/zaciatky-s-sm/"target="_blank"><img src="http://zivot-s-rs.cz/zivot-s-sm/wp-content/uploads/sites/14/2015/12/7_image_capture.png" style="width: 128px; height: 128px; float: left"><a >
<span style="font-family: arial, helvetica, sans-serif; font-size: 12pt; color: #000000;">A tady by měl být nějaký popis s odkazy. <span style="color: #0000ff;"><a style="color: #0000ff;" href="https://www.zonerama.com/zivot-s-rs/Album/1037111" target="_blank">ZDE JE NĚJAKÝ ODKAZ NĚKAM.</a></span>
Hlavně pozor na velikost img a barvy textů!!!
UPRAVIT target="_blank"!!!!!</span>
</p>

<p>
<a href="http://zivot-s-rs.cz/vase-nase-fotogalerie/"target="_blank"><img src="http://zivot-s-rs.cz/wp-content/uploads/2016/01/fotogalerie_komplet.png" style="width: 128px; height: 128px; float: left"><a >
<span style="font-family: arial, helvetica, sans-serif; font-size: 10pt; color: #000000;">Všechny fotky, které jsme kdy vytvořili či jste nám zaslali, hezky uspořádány na jednom místě: <span style="color: #0000ff;"><a style="color: #0000ff;" href="http://zivot-s-rs.cz/vase-nase-fotogalerie/" target="_blank">Vaše/naše fotogalerie</a></span>
</p>

<p style="margin-top: 0px; margin-bottom: 0px"><a href="http://zivot-s-rs.cz/vase-nase-fotogalerie/"target="_blank"><img src="http://zivot-s-rs.cz/wp-content/uploads/2016/01/fotogalerie_komplet.png" style="width: 128px; height: 128px; float: left"><a >
<span style="font-family: arial, helvetica, sans-serif; font-size: 10pt; color: #000000;">Všechny fotky, které jsme kdy vytvořili či jste nám zaslali, hezky uspořádány na jednom místě: <span style="color: #0000ff;"><a style="color: #0000ff;" href="http://zivot-s-rs.cz/vase-nase-fotogalerie/" target="_blank">Vaše/naše fotogalerie</a></span>
</p>

<p>
<a href="http://zivot-s-rs.cz/vase-nase-fotogalerie/"target="_blank"><img src="http://zivot-s-rs.cz/wp-content/uploads/2016/01/fotogalerie_komplet.png" style="width: 128px; height: 128px; float: left"><a >
<span style="font-family: arial, helvetica, sans-serif; font-size: 10pt; color: #000000;">Všechny fotky, které jsme kdy vytvořili či jste nám zaslali, hezky uspořádány na jednom místě: <span style="color: #0000ff;"><a style="color: #0000ff;" href="http://zivot-s-rs.cz/vase-nase-fotogalerie/" target="_blank">Vaše/naše fotogalerie</a></span>
</p>

Předem děkuji za konstruktivní rady, Vendulka
Taps
Profil
Vendy:
toto ti bude postačovat Živá ukázka ?
Vendy
Profil
Taps:
Ukázka je krásná, ale jestli ji dobře chápu, úprava je v tom zadání CSS, nebo se pletu?
Taps
Profil
Ano, tagu p jsem pridal vlastnost clear + nastavil okraje
Vendy
Profil
Taps:
CSS tam nevepíši, jen html úpravu, ale zkusím nastavit clear: left (podle ukázky) a otestuji toto. Vždy jsem zadávala jen float, clear jsem nikdy nepoužila, proto tak tápu.
Keeehi
Profil
Vendy:
CSS tam nevepíši, jen html úpravu,
Buď to narveš každému odstavci (p) do atributu style, nebo před celý html kód můžeš vložit tento html kód
<style>
p {
    clear:left;
    margin:10px;
    border:1px solid black;
    height:120px;
}
</style>
Jinak řečeno, takhle vypadá CSS zapsné přímo v HTML dokumentu.

Na CSS prakticky jsou popsány všechny možnosti, jak CSS do stránky dostat.
Tomáš123
Profil
Vendy:
Nepomýlila si sa na riadkoch 2, 9, 13 a 18 a nenapísala <a > namiesto </a>?
Vendy
Profil
Tomáš123:
Nepomýlila si sa na riadkoch 2, 9, 13 a 18 a nenapísala <a > namiesto </a>?
Ano, spletla jsem se tam a zjistila to hned, jak jsem to viděla vložené tady, takže opravu jsem již provedla. Ale děkuji za upozornění.


Keeehi:
Buď to narveš každému odstavci (p) do atributu style, nebo před celý html kód můžeš vložit tento html kód
Zkusila jsem to a je zajímavé, že ačkoliv to bylo vloženo jen k jednomu widgetu, automaticky se totéž zobrazilo u všech widgetů - dokonce i u těch, které nejsou zadávány jako pouhý text.


Taps:
Ano, tagu p jsem pridal vlastnost clear + nastavil okraje
Tak já jsem od okrajů upustila a šla jen nastavením clear a dopadlo to dobře (ačkoliv znám článek o float a clear na JPW, nějak jsem to nedokázala pochopit, respektive hledala jsem složitosti tam, kde nejsou).

Nyní vše vypadá funkčně, ale ocením kontrolu vás okolo:
<p>
<a href="http://www.odkazovaná-stránka.cz/"target="_blank"><img src="http:nějaký-obrázek.png" style="width: 128px; height: 128px; float: left; clear:left;"></a>
<span style="font-family: arial, helvetica, sans-serif; font-size: 12pt; color: #000000;">Nějaký popis s odkazy. <span style="color: #0000ff;"><a style="color: #0000ff;" href="https://www.odkazovaná-stránka.cz/" target="_blank">NĚJAKÝ ODKAZ NĚKAM.</a></span>
</p>

Tam, kde je delší text, se samozřejmě zarovná do bloku, tedy pod obrázek, ale to je zatím vidět jen v testovací fázi, reálně tam bude vždy jen pár slov.

Tak co, je tento zápis správně? Funkčně se na webu tváří, ale bude fungovat všude?
anonymníí
Profil *
Vendy:
Kód uvedený výše fungovat bude (dva odkazy, přičemž první bude odkazovat obrázkem, druhý pouze textem), jen pár postřehů k němu:

- Mezi hodnotou atributu a dalším atributem doporučuji mezeru - href="..." [b][/b]target="..."
- Možná by mohl kromě obrázku odkazovat i jeho popis (nevím, jestli to bude funkčně dávat smysl, ale občas se to tak dělá a je to uživatelsky přívětivější)
- span ve druhém odkazu je zbytečný, můžeš jej s klidem smazat.

Span pro popisek pod obrázkem bude téměř jistě také zbytečný, font, velikost a barvu textu by mohl mít (pokud už nemá) rodičovský odstavec.
Vendy
Profil
anonymníí:
Děkuji za připomínky.

ad 1) opraveno
ad 2) zde v praxi budou dva druhy odkazů - na foto a na článek -, proto to rozdělení, ale určitě u základního odkazu na komplet stránku fotogalerií to takto provedu. Dobrá připomínka.
ad 3) opraveno

Ještě jednou děkuji.


Všem zúčastněným děkuji za připomínky a za pomoc. Testovací verzi webu tedy opět uzamykám a převedu vše do praxe na stránkách zivot-s-rs.cz

Přeji pohodové dny, Vendulka

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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