Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1557 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Div centré en largeur et hauteur

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Div centré en largeur et hauteur

n°845839
freed102
Arayashiki
Posté le 09-09-2004 à 12:30:41  profilanswer
 

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

mood
Publicité
Posté le 09-09-2004 à 12:30:41  profilanswer
 

n°845846
Hermes le ​Messager
Breton Quiétiste
Posté le 09-09-2004 à 12:36:55  profilanswer
 

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
n°845848
freed102
Arayashiki
Posté le 09-09-2004 à 12:38:23  profilanswer
 

overflow ?

n°845851
freed102
Arayashiki
Posté le 09-09-2004 à 12:44:52  profilanswer
 

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

n°845860
freed102
Arayashiki
Posté le 09-09-2004 à 12:53:13  profilanswer
 

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>

n°845862
Hermes le ​Messager
Breton Quiétiste
Posté le 09-09-2004 à 12:54:58  profilanswer
 

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
n°845870
freed102
Arayashiki
Posté le 09-09-2004 à 13:01:21  profilanswer
 

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

n°845895
freed102
Arayashiki
Posté le 09-09-2004 à 13:33:31  profilanswer
 

... 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

n°845908
freed102
Arayashiki
Posté le 09-09-2004 à 13:54:38  profilanswer
 

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

n°845922
cerel
Posté le 09-09-2004 à 14:11:41  profilanswer
 

freed102 a écrit :

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

mood
Publicité
Posté le 09-09-2004 à 14:11:41  profilanswer
 

n°845925
freed102
Arayashiki
Posté le 09-09-2004 à 14:14:07  profilanswer
 

Roooooooooh c geniaaaaal ! ça marche !

n°845926
freed102
Arayashiki
Posté le 09-09-2004 à 14:14:19  profilanswer
 

merchi ! :jap:

n°845936
freed102
Arayashiki
Posté le 09-09-2004 à 14:19:50  profilanswer
 

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>

n°845950
freed102
Arayashiki
Posté le 09-09-2004 à 14:27:59  profilanswer
 

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 !

n°847268
Leris
Posté le 10-09-2004 à 19:23:28  profilanswer
 

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.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Div centré en largeur et hauteur

 

Sujets relatifs
[HTML/JS] Comment acceder a une ancre dans un div hor. ? (update)[xhtml/css] Hauteur de 2 div
organisation de block "div" avec les CSS: problemeInstruction DIV ...
vertical-align ne marche pas avec les div ![CSS] Probleme multi ligne dans une DIV
CSS/DIV Firefox/IE6 j'en peux plus...[CSS] firefox laisse un espace sous ma div de hauteur fixe...
Plus de sujets relatifs à : Div centré en largeur et hauteur

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.054 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR