Anonymní profil Otisberg – Programujte.com

Ahoj,

   mám takový menší problém. Vše mi funguje, až na jednu věc. Mám na stránce nějaké obrázky. Jsou zarovnány takto (vlevo):

	img{
  float: left;                         /* zarovnání obrázků */
  border: 2px solid rgb(0,102,0);      /* síla a barva rámečku okolo obrázků */
/*  	margin: 14px 10px 0 10px;   */
  }

Takto jsem docílil toho, že je i mezi obrázky je text a ne že je obrázek, vedle něj nic a potom zase text.

Jenomže když kliknu na menší obrázek v textu (náhled) tak se mi zvětší. Ale tento zvětšený obrázek je také zarovnán doleva. A to nechci. Chci aby velký obrázek byl zarovnán uprostřed, tak jak je to zvykem. Za obrázkem je lightbox (tma) a text kliknutím zavřete, který je v pořádku zarovnán na střed pomocí: text-align: center;

Kod css:

	  	div.lb {                /* vlastnosti lightboxu(tmy) */
	
    display: none;   
		height: 100%;      
		width: 100%;        
		position: absolute; 
		top: 0;  
		left: 0;
		right: 0;  
		bottom: 0;  
		text-align: center;
		
		padding-top: 30px;
		background: url(obr/lightbox.png);
	
	}
	div.lb:target {
     		display: block;
	}
	
	div.lb span {             /* vlastnosti nápisu vedle velkého obrázku */
		
		padding: 3px 100px;    
		background: #FFF;
		color: #ff6600;
		font-weight: bold; 
		}
		
		
	div.lb img {
		border: 8px solid #FFF;         /* síla a barva rámečku okolo velkých obrázků */
	  float: center;
  }

kod, kterým v html obrázky volám:

  <p>  <a href="#lightbox1"><img src="foto/01-nahled.jpg" alt="náhled" /></a> </p>  
   
      
   <div id="lightbox1" class="lb"> 
   <a href="#"><img src="foto/01.jpg" alt="detail v lightboxu"/><br /><span>kliknutím zavřete</span></a>
   </div> 

Jako laik jsem myslel, že zadám u menších obrázků float: left a u větších float: center. Ale to mi nějak nefunguje 

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?   

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>

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í */
	}  

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