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
Bug Firefox recuperation de la taille de l'image [ par malkomad ]
Bonjour a tous, Je développe une site de type galerie, et j'ai un pb sous firefox ( uniquement ) lorsque je souhaite récupérer la taille de l'image e
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
Probleme DHTML Window widget [ par destiny ]
Bonjour,Le code : //Affiche le live TV function LiveTV(height, width) { if (livetvwin) { livetvwin.close(); } var widthSup = 0;<br /
 Livres en rapport
|
Derniers Blogs
 [RIA SERVICES] INCLUDE ET DOMAINDATASOURCE[RIA SERVICES] INCLUDE ET DOMAINDATASOURCE par Audrey
Dans un de mes articles précédents , j'avais parlé des DomainDataSource avec RIA Services dans le cas d'une interface Maître - Détail. Dans le même principe, je vais parler d'une autre manière de mettre en forme ce cas d'interface avec RIA Services. Et po...
Cliquez pour lire la suite de l'article par Audrey ZUNE : VERSION ZUNE SOFTWARE V 4.2 ET LA SOCIALISATIONZUNE : VERSION ZUNE SOFTWARE V 4.2 ET LA SOCIALISATION par ROMELARD Fabrice
Une des nouveautés de la version V 3.0 était l'apparition de l'onglet Social qui ne fonctionnait que si le MarketPlace était activé sur son poste. Cela limitait donc son intérêt, car hors du cadre commercial USA-CANADA, peu de monde trouva...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice PRATIQUE DE SILVERLIGHT PAR ERIC AMBROSIPRATIQUE DE SILVERLIGHT PAR ERIC AMBROSI par MPOWARE
Je viens de finir la lecture du dernier livre d'
Eric Ambrosi
éditions PEARSON
Son livre donne une approche pratique de Silverlight qui sera aussi bien comprise par le développeur que par le designeur.
Tous les aspects du développement RIA sont abor...
Cliquez pour lire la suite de l'article par MPOWARE APPRENDRE à DéVELOPPER POUR LES MOBILES AVEC LA NOUVELLE GéNéRATION .NETAPPRENDRE à DéVELOPPER POUR LES MOBILES AVEC LA NOUVELLE GéNéRATION .NET par odewit
2 déclinaisons de Silverlight et 2 déclinaisons de Mono permettent dorénavant (ou permettront prochainement) de développer des applications .NET mobiles pour les principales plates-formes du marché :
Silverlight pour Symbian, basé sur Silverlight 2...
Cliquez pour lire la suite de l'article par odewit ZUNE : NOUVELLE VERSION DU ZUNE SOFTWARE - V 4.2ZUNE : NOUVELLE VERSION DU ZUNE SOFTWARE - V 4.2 par ROMELARD Fabrice
Avec la dernière génération du lecteur MP3 de Microsoft, le ZUNE HD, Microsoft a publié une nouvelle version du logiciel pour PC. Ainsi, je me suis décidé à installer celle-ci sur mon Tablet PC ACER, comme toujours le logiciel est donc tél...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Forum
 RE : CONVERSIONRE : CONVERSION par peter2010
Cliquez pour lire la suite par peter2010
Logiciels
 Academy System (10.9.4.0)ACADEMY SYSTEM (10.9.4.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods
|