begin process at 2012 02 14 03:59:47
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Problème CSS


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Problème CSS

mardi 3 juillet 2007 à 11:16:43 | Problème CSS

pcmanprogrammeur

Bonjour !!!
J'ai un problème en CSS. Voici mon code :

<html>
<style>
#contenu{
 width:680px;
 height:560px;
 margin-top:0px;
 margin-left:0px;
 overflow:auto;
 float:left;
 position:relative;
 background-color:yellow;
}
#masquage
{
 height:100%;
 width:95%;
 height:100%;
 position:absolute;
 float:left;
 z-index:2;
 background-color:red;
}
</style>
</head>
<body>
<div id="contenu">
<div id="masquage"></div>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</div>
</body>
</html>

Le problème est que je souhaite que ma div "masquage" prenne toute la hauteur mais je n'y arrive pas !!!
Merci de votre aide !!!
A bientôt.
mardi 3 juillet 2007 à 19:25:49 | Re : Problème CSS

PetoleTeam

Membre Club

B
onjour...
La déclaration de style telle que tu l'as faite fait que le DIV masquage prend 100% de la fenêtre visible du DIV contenu.

Je ne sais si il y a un moyen avec CSS de contourner ce problème, mais il en existe un en javascript.

Une fois le document chargé il faut redimensionner le DIV masquage à la vrai hauteur du DIV contenu.

Voici un petit script complet qui permet de réaliser cela

<html>
<style type="text/css">
#contenu {
  width : 680px;
  height : 560px;
  margin-top : 0px;
  margin-left : 0px;
  overflow : auto;
  float : left;
  position : relative;
  background-color : yellow;
}
#masquage {
  margin : 0px;
  height : 1px;
  width : 95%;
  position : absolute;
  top : 0px;
  float : left;
  z-index : 2;
  background-color : red;
}
</style>
<script type="text/javascript" language="JavaScript">
//--------------------
function Ajuste_Haut(){
  //-- Recup les Objets
  var Obj_1  = document.getElementById( "contenu");
  var Obj_2  = document.getElementById( "masquage");
  //-- Lecture des Hauteurs
  var Haut_1 = Obj_1.offsetHeight;
  var Haut_2 = Obj_2.offsetHeight;
  //-- Si partie overflow conteneur
  if( Obj_1.scrollHeight > Haut_1)
    Haut_1 = Obj_1.scrollHeight;
  //-- Ajuste hauteur contenu
  Obj_2.style.height = Haut_1 +"px";
}
//---------------------------------------------
function Add_Event( obj_, event_, func_, mode_){
  if( obj_.addEventListener)
    obj_.addEventListener( event_, func_, mode_? mode_:false);
  else
    obj_.attachEvent( 'on'+event_, func_);
}
//======================================
//-- On ajoute levenement sur le onload de window
Add_Event( window, 'load', Ajuste_Haut);

</script>
</head>
<body>
<div id="contenu">
  <div id="masquage"></div>
  <script type="text/javascript" language="JavaScript">
    for( i=0; i <100; i++) document.write( "test " +i +"<br>");
  </script>
</div>
</body>
</html>

S'il y a besoin d'explication complémentaire...

;0)


Cette discussion est classée dans : problème, width, left, height, css


Répondre à ce message

Sujets en rapport avec ce message

Pb d'affichage [ par cosycorner ] Bonjour, J'ai une page avec des miniatures d'images en aléatoire.Lorsqu'on clique, ça ouvre plusieurs popups.Mais la page d'accueil change n'est pas t faire varier la taille de la fenetre navigateur dans le temps (incrementation?) [ par crasse ] salut toutes et tous !j'essai de faire varier la taille de la fenetre du navigateur dans le temps, c'est a dire que par exemple, disons que la fenetre Mon animation flash ne se lit pas avec SWFOBJECT [ par Nixeus ] Bonjour à tous,J'ai voulu intégrer une animation swf dans ma page HTML, en passant par SWFOBJECT afin de ne pas avoir le fameux message d'avertissemen Firefox & mon_image.height ou mon_image.width [ par kcin ] Bonjour tout le mondeDans le développement d'une mini galerie de photos, j'ai une fonction JS qui récupère la hauteur et la largeur de l'image physiqu Problème codage css de mon thème wordpress [ par Wooa ] Bonjour, [b]Ma configuration WP actuelle[/b] [b]- Version de WordPress[/b] : dernière française [b]- Thème utilisé[/b] : WoaWorld [b]- Extensions en Barre/jauge graphique à animer [ par jimyarts ] Tout d'abord, bonjour à toute la communauté de CS,Je suis en train d'élaborer un site concernant le cyclisme, et donc les coureurs. Je connais bien le probleme javascript + area shape [ par AlexC31 ] Bonjour, J'ai un code en Javascript qui permet d'afficher des images en fonction de la résolution de l'écran. Si la résolution est par exemple en 10 Problème CSS Javascript sous IE6 [ par LordSnotling ] Bonsoir, J'ai un problème d'affichage sous IE6 j'ai un script javascript qui génère dynamiquement une hierarchie de div et j'ai une classe css pour Problème de ScrollLeft et ScrollRight [ par AcarnanDragoon ] Bonjour à toutes et à tous ! Bien au chaud en train de travailler alors que la neige tombe voila que me tombe dessus un problème : J'ai deux boutons generateur de popups defifante [ par soborne ] voila jai une balise mais lorsque je le met dans les template sa marche pas alors que faire pouvez vous maider peut etre faut le modifier voici la bal


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 5,008 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales