Dvě tlačítka vedle sebe, ale aby mělo každé jinou barvu – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

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

 

Toto vlákno bylo označeno za vyřešené — příspěvek s řešením.
Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Otisberg
~ Anonymní uživatel
4 příspěvky
13. 8. 2011   #1
-
0
-

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

Nahlásit jako SPAM
IP: 89.102.96.–
Reklama
Reklama
Řešení
Bryant
~ Moderátor
0
Stálý člen
13. 8. 2011   #2
-
0
-
Vyřešeno Nejlepší odpověď

Úplně jsem nepochopil tvůj záměr, ty máš dva odkazy a chceš aby měl každý jinou barvu pozadí? Jestli ano, tak jsem ti to trochu upravil a domyslel si html :

ul {
  position: relative;
  left: 0px;
  top: 0px;
  width: 1600px;
  float: left;
  clear: both;
  margin: 0 0 0px 0;
  padding: 0px 0px;
  list-style-type: none;
  border: solid rgb(255,255,255);
  border-width: 1px 0;
}
ul li {
  width: 25%;
  float: left;
  background: #726e00;
  font-weight: bold;
  text-align: center;
}
ul li a {
  display: block;
  padding: 25px 0;
  border-right: 1px solid #ece300;
  text-decoration: none;
  color: rgb(255,255,255);
}
ul li:first-child a {
  background: #00ffff;
  border-right: none;
}
ul li:last-child a {
  background: #ffff00;
  border-right: none;
}
ul li a:hover {
  background: rgb(255,255,255);
  color: rgb(0,0,0);
}
<ul>
  <li><a href="#">Odkaz 1</a></li>
  <li><a href="#">Odkaz 2</a></li>
</ul>
Nahlásit jako SPAM
IP: 46.13.31.–
„Bez činu zůstává i nejkrásnější myšlenka bezcennou.“
— Móhandás Karamčand Gándhí
Otisberg
~ Anonymní uživatel
4 příspěvky
13. 8. 2011   #3
-
0
-

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í */
	}  
Nahlásit jako SPAM
IP: 89.102.96.–
Bryant
~ Moderátor
0
Stálý člen
13. 8. 2011   #4
-
0
-

#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.

Nahlásit jako SPAM
IP: 46.13.31.–
„Bez činu zůstává i nejkrásnější myšlenka bezcennou.“
— Móhandás Karamčand Gándhí
Otisberg
~ Anonymní uživatel
4 příspěvky
13. 8. 2011   #5
-
0
-

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>
Nahlásit jako SPAM
IP: 89.102.96.–
Otisberg
~ Anonymní uživatel
4 příspěvky
13. 8. 2011   #6
-
0
-

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?   

Nahlásit jako SPAM
IP: 89.102.96.–
Bryant
~ Moderátor
0
Stálý člen
13. 8. 2011   #7
-
0
-

#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é.

Nahlásit jako SPAM
IP: 46.13.31.–
„Bez činu zůstává i nejkrásnější myšlenka bezcennou.“
— Móhandás Karamčand Gándhí
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 12 hostů

Podobná vlákna

Dve cisla vedle sebe — založil Adam

Kazdy druhy radek ma jinou barvu — založil Anonymní uživatel

Fotky vedle sebe — založil Onsi

Tři divy vedle sebe — založil Chiquita_CZ

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý