Dvě tlačítka vedle sebe, ale aby mělo každé jinou barvu – CSS – Fórum – Programujte.com

Ahoj,

 pomocí CSS jsem si udělal nahoře na stránce dvě tlačítka. No problem. Vše mi fungovalo, ale potřeboval bych, aby měli každé jinou barvu. A to už jsem v koncích. Nevím jak na to. Když je to jako jedna řada tlačítek "ul, li", tak to podle mě nejde-změnit barvu každému. Tak jsem si zkoušel udělat dvě tlačítka vedle sebe. Jedno jsem nazval zahlavi1 a druhé zahlavi2 (popisuji zde jen jedno, jsou skoro stejné až na souřadnice) :

ul#zahlavi1 {
     position: relative;
      left: 0px; top:0px;
    width: 1600px; 
    float: left;
    clear:both;   
    margin: 0 0 0px 0;  /*posunování tlačítek (nahoru i dolu) */
     padding: 0px 0px;
    list-style-type: none;
    border: solid rgb(255,255,255); /* barva čar (nahoře a dole) */
       border-width: 1px 0;  /*tlouštka rámu (nahoře a dole) */
}
ul#zahlavi1 li {
    width: 25%;
    float: left;
   
  background: #726e00; /* barva tlačítek */
    font-weight: bold;
    text-align:center;
  
}
ul#zahlavi1 li  a {
       display: block;
    padding: 25px 0;    /* výška tlačítek */
    border-right: 1px solid #ece300; /* tlouška a barva mezery mezi tlačítky */
    text-decoration: none;
    
       color: rgb(255,255,255)    /* barva písma (bez najetí myši) */
}
ul#zahlavi1 li.posledni a {   /*určuje poslední tlačítko v seznamu*/
    border-right: none;

}
ul#zahlavi1 li a:hover {
    background:  rgb(255,255,255);  /* barva pozadí tlačítek při najetí myší*/
     color: rgb(0,0,0)   /* barva písma po najetí myši */
}

Jenže, když si je pomocí positon a left či right vycentruji, tak to druhé tlačítko (zahlavi2) nevím proč překryje svou funkcí to první. Tlačítko vlevo je tedy vidět, ale nejde na ně klikat. Už nevím co s tím...

děkuji za radu

Otisberg

Děkuji moc. Funguje to! Ale ještě nastal znenadání jeden problém. Všiml jsem si ho až ted a vůbec nevím čím to je.

Hned pod těmito dvěma tlačítky mám další menu, které má další vyskakovací položky (směrem dolů).

Problém je, že když najedu na tlačítko, tak by se mělo dolů vysunout (v tomto případě třeba další 3 tlačítka) další menu.

Jenže když najíždím, tak někdy se vysune, někdy se nevysune...zkoušel jsem si hrát s position:absolute -relative.

Pokud je menu relative, tak to funguje krásně, ale zase se posunuje celá stránka a vypadá to hrozně. :-(

kod:

	#menu ul {
      width: 800px;      /* šířka tlačítek */
       float: left;
	    clear:both;                        
  	   margin: 0 0 20px 0; 
  	    padding: 0;     
	   list-style-type: none; 
	   border-top: 2px solid #fc6500; /*barva a tlouštka vrchní linky */
	   border-bottom: 2px solid #fc6500;   /*barva a tlouštka spodní linky */
    }               
	#menu ul li {
       float: left;
	   width: 25%;
	   position: relative;     
   	   background: #bcb500;
	   font-weight: bold;
	   text-align: center; 
	}
	#menu ul li ul li {
	   width: 200px;      /* tlouška vysouvacích tlačítek */
	   float: left;
	} 
	#menu ul ul {
		width: 35%;
		position: absolute;    
		left: 0px; top: 2.2em;    /*posunování vysouvací nabídky vlevo nebo vpravo, nahoru a dolu */
		visibility: hidden;  
	    font-size: 90%;
		border: none;
	}
	#menu ul li:hover ul {
    position: absolute;
   /* position: relative;  */
		visibility: visible;
	}
	#menu ul li	a {
       display: block;
	   padding: 5px 0;                        /*výška tlačítek */   
	   border-right: 1px solid rgb(255,102,51);       /* tlouška a barva mezi tlačítky */
	   text-decoration: none;
  	   color:rgb(255,255,255);              /* barva písma */
	}
	#menu ul li.posledni a, #menu ul li	ul li a {
	   border-right: none; 
	}
	#menu ul li a:hover {
	   background:rgb(255,102,51);     /* barva tlačítka po kliknutí */
	}  

#3 Otisberg
Tak ukaž i html kód, koukám že že tam máš i vnořené seznamy. Nebo pošli odkaz, jestli to máš někde online.

No pořád to zkouším, ale jak píšu už předtím: Někdy to funguje, někdy ne. Nechápu.    při najetí na 1.ODKAZ se má dolů rozrovolat 1 až4.odkaz. A chvilku to jde a chvilku ne. Nechápu.

On-line to nemám.

Takže html vypadá takto:

 <div id="menu">
    <ul>
      <li><a href="#">1.ODKAZ</a>
        <ul>
          <li><a href="#">1.odkaz</a></li>
          <li><a href="#">2.odkaz</a></li>
          <li><a href="#">3.odkaz</a></li>
        </ul>
      </li>
      <li><a href="#">2.ODKAZ</a>
        <ul>
         <li><a href="#">1.odkaz</a></li>
         <li><a href="#">2.odkaz</a></li>
         <li><a href="#">3.odkaz</a></li>
         <li><a href="#">4.odkaz</a></li>
        </ul>
      </li>
    <li><a href="#">3.ODKAZ</a></li>
    <li class="posledni"><a href="#">4.ODKAZ</a></li>
    </ul> 
    </div>

No a ještě k tomu předchozímu problému. Dvě tlačítka mám vedle sebe. Každé má jinou barvu. Všiml jsem si, že jsi tam přidal akorát:

ul li:first-child a {
ul li:last-child a {
 

Tal jsem zkusil ještě přidat sem toto:

ul#zahlavi1 li:first-child a:hover

background:  rgb(255,255,255);

ul#zahlavi1 li:last-child a:hover {
    background:  rgb(255,255,255);

  aby se měnily barvy tlačítek i při najetí myši.

Ale jde mi to pouze v Mozille. Tam je to krásně vidět a vše funguje, ale Explorer to nějak nebere. Tedy aspon to druhé tlačítko. Vůbec nemění barvy a nereaguje  . to je hrozná práce to CSS, že?   

#6 Otisberg
Ne, CSS je sranda, jen je tomu třeba věnovat čas, když se naučíš většinu vlastností tak to jde krásně od ruky. 

No nejsem si jist, ale :last-child asi není součástí CSS 2, musel by sis to dohledat, takže je možné že ji starší verze IE nepodporují, IE9 určitě ano, to mam odzkoušené. 

Jinak k tvým problémům, pošli mi zdrojové kódy na e-mail, který mam uvedený v profilu. Podívám se ti na to a pomůžu ti s tím, pak sem popřípadě dáme jen řešení, aby to tu zůstalo přehledné.