Nefungují tlačítka menu

[Superior]

Nedaří se mi zprovoznit odkaz u animovaných tlačítek menu. Animace sice funguje, ale po najetí myší nereagují jako odkaz.

Zápis: <button style="position:relative; top: 100px; left: 100px; z-index:1;" href="gallery.php">GALERIE</button>

[Reklama]

[iTerminator]

Tlačítko nelze použít jako odkaz, tlačítko patří do formuláře.

Musíš si udělat odkaz a ten nastylovat jako button, tedy patřičnou výšku, šířku a zobrazení jako block, pak teprve budeš mít "tlačítkový" odkaz.

HTML :

Kód: Vybrat vše

<a href="#" class="odkaz">Text odkazu</a>

CSS :

Kód: Vybrat vše

<style>
.odkaz{display: block;width....}
</style>

Menší styl jsi si tam udělal, takže předpokládám, že to dostylovat zvládneš, pokud ne, tak napiš, něco s tím provedeme.

[Superior]

Díky za rady, ale pořád nevím jak na to...

PHP:

Kód: Vybrat vše

<div class="menu">
<button style="position:relative; top: 325px; left: 150px; z-index:1;" href="www">FOTOALBUM</button>
<button style="position:relative; top: 325px; left: 205px; z-index:1;" href="www">INFORMACE</button>
<button style="position:relative; top: 325px; left: 255px; z-index:1;" href="www">ODKAZY</button>
</div>

CSS:

Kód: Vybrat vše

div.menu{width: 100%; height: 80px; text-align: center; position: relative;}



div.menu button{
               border-radius: 100%;
               left: 50px;
               top: 50px;         
               position: relative;
               width: 100px;
               height: 100px;
               line-height:100px;
               text-align:center;
               background-color:#33CCCC;
               
               -webkit-transition: all 1s ease-in-out;
               -webkit-animation-name: animace;
                 -webkit-animation-duration: 2s;
                 -webkit-animation-iteration-count:1;
                 
                  -moz-transition: all 1s ease-in-out;
               -moz-animation-name: animace;
                 -moz-animation-duration: 2s;
                 -moz-animation-iteration-count:1;
                 
                 -o-transition: all 1s ease-in-out;
               -o-animation-name: animace;
                 -o-animation-duration: 2s;
                 -o-animation-iteration-count:1;}

