Sujet Précédent Sujet Suivant

Problème avec divs cliquables

Fermé
Bee bop - 25 févr. 2008 à 10:30
prologic Messages postés 92 Date d'inscription lundi 17 décembre 2007 Statut Membre Dernière intervention 7 décembre 2010 - 9 avril 2008 à 18:26
Bonjour,

qques problèmes à vous mettre sous la dent beurk!!
Voilà mes différents codes :

Le Css : 

@charset "utf-8";
/* General Styles */

body {
margin:0;
text-align:center;  
background-image:url(images/background.jpg);
background-repeat: no-repeat;
background-position:center;
width:1024px;
height:768px;
margin-left:auto;
margin-right:auto;
		}

/* Div Styles */

.makeDivClickable {
	height: 90px;
	width: 28px;
	overflow: hidden;
	position: absolute;
}
.posDiv {
	margin-left: 70px;
	margin-top: 235px;
}
.gifSize {
	height: 90px;
	width: 28px;
}
#divInfos {
	height: 90px;
	width: 28px;
}

.makeDivClickable2 {
	height: 75px;
	width: 26px;
	overflow: hidden;
	position: absolute;
}
.posDiv2 {
	margin-left: 72px;
	margin-top: 235px;
}
.gifSize2 {
	height: 75px;
	width: 26px;
}
#divInfos2 {
	height: 75px;
	width: 26px;
}

.makeDivClickable3 {
	height: 75px;
	width: 26px;
	overflow: hidden;
	position: absolute;
}
.posDiv3 {
	margin-left: 72px;
	margin-top: 233px;
}
.gifSize3 {
	height: 75px;
	width: 26px;
}
#divInfos3 {
	height: 75px;
	width: 26px;
}

.makeDivClickable4 {
	height: 60px;
	width: 26px;
	overflow: hidden;
	position: absolute;
}
.posDiv4 {
	margin-left: 72px;
	margin-top: 235px;
}
.gifSize4 {
	height: 60px;
	width: 26px;
}
#divInfos4 {
	height: 60px;
	width: 26px;
}

.makeDivClickable5 {
	height: 55px;
	width: 26px;
	overflow: hidden;
	position: absolute;
}
.posDiv5 {
	margin-left: 72px;
	margin-top: 235px;
}
.gifSize5 {
	height: 55px;
	width: 26px;
}
#divInfos5 {
	height: 55px;
	width: 26px;
}

.makeDivClickable6 {
	height: 110px;
	width: 26px;
	overflow: hidden;
	position: absolute;
}
.posDiv6 {
	margin-left: 72px;
	margin-top: 235px;
}
.gifSize6 {
	height: 110px;
	width: 26px;
}
#divInfos6 {
	height: 110px;
	width: 26px;
}

.makeDivClickable7 {
	height: 13px;
	width: 20px;
	overflow: hidden;
	position: absolute;
}
.posDiv7 {
	margin-left: 822px;
	margin-top: -306px;
}
.gifSize7 {
	height: 13px;
	width: 20px;
}
#divInfos7 {
	height: 13px;
	width: 20px;
}

.makeDivClickable8 {
	height: 13px;
	width: 20px;
	overflow: hidden;
	position: absolute;
}
.posDiv8 {
	margin-left: 845px;
	margin-top: -319px;
}
.gifSize8 {
	height: 13px;
	width: 20px;
}
#divInfos8 {
	height: 13px;
	width: 20px;
}

.makeDivClickable9 {
	height: 13px;
	width: 20px;
	overflow: hidden;
	position: absolute;
}
.posDiv9 {
	margin-left: 868px;
	margin-top: -332px;
}
.gifSize9 {
	height: 13px;
	width: 20px;
}
#divInfos9 {
	height: 13px;
	width: 20px;
}

.makeDivClickable10 {
	height: 18px;
	width: 35px;
	overflow: hidden;
	position: absolute;
}
.posDiv10 {
	margin-left: 830px;
	margin-top: -485px;
}
.gifSize10 {
	height: 18px;
	width: 35px;
}
#divInfos10 {
	height: 18px;
	width: 35px;
}

.makeDivClickable11 {
	height: 18px;
	width: 38px;
	overflow: hidden;
	position: absolute;
}
.posDiv11 {
	margin-left: 825px;
	margin-top: -482px;
}
.gifSize11 {
	height: 18px;
	width: 38px;
}
#divInfos11 {
	height: 18px;
	width: 38px;
}

.makeDivClickable12 {
	height: 150px;
	width: 26px;
	overflow: hidden;
	position: absolute;
}
.posDiv12 {
	margin-left: 900px;
	margin-top: 14px;
}
.gifSize12 {
	height: 150px;
	width: 26px;
}
#divInfos12 {
	height: 150px;
	width: 26px;
}

.makeDivClickable13 {
	height: 400px;
	width: 560px;
	overflow:hidden;
	position: absolute;
}
.posDiv13 {
	margin-left: 120px;
	margin-top: -420px;
}

#divInfos13 {
	height: 400px;
	width: 560px;
}

.makeDivClickable14 {
	height: 40px;
	width: 560px;
	overflow:hidden;
	position: absolute;
}
.posDiv14 {
	margin-left: 120px;
	margin-top: -420px;
}

#divInfos14 {
	height: 38px;
	width: 560px;
}

.makeDivClickable15 {
	height: 20px;
	width: 560px;
	position: absolute;
}
.posDiv15 {
	margin-left: 135px;
	margin-top: -520px;
}

#divInfos15 {
	height: 20px;
	width: 560px;
}
/* Class Sytles */

.menu_droit	{
font-family:Myriad Pro, Verdana;
color:#000000;
float:right;
margin-right:190px;
margin-top:253px;
font-size:12px;
margin-left:auto;
text-decoration:none;
		}
				
.menu_droit2		{
font-family:Myriad Pro, Verdana;
color:#000000;
float:right;
margin-right:-90px;
margin-top:270px;
font-size:12px;
		}

.menu_droit3		{
font-family:Myriad Pro, Verdana;
color:#000000;
float:right;
margin-right:-75px;
margin-top:317px;
font-size:12px;
		}
		
.menu_droit4		{
font-family:Myriad Pro, Verdana;
color:#000000;
float:right;
margin-right:-111px;
margin-top:334px;
font-size:12px;
		}
		
.menu_droit5		{
font-family:Myriad Pro, Verdana;
color:#000000;
float:right;
margin-right:-91px;
margin-top:351px;
font-size:12px;
		}
		
.menu_droit6		{
font-family:Myriad Pro, Verdana;
color:#000000;
float:right;
margin-right:-49px;
margin-top:399px;
font-size:12px;
		}
		
.menu_droit7		{
font-family:Myriad Pro, Verdana;
color:#000000;
float:right;
margin-right:-61px;
margin-top:416px;
font-size:12px;
		}

.menu_droit8		{
font-family:Myriad Pro, Verdana;
color:#000000;
float:right;
margin-right:-70px;
margin-top:433px;
font-size:12px;
		}

.menu_droit9		{
font-family:Myriad Pro, Verdana;
color:#000000;
float:right;
margin-right:-50px;
margin-top:481px;
font-size:12px;
		}

.menu_droit10		{
font-family:Myriad Pro, Verdana;
color:#000000;
float:right;
margin-right:-45px;
margin-top:498px;
font-size:12px;
		}

.menu_droit11		{
font-family:Myriad Pro, Verdana;
color:#000000;
float:right;
margin-right:-75px;
margin-top:515px;
font-size:12px;
		}

.menu_droit12		{
font-family:Myriad Pro, Verdana;
color:#000000;
float:right;
margin-right:-47px;
margin-top:532px;
font-size:12px;
		}

.menu_droit13		{
font-family:Myriad Pro, Verdana;
color:#000000;
float:right;
margin-right:-52px;
margin-top:580px;
font-size:12px;
		}

.menu_droit14		{
font-family:Myriad Pro, Verdana;
color:#000000;
float:right;
margin-right:-52px;
margin-top:597px;
font-size:12px;
		}

.titre	{
font-family:"Myriad Web";
color:#FFFFFF;
font-size: 45px;
		}
/* ID Styles */

#iframe	{
border:thin;
		}

#iframe2	{
border:thin;
		}


Le html : 

<body>
<a href="#" target="frame"><div class="menu_droit">Galerie Photos</div></a>
<a href="#" target="frame"><div class="menu_droit2">Galerie Vidéos</div></a>
<a href="#" target="frame"><div class="menu_droit3">Dossiers EC</div></a>
<a href="#" target="frame"><div class="menu_droit4">Fiches Attractions</div></a>
<a href="#" target="frame"><div class="menu_droit5">Jeux Concours</div></a>
<a href="#" target="frame"><div class="menu_droit6">Contact</div></a>
<a href="#" target="frame"><div class="menu_droit7">Livre d'Or</div></a>
<a href="#" target="frame"><div class="menu_droit8">Newsletter</div></a>
<a href="#" target="frame"><div class="menu_droit9">Agenda</div></a>
<a href="#" target="frame"><div class="menu_droit10">Équipe</div></a>
<a href="#" target="frame"><div class="menu_droit11">Partenaires</div></a>
<a href="#" target="frame"><div class="menu_droit12">Projets</div></a>
<a href="#" target="frame"><div class="menu_droit13">Goodies</div></a>
<a href="#" target="frame"><div class="menu_droit14">Records</div></a>
<!--Liens panneau gauche-->
<div class="makeDivClickable posDiv">
	<a href="allemagne.html" target="frame">
		<img src="images/spacer.gif" class="gifSize" border="0"/>	</a></div>
