Autor Zpráva
Daysy
Profil
Zdravím!
Hledám návod na to, jak vložit menu články a menu na bloggeru nějaký oddělovač. zatím jsem přišla jen na to, jak tam vložit jednoduchou jednobarvenou čáru (nebo případně tečkovanou apod.), ale ráda bych si sama utvořila oddělovač v grafickém programu a pak ho tam jako obrázek vložila. Ví někdo prosím, jak na to?

Přikládám náhled, jak to chci:
www.imgup.cz/images/2017/02/06/nahled1.jpg
- žlutě jsem označila část, kterou myslím a chci tam právě dostat něco, jako mám v zeleně označené části (akorát samozřejmě vertikálně). Prostě ať tam nemám jen obyčejné oddělení, ale ať tam mám vložený ten obrázek.
Tomáš123
Profil
Daysy:
Vytvorený obrázok nastav ako pozadie rodiča. Najjednoduchšie bude vytvoriť taký obrázok, ktorý obsahuje aj pozadie pravého stĺpca:



Ak ale ľavý stĺpec nemusí mať premenlivú šírku, nie je nutné používať širšie pozadie. V takom prípade si môžeš vytvoriť iba obrázok oddeľovača a zľava ho odsadiť o šírku obsahu.

Ak ti stačí podpora od Exploreru 9 (napríklad v IE 8 je kvôli nevyhovujúcemu počtu argumentov ignorovaná celá deklarácia a rámček sa nevykreslí vôbec – ideálny hack), môžeš využiť možnosť odsadiť pozadie od pravého okraja.

V tomto konkrétnom prípade dokonca ide efektívne využiť clearovací prvok, ktorý v prípade potreby natiahne ľavý stĺpec a pozadie tak ide nastaviť jemu. Tento však nesmie byť pre správnu funkčnosť obtekaný.

S využitím novšej vlastnosti background-origin sa počet riešení ešte zvyšuje.

Riešení je mnoho, ale pre jednoduchosť a podporu by som ti odporúčal to prvé.
Daysy
Profil
Tomáš123:
Ahoj, díky moc za odpověď.

Tak nevím, kde dělám chybu, ale zkopírovala jsem to CSS a neodsazuje mi to obrázek v menu, odsazuje mi to zprava jakoby celou stránku a obrázek vůbec není vidět. :/

Jsem s HTML a CSS totální začátečník, tak to u mě asi bude na dýl. :/


Tak se mi zatím podařilo, že jsem tu čáru přidala do menu, ale našla jsem jen takový kód, který dává tu čáru každému oddílu zvlášť. Já bych ji ráda měla po celé délce stránka mezi těmi články a menu.

Použila jsem do CSS
.sidebar .widget {
      background-image: url('http://www.imgup.cz/images/2017/02/06/menu05854.png');
      background-position: left;
      background-repeat: no-repeat;
.aside
    width: 200px;
    float: left;
    padding: 0 1em;
    box-sizing: border-box;
}


První část je kód, co jsem našla někde na netu, druhou jsem vycucla od tebe - to odsazení a nějakou metodou pokus-omyl to najednou vypadá skoro, jak by mělo. Akorát je to prostě přerušené a je to jen u těch oddílů. Náhledem to těžko dávat - kdyžtak mrkni (nebo i ostatní mrkněte) přímo na blog, kam to aplikuju days-of-daysy.blogspot.cz
Tomáš123
Profil
Daysy:
Pridaj si tam toto:
.main-inner .fauxcolumn-center-outer {
  background: url(http://www.imgup.cz/images/2017/02/06/menu05854.png) right top repeat-y;
}
Daysy
Profil
Tomáš123:
Pecka, to je přesně ono! Díky moc, teď už je vše tak, jak má být. :)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0