Autor Zpráva
Petr Dvořák
Profil
#1 · Zasláno: 29. 9. 2014, 13:38:33
Odpovědět Citovat
Zdravím, zajímalo by mě proč mi nefunguje v navigaci hover{background-color:black;}. Předem vám děkuji za odpověď.

HTML:


<
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <link href="styl.css" rel="stylesheet" type="text/css"/>
  <title></title>
  </head>
  <body>
  <div id="obdelnik">
    
  <div id="hlavicka">
  </div>
  <div id="navigace">              
    <div id="lista"><a href= "#">AHOJ</a></div>
    <div id="lista1"><a href= "#">AHOJ</a></div> 
    <div id="lista2"><a href= "#">AHOJ</a></div> 
    <div id="lista3"><a href= "#">AHOJ</a></div> 
    <div id="lista4"><a href= "#">AHOJ</a></div> 
  </div>
  </div>
 
  
  
  
  

  </body>
</html



CSS: 


body
{
background-image:URL("skolka2.jpg");
background-repeat:repeat-y;
background-attachment: scroll;
background-position: center;
}

#obdelnik
{
   width: 1000px;
   height: 1250px;
   background: white;
   border: 10px solid whhite;
   margin-left: auto;
   margin-right: auto;
   filter: alpha(opacity=50);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
     
    
}

#hlavicka

{
  
   width: 1000px;
   height: 300px;
   background-image: url("hlavicka.gif");
   background-repeat: no-repeat;
   background-position: 50px;
     filter: alpha(opacity=50);
    -moz-opacity: 1.0;
    -khtml-opacity: 1.0;
    opacity: 1.0;
}

#navigace
a {text-decoration:none;}
a:hover{color: black;}
.lista:hover{background-color: black;}

    
#lista   
{  
   width: 200px;
   height: 50px;
   background: #FCFA09;
   float:left;
   font-size: 20px;
   text-align: center;
     vertical-align: middle;
     line-height: 50px;
     font-family: Comic Sans MS;
     text-decoration: none;

}    

#lista1
{  
   width: 200px;
   height: 50px;
   background: #97CA01;
   float:left;
   font-size: 20px;
   text-align: center;
     vertical-align: middle;
     line-height: 50px;
     font-family: Comic Sans MS;
}


#lista2
{  
   width: 200px;
   height: 50px;
   background: #FF0305 ;
   float:left;
   font-size: 20px;
   text-align: center;
     vertical-align: middle;
     line-height: 50px;
     font-family: Comic Sans MS;
}

#lista3
{  
   width: 200px;
   height: 50px;
   background: #FF9C02 ;
   float:left;
   font-size: 20px;
   text-align: center;
     vertical-align: middle;
     line-height: 50px;
     font-family: Comic Sans MS;
    
   
}

#lista4
{  
   width: 200px;
   height: 50px;
   background: pink;
   float:left;
   font-size: 20px;
   text-align: center;
     vertical-align: middle;
     line-height: 50px;
     font-family: Comic Sans MS;
     
   
}
juriad
Profil
#2 · Zasláno: 29. 9. 2014, 13:40:13
Odpovědět Citovat
Protože žádný element nemá třídu lista. Vše jsou id-ečka.
Petr Dvořák
Profil
#3 · Zasláno: 29. 9. 2014, 14:32:24
Odpovědět Citovat
Můžeš mi to prosím nějak víc rozvést? co bych měl v tom kódu udělat?
Bubák
Profil
#4 · Zasláno: 29. 9. 2014, 14:49:13
Odpovědět Citovat
Petr Dvořák:
„co bych měl v tom kódu udělat?“
Přiznám se, že mi z tvého kódu jení zřejmé, čeho chceš dosáhnout.
Proč #lista nemění barvu pozadí, má (nejmíň) tři důvody, ale myslím si, že tvým přáním není měnit barvu pozadí elementu #lista.

Inspiruj se třeba tady:
http://teststranek.kvalitne.cz/menu6/
Nepoužívej zbytečně příliš silné selektory, jako třebas idéčka pro každý odkaz, pokud chceš mít menu zbarvené jako na pouti, vystačíš si s třídami.
Marschmallow
Profil
#5 · Zasláno: 29. 9. 2014, 16:01:07
Odpovědět Citovat
Petr Dvořák:
Takhle by to mělo fungovat Živá ukázka. Měl jsi tam prohozené div class a div id.

