18041 sujets

Questions générales et questions de débutants

Positionnement d'un DIV par-dessus la page d'accueil

Bonjour à tous,

Pour un site qui doit être accessible seulement à une catégorie professionnelle, je dois intégrer un module de connexion.
C'est à dire que nous voudrions que le site doit rester visible mais non-accessible à l'utilisateur car par-dessus il y aurait un "masque" transparent qui empecherait toute action (voir image plus bas)
La seule chose qui serait accessible serait le module de connexion et une fois connectés, le "masque" et le module disparaissent pour laisser place au site.
j'espère que je suis clair... Smiley murf

ça a l'air de fonctionner... Comment j'ai fait ? >>> j'ai mis le module dans un DIV qui se place au centre de l'écran et j'ai aussi ajouté un DIV qui contient en background une image .png en transparence.
Mon problème est que j'ai du donner une hauteur conséquente à ce DIV car il ne prend pas par défaut la hauteur du site (voir 2e image), du coup il dépasse largement la hauteur du site. Smiley ohwell
Ma question est : Comment faire pour donner la hauteur de la page à celle du DIV ?

VOici le code de la page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="iso-8859-1"?><html xmlns="http://www.w3.org/1999/xhtml" lang="fr" >
<head>
...
</head>
<body>
<div align="center">
  <div id="contentPrinci">
    >>>>>> TOUT LE CONTENU DU SITE
  </div>
</div>


<!-- ICI on vérifie que le visiteur est bien connecté -->
<!-- S'il n'est pas connecté alors, on affiche le module de connexion par-dessus le site -->
<div style="background-image:url(http://www.nomdusite.fr/templates/images/style1/transparent.png); background-position:top left; background-repeat:repeat; width:100%; height:2000px; margin-top:-1296px; position:absolute;" align="center"></div>
<div style="position:absolute; background-color:#FFF; width:270px; text-align:center; margin:-1200px 0 0 0; left:42%">
  <div>
    <!-- le module de login -->
				<div class="moduletable">
				  <h3>Identification</h3>
						<form action="index.php" method="post" name="login" >
						<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
						<tr>
						  <td>--Formulaire de connexion--</td>
						</tr>
						</table>
						</form>
			 </div>
  </div>
</div>
</body>
</html>


Je sais, le code n'est pas aux normes, je veux d'abord voir que ça fonctionne sur le fond, ensuite je le passerai bien comme il faut Smiley cligne
Voici une capture d'écran du site pour vous faire une idée de ce que ça donne :
upload/7957-cap01.gif
Et une capture de ce qui ne va pas :
upload/7957-cap02.gif

Merci d'avoir lu ce message jusqu'au bout et aussi de votre aide !
Pour info, cela n'a pas d'incidence mais c'est un site qui tourne sous joomla 1.013

merci Smiley biggrin
Modifié par cevichero (11 Jun 2008 - 09:58)
Bonjour,

Hum hum Smiley ravi

a écrit :
ça a l'air de fonctionner... Comment j'ai fait ? >>> j'ai mis le module dans un DIV qui se place au centre de l'écran et j'ai aussi ajouté un DIV qui contient en background une image .png en transparence.


Ce n'est pas forcément la meilleure des solutions ... On peut très bien avoir de nouveau accès au site par simple suppression d'un noeud depuis Firebug. Smiley cligne Certes ça ne concerna pas l'utilisateur lambda mais quand même.

La meilleure solution reste une simple page d'authentification.

Bonne continuation.
Romain
yodaswii a écrit :
La meilleure solution reste une simple page d'authentification.


Merci de ta réponse, c'est ce que j'ai proposé, mais les proprios ont vu ça sur un autre site et ils en veulent un....... ils n'en démordent pas !
Alors, quelqu'un peut m'aider si je dois conserver cette solution ?
Merci Smiley smile
J'ai légèrement amélioré le code, voici :
<!--  MODULE DE LOGIN  -->
<div style="position:absolute; z-index:1; background-image:url(<?php echo $mosConfig_live_site; ?>/templates/images/style1/transparent.png); background-position:top left; background-repeat:repeat; top:0; width:100%; height:100%;"></div>
<div style="position:absolute; z-index:2; background-color:#FFFFFF; background-image:url(<?php echo $mosConfig_live_site; ?>/templates/images/style1/loginTop-bg.gif); background-position:top; background-repeat:no-repeat; top:100px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:0.90em; text-align:center; width:290px; left:41%;">
  >>>  Formulaire d'Identification <<<
</div>
<!--//-->

Mais le problème persiste; le div ne prend pas toute la hauteur de la page Smiley decu
Ma question est : Comment faire pour donner la hauteur de la page à celle du DIV ?
j'ai bien essayé en donnant Height:100% à html et body, mais ça ne change rien...

Merci de vos réponse Smiley smile
Modifié par cevichero (11 Jun 2008 - 10:04)
Salut à tous,

Je remonte un peu ce topic car j'ai beau chercher, essayer mais je ne trouve pas la solution Smiley decu

Je pense que la demande initiale est un peu en cause mais je ne sais pas comment (si je dois) faire autrement.
Soyez sympa, une réponse, une piste, un reproche, mais quelque chose qui me mette sur la voie ! Smiley langue

Merci
Sujet clos
Aller à