aide cssRésolu

Question

bonjour,
 
J'ai une feuille php avec un div (que j'ai nommée "contenutableau")qui contient un tableau : je demande au div de flotter à droite avec une petite marge en top et en right mais je constate que sur IE, mon div est alignée à gauche (sous firefox il se met bien à droite)
 
Voici mon code CSS ! pouvez vous m'aider ?
 

/* Image de fond du contenu */
#contenu {
width: 1020px;
height: 550px; /* Largeur de l'image */
background-image:url('../images/milieu.gif'); /* URL de l'image de fond */
background-repeat:repeat-y;
margin:0;
padding:0;
}

#contenu2 {
width: 960px;
height: 540px; /* hauteur de l'image */
border-top-style:hidden;
margin-left: 30px;
}

#contenutableau {
width:200x;
height:500px;
float:right;
margin-top:20px;
margin-right:20px;
color:#5a5a5a;
}
 



MajorShepard

 Cette réponse m'a aidé # Posté il y a 1h47

dvwyns · Accepted Answer

Salut,
J'ai remarqué que ça fonctionne sur tous les browser sauf sur IE7.
A part ça, je voulais etre sur de bien saisir le résultat que tu recherches...
Tu veux un texte sur la gauche qui lorsque il arrive au bout des images integré au contenutableau, il passe en dessous de ce dernier?

Sinon, je te propose de revoir ton css en mettant ton texte dans un div en "float:left" ainsi que contenutableau en "float:left" et le contenu2 en "overflow:hidden".
Pt précision: n'oublie que chaque fois que tu mets un padding a un conteneur, tu agrandis la conteneur au delà de sa mesure spécifié avec "width" donc fait attention à ça (pour le peu que j'ai regardé, j'ai eu l'impression que ça pouvait etre un problème possible).

J'ai malheureusement pas bcp de temps pour travailler dessus, si tu as le temps je regarderai plus tard dans la semaine.

Cordialement

dvwyns · Answer

Mets un "overflow:hidden" dans le css du conteneur de "contenutableau" (j'imagine que c'est contenu2)

Enjoy

yoyo77yo · Answer

cela ne change rien : j'ai mis cela : 


/* Image de fond du contenu */
#contenu {
width: 1020px;
height: 550px; /* Largeur de l'image */
background-image:url('../images/milieu.gif'); /* URL de l'image de fond */
background-repeat:repeat-y;
margin:0;
padding:0;
}

#contenu2 {
width: 960px;
height: 540px; /* hauteur de l'image */
border-top-style:hidden;
margin-left: 30px;
       overflow:hidden
}

#contenutableau {
width:200x;
height:500px;
float:right;
margin-top:20px;
margin-right:20px;
color:#5a5a5a;
}

dvwyns · Answer

Donne ton html, ça permettra de voir tes imbriquations et de faire des test

yoyo77yo · Answer

voila : 


         



      
      Comfort hôtel Lagny
      
      





      


           

                      

             
               
               
               
               
               
               
               
               
               
                 
                 
                 
                 
                 
                 
                 

                   Le contenu de cette page n&eacute;cessite une version plus r&eacute;cente d'Adobe Flash Player.

                   http://www.adobe.com/go/getflashplayer


                 

                 
               
               
             
           

     

           
 
           

            Drop Down Menu

           

           

           

           

            
,

----

,

----


            

             


             Les Chambres


              


               



             
 Nos 56 chambres sont &eacute;quip&eacute;es de t&eacute;l&eacute;vision &agrave; &eacute;cran plat, ligne t&eacute;l&eacute;phonique directe, douches et toilettes priv&eacute;es. 


 

     


 Chambres simple Lit 160


Chambre Grand lit 160 &eacute;quip&eacute; de couette ou couverture selon demande. Plateaux d'accueil (bouilloire, th&eacute;, caf&eacute;, petit g&acirc;teaux) TV &eacute;cran plat, WiFi douche et toilettes priv&eacute;s.


  


 Chambres Double Lit Jumeaux


2 lits jumeaux &eacute;quip&eacute;s de couette Plateaux d'accueil (bouilloire, th&eacute;, caf&eacute;, petit g&acirc;teaux) TV &eacute;cran plat, WiFi et douche et toilettes priv&eacute;s .


  


 Chambre Triple


pour couple avec un enfant ; possibilit&eacute; d'un lit B&eacute;b&eacute; suppl&eacute;mentaire offert 1 lit Double couette et un lit simple couette TV &eacute;cran plat.


  


 Chambre Famille Quadruple


pour 1 couple avec deux enfants, lit B&eacute;b&eacute; suppl&eacute;mentaire offert sur demande. Chambre Grand lit 160 et 2 lits jumeaux &eacute;quip&eacute;s de couette. TV &eacute;cran plat, WiFi et douche et toilettes priv&eacute;s.


           




           

         Copyright &copy; 2011 : [# Comfort-h&ocirc;tel-lagny]

dvwyns · Answer

Salut,
Je regarderai ça ce week-end, j'ai juste eu le temps de voir qu'il se mettait bien à droite par rapport au texte mais pas assez par rapport à la largeur de contenu2.

Si c pas le cas chez toi, il faut que tu me fournisses "stylehotel.css".
Il peut y avoir des conflits de mise en place entre tout les block de ta page.

Cordialement

yoyo77yo · Answer

voici mon stylehotel.css (a savoir que ma banniere aussi est decalé vers le haut au lieu d'etre aligné comme je lui demande (bizzare !!)


/*////////////////////////*/
/* Information de la page */
/*////////////////////////*/

body {
font-family: Verdana, Arial, Helvetica, sans-serif; /* Police Verdana utilisé par défaut */
font-size: 10pt;
margin: 0; /* Pas de marge */
padding: 0; /* Couleur de fond de la page Web */
border-style:hidden; /* Les bordures sont cachés */
background-image: url(../images/fond.gif);
background-repeat: repeat-x;
}

/*//////////////////////*/
/* Mise en page du site */
/*//////////////////////*/

#conteneur {
position: absolute;
border-style:hidden; /* Les bordures sont cachés */
width: 1020px; /* Taille fixé à 750 pixel */
height: 830px;
left: 50%;
margin-left: -475px;
top: -1px;
}

/*///////////////////////*/
/* Informations Diverses */
/*///////////////////////*/

/* Mise en page des News */
h1 {
font-size: 10pt; /* Taille de la police */
text-decoration :underline; /* On souligne la police */
font-weight :bold; /* On met en gras */
text-align:left; /* On aligne au gauche */
text-align:justify; /* On justifie le texte */
margin-right:125px; /* On fais une marge de 100 pixel à droite pour éviter que le texte ne colle à la bordure */
margin-left:125px; /* On fais une marge de 100 pixel à gauche pour éviter que le texte ne colle à la bordure */
}

/* Mise en page des Titres en bleu foncé */
h2 {
font-size: 10pt; /* Taille de la police */
color:#2e7fda; /* Couleur du texte bleu foncé */
font-weight :bold; /* On met en gras */
text-align:left; /* On aligne au gauche */
text-align:justify; /* On justifie le texte */
margin-right:125px; /* On fais une marge de 100 pixel à droite pour éviter que le texte ne colle à la bordure */
margin-left:125px; /* On fais une marge de 100 pixel à gauche pour éviter que le texte ne colle à la bordure */
border-top: solid 1px #005E20;
border-bottom: solid 1px #005E20;
}


/* Mise en page des traits horizontaux */
hr {
width:60%; /* On créer une ligne centré et de 70% par rapport à la taille de la page */
color:#000; /* Couleur du trait : noir */
background-color:#000;
height:1px; /* Taille du trait : 1 pixel */
border: 0;
}

/*Suppression du cadre autour des images-liens */
a img {
border:0;
}

/*////////*/
/* Header */
/*////////*/

/* Image de fond */
#header {
height: 160px; /* Hauteur de l'Header */
background-image:url('../images/header.gif'); /* URL de l'image de fond */
background-repeat:no-repeat; /* On interdit la reproduction de l'image de fond */
margin:0; /* Pas de marge */
margin-top:25px;
}

#entete {
width: 960px;
height: 128px;
margin-left: 30px;
margin-top: 33px;	
}
/*//////*/
/* Menu */
/*//////*/

/* Information sur les liens du menu */
.menu {
margin:0 80px;
text-align: center;
font-weight :bold; /* On met en gras */
}

