Div centré en largeur et hauteur

Div centré en largeur et hauteur - HTML/CSS - Programmation

Marsh Posté le 09-09-2004 à 12:30:41    

voila je veux faire apparaitre un bloc avec un Onclick, je veux que ce bloc soit centré en hauteur et en largeur en premier plan (par dessus tout autre contenu HTML) est ce possible ? (PS : les CSS je maitrise pas bien pour le moment)
j'ai fait ça :
 

<DIV id="info" style="position:relative; left:auto; top:auto; width:320px; height:240px; z-index:+00; visibility: visible; background-color: #83CBE5;>Mes infos !</DIV>


 
mais là ça se met pas au milieu et ça a l'air de deplacer mes tables et autres trucs HTML

Reply

Marsh Posté le 09-09-2004 à 12:30:41   

Reply

Marsh Posté le 09-09-2004 à 12:36:55    

Compliqué :
 
Dépend des autres blocks et de l'intégration de ce block dans les autres.
 
Dépend aussi d'un position absolute quand il s'agit de passer par dessus des divs existants pour sortir du "flux".
 
Bref, du cas par cas nécessitant de savoir un minimum de quoi on parle (fait des tests avec des imbrications de divs simples par exemple --> apprend).


---------------
Expert en expertises
Reply

Marsh Posté le 09-09-2004 à 12:38:23    

overflow ?

Reply

Marsh Posté le 09-09-2004 à 12:44:52    

le prob c que ya pas d'imbrication là ! tout le reste c du HTML basique (avec des tables... ya pas de div)je veux mon div par dessus le reste

Reply

Marsh Posté le 09-09-2004 à 12:53:13    

j'y suis presque...
 
<div id="basepage" style="position:relative; width:100%; height:100%; text-align:center; overflow: visible; left: 0; top: 0;">
<div id="infos" style="position:absolute; left:auto; top:auto; width:320px; height:240px; border: 1px solid #CCCCCC ;z-index:1; overflow: visible; layer-background-color: #00FFFF; border: 1px none #000000; background-image: url(../../images/bleu_transparent.gif); layer-background-image: url(../../images/bleu_transparent.gif);"></div>
</div>

Reply

Marsh Posté le 09-09-2004 à 12:54:58    

freed102 a écrit :

le prob c que ya pas d'imbrication là ! tout le reste c du HTML basique (avec des tables... ya pas de div)je veux mon div par dessus le reste


 
Les tables sont aussi des blocks.


---------------
Expert en expertises
Reply

Marsh Posté le 09-09-2004 à 13:01:21    

voila j'y suis....

Code :
  1. <div id="basepage" style="position:absolute; width:100%; height:100%; text-align:center; overflow: visible;">
  2. <div id="infos" style="position:relative; width:320px; height:240px; border:1px solid #CCCCCC; z-index:1; overflow: visible; layer-background-color: #00FFFF; border: 1px none #000000; background-image: url(../../images/bleu_transparent.gif); layer-background-image: url(../../images/bleu_transparent.gif); left: auto; top: auto;"></div>
  3. </div>


 
ya juste deux trucs encore.. .le border ne marche pas, et je sais pas centrer en hauteur

Reply

Marsh Posté le 09-09-2004 à 13:33:31    

... petit à petit :
 

Code :
  1. <div id="basepage" style="position:absolute; width:100%; height:100%; text-align:center; overflow: visible;margin-left:auto; margin-top:auto;">
  2. <div id="infos" style="position:relative; width:320px; height:240px; top:50%; margin-top:50%;border:1px solid #CCCCCC; z-index:1; overflow: visible; layer-background-color: #00FFFF; border: 1px none #000000; background-image: url(/images/bleu_transparent.gif); layer-background-image: url(/images/bleu_transparent.gif); left: auto; top: auto;"></div>
  3. </div>
  5. me reste le probleme du border... puis d'inserer les evenements

Reply

Marsh Posté le 09-09-2004 à 13:54:38    

onclick="document.GetElementById('infos').style.visibility='visible';"
 
... marcho po !
 
"Cet objet ne gere pas cette propriété ou cette méthode"

Reply

Marsh Posté le 09-09-2004 à 14:11:41    

freed102 a écrit :

onclick="document.getElementById('infos').style.visibility='visible';"
 
... marcho po !
 
"Cet objet ne gere pas cette propriété ou cette méthode"

Reply

Marsh Posté le 09-09-2004 à 14:11:41   

Reply

Marsh Posté le 09-09-2004 à 14:14:07    

Roooooooooh c geniaaaaal ! ça marche !

Reply

Marsh Posté le 09-09-2004 à 14:14:19    

merchi ! :jap:

Reply

Marsh Posté le 09-09-2004 à 14:19:50    

yesss  
 

Code :
  1. <a href="#" onclick="
  2.    if(document.getElementById('infos').style.visibility=='hidden')
  3.    {
  4.    document.getElementById('infos').style.visibility='visible';
  5.    }
  6.    else{
  7.    document.getElementById('infos').style.visibility='hidden';
  8.    };">lien</a>

Reply

Marsh Posté le 09-09-2004 à 14:27:59    

encore mieux :

Code :
  1. function Affiche(divId)
  2.    {
  3.     if(document.getElementById(divId).style.visibility=='hidden')
  4.     {
  5.     document.getElementById(divId).style.visibility='visible';
  6.     }
  7.     else
  8.     {
  9.     document.getElementById(divId).style.visibility='hidden';
  10.     }
  11.    }


 
... c cool !

Reply

Marsh Posté le 10-09-2004 à 19:23:28    

salut,
 
mieux ?
 

Code :
  1. ...... tête coupée ...
  2. <style type=text/css>
  3. body{
  4. background-color: aliceblue;
  5. margin:0px;
  6. }
  7. #infos{
  8.     position:absolute;
  9.     top:50%;
  10.     left:50%;
  11.     margin-left: -250px;
  12.     margin-top: -150px;
  13.     width:500px;
  14.     height:300px;
  15.     padding:0px;
  16.     border:1px solid blue;
  17.     background-color:#E1E1FF;
  18.     display:none;
  19. }
  20. </style>
  21. <script language="javascript">
  22. function look(divId,idx){
  23. document.getElementById(divId).style.display=document.getElementById(divId).style.display=='block'?"none":"block";
  24. document.getElementById(idx).innerHTML=document.getElementById(idx).innerHTML=='cacher'?" voir ":"cacher";
  25. }
  26. </script>
  27. </head>
  28. <body>
  29. <div id="basepage" style="position:absolute; width:100%; height:100%; text-align:center; overflow:scroll;margin-left:auto; margin-top:auto;">
  30. <a href="#" id="one" onClick="look('infos','one');return false;"> voir </a>
  31. <div id="infos"></div>
  32. </div>
  33. </body>
  34. </html>


 
++
 
L.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed