Aide css [Résolu]

Messages postés
55
Date d'inscription
samedi 8 octobre 2005
Statut
Membre
Dernière intervention
16 août 2011
- - Dernière réponse : dvwyns
Messages postés
160
Date d'inscription
mardi 2 janvier 2007
Statut
Membre
Dernière intervention
7 mai 2012
- 16 août 2011 à 16:44
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 

Afficher la suite 

8 réponses

Meilleure réponse
Messages postés
160
Date d'inscription
mardi 2 janvier 2007
Statut
Membre
Dernière intervention
7 mai 2012
3
Merci
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

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 191 internautes nous ont dit merci ce mois-ci

Commenter la réponse de dvwyns
Messages postés
160
Date d'inscription
mardi 2 janvier 2007
Statut
Membre
Dernière intervention
7 mai 2012
0
Merci
Mets un "overflow:hidden" dans le css du conteneur de "contenutableau" (j'imagine que c'est contenu2)

Enjoy
Commenter la réponse de dvwyns
Messages postés
55
Date d'inscription
samedi 8 octobre 2005
Statut
Membre
Dernière intervention
16 août 2011
0
Merci
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;
}
 


Commenter la réponse de yoyo77yo
Messages postés
160
Date d'inscription
mardi 2 janvier 2007
Statut
Membre
Dernière intervention
7 mai 2012
0
Merci
Donne ton html, ça permettra de voir tes imbriquations et de faire des test
Commenter la réponse de dvwyns
Messages postés
55
Date d'inscription
samedi 8 octobre 2005
Statut
Membre
Dernière intervention
16 août 2011
0
Merci
voila :







Comfort hôtel Lagny
































Le contenu de cette page nécessite une version plus récente d'Adobe Flash Player.

http://www.adobe.com/go/getflashplayer
















Drop Down Menu










,

----

,

----







Les Chambres










Nos 56 chambres sont équipées de télévision à écran plat, ligne téléphonique directe, douches et toilettes privées.







Chambres simple Lit 160


Chambre Grand lit 160 équipé de couette ou couverture selon demande. Plateaux d'accueil (bouilloire, thé, café, petit gâteaux) TV écran plat, WiFi douche et toilettes privés.





Chambres Double Lit Jumeaux


2 lits jumeaux équipés de couette Plateaux d'accueil (bouilloire, thé, café, petit gâteaux) TV écran plat, WiFi et douche et toilettes privés .





Chambre Triple


pour couple avec un enfant ; possibilité d'un lit Bébé supplémentaire offert 1 lit Double couette et un lit simple couette TV écran plat.





Chambre Famille Quadruple


pour 1 couple avec deux enfants, lit Bébé supplémentaire offert sur demande. Chambre Grand lit 160 et 2 lits jumeaux équipés de couette. TV écran plat, WiFi et douche et toilettes privés.









Copyright © 2011 : [# Comfort-hôtel-lagny]















Commenter la réponse de yoyo77yo
Messages postés
160
Date d'inscription
mardi 2 janvier 2007
Statut
Membre
Dernière intervention
7 mai 2012
0
Merci
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
Commenter la réponse de dvwyns
Messages postés
55
Date d'inscription
samedi 8 octobre 2005
Statut
Membre
Dernière intervention
16 août 2011
0
Merci
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;
}

Commenter la réponse de yoyo77yo
Messages postés
55
Date d'inscription
samedi 8 octobre 2005
Statut
Membre
Dernière intervention
16 août 2011
0
Merci
up
Commenter la réponse de yoyo77yo