.menu a {
margin:0 10px;
text-align: center;
text-decoration: none;
}


/*/////////*/
/* lemenu */
/*/////////*/

#lemenu {
width: 1020px;
height: 40px;
background-image:url('../images/milieu.gif'); /* URL de l'image de fond */
background-repeat:repeat-y;
margin-bottom:0;
padding:0;
}

#lemenu2 {
width: 960px;
height: 40px;
margin-left: 30px;
margin-bottom:0;
padding:0;
}


/*/////////*/
/* Contenu */
/*/////////*/

/* Image de fond du contenu */
#contenu {
width: 1020px;
height: 550px; /* Largeur de l'image */
background-image:url('../images/milieu.gif'); /* URL de l'image de fond */
background-repeat:repeat-y;
margin:0;
padding:0;
}

#contenu2 {
width: 960px;
height: 540px; /* hauteur de l'image */
border-top-style:hidden;
margin-left: 30px;

}

#contenutableau {
width:200x;
height:500px;
float:right;
margin-top:20px;
margin-right:20px;
color:#5a5a5a;
}

#contenutableau2 {
width:200x;
height:150px;
float:right;
margin-top:20px;
margin-right:20px;
color:#5a5a5a;
}


/* Information sur le contenu */
.cont {
font-family:"Lucida Calligraphy";
font-size: 10pt;
color:#949494;
text-align:left; /* On place le texte à gauche */
margin:5px 25px; /* On fais une marge de 15 pixel à droite pour éviter que le texte ne colle à la bordure */
padding:0;
}

.cont2reserve {
font-family:"Lucida Calligraphy";
font-size: 9pt;
color:#949494;
text-align:left; /* On place le texte à gauche */
margin:5px 8px; /* On fais une marge de 15 pixel à droite pour éviter que le texte ne colle à la bordure */
padding:0;
}

.cont2reservebis {
font-family:"Lucida Calligraphy";
font-size: 3pt;
color:#949494;
text-align:left; /* On place le texte à gauche */
margin:5px 8px; /* On fais une marge de 15 pixel à droite pour éviter que le texte ne colle à la bordure */
padding:0;
}

.cont2boutonreserve {
font-family:"Lucida Calligraphy";
font-size: 9pt;
color:#949494;
text-align:center; /* On place le texte à gauche */
margin:1px 25px; /* On fais une marge de 15 pixel à droite pour éviter que le texte ne colle à la bordure */
padding:0;
}

.cont2titre {
font-family:"Lucida Calligraphy";
font-size: 15pt;
color:#1b5ea8;
text-align:left; /* On place le texte à gauche */
margin:0px 25px; /* On fais une marge de 15 pixel à droite pour éviter que le texte ne colle à la bordure */
padding:0;
}


/* Mise en page des puces */
.cont li {
list-style-type : disc; /* On utilise des cercles noirs pleins */
margin-left:100px; /* On fais une marge de 50 pixel à droite pour éviter que le texte ne colle à la bordure et aussi pour décaler le texte des puces par rapport au texte normal */
margin-right:100px; /* On fais une marge de 100 pixel à droite pour éviter que le texte ne colle à la bordure */
padding-right:100px !important; /* Corrige un problème sur les listes */
padding-right:0;  /* Cette ligne corrige un bug de IE  */
}

.cont a {
font-weight :bold; /* On met en gras */
color:#005E3F;
text-decoration: none;
}

/*////////*/
/* Footer */
/*////////*/

/* Image de fond du Footer ou Pied de page */
#pied {
width: 1020px; /* Largeur de l'image */
height: 66px;
background-image:url('../images/footer.gif'); /* URL de l'image de fond */
background-repeat:no-repeat;
margin:0;
padding:0;
}

/* Information sur le footer */
.piedcont {
text-align:center; /* On centre le texte */
font-weight :bold; /* On met en gras */
font-family:"Lucida Calligraphy";
color:#949494;
}

.piedcont2 {
text-align:center; /* On centre le texte */
font-weight :bold; /* On met en gras */
font-family:"Lucida Calligraphy";
color:#1b5ea8;
}

p.piedcont, p.piedcont a {
margin: 0px;
padding-top: 8px;
text-decoration: none;
}

yoyo77yo · Answer

up

Aide css

8 réponses

Votre réponse

Discussions similaires