28173 sujets

CSS et mise en forme, CSS3

[Résolu]Positionnement dynamique, Rollover et CSS

Salut,

voilà un petit lien pour mieux présenter mon problème : http://darkmusictraders.free.fr/temp/films.htm

C'est juste une petite page html dans laquelle je note sous forme de tableau les films que j'ai vu au ciné. Rien de très compliqué. Cependant, j'aimerais rajouter un commentaire sur le film d'une manière plus sympa : en survolant l'affiche du film, le commentaire apparait dans une fenetre aux coordonnées de la souris un peu décalé à droite, par exemple.

Actuellement, j'ai un div en dehors de mon tableau auquel j'ai assigné le style suivant


<style>
	.details{
		overflow:visible;
		visibility:hidden;
		position:absolute;
		left:100;
		opacity: 0.8;
	}
</style>


Il y aurait donc 1 style par film, ce qui est très bête, puisqu'actuellement le positionnement est défini en dur.

Lors du survol (MouseOn, MouseOut) de l'image, j'appelle 2 fonctions Javascript


<script language="JavaScript">
	function montrer($name){
		document.getElementById($name).style.visibility='visible';
	}
	
	function cacher($name){
		document.getElementById($name).style.visibility='hidden';
	}
</script>


Et là je suis bloqué parce que je ne vois pas comment avec un seul style activer mes rollover à un endroit déterminé dynamiquement.

Si vous avez une idée, n'hésitez pas Smiley smile

Merci bien, a+
Modifié par Ondskapt (19 Jun 2007 - 12:23)
Hello,

Deux petites corrections pour commencer :
[#red]<style>[/#]

[#blue]<style type="text/css">[/#]

[#red]<script language="JavaScript">[/#]

[#blue]<script type="text/javascript"></script>[/#]


Par ailleurs, ta page n'a pas de Doctype, ce qui fait qu'elle sera interprétée en mode Quirks par les navigateurs (traduction : chaque navigateur fait ça à sa sauce, et ça n'est vraiment pas une bonne idée).

Voilà, corrige donc déjà cela, et on se penche sur le problème lui-même une fois que ça sera bon. Smiley smile
Modifié par Florent V. (17 Jun 2007 - 21:34)
Salut,

merci pour ces premiers conseils.

Je me rends compte que les bases du langage web (balise + style séparé) au bout d'un moment et via l'utilisation de logiciel de creation (genre Photoshop quand j'extrais les tranches pour faire une maquette dynamique etc.) ben on les oublie. Du coup j'ai lu une paire de vos tutoriaux dispo sur le CSS et son positionnement et j'ai essayé de ré-assimiler tout ça.

Et donc dans mon cas, est-ce qu'on peut simplement associer les tables et les div qui doivent apparaitre au dessus du reste ou est-ce que je dois convertir toute la structure de la table en div? Quand j'essaie un positionnement par rapport au parent (ou ancêtre je suis pas trop sûr) en calant le div (ou span, j'ai essayé span vu que ça semble être un élément inline) ca ne rend plus invisible ma boite.

Je remets le lien : http://darkmusictraders.free.fr/temp/films.htm

mon élement qui doit s'afficher quand l'image est survolée est 

<div class="details" id="boulevard">
	<table width="250" height="250" bgcolor="#CC9966">
		<tr>

			<td>
				<p>blabla</p>
			</td>
		</tr>
	</table>
</div>


son style associé est 


.details{
		visibility:hidden;
		position:absolute;
		left:150px;
		opacity: 0.8;
		z-index:2;
	}


et le DOCtype que j'ai choisi est 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Donc y'aura 1 élement à afficher par film, ça c'est normal, mais au niveau du style, je ne sais pas comment faire en sorte qu'il évolue à chaque nouvelle "ligne" de mon tableau et qu'il prenne les bonnes coordonnées. Il ne faut peut-être pas le faire en positionnement absolu, je sais pas trop.

Merci pour votre aide,
a+
Ondskapt a écrit :
Donc y'aura 1 élement à afficher par film, ça c'est normal, mais au niveau du style, je ne sais pas comment faire en sorte qu'il évolue à chaque nouvelle "ligne" de mon tableau et qu'il prenne les bonnes coordonnées. Il ne faut peut-être pas le faire en positionnement absolu, je sais pas trop.

Déjà, place chaque div de description dans la cellule de tableau correspondante. Ensuite, il faut savoir que si tu ne précises pas de coordonnées verticales ou horizontales à un élément positionné en absolu, il se gardera son placement « normal », hormis le fait qu'il ne repousse pas les autres éléments.

Ce que je ferais pour ma part : un tableau à quatre colonnes avec :
- affiche du film (avec alternative textuelle vide : <img src="..." alt="" />) ;
- titre du film et date ;
- descriptif long ;
- note.
Bref, je rajoute une colonne pour le descriptif long, à laquelle je donne une largeur de 1 ou 10px (qui fonctionnera comme une largeur minimale).

Pour l'instant, je garde mon descriptif long visible dans une div (display: block; position: static;... bref, les valeurs par défaut).

Ensuite, en Javascript et au chargement de la page, je cache tous les descriptifs :
visibility: hidden;
position: absolute;


Puis, lors du survol, j'affiche le bloc :
visibility: visible

Et, à la rigueur, je le décale :
margin-left: -150px;


Enfin bref, un truc du genre. Pas parfait, mais il devrait y avoir moyen de faire un truc correct, accessible si Javascript est désactivé.
Salut,

merci pour ta réponse.

Donc concretement, si je schématise les cases du tableau par des parenthèses, ça donnerait

(affiche)(date/nom)(.)(note)

et lors du survol

(affiche)(date/nom)(détails que je veux afficher)(note)

Si c'est ça, ça me gène un peu puisque je n'aime pas trop le redimensionnement de tableaux en cours de navigation. En survolant successivement les images, l'un se contractera pendant que l'autre sera dillaté, visuellement je n'aime pas trop l'effet.

En fait j'ai fait quelques essais en m'inspirant du tutoriel de positionnement de blocs l'un à coté de l'autre, j'ai fait donc 4 div dont un caché mais j'ai pas reussi à enchainer plusieurs lignes et le survol apparaissait toujours au même endroit.

Devrais-je continuer comme ça ou peut-on intégrer un element en ligne (genre span, j'imagine) dans ligne de tableau ?

Merci Smiley cligne
Ondskapt a écrit :
Si c'est ça, ça me gène un peu puisque je n'aime pas trop le redimensionnement de tableaux en cours de navigation. En survolant successivement les images, l'un se contractera pendant que l'autre sera dillaté, visuellement je n'aime pas trop l'effet.

La troisième colonne aura une largeur réduite (comme je le suggérais, 1 ou 10px), et un contenu positionné en absolu, donc n'élargissant pas la colonne. Donc pas d'effet de redimensionnement du tableau au survol.
Cool, merci beaucoup Smiley smile

Résultat : http://darkmusictraders.free.fr/temp/films2.htm

Y'a juste l'automatisation (via une boucle) des cachages au chargement de la pages que je vois pas trop comment faire (actuellement je fais 2 lignes par film, ça va être fastidieux à mettre à jour) mais sinon c'est exactement ce que je voulais.

Merci bien pour ton aide Smiley smile
Sujet clos
Aller à