<div id="divInfos">
</div>
<div class="makeDivClickable2 posDiv2">
	<a href="benelux.html">
		<img src="images/spacer.gif" class="gifSize2" border="0" />	</a></div>
<div id="divInfos2">
</div>
<div class="makeDivClickable3 posDiv3">
	<a href="espagne.html">
		<img src="images/spacer.gif" class="gifSize3" border="0" />	</a></div>
<div id="divInfos3">
</div>
<div class="makeDivClickable4 posDiv4">
	<a href="france.html">
		<img src="images/spacer.gif" class="gifSize4" border="0" />	</a></div>
<div id="divInfos4">
</div>
<div class="makeDivClickable5 posDiv5">
	<a href="italie.html">
		<img src="images/spacer.gif" class="gifSize5" border="0"/>	</a></div>
<div id="divInfos5">
</div>
<div class="makeDivClickable6 posDiv6">
	<a href="uk.html">
		<img src="images/spacer.gif" class="gifSize6" border="0"/>	</a></div>
<div id="divInfos6">
</div>
<!--Liens drapeaux-->
<div class="makeDivClickable7 posDiv7">
	<a href="francais.html">
		<img src="images/spacer.gif" class="gifSize7" border="0"/>	</a></div>
<div id="divInfos7">
</div>
<div class="makeDivClickable8 posDiv8">
	<a href="allemand.html">
		<img src="images/spacer.gif" class="gifSize8"  border="0"/>	</a></div>
<div id="divInfos8">
</div>
<div class="makeDivClickable9 posDiv9">
	<a href="anglais.html">
		<img src="images/spacer.gif" class="gifSize9" border="0"/>	</a></div>
<div id="divInfos9">
</div>
<!--Liens Header-->
<div class="makeDivClickable10 posDiv10">
	<a href="index.php">
		<img src="images/spacer.gif" class="gifSize10" border="0"/>	</a></div>
<div id="divInfos10">
</div>
<div class="makeDivClickable11 posDiv11">
	<a href="news.html">
		<img src="images/spacer.gif" class="gifSize11" border="0"/>	</a></div>
<div id="divInfos11">
</div>
<!--Bandeau droit-->
<div class="makeDivClickable12 posDiv12">
	<a href="rencontres.html">
		<img src="images/spacer.gif" class="gifSize12" border="0"/>	</a></div>
<div id="divInfos12">
</div>
<!--Titre-->
<div class="makeDivClickable15 posDiv15">
	<p class="titre">Titre</p></div>
<div id="divInfos15">
</div>
<!--Contenu-->
<div class="makeDivClickable13 posDiv13">
	<iframe name="frame" frameborder="1" scrolling="auto" height="390" width="550" src="text_accueil.html" id="iframe" ></iframe></div>
<div id="divInfos13">
</div>
<!--Pied-->
<div class="makeDivClickable14 posDiv14">
	<iframe name="frame" frameborder="1" scrolling="auto" height="36" width="555" src="pied.html" id="iframe2" ></iframe></div>
<div id="divInfos14">
</div>
</body>
</html>


Le php : 

<?php

require 'metas.html';
require 'background.html';


if(isset($_GET['page'])) {
	
	if($_GET['page']=='contact') {
		require 'contact.php';

	} elseif(file_exists($_GET['page'].'.html')) {
		
		require $_GET['page'].'.html'; 
	} else {
		
		require '404.html';
	}
}

?>


Mon problème est que l'affichage se fait à peu près bien sur opéra et firefox (il y a quand même un espace blanc sous l'image) mais pas sous ie où tout est décalé malgré mes multiples tentatives et la création d'une deuxième feuille de style.

Auriez-vous une idée por favor ?
Ce site m'a été demandé sous cette forme donc merci de ne pas dénigrer cette façon de faire avec les div cliquables ce serait sympa parce-que c'est long à faire même si c'est faux et pas joli.
Merci d'avance.
Bee bop.

1 réponse

Réponse 1 / 1
prologic Messages postés 92 Date d'inscription lundi 17 décembre 2007 Statut Membre Dernière intervention 7 décembre 2010 25
9 avril 2008 à 18:26
premièrement ton code est pas valide, tu ne peut pas mettre des <div></div> dans des <a></a>, c'est comme essayé de faire rentrer son garage dans la voiture.
0

Discussions similaires

table de matière cliquable
Utilisateur anonyme -
Utilisateur anonyme -

10 réponses
Ajouter un lien hypertexte à une image
baissaoui -
baissaoui -

0 réponse
Liseuse Bookeen bloquée
kerscolan -
Kerscolan -

3 réponses
Créer un lien entre la table des matiéres et
Kat -
Raymond PENTIER -

5 réponses
sommaire cliquable sous word
Manu -
Raymond PENTIER -

1 réponse