div.menu button:hover{
               -webkit-transform: rotate(360deg) scale(1.5);
               -moz-transform: rotate(360deg) scale(1.5);
               -o-transform: rotate(360deg) scale(1.5);
               background:#22A45C;}

@-webkit-keyframes animace
             {       
                0%
                {
                      -webkit-transform: scale(0) rotate(0deg);
                   }           
                   100%
                   {
                      -webkit-transform: scale(1) rotate(360deg);
                  }
              }
              @-moz-keyframes animace
             {       
                0%
                {
                      -moz-transform: scale(0) rotate(0deg);
                   }           
                   100%
                   {
                      -moz-transform: scale(1) rotate(360deg);
                  }
              }
              @-o-keyframes animace
             {       
                0%
                {
                      -o-transform: scale(0) rotate(0deg);
                   }           
                   100%
                   {
                      -o-transform: scale(1) rotate(360deg);
                  }
              }

[iTerminator]

Uděláš si třídu, nastavíš ji display: block, to aby jí šly nastavit rozměry, následně ji nastavíš pozadí, animaci a další věci, které máš udělané k těm buttonům.

[Superior]

Díky, neměli byste někdo čas mi to napsat? Hlavně to CSS... Nevím jak nastavit ty animace apod.

[iTerminator]

Však v tom CSS už ty animace máš, jenom pro tu třídu v hover použiješ tu animaci.

[Superior]

Takže PHP teď vypadá takto:

Kód: Vybrat vše

<div class="menu">
 
<a href="www" class="button-link">FOTOALBUM</a>
<a href="www" class="button-link">INFORMACE</a>
<a href="www" class="button-link">ODKAZY</a> 

</div>

CSS:

Kód: Vybrat vše

div.menu{width: 100%; height: 80px; text-align: center; position: relative;}



div.menu button{
               border-radius: 100%;
               left: 50px;
               top: 50px;         
               position: relative;
               width: 100px;
               height: 100px;
               line-height:100px;
               text-align:center;
               background-color:#33CCCC;
               
               -webkit-transition: all 1s ease-in-out;
               -webkit-animation-name: animace;
                 -webkit-animation-duration: 2s;
                 -webkit-animation-iteration-count:1;
                 
                  -moz-transition: all 1s ease-in-out;
               -moz-animation-name: animace;
                 -moz-animation-duration: 2s;
                 -moz-animation-iteration-count:1;
                 
                 -o-transition: all 1s ease-in-out;
               -o-animation-name: animace;
                 -o-animation-duration: 2s;
                 -o-animation-iteration-count:1;}

div.menu button:hover{
               -webkit-transform: rotate(360deg) scale(1.5);
               -moz-transform: rotate(360deg) scale(1.5);
               -o-transform: rotate(360deg) scale(1.5);
               background:#22A45C;}

@-webkit-keyframes animace
             {       
                0%
                {
                      -webkit-transform: scale(0) rotate(0deg);
                   }           
                   100%
                   {
                      -webkit-transform: scale(1) rotate(360deg);
                  }
              }
              @-moz-keyframes animace
             {       
                0%
                {
                      -moz-transform: scale(0) rotate(0deg);
                   }           
                   100%
                   {
                      -moz-transform: scale(1) rotate(360deg);
                  }
              }
              @-o-keyframes animace
             {       
                0%
                {
                      -o-transform: scale(0) rotate(0deg);
                   }           
                   100%
                   {
                      -o-transform: scale(1) rotate(360deg);
                  }
              }




<style>
.button-link{display: block;
               border-radius: 100%;
               left: 50px;
               top: 50px;         
               position: relative;
               width: 100px;
               height: 100px;
               line-height:100px;
               text-align:center;
               background-color:#33CCCC;
               
               -webkit-transition: all 1s ease-in-out;
               -webkit-animation-name: animace;
                 -webkit-animation-duration: 2s;
                 -webkit-animation-iteration-count:1;
                 
                  -moz-transition: all 1s ease-in-out;
               -moz-animation-name: animace;
                 -moz-animation-duration: 2s;
                 -moz-animation-iteration-count:1;
                 
                 -o-transition: all 1s ease-in-out;
               -o-animation-name: animace;
                 -o-animation-duration: 2s;
                 -o-animation-iteration-count:1;}
.button-link:hover{
               -webkit-transform: rotate(360deg) scale(1.5);
               -moz-transform: rotate(360deg) scale(1.5);
               -o-transform: rotate(360deg) scale(1.5);
               background:#22A45C;}
</style>

Kde je chyba?

[iTerminator]

To čemu ti říkáš PHP je ve skutečnosti HTML, ale to je maličkost.

Pošli stránku, zobrazí se to/nezobrazí.

--- Doplnění předchozího příspěvku (21 Úno 2014 23:34) ---

Do soukromých zpráv neodpovídám, nechci to dělat zvykem, každopádně, chyba je v tom, že v css, v souboru Style.css máš <style>, což tam nepatří, přípona souboru už prohlížeči dá vědět o co se jedná.

Soubor Style.css

Kód: Vybrat vše

body{font-family: "Verdana"; font-size: 30px; color: #0038B8; background-color: #0038B8; background-image: url(../img/NÁZEV.PŘÍPONA); background-repeat: repeat-x; }

h1{color: #0038B8; font-size: 50px; text-align: center; border-top: 3px dashed black; border-bottom: 3px dashed black; letter-spacing: 5px;}
h2{color: black; font-size: 50px; text-align: center;}
h3{color: gray; text-align: center; font-weight: italic; font-size: 20px;}

div.zaklad{text-align: left; background-color: white; background-repeat: repeat-y; border-radius: 50px; padding: 0px; width: 1200px; margin: auto; border: 10px solid #FFC324;}
 
div.hlavicka{width: 1200px; height: 333px; background-image: url(../img/Head.png); position: relative; border-top-left-radius: 50px; border-top-right-radius: 50px;}
div.hlavicka img{position: absolute; left: 0px; top: 0px;}
div.menu{width: 100%; height: 80px; text-align: center; position: relative;}



div.menu button{
               border-radius: 100%;
               left: 50px;
               top: 50px;         
               position: relative;
               width: 100px;
               height: 100px;
               line-height:100px;
               text-align:center;
               background-color:#33CCCC;
               
               -webkit-transition: all 1s ease-in-out;
               -webkit-animation-name: animace;
                 -webkit-animation-duration: 2s;
                 -webkit-animation-iteration-count:1;
                 
                  -moz-transition: all 1s ease-in-out;
               -moz-animation-name: animace;
                 -moz-animation-duration: 2s;
                 -moz-animation-iteration-count:1;
                 
                 -o-transition: all 1s ease-in-out;
               -o-animation-name: animace;
                 -o-animation-duration: 2s;
                 -o-animation-iteration-count:1;}

div.menu button:hover{
               -webkit-transform: rotate(360deg) scale(1.5);
               -moz-transform: rotate(360deg) scale(1.5);
               -o-transform: rotate(360deg) scale(1.5);
               background:#22A45C;}

@-webkit-keyframes animace
             {       
                0%
                {
                      -webkit-transform: scale(0) rotate(0deg);
                   }           
                   100%
                   {
                      -webkit-transform: scale(1) rotate(360deg);
                  }
              }
              @-moz-keyframes animace
             {       
                0%
                {
                      -moz-transform: scale(0) rotate(0deg);
                   }           
                   100%
                   {
                      -moz-transform: scale(1) rotate(360deg);
                  }
              }
              @-o-keyframes animace
             {       
                0%
                {
                      -o-transform: scale(0) rotate(0deg);
                   }           
                   100%
                   {
                      -o-transform: scale(1) rotate(360deg);
                  }
              }




.button-link{display: block;
               border-radius: 100%;
               left: 50px;
               top: 50px;         
               position: relative;
               width: 100px;
               height: 100px;
               line-height:100px;
               text-align:center;
               background-color:#33CCCC;
               
               -webkit-transition: all 1s ease-in-out;
               -webkit-animation-name: animace;
                 -webkit-animation-duration: 2s;
                 -webkit-animation-iteration-count:1;
                 
                  -moz-transition: all 1s ease-in-out;
               -moz-animation-name: animace;
                 -moz-animation-duration: 2s;
                 -moz-animation-iteration-count:1;
                 
                 -o-transition: all 1s ease-in-out;
               -o-animation-name: animace;
                 -o-animation-duration: 2s;
                 -o-animation-iteration-count:1;}
.button-link:hover{
               -webkit-transform: rotate(360deg) scale(1.5);
               -moz-transform: rotate(360deg) scale(1.5);
               -o-transform: rotate(360deg) scale(1.5);
               background:#22A45C;}






div.gold{width: 100%; height: 80px; background-color: #FFC324; text-align: center; position: relative;}
div.center{text-align: center}
div.admin{color: white; text-align: center; background-color: #5C5F64; padding: 0px; width: 1200px; margin: auto;} td{backgroud-color: #5C5F64; padding: 10px; border: 0px white; color: gray; font-size: 20px} table{margin:auto; border-collapse: collapse;}

div.galerie{border: none; width: 1200px; text-align: center;}
div.galerie a{border: 10px solid #FFC324; font-size: 0px; display: inline-block; margin: 0px; box-shadow: 0px 0px 0px white; border-radius: 0px;}
div.galerie a:hover{box-shadow: 0px 0px 0px white; border: 10px solid #5C5F64;}
div.galerie img{margin: 10px; border: 0px solid white}
div.galerie a img{border-radius: 5px;}

a.fotoalbum{position: absolute; left: 0px; background-image: url(../menu/A.jpg); width: 400px; height: 80px; display: block; float: left;}
a.fotoalbum:hover{background-image: url(../menu/AA.jpg);}
a.uvod{position: absolute; left: 400px; background-image: url(../menu/B.jpg); width: 400px; height: 80px; display: block; float: left;}
a.uvod:hover{background-image: url(../menu/BB.jpg);}
a.odkazy{position: absolute; left: 800px; background-image: url(../menu/C.jpg); width: 400px; height: 80px; display: block; float: left;}
a.odkazy:hover{background-image: url(../menu/CC.jpg);}

ul{color: #EB1551; font-weight: bold; list-style-image: url(../img/point.png);}
ul ul{font-weight: italic}

Tohle je obsah souboru style.css, tak si to uprav.

[Superior]

Díky!!! Už to funguje... Ještě k tomu bych potřeboval vědět jednu věc - když chci mít potom na stránce odkazy, stylují se automaticky stejně jako tlačítka menu - jak jim nastavit vlastnosti zvlášť?

[iTerminator]

Normálně, uděláš si bud další třídu a tu použiješ pro jeden odkaz, nebo prostě přihodíš atribut style a tam to vše hodíš, jestli jsem tě správně pochopil.

[Superior]

Ještě jednou díky za pomoc!

[iTerminator]

Pošli finální ukázku, rád se mrknu, co jsem ti vlastně pomohl splácat .