Zarovnání obrázků (malých a velkých) – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Zarovnání  obrázků (malých a velkých) – CSS – Fórum – Programujte.comZarovnání obrázků (malých a velkých) – 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)
jukle
~ Anonymní uživatel
1 příspěvek
23. 8. 2011   #1
-
0
-

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 

Nahlásit jako SPAM
IP: 89.102.96.–
Reklama
Reklama
Řešení
null_while
~ Moderátor
+6
Věrný člen
23. 8. 2011   #2
-
0
-
Vyřešeno Nejlepší odpověď

Chyba je v tom, že zápis, který používáš Ti ovlivní všechny obrázky na stránce, nehledě na to, zda-li je lightbox dál styluje. Všechny zarovnáváš pomocí float vlevo. Použij identifikátor pro každý obrázek zvlášť nebo ještě lépe třídy, které můžeš v dokumentu opakovat.

Řešení: 

K odstavci p, kde chceš zarovnávat obrázek stačí vytvořit třídy: 

.left img {
  float: left;
}
.right img {
  float: right;
}
.center img {
  margin: 0px auto;
  text-align: center;
}

nebo inline stylem jako atribut k tagu img:

style='text-align: center;'
style='float: left;'
style='float: right;'

a potom to můžeš aplikovat: 
 

 <p class="left">  <a href="#lightbox1"><img src="foto/01-nahled.jpg" alt="náhled" /></a> </p>  
   

nebo
 

<a href="#lightbox1"><img style="float: left;" src="foto/01-nahled.jpg" alt="náhled" /></a> </p>  

<a href="#lightbox1"><img style="float: right;" src="foto/01-nahled.jpg" alt="náhled" /></a> </p>  

<a href="#lightbox1"><img style="text-align: center;" src="foto/01-nahled.jpg" alt="náhled" /></a> </p>  
Nahlásit jako SPAM
IP: 84.16.103.–
Webnia.cz - tvorba webových stránek
null_while
~ Moderátor
+6
Věrný člen
23. 8. 2011   #3
-
0
-

Třídy můžeš samozřejmě vytvořit rovnou i k obrázkům potom by si musel upravit kód CSS takto: 

.left {
  float: left;
}
.right {
  float: right;
}
.center {
  margin: 0px auto;
  text-align: center

a třídy vkládat jako nový atribut rovnou k tagu img:

<a href="#lightbox1"><img class="left" src="foto/01-nahled.jpg" alt="náhled" /></a> </p>
Nahlásit jako SPAM
IP: 84.16.103.–
Webnia.cz - tvorba webových stránek
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, 13 hostů

 

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