změna obrázků v menu
změna obrázků v menu
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
- x-rated
- Level 5
- Příspěvky: 2124
- Registrován: říjen 14
- Bydliště: Praha
- Pohlaví:
- Stav:
Offline
- Kontakt:
Re: změna obrázků v menu
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
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
Re: změna obrázků v menu
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š.
Re: změna obrázků v menu
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?
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?
- CZechBoY
- Master Level 9.5
- Příspěvky: 8813
- Registrován: srpen 08
- Bydliště: Brno
- Pohlaví:
- Stav:
Offline
- Kontakt:
Re: změna obrázků v menu
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:
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
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW
Re: změna obrázků v menu
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
- CZechBoY
- Master Level 9.5
- Příspěvky: 8813
- Registrován: srpen 08
- Bydliště: Brno
- Pohlaví:
- Stav:
Offline
- Kontakt:
Re: změna obrázků v menu
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š a při přejetí jen přidej barvu
Border se roztahuje po celé délce prvku (včetně paddingu).
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;}
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
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW
Re: změna obrázků v menu
Mockrát děkuji, tak jednoduché. 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
-
- 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
-
-
- 1
- 2052
-
od Grander
Zobrazit poslední příspěvek
21 čer 2024 17:41
-
- 5
- 2803
-
od Mladkov204
Zobrazit poslední příspěvek
17 pro 2023 18:05
-
- 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