Autor Zpráva
BioMike
Profil *
Dobrý den,

řeším problém, že po přiřazení ikonky k určité kategorii se nezobrazuje vedle rubriky avšak zobrazuje se úplně nahoře, kde nepatří.

Nevíte někdo jak udělat v CSS správný zápis?

/* Menu */

.menu {
    background: #FFFFFF;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
    height: 91px;
}

.menu li {
  float:left; 
  }
  
.menu li a {
    padding:37px 25px;
  text-transform: uppercase;
    display:block;
    color: #656565;
    font: 16px;
}

.menu li a:hover {
  color: #5bc98a;
}

/* Menu - podkategorie */
.menu ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
}

.menu li:hover { 
  position:relative;   
  }
  
.menu li:hover ul {
    left:0px;
    top:90px;
    background:#5FD367;
    padding:0px;
}

.menu li:hover ul li a {
  padding: 20px 0px 20px 0px;
    display:block;
    width:200px;
    text-indent:25px;
    background-color: #5bc98a; 
  font-size: 12px; 
  color: #FFFFFF;
}

.menu li:hover ul li a:hover { 
  background:#64d594; 
}

.biorytmus {
background-image: url(biorytmus.png);
background-repeat: no-repeat;}

<ul class="menu"">
<li><a href='#'>Úvod</a></li>
<li><a href='#' class="biorytmus">Biorytmus</a>
    <ul>
    <li><a href='#'>Spánek</a></li>
    <li><a href='#'>Denní návyky</a></li>
    <li><a href='#'>Psychologie</a></li>
    <li><a href='#'>Fungování orgánů</a></li>
    </ul>
</li>
<li><a href='#'>Motivace</a>
    <ul>
    <li><a href='#'>Motivační citáty</a></li>
    <li><a href='#'>Motivační videa</a></li>
    <li><a href='#'>Filmy</a></li>
    <li><a href='#'>Knihy</a></li>
    </ul>
</li>
<li><a href='#'>Výživa</a>
    <ul>
    <li><a href='#'>Zdraví a krása</a></li>
    <li><a href='#'>Fitness</a></li>
    </ul>
</li>
<li><a href='#'>Trénink</a>
    <ul>
    <li><a href='#'>Tréninkové principy</a></li>
    </ul>
</li>
</ul>

Předem děkuji za pomoc.
lionel messi
Profil
BioMike:
Nevíte někdo jak udělat v CSS správný zápis?

Dodaj prosím odkaz na živú ukážku, kde ilustruješ konkrétny problém (úryvok kódu neobsahuje HTML ani CSS ikonky).
BioMike
Profil *
Zde přikládám živou ukázku:
kubatko.eu/test
RastyAmateur
Profil
Vše je tak, jak jsi nastavil. Pokud chceš mít ikonku jinde, musíš ji napozicovat
BioMike
Profil *
Děkuji, pomohlo. Na webu zatím není aktualizováno, ale v offline verzi se již vše zobrazuje tak jak má. :)
Bubák
Profil
BioMike:
přiřazení ikonky k určité kategorii se nezobrazuje vedle rubriky avšak zobrazuje se úplně nahoře, kde nepatří
Výchozí pozice je pro obrázek na pozadí je vlevo nahoře.
Úsporná deklarace je background-position: 0; pokud je uvedena jen jedna hodnota, druhá je center, tak pravá CSS specifikace.
Jako přehlednější bych ti doporučil background-position: center left; (na pořadí klíčových slov nezáleží, ale doporuřuji dodžet) nebo background-position: 0 50%; případně místo nuly můžeš použít jinou hodnotu třeba v px.
BioMike
Profil *
Nakonec jsem použil background-position: 0 50%;
Díky moc.

Nyní řeším jiný problém a nechci zbytečně spamovat fórum, takže to nejspíš napíšu zde. Jde o to, že mě se web zobrazuje správně v chromu, ale kámošovi ne. Nevíte jak to vyřešit? A další věc je, že fotografie po najetí myší se zvětší a přitom původním zámměrem bude, že zůstane ve stejné velikosti, ovšem jen se zoomne/přiblíží jakoby.

kubatko.eu/test
RastyAmateur
Profil
BioMike:
Našel jsem jen toto
BioMike
Profil *
Děkuji, ale bohužel to není to co bych potřeboval. Ono chtěl bych aby po najetí na obrázek zůstal stejný (měl stejný rozměr) jen svým způsobem se ve stejném rozměru trošku přiblížil.
Keeehi
Profil
Živá ukázka
Nebo by to mělo jít udělat v rámci jednoho elementu s obrázkem na pozadí.
BioMike
Profil *
Děkuji, vyřešeno a jsem rád, že to šlo ještě jednodušeji, než jsem si představoval. :)
Keeehi
Profil
Má to pár drobných chytáků. Záleží však na tom, které verze prohlížečů chceš ještě podporovat.
- IE 8 a méně nezná transform: scale(1.25), zato zná zoom: 1.25;
- IE 9 a méně nezná transition, asi by měl existovat polyfill ale v rychlosti jsem ni nenašel. Je už pak na tvém uvážení, zda je pro takový malý efekt nutné stahovat další javascript
- Firefox 3.6 a méně transition nezná, 4 - 15 ho zná jen s prefixem -moz-, tedy -moz-transition
- Chrome 4 - 25, Safari 3.1 - 6, iOS Safari a Chrome 3.2 - 6.1 a Android browser 2.1 - 4.3 znají transition jen s prefixem -webkit-, tedy -webkit-transition
- Opera mini a Opera 10 transition neznají a Opera 11.5 a Opera Mobile 12 ho znají jen s prefixem -o-, tedy -o-transition
Chamurappi
Profil
Reaguji na Keeehiho:
IE 8 a méně nezná transform
A v IE 9 je s prefixem -ms-. Ve starších webkitech je také s prefixem -webkit-, stejně jako transition.

zato zná zoom: 1.25;
Ten zná i webkit, na to se musí trochu dát pozor.
BioMike
Profil *
Dobrý večer,

bohužel měl sem radost z toho, že mě vše funguje jak má, ale dnes jsme zjistil, že někomu jinému nikoliv. Proto sem se vrátil zde na diskusi a koukám, že zde o daných háčkách píšete. Zkusím tedy použít vaše rady v praxi a otestovat funkčnost u pár lidí znovu. :)

Děkuji


Tak jsem použil tento zápis v CSS:

.nahledovy-obrazek img:hover {
  zoom: 1.25;
  transform-ms:scale(1.25);
  transform:scale(1.25);
  transform-moz-transition:scale(1.25);
  transform-webkit-transition:scale(1.25);
  transform-o-transition:scale(1.25);
}

Je to správně? :)

Dále: Po zoomnutí obrázku se vyjížděcí menu na nějaký čas vždy zobrazí pod obrázkem namísto přes něj.
Keeehi
Profil
BioMike:
Je to správně? :)
Málo co je tam správně. Důležité je udělat rozhodnutí, které verze prohlížečů chceš pro co podporovat. Pak se dá vymýšlet, jak to poskládat. Obecně největší problémy dělá explorer. Ostatní prohlížeče mají podporu dost dlouho alespoň s prefixy.


Po zoomnutí obrázku se vyjížděcí menu na nějaký čas vždy zobrazí pod obrázkem namísto přes něj.
Může to dělat ten zoom nebo transform. Dá se to řešit, nahradit to změnou šířky obrázku. Pak se zase musí k tomu ještě řešit centrování.

Takže může vypadat takto. Efekt skokového zvětšení by měl fungovat i v prehistorických prohlížečích. V prohlížečích s podporou transition (IE10+, FF4+, Chrome, Edge, Opera11+, ...) to nebude skokové, ale plynulé.
Bubák
Profil
BioMike:
Po zoomnutí obrázku se vyjížděcí menu na nějaký čas vždy zobrazí pod obrázkem namísto přes něj.
Zkusil jsem deklarovat pro .menu relativní pozici a z-index jsem dal 1000, ale určitě by stačilo méně a pomohlo to. Ale testoval jsem jen ve staré Opeře 12.17, mám však za to, že by to mohlo pomoci ve všech prohlížežích.
Obdobně je možné nastavit relativní pozici a z-index na -1.
BioMike
Profil *
Bubák:
Děkuji zabralo to kubatko.eu/test :)

Keeehi:
Nejlepší by samozřejmě bylo, aby to podporovali všechny prohlížeče nebo alespoň většina, pokud je to možné. :) Ten zápis, který tam teď mám totiž ten obrázek už nezoomuje tak dobře jak když sem tam měl předtím starý zápis, který podporoval nejspíš jen chrome.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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