1.) Když máš deklaraci <div id="tohlejediv"></div>, tak v CSS uvádíš #tohlejediv {}.
2.) Když máš deklaraci <div class="tohlejetrida"></div, tak v CSS uvádíš .tohlejediv {}.
U DIVu je v CSS na začátku mřížka "#" (Windows zkratka: CTRL+ALT+X). U CLASSu je v CSS na začátku tečka ".".
Bubák
Profil
#6 · Zasláno: 29. 9. 2014, 16:35:13
Odpovědět Citovat
Marschmallow:
„Takhle by to mělo fungovat Živá ukázka.“
Klikací plocha je mnohem menší, než plocha, na které dochází k hoveru, to je velmi matoucí.

„Windows zkratka: CTRL+ALT+X“
To platí pro levý Alt, já osobně používám pravý Alt + X.

Petr Dvořák:
Nevím, proč při hoveru nastavuješ odkazům černý text a černé pozadí, něco takového se (nekorektně) označuje jako černoši v tunelu.
CSS pro menu jde napsat poněkud přehledněji a úsporněji, koukni na:
http://kod.djpw.cz/bagb
http://kod.djpw.cz/bagb-
Petr Dvořák
Profil
#7 · Zasláno: 29. 9. 2014, 16:47:44
Odpovědět Citovat
Už jsem si s tím poradil. Každopádně děkuji za pomoc.
mimochodec
Profil
#8 · Zasláno: 29. 9. 2014, 16:56:52
Odpovědět Citovat
Bubák:
Pane Bubák, nepoužívejte prosím v příkladech ten Comic Sans, lidi nám to potom používají na internetech. Děkuji.
Bubák
Profil
#9 · Zasláno: 29. 9. 2014, 17:06:56
Odpovědět Citovat
mimochodec:
K pouťově zbarvenému menu se Comic Sans hodí ;-)

Petr Dvořák:
„Už jsem si s tím poradil.“
A jak?
Petr Dvořák
Profil
#10 · Zasláno: 29. 9. 2014, 17:30:43 · Upravil/a: Petr Dvořák o minutu později
Odpovědět Citovat
Zatím si s tím hraju, takže to není konečná fáze. Jedná se o stránky pro mateřskou školku,a protože mají barevné logo a v něm použitý comic sans, proto jsem zachoval tento styl :-)

HTML: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <link href="styl.css" rel="stylesheet" type="text/css"/>
  <title></title>
  </head>
  <body>
  <div id="obdelnik">
    
  <div id="hlavicka">
  </div>
  <div id="lista">
  
  <div class="menuItem1"><a href="#"><b>AHOJ</b></a></div>
  <div class="menuItem2"><a href="#"><b>AHOJ</b></a></div>
  <div class="menuItem3"><a href="#"><b>AHOJ</b></a></div>
  <div class="menuItem4"><a href="#"><b>AHOJ</b></a></div>
  <div class="menuItem5"><a href="#"><b>AHOJ</b></a></div>           

   
  </div>
  </div>
 
  
  
  
  

  </body>
</html>


CSS: 

body
{
background-image:URL("skolka2.jpg");
background-repeat:repeat-y;
background-attachment: scroll;
background-position: center;
}

#obdelnik
{
   width: 1004px;
   height: 1250px;
   background: white;
   border: 10px solid whhite;
   margin-left: auto;
   margin-right: auto;
   filter: alpha(opacity=50);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
     
    
}

#hlavicka

{
  
   width: 1005px;
   height: 300px;
   background-image: url("hlavicka.gif");
   background-repeat: no-repeat;
   background-position: 50px;
     filter: alpha(opacity=50);
    -moz-opacity: 1.0;
    -khtml-opacity: 1.0;
    opacity: 1.0;
    border-bottom: 3px solid;
}
    
#lista   
{  
   width: 1004px;
   height: 50px;
   background: white;
   float:left;
   font-size: 20px;
   text-align: center;
     vertical-align: middle;
     line-height: 50px;
     font-family: Comic Sans MS;
}

.menuItem1{border-right: 1px solid;  width:200px;height:50px; float: left;}
.menuItem1:hover{background-color: #FCFA09;}
.menuItem2{border-right: 1px solid;width:200px;height:50px; float: left;}
.menuItem2:hover{background-color: #97CA01;}
.menuItem3{border-right: 1px solid;width:200px;height:50px; float: left;}
.menuItem3:hover{background-color: #FF0305;}
.menuItem4{border-right: 1px solid;width:200px;height:50px; float: left;}
.menuItem4:hover{background-color: #FF9C02;}
.menuItem5{width:200px;height:50px; float: left;}
.menuItem5:hover{background-color:pink;}

a {text-decoration: none;}

#lista a {color: black;}
Časová prodleva: 10 let

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0