"disattivare" un css su una determinata immagine

[metejordy]

Ciao! Sto ultimando in questi giorni un sito in CSS/XHTML e mi sono reso conto di avere un problema. Questa è la parte dello stylesheet interessata:

img {
	padding: 5px;
	border: 1px solid #ccc;
	margin: 2px; }
a img {
	padding: 5px;
	border: 1px solid #ccc;
	margin: 2px; }
a img:hover { 
	border-color: #2B3690; }

Il codice va benissimo e funziona. Solo che ci sono all'interno della pagina, alcune immagini-link, che vorrei che non rispettassero questo CSS, e che quindi non assumano il margine.

Esiste un tag, un html, un altro css, o un qualsiasi altro codice per "disabilitare" questo CSS solo nelle aree della pagina che stabilisco io?

Grazie in anticipo,

Metello

[Gufo]

Originariamente inviato da metejordy
Ciao! Sto ultimando in questi giorni un sito in CSS/XHTML e mi sono reso conto di avere un problema. Questa è la parte dello stylesheet interessata:

img {
	padding: 5px;
	border: 1px solid #ccc;
	margin: 2px; }
a img {
	padding: 5px;
	border: 1px solid #ccc;
	margin: 2px; }
a img:hover { 
	border-color: #2B3690; }

Il codice va benissimo e funziona. Solo che ci sono all'interno della pagina, alcune immagini-link, che vorrei che non rispettassero questo CSS, e che quindi non assumano il margine.

Esiste un tag, un html, un altro css, o un qualsiasi altro codice per "disabilitare" questo CSS solo nelle aree della pagina che stabilisco io?

Grazie in anticipo,

Metello

Definisci una classe e la applichi alle immagini che vuoi formattare diversamente, avendo la cortezza di mettere nel foglio di stile la classe dopo la formattazione generale delle immagini

[metejordy]

Grazie mille. Ora funziona.

Approfitto per fare un'altra domanda sullo stesso argomento.

In questa pagina, è presente quel CSS di cui stavo parlando prima, solo che quando si aprono le immagini con slimbox, questo margine non appare. In pratica il margine c'è nella pagina, ma non nella schermata del javascript. Non so se mi spiego...

Come posso fare a rimuove il margine nell'immagine solo quando lo apro con slimbox/lightbox?

[Gufo]

Originariamente inviato da metejordy
Grazie mille. Ora funziona.

Approfitto per fare un'altra domanda sullo stesso argomento.

In questa pagina, è presente quel CSS di cui stavo parlando prima, solo che quando si aprono le immagini con slimbox, questo margine non appare. In pratica il margine c'è nella pagina, ma non nella schermata del javascript. Non so se mi spiego...

Come posso fare a rimuove il margine nell'immagine solo quando lo apro con slimbox/lightbox?

Lightbox usa un css suo devi intervenire su quello non nel tuo

[metejordy]

Capisco... ma mi sapresti dire esattamente cosa modificare? Qualsiasi cosa aggiunga mi invalida il codice. Questo è il CSS:

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/lightbox/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

[metejordy]

Per capire meglio di cosa sto parlando guardate questa pagina. Le immagini della pagina hanno un bordo che al passaggio del mouse cambia colore (a img:hover), però quando ci clicchi sopra e le immagini vengono mostrate con lighbox, il bordo non c'è!

Io se uso lightbox sulle mie pagine con il css "a img / a: img:hover", la finestra di lighbox si deforma in un modo strano per far spazio al margine...

Come fare?