28173 sujets

CSS et mise en forme, CSS3

Modérateur
Bonjour, et bonne année à tous les alsacréatiens !

J'ai un problème avec la superposition d'un menu déroulant inspiré du menu déroulant sur Alsacréation (merci d'ailleurs pour toutes les sources mises à disposition sur ce superbe site Smiley biggrin ). Pour faire court, je n'arrive pas à faire passer ce menu déroulant au-dessus d'un document *.pdf inséré à l'aide de la balise object dans la page Web. Allez ici pour avoir un aperçu de la chose (placez la souris sur cm2 et vous comprendrez).

Voici ce que j'ai tenté dans la css sur l'objet :

#principal .objet {
	position: relative;
	margin:20px;
	padding: 5px;
	text-align: center;
	z-index: 75;
	border: #018100 groove 2px;
}

#principal .object{
	position:absolute;
	z-index: 75;
}


La css concernant le menu déroulant :

#menu-haut-d {
	position: absolute;
	top: 75px;
	left: 0;
	background: url(fond-m-haut.gif) repeat-x;
	height: 15px;
	font-size: 0.7em;
	font-weight: bold;
	line-height: 15px;
	z-index: 100;
	width: 100%;
}

#menu-haut-d marquee{
	text-align: center;
	color: #663300;
}

#menu-haut-d h2 {
	display: none;
}


#menu-haut-d dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	background-color: transparent;
}

#menu-haut-d dl {
	float: left;
	margin: 0 2px;
	background: #FFF url(fond-m-haut-elements.gif) repeat-x;
	border-left: #999B00 solid 1px;
	border-right: #999B00 solid 1px;
}

#menu-haut-d dt {
	
	width: 70px;
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	background: transparent;
}

#menu-haut-d a {
	text-decoration: none;
	color: #018100; 
}

#menu-haut-d a:hover {
	color: #663300;; 
}

#menu-haut-d dd {
	position: absolute;
	display: none;
	text-align: left;
	width: 200px;
	padding: 0;
	background: url(fond-liste-menu.png) repeat-y;
	border: #999B00 solid 1px;
}

#menu-haut-d li {
	display: block;
	margin: 0 2px;
	background: transparent;
	border-bottom: #999B00 solid 1px;
}

#menu-haut-d li a, #menu-haut-d dt a {
	color: #018100;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0;
}

#menu-haut-d li a:hover, #menu-haut li a:focus {
	color: #663300;
}


Le fragment HTML de la partie principale contenant l'objet :

<h2>Le semoir</h2>
	<p class="notification">En bas de page vous pouvez ouvrir ce document dans une nouvelle fenêtre.</p>
	
	<p class="objet">
		<object data="fichiers/semis-CM2/pdf/semoir.pdf" type="application/pdf" width="630" height="950">
		</object>
	</p>

	<p class="centre">
		<a href="fichiers/semis-CM2/pdf/semoir.pdf" onclick="window.open(this.href, 'Agrandissement', 'toolbar=no, menubar=no, location=no, resizable=yes, scrollbars=yes, status=no'); return false;">
		Document dans une nouvelle fenêtre
		</a>
	</p>


Et le fragment d'un des menus déroulants :

<dl onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');">			
<dt><a href="accueil-CM2.html" title="Page d'accueil des CM2">CM2</a></dt>
<dd id="smenu6">
<ul>
<!--debut_menu_6-->
<li><a href="locutions-expressions.html">Des expressions autour du thème</a></li>
<li><a href="fabrication-pain-CM2.html">Fabrication de pain (par É, L et R)</a></li>
<li><a href="fabrication-pain-2-CM2.html">Fabrication de pain (par C, G et J)</a></li>
<li><a href="fabrication-pain-3-CM2.html">Fabrication de pain (par K, M et Q)</a></li>
<li><a href="semis-CM2.html">Les semis - raconté</a></li>
<li><a href="semis-2-CM2.html">Les semis - herse et semoir</a></li>
<li><a href="semoir-CM2.html">Le semoir</a></li>
<!--fin_menu_6-->
</ul>
</dd>
</dl>


Merci d'avance.
Smiley smile
Modifié par jojaba (06 Jan 2007 - 22:03)
Modérateur
J'ai épluché tous les attributs possibles en xhtml. Rien.
Je pensais qu'il y aurait peut-être un paramètre, mais je n'arrive pas à trouver la liste des paramètres possibles pour la balise object...

Un petit coup de pouce ? Smiley cligne
Modérateur
Oups ! Je viens de me rendre compte que j'avais fait une erreur dans ma css, je viens de la corriger :
#principal .objet {
	position: relative;
	margin:20px;
	padding: 5px;
	text-align: center;
	border: #018100 groove 2px;
}

#principal object{
	position:relative;
	z-index: 50;
}


Mais le menu passe toujours derrière l'objet Smiley decu
(pour le constater, veuillez descendre avec l'ascenseur et placer la souris sur le menu cm2)
Modérateur
J'ai essayé ça :
<p class="objet">
		<object data="fichiers/semis-CM2/pdf/semoir.pdf" type="application/pdf" width="630" height="950">
		<param name="z-index" value="50" valuetype="data">
		</object>
	</p>


Toujours rien !

De l'aide s'il vous plaît !!! Smiley biggol
Sans vouloir paraître défaitiste c'est peut-être pas possible de passer par dessus une balise object étant donné que le résultat graphique n'est pas produit par le navigateur ...
Modérateur
AAAhhhh, c'est bien ce que je craignais ! Merci de m'éviter des recherches qui risquent d'être vaines...
Quelqu'un pourrait-il confirmer ce que CNeo vient de m'apprendre.
Modérateur
Et si je transformais mes pdf en images ? il me semle que cela est possible non ?
Je vais étudier ça ... en attendant vos réponses Smiley cligne
Attention moi je n'affirme rien, je n'ai jamais essayé, je n'ai jamais lu quelque part que c'est impossible, je fais juste une réflexion logique ...
Modifié par CNeo (06 Jan 2007 - 21:50)
jojaba a écrit :
Et si je transformais mes pdf en images ? il me semle que cela est possible non ?
Je vais étudier ça ... en attendant vos réponses Smiley cligne

Oui çà c'est une bonne idée ... Il doit y avoir des extensions capables de faire çà je pense ...
Modifié par CNeo (06 Jan 2007 - 21:52)
Modérateur
CNeo a écrit :

Oui çà c'est une bonne idée ... Il doit y avoir des extensions capables de faire çà je pense ...


...ET j'ai déjà trouvé !

PDFCreator !
J'avais la solution sous les yeux (j'ai utilisé PDFCreator pour fabriquer mes pdf) et n'avais pas vu !!! Merci CNeo de m'avoir mis la puce à l'oreille, à mon avis j'aurai continué mes recherches si tu n'avais pas fait ta remarque. Smiley ravi . En effet, PDFCreator peut également convertir en *.png, *.jpg, ...

Je ne considère pas mon problème résolu, c'est pourquoi je ne noterai pas le fameux [résolu] au début de mon sujet mais je placerai plutôt [parade trouvée]. Si un modérateur y voit une objection, qu'il n'hésite pas à me le faire savoir Smiley cligne

Il est temps d'aller faire dodo. Merci à tous. Smiley biggrin