Accueil > Forum > > > > Problème CSS
 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
|
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
 Livres en rapport
|
Derniers Blogs
 XNA IS DEAD!XNA IS DEAD! par richardc
Depuis la semaine dernière (et grâce aux TechDays 2012), je me penche activement sur la nouvelle version de Windows, aka Windows 8. Vous me direz, il était temps puisque la première preview date de Septembre dernier.
OK. Remarquez, on n'en est qu'aux...
Cliquez pour lire la suite de l'article par richardc TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 !TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice
Speakers: Fabrice Meillon et Stanislas Quastana Cette session est basée entièrement sur celle donnée lors de la BUILD cet hiver. Il n'y a pas d'ajout d'information en rapport avec cet évènement passé. Windows 8 Server sera intégralem...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE)[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio
Je m'y prends un peu tard je sais, mais bon je suis développeur web et donc hyper fainéant ! Toujours dans le cadre des technologies émergentes, ici HTML5, parce qu'on aime HTML5 chez Wyg , nous seront présent, le vieux ( Aurélien V.) et moi, pour pr...
Cliquez pour lire la suite de l'article par Gio [WP7] DYNAMICALLY CHANGE STARTUP PAGE[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz
Let's say that you want to allow the user to customize the startup page of your application. You can easily change the startup page by editing the 'NavigationPage' attribute in the manifest file. But the manifest cannot be modified once the applicatio...
Cliquez pour lire la suite de l'article par KooKiz
Logiciels
 DocTranslate (V3.1.0.0)DOCTRANSLATE (V3.1.0.0)DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom... Cliquez pour télécharger DocTranslate Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System
|