[CSS] bordo intorno a miniature e shadowbox

claudio82clod · 17-09-2009, 10:57

Sono un principiante del CSS, sto lavorando su questa pagina

http://www.mondoviphoto.com/photogallery.html

in cui sto provando ad usare shadowbox e pare funzioni.

Unico problema intorno alle miniature mi si crea quel bordo blu quando visualizzo il sito con IE7. In IE8 e firefox non si vede.
Avete idea da dove possa saltare fuori?

Altra domanda come faccio ad affiancare le due o più miniature senza che il div contenuto si riduca automaticamente?

Questo l'html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META name="description" content="Sito web dell' Associazione fotografica Mondovì Photo o Mondovì Foto">
<META name="keywords" content="mondovì, foto, photo, concoro, concorsi fotografici, associazione, fotografica, associazione fotografica, cuneo, piemonte">
<title>Associazione Fotografica Mondovì Photo</title>
<link href="css/globalrossigrigi.css" rel="stylesheet" type="text/css" TITLE="Contemporary">

<link rel="stylesheet" type="text/css" href="shadowbox-build-3.0b/shadowbox.css" TITLE="Contemporary">
<script type="text/javascript" src="shadowbox-build-3.0b/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
</head>

<body>
<div id="spazioalto"></div>
<div id="container">
<div id="header">
<div id="logo"><img src="immagini/logobianco.gif" width="246" height="105" alt="logo" /></div>
<div id="trafiletto"></div>
<div id="spazioDXpulsanti"></div>
<div id="pulsanti">
<div id="spaziosoprapulsanti"></div>
<div id="linkhome"><a href="index.html">Home</a></div>
<div id="linkchisiamo"><a href="chisiamo.html">Chi siamo</a></div>
<div id="linkdovesiamo"><a href="dovesiamo.html">Dove Siamo</a></div>
<div id="linkconcorsi"><a href="concorsi.html">Concorsi</a></div>
<div id="linkphoto"><a href="photogallery.html">Photo Gallery</a></div>
</div>
</div>
<div id="colonnasinistra">
<div id="collegamentocolonna">
<a href="concorsi.html">16/09/09 20.45<br />
Grazie a tutti i partecipanti per la fiducia dimostrataci...</a>
</div>
<div id="collegamentocolonna"><a href="concorsi.html">15/09/09 20.38<br />Grande successo del concorso fotografico Ritratto Monregalese...</a></div>
</div>
<div id="contenuto">
<div id="immagine"></div>
<p>PAGINA IN COSTRUZIONE </p>
<p>PROVA SHADOWBOX </p>
<div id="immaginishadowbox"><a href="immagini/grandi/garzette.jpg" rel="shadowbox"><img src="immagini/miniature/garzette.jpg" width="240" height="161" alt="Garzette" /></a></div>
<div id="immaginishadowbox"><a href="immagini/grandi/nebbia.jpg" rel="shadowbox"><img src="immagini/miniature/nebbia.jpg" width="240" height="161" alt="Garzette" /></a></div>
</div>
<div id="piepagina">
<p>Associazione Fotografica Mondovì Photo © 2009 Tutti i diritti sono riservati.</p>
<a href="mailto:[email protected]">[email protected]</a>
</div>
</div>
</body>
</html>

E questo il foglio di stile CSS

@charset "utf-8";
/* CSS Document */

html,body{margin: 0;padding:0}
body{
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
text-align: left;
background-color: #000;
}
#contenuto p {
color: #FFF;
}

p {
margin: 0px;
padding: 0.6em;
}

#container{
width: 800px;
text-align: left;
border: thin solid #FFF;
background-color: #333;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

#trafiletto {
background-color: #E73F3A;
height: 5px;
}

#pulsanti {
background-color: #999;
height: 2.2em;
}

#spazioalto {
height: 10px;
}
#collegamentocolonna {
font-size: 0.8em;
font-style: italic;
padding: 5px;
}

a {
color: #B81B16;
text-decoration: none;
font-weight: bold;
}

A:HOVER {
color : #fe2501;
}

A:ACTIVE {
color : #fe2501;
text-decoration: underline
}

#spaziosoprapulsanti {
height: 0.4em;
}

#colonnasinistra {
width: 13em;
float: left;
}
#piepagina a {
color: #00F;
font-weight: normal;
text-decoration: none;
}

#header{
background-color:#333;
color: #FFF
}
#contenuto {
background-color: #1e1e1e;
margin-left: 13em;
}
#immagine {
float: right;
}

#spazioDXpulsanti {
background-color: #999;
float: left;
width: 13em;
height: 2.2em;
}

#piepagina {
background-color: #E73F3A;
clear: left;
text-align: center;
}

#logo {
text-align: center;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 12px;
padding-left: 6px;
}
#linkhome {
width: 8em;
float: left;
}

#linkchisiamo {
width: 8em;
float: left;
}

#linkdovesiamo {
width: 8em;
float: left;
}

#linkconcorsi {
width: 8em;
float: left;
}
#contenuto a {
padding: 0.6em;
}

#linkphoto {
width: 8em;
float: left;
}

#collegamentocolonna A:HOVER {
color : #fe2501;
}

#collegamentocolonna A:ACTIVE {
color : #fe2501;
text-decoration: underline
}
#titolocontenuto {
color: #FFF;
font-size: 1.2em;
font-weight: bold;
padding: 0.3em;
}

#immaginishadowbox {
}
#immaginishadowbox a {
}

#immaginishadowbox a:hover {
}

#immaginishadowbox a:link {
}

17-09-2009, 20:04

Se le immagini sono linkate prova semplicemente ad indicare:

Codice:

img {
border:0;
}

per togliere il riquadro blu dalle stesse.

17-09-2009, 20:04	#2
anonimizzato Messaggi: n/a	Se le immagini sono linkate prova semplicemente ad indicare: Codice: img { border:0; } per togliere il riquadro blu dalle stesse.

17-09-2009, 10:57	#1
claudio82clod Junior Member Iscritto dal: Jul 2007 Messaggi: 17	[CSS] bordo intorno a miniature e shadowbox Sono un principiante del CSS, sto lavorando su questa pagina http://www.mondoviphoto.com/photogallery.html in cui sto provando ad usare shadowbox e pare funzioni. Unico problema intorno alle miniature mi si crea quel bordo blu quando visualizzo il sito con IE7. In IE8 e firefox non si vede. Avete idea da dove possa saltare fuori? Altra domanda come faccio ad affiancare le due o più miniature senza che il div contenuto si riduca automaticamente? Questo l'html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <META name="description" content="Sito web dell' Associazione fotografica Mondovì Photo o Mondovì Foto"> <META name="keywords" content="mondovì, foto, photo, concoro, concorsi fotografici, associazione, fotografica, associazione fotografica, cuneo, piemonte"> <title>Associazione Fotografica Mondovì Photo</title> <link href="css/globalrossigrigi.css" rel="stylesheet" type="text/css" TITLE="Contemporary"> <!-- collegamenti per la funzione shadowbox --> <link rel="stylesheet" type="text/css" href="shadowbox-build-3.0b/shadowbox.css" TITLE="Contemporary"> <script type="text/javascript" src="shadowbox-build-3.0b/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init(); </script> </head> <body> <div id="spazioalto"></div> <div id="container"> <div id="header"> <div id="logo"><img src="immagini/logobianco.gif" width="246" height="105" alt="logo" /></div> <div id="trafiletto"></div> <div id="spazioDXpulsanti"></div> <div id="pulsanti"> <div id="spaziosoprapulsanti"></div> <div id="linkhome"><a href="index.html">Home</a></div> <div id="linkchisiamo"><a href="chisiamo.html">Chi siamo</a></div> <div id="linkdovesiamo"><a href="dovesiamo.html">Dove Siamo</a></div> <div id="linkconcorsi"><a href="concorsi.html">Concorsi</a></div> <div id="linkphoto"><a href="photogallery.html">Photo Gallery</a></div> </div> </div> <div id="colonnasinistra"> <div id="collegamentocolonna"> <a href="concorsi.html">16/09/09 20.45<br /> Grazie a tutti i partecipanti per la fiducia dimostrataci...</a> </div> <div id="collegamentocolonna"><a href="concorsi.html">15/09/09 20.38<br />Grande successo del concorso fotografico Ritratto Monregalese...</a></div> </div> <div id="contenuto"> <div id="immagine"></div> <p>PAGINA IN COSTRUZIONE </p> <p>PROVA SHADOWBOX </p> <div id="immaginishadowbox"><a href="immagini/grandi/garzette.jpg" rel="shadowbox"><img src="immagini/miniature/garzette.jpg" width="240" height="161" alt="Garzette" /></a></div> <div id="immaginishadowbox"><a href="immagini/grandi/nebbia.jpg" rel="shadowbox"><img src="immagini/miniature/nebbia.jpg" width="240" height="161" alt="Garzette" /></a></div> </div> <div id="piepagina"> <p>Associazione Fotografica Mondovì Photo © 2009 Tutti i diritti sono riservati.</p> <a href="mailto:[email protected]">[email protected]</a> </div> </div> </body> </html> E questo il foglio di stile CSS @charset "utf-8"; /* CSS Document */ html,body{margin: 0;padding:0} body{ font-family: Verdana, Geneva, sans-serif; font-size: 14px; text-align: left; background-color: #000; } #contenuto p { color: #FFF; } p { margin: 0px; padding: 0.6em; } #container{ width: 800px; text-align: left; border: thin solid #FFF; background-color: #333; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #trafiletto { background-color: #E73F3A; height: 5px; } #pulsanti { background-color: #999; height: 2.2em; } #spazioalto { height: 10px; } #collegamentocolonna { font-size: 0.8em; font-style: italic; padding: 5px; } a { color: #B81B16; text-decoration: none; font-weight: bold; } A:HOVER { color : #fe2501; } A:ACTIVE { color : #fe2501; text-decoration: underline } #spaziosoprapulsanti { height: 0.4em; } #colonnasinistra { width: 13em; float: left; } #piepagina a { color: #00F; font-weight: normal; text-decoration: none; } #header{ background-color:#333; color: #FFF } #contenuto { background-color: #1e1e1e; margin-left: 13em; } #immagine { float: right; } #spazioDXpulsanti { background-color: #999; float: left; width: 13em; height: 2.2em; } #piepagina { background-color: #E73F3A; clear: left; text-align: center; } #logo { text-align: center; padding-top: 6px; padding-right: 6px; padding-bottom: 12px; padding-left: 6px; } #linkhome { width: 8em; float: left; } #linkchisiamo { width: 8em; float: left; } #linkdovesiamo { width: 8em; float: left; } #linkconcorsi { width: 8em; float: left; } #contenuto a { padding: 0.6em; } #linkphoto { width: 8em; float: left; } #collegamentocolonna A:HOVER { color : #fe2501; } #collegamentocolonna A:ACTIVE { color : #fe2501; text-decoration: underline } #titolocontenuto { color: #FFF; font-size: 1.2em; font-weight: bold; padding: 0.3em; } #immaginishadowbox { } #immaginishadowbox a { } #immaginishadowbox a:hover { } #immaginishadowbox a:link { }

Strumenti
Mostra una versione stampabile Invia questa pagina per email