28173 sujets

CSS et mise en forme, CSS3

[Résolu]Barre de scroll Horizontale et opera.

Forum Alsacréations bonjour,

J'ai un problème avec opera. Je le soumet à votre sagacités.
Voici le code (simplifié) de la page en question :
<!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="fr" lang="fr">
<head>
<title>Scrool et opera</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#panoramique {
margin: 20px 0 0 20px;
width: 800px;
height: 400px;
border: solid 1px #000;
overflow: auto;
}
#image {
position: relative;
width: 4000px;
height: 350px;
background-color: #f00;
}
#zone1 {
position: absolute;
top: 50px;
left: 200px;
width: 60px;
height: 50px;
border: solid 1px #00f;
}
#zone2 {
position: absolute;
top: 30px;
left: 300px;
width: 60px;
height: 50px;
border: solid 1px #00f;
}
-->
</style>
</head>
<body>
<div id="panoramique">
<div id="image">
<div id="zone1"></div>
<div id="zone2"></div>
<!-- ... -->
</div>
</div>
</body>
</html>
Tout fonctionne très bien ; sauf que "opera" ajoute une barre de scroll horizontale dans le "body" en plus de celle de "#panoramique" (barre vraisemblablement ajouté par le "position: absolute;" des "#zone").
Le but de la manip est de faire des zones reactives dans un panoramique le grande largeur. Dans ce cas, des "position: relative;" ou des "float: left;" posent des problèmes de mise en œuvre.
Merci de votre patience.
Modifié par papillon41 (23 Jun 2006 - 11:22)
Bonjour Laurent Denis,

Oui, mais j'ai besoin du scroll sur le "body" !

Effectivement, cela ne se vois pas sur l'exemple simplifié que j'ai donné.

Voir cet exemple en ligne. Où il s'agit de remplacer les infos-bulles en "javascrip" par du "css".
Modifié par papillon41 (25 Jan 2006 - 11:11)
Pourquoi ne pas utiliser plus simplement :


#panoramique {
position: relative;
margin: 20px 0 0 20px;
width: 800px;
height: 400px;
border: solid 1px #000;
overflow: auto;
}
#zone1 {
position: absolute;
top: 50px;
left: 200px;
width: 60px;
height: 50px;
border: solid 1px #00f;
}



<div id="panoramique">
   <img src="diaporama.jpg" width="4000" height="350" alt="..." />
   <div id="zone1"></div>
   ...
</div>

Modifié par Laurent Denis (25 Jan 2006 - 11:56)
Il faut que je mette mon image en "background", pour faire comme dans le "tutoriel". Car en final, c'est des "<a id="zone1"...> " que je vais avoir (pas des div). Dans ce cas IE ne rend pas la zone réactive ?
Je peu, éventuellement ressortir le "spacer.gif" pour dimensionner :"#panoramique" 
<img src="spacer.gif" width="4000" height="1" alt="..." />

Et là, je crois que cela va marcher !
Modifié par papillon41 (25 Jan 2006 - 13:20)
Cette image est un contenu. Pas un motif de décoration... Le résultat de tout ceci va te poser quelques solides problèmes d'accessibilité Smiley cligne
J'ai parlé trop vite ! Cela ne marche pas !
L'image en "background" n'est pas "scrollable" !

En fait, dés que l'on positionne en "absolute", dans "#panoramique", plus grand que "screen.width" (JS), opera rajoute une barre de "scroll" dans le "body".
Modifié par papillon41 (26 Jan 2006 - 09:47)
Sujet clos
Aller à