28172 sujets

CSS et mise en forme, CSS3

Lightbox ... problème d'affichage

Bonjour à tous,

J'ai crée un sujet un peu similaire dans la partie ajax mais ne sachant pas d'où viens réellement le soucis, je me permets de lancer le même topic ici car cela peut, peut être, venir d'un soucis de css ...

Je vais m'expliquer du mieux possible. J'ai mis en place un site plutôt basique pour présenter mes diverses collections. Tout se passait plutôt bien jusqu'à hier soir où j'ai tenté d'insérer une lightbox dans une de mes pages.

J'avais testé le concept plusieurs fois sur des pages individuelles pour voir un peu ce que ça donnait et j'étais assez content du résultat. Cependant, il y a un petit soucis dans Firefox et IE. En effet, lorsque j'appelle ma page contenant mon image, la page s'affiche mais pas l'image (sur firefox, elle est invisible et sur IE, une box avec une petite croix rouge est quand même présente pour dire qu'il y a bien une image à cet endroit).

Mon soucis étant que je ne sais pas du tout d'où peux venir le soucis ... peut-être un soucis de css ou dans la code ...

Je serai vraiment ravi que vous m'aidiez sur le coup (et que je comprennes d'où viens le soucis surtout).

Voilà le lien vers le site : http://wovscreens.free.fr/collection/index.html

Pour trouver la page qui bug, il faut aller dans la partie "collection" puis "cellulos".

La page en elle-même se trouve à cette adresse : http://wovscreens.free.fr/collection/pages/cels.html

Et maintenant, le code de la partie principale :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	
	<meta name="author" content="Nownow" />
	
	<meta name="keywords" content="Nownow, Collection, Saint Seiya, cels, cellulos, cellulos, pvc, figures, figure">
	
	<meta name="description" content="The website of my several collections" />
	
	<meta name="robots" content="all" />
	
	<title>Nownow Collection</title>

	<script type="text/javascript"></script>
	
	<link rel="Shortcut Icon" type="image/x-icon" href="collec" />	
	
	<link rel="alternate" type="application/rss+xml" title="RSS" href="collec.xml" />
	<script type="text/javascript">

var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

</script>

    <link href="images/collec2.css" rel="stylesheet" type="text/css" />
	
</head>

<body id="nownow" onload="javascript:ajaxpage('pages/news.html', 'explanation');">

<div id="container">
  <div id="intro">
		<div id="pageHeader">
			<h1><span>Nownow Collection</span></h1>
			<h2><span>Le plaisir de collectionner</span></h2>
		</div>

		<div id="quickSummary">
			<p align="justify" class="p1"><span>Bienvenue sur ce site.<br />
			  Vous</span> y trouverez l'ensemble de mes diverses collections.</p>
			<p align="justify" class="p2"><span>En esp&eacute;rant que vous appr&eacute;cierez votre visite. </p>
	  </div>

  </div>
	<div id="supportingText">
		<div id="explanation">
			
			
		</div>

		<div id="footer">
			
		</div>

	</div>

	
	<div id="linkList">
		<div id="linkList2">
			<div id="lselect">
				<h3 class="select"><span>Select a Design:</span></h3>
				<ul>
					<li><a href="javascript:ajaxpage('pages/news.html', 'explanation');" title="News" accesskey="c">News</a></li>
					<li><a href="javascript:ajaxpage('pages/collec.html', 'explanation');", title="Collection" accesskey="d">Collection</a></li>
					<li><a href="javascript:ajaxpage('pages/rech.html', 'explanation');" title="Recherches" accesskey="e">Recherches</a></li>
					<li><a href="javascript:ajaxpage('pages/ventes.html', 'explanation');" title="Ventes" accesskey="f">Ventes</a></li>
					<li><a href="javascript:ajaxpage('pages/contact.html', 'explanation');" title="Contact" accesskey="g">Contact</a></li>
				    <li><a href="javascript:ajaxpage('pages/plan.html', 'explanation');" title="Contact" accesskey="h">Plan du site </a></li>
				</ul>
			</div>

			<div id="larchives">
				<h3 class="archives"><span>Archives:</span></h3>
				<ul>
					<li><a href="index22e1.html?cssfile=047/047.css&amp;page=20" title="View next set of designs. AccessKey: n" accesskey="n">Ignis the Black </a></li>
					<li><a href="indexbe10.html?cssfile=047/047.css&amp;page=18" title="View previous set of designs. AccessKey: p" accesskey="p"> Kusugawa Sasara - To Heart 2 </a></li>
					<li><a href="indexbe10.html?cssfile=047/047.css&amp;page=18" title="View previous set of designs. AccessKey: p" accesskey="p">Clare - Claymore  </a><a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="View every submission to the Zen Garden. AccessKey: w" accesskey="w"></a></li>
				</ul>
			</div>
			
			<div id="lresources">
				<h3 class="resources"><span>Resources:</span></h3>
				<ul>
					<li><a href="047/047.css" title="View the source CSS file for the currently-viewed design, AccessKey: v" accesskey="v"> Fran&ccedil;ais</a></li>					
					<li><a href="047/047.css" title="View the source CSS file for the currently-viewed design, AccessKey: v" accesskey="v">English</a></li>
					<li><a href="pages/japanese/japanese.html">&#26085;&#26412;&#12398;</a></li>
			  </ul>
			</div>
		</div>
	</div>


</div>

<div id="extraDiv1"><span></span></div>
<div id="extraDiv2"><span></span></div>

</body>

</html>


Voilà la lien vers la page css de la page principale : http://wovscreens.free.fr/collection/images/collec2.css

Et le code de ma page contenant les images :

<head>

	<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
	
	<script src="js/prototype.js" type="text/javascript"></script>
	<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
	<script src="js/lightbox.js" type="text/javascript"></script>

<body>

<div id="text">
  <h3><span>Cellulos, dougas </span><span class="p1"></span>et settei </h3>
  <p><a name="top"></a></p>
  <p><a href="#seiya">Saint Seiya</a> - <a href="#gtaste">G-taste</a> - <a href="#beet">Bouken no Beet</a> - <a href="#shurato">Shurato</a> - <a href="#death">Death Note</a> - <a href="#divers">Divers </a></p>
  <p>&nbsp;</p>
  <p><a name="seiya"></a>Saint Seiya Cels</p>
  <p><a href="images/ss1.jpg" rel="lightbox"><img src="images/thb_ss1.jpg" alt="" width="95" height="75" border="0" /></a> <a href="images/ss2.jpg" rel="lightbox"><img src="images/thb_ss2.jpg" alt="" width="95" height="75" border="0" /></a></p>
  <p>Saint Seiya Dougas  </p>
  <p><a href="#top">top</a></p>
  <p><a name="gtaste"></a>G-taste Ceks </p>
  <p><a href="#top">top</a></p>
  <p><a name="beet"></a>Bouken no Beet Dougas et Background</p>
  <p><a href="#top">top</a></p>
  <p><a name="shurato"></a>Shurato Settei</p>
  <p><a href="#top">top</a></p>
  <p><a name="death"></a>Death Note Settei</p>
  <p><a href="#top">top</a></p>
  <p><a name="divers"></a>Divers   </p>
  <p><a href="#top">top</a></p>
</div>
</body>
</html>


Les fonctions de la lightbox se trouvent ici :

http://wovscreens.free.fr/collection/pages/js/
http://wovscreens.free.fr/collection/pages/css/

Si j'ai oublié quelque chose, n'hésitez pas à me le dire ... merci d'avance pour votre aide
Modifié par Nownow (17 Mar 2008 - 12:45)
Sujet clos
Aller à