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
Code source formulaire d'inscription html css - Forum PHP
Css scrollbar ✓ - Forum Javascript / DHTML
Exemple de page d'accueil html et css ✓ - Forum PHP
Css url ✓ - Forum PHP

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

Rogner une image

coller deux div avec du css

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

code source HTML

Votre réponse

Discussions similaires