změna obrázků v menu

Napište nám o svých webových stránkách, dejte vědět o jakémkoliv jiném zajímavém webu

Moderátoři: Myloš, Mods_senior

pajacz17
Level 3
Level 3
Příspěvky: 592
Registrován: březen 14
Pohlaví: Muž
Stav:
Offline

změna obrázků v menu

Příspěvekod pajacz17 » 13 lis 2014 17:28

Ahoj, mohu poprosit o radu, jak udelat odrazkovy seznam, aby měnil pozadí nebo odrážky když na něj najedu. Mohu poprosit jak se to děláte? Staci pomoci hover, nebo musim nějak jinak? Děkuji

Reklama
Uživatelský avatar
x-rated
Level 5
Level 5
Příspěvky: 2124
Registrován: říjen 14
Bydliště: Praha
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: změna obrázků v menu

Příspěvekod x-rated » 13 lis 2014 17:34

na efekt po najetí je hover, takže třeba li:hover
obrázek jako img se pomocí css ale měnit nedá, takže buď jako pozadí, nebo spojit dva img do jednoho a při hoveru ho posunout do jiný pozice, kde bude vidět ten druhej, samozřejmě s overflow hidden na li
9900K / G.Skill 32GB@4 GHz / MXI Formula / RTX 2080 Ti / Sabrent 4 TB NVMe / X-Fi THD / HD660S / G403 / G815 / UP2715K 5K IPS / HX1000i / Define R6 / EKWB full

Uživatelský avatar
Myloš
Master Level 8.5
Master Level 8.5
Příspěvky: 6990
Registrován: duben 06
Bydliště: Praha
Pohlaví: Muž
Stav:
Offline

Re: změna obrázků v menu

Příspěvekod Myloš » 13 lis 2014 17:59

Odrážkový seznam má vlastnost list-style-image, takže pomocí :hover to jde dobře, ale takto umístěný obrázek má konstantní svislé umístění, často nevhodné, takže se to beztak řeší jako list-style-type:none a obrázek se vkládá jako background-image. Ale i v tomto případě samozřejmě :hover na změnu funguje.
  • Než položíte dotaz, nejprve se ptejte strejdy Gůůgla.
  • Výňatek z pravidel fóra PC-HELP:
    • Název tématu zvolte takový, aby co nejvýstižněji charakterizoval obsah tématu.
    • Nesnažte se řešit jiný problém (i když podobný) v jednom tématu. Raději založte nové téma.
  • Mýliti se je Myloš. ;-)

pajacz17
Level 3
Level 3
Příspěvky: 592
Registrován: březen 14
Pohlaví: Muž
Stav:
Offline

Re: změna obrázků v menu

Příspěvekod pajacz17 » 13 lis 2014 20:11

Děkuji. Ano, list-style-image znám, ale vždy když mám více úrovňový seznam, tak ty odrážky jsou strašně daleko od sebe.
Ještě prosím nevíte jak udělat, aby pozadí odrážky a samotný text měly stejný pozadí. Když dám background pro ul li, tak je samozřejmě jenom odrážka, a když jenom ul tak pak má vše pozadí. Ještě jednou díky
Nechá se taky nastavit tloušťka čáry a případně délka podtržení pro text-decoration: underline?

Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: srpen 08
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: změna obrázků v menu

Příspěvekod CZechBoY » 13 lis 2014 20:33

Pro underline nemůžeš zvětšit šířku... jedině použít border-bottom.

Co se týče obrázků tak použij nějaký takovýto kód:

Kód: Vybrat vše

<style type="text/css">
#menu li > a {
  background-image: url('images/moje_odrazka.png');
  background-repeat: no-repeat;
  background-position: left center;
}
#menu li:hover > a, #menu li:focus > a {
  background-image: url('images/moje_odrazka_hover.png');
}
</
style>

<
ul id="menu">
 <li><a href="./">Domů</a></li>
 <li><a href="kontakt.html">Kontakt</a></li>
</
ul>
 
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW

pajacz17
Level 3
Level 3
Příspěvky: 592
Registrován: březen 14
Pohlaví: Muž
Stav:
Offline

Re: změna obrázků v menu

Příspěvekod pajacz17 » 14 lis 2014 06:21

Ano děkuji, ale když dám například border-bottom pro a:hover, tak tím je najednou větší blok a při najížedění myši to vždy divně se zvětšuje o to spodní podtržení. Mohu se prosím ještě zeptat, co je znak > mezi #menu li:focus > a? Děkuji

Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: srpen 08
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: změna obrázků v menu

Příspěvekod CZechBoY » 14 lis 2014 09:05

Znak > značí přímého potomka. Když se neuvede žádnej operátor takj e to jakýkoliv zanořený prvek.
Pokud ti to skáče tak nech spodní border o velikosti jakou potřebuješ

Kód: Vybrat vše

#menu li > a {border-bottom-width: 2px; border-bottom-color: transparent;} 
a při přejetí jen přidej barvu

Kód: Vybrat vše

#menu li > a {border-bottom-color: red;} 


Border se roztahuje po celé délce prvku (včetně paddingu).
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW

pajacz17
Level 3
Level 3
Příspěvky: 592
Registrován: březen 14
Pohlaví: Muž
Stav:
Offline

Re: změna obrázků v menu

Příspěvekod pajacz17 » 14 lis 2014 10:37

Mockrát děkuji, tak jednoduché. :oops: Jsem úplný blb, tak snad tady ty fígle se naučím


  • Mohlo by vás zajímat
    Odpovědi
    Zobrazení
    Poslední příspěvek
  • Win 11 - kontextové menu úpravy
    od Zbynek1 » 02 úno 2024 19:23 » v Windows 11, 10, 8...
    4
    2593
    od Zbynek1 Zobrazit poslední příspěvek
    13 úno 2024 09:13
  • Úprava fotek - jak docílit výsledků jako na obrázku Příloha(y)
    od HelFix » 07 kvě 2024 11:44 » v Design a grafické editory
    4
    3396
    od Kminek Zobrazit poslední příspěvek
    08 kvě 2024 14:43
  • FB - změna hesla
    od Hirogen » 21 čer 2024 15:16 » v Internet a internetové prohlížeče
    1
    2052
    od Grander Zobrazit poslední příspěvek
    21 čer 2024 17:41
  • změna jazyka v the sims 4
    od Mladkov204 » 17 pro 2023 17:30 » v Hry
    5
    2803
    od Mladkov204 Zobrazit poslední příspěvek
    17 pro 2023 18:05
  • Změna poskytovatele internetového připojení
    od Fargotroniac » 09 říj 2024 08:15 » v Sítě - hardware
    17
    1937
    od Fargotroniac Zobrazit poslední příspěvek
    12 říj 2024 18:59

Zpět na “Web-tipy a vaše weby”

Kdo je online

Uživatelé prohlížející si toto fórum: Žádní registrovaní uživatelé a 4 hosti