Sujet Précédent Sujet Suivant

Problème CSS

pcmanprogrammeur Messages postés 126 Date d'inscription dimanche 27 mars 2005 Statut Membre Dernière intervention 16 octobre 2010 - 3 juil. 2007 à 11:16
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 3 juil. 2007 à 19:25

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>

test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test

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

A voir également:

Problème CSS
Exemple page d'authentification html css - Conseils pratiques -PHP
Formulaire d'inscription html css php - Forum PHP
Exemple de page d'accueil html et css - Forum Visual Basic
Interface pour chaque page ✓ - Forum PHP
Css scrollbar position ✓ - Forum Javascript / DHTML

1 réponse

Réponse 1 / 1

PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 16
3 juil. 2007 à 19:25

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>

<script type="text/javascript" language="JavaScript">
    for( i=0; i <100; i++) document.write( "test " +i +"
");
</script>

</html>

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

;0)

Discussions similaires

CSS MAP et AREA

exemple de page d'accueil avec la balise div et css

Modifier la taille d'une "background-image:url()" en CSS

code source HTML

Rogner une image

Votre réponse

Discussions similaires