Accueil > Forum > > > > aide css
 aide css
mercredi 10 août 2011 à 14:20:49 |
aide css
yoyo77yo
|
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 ?
Code PHP :
/* 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
|
|
mercredi 10 août 2011 à 15:46:01 |
Re : aide css
dvwyns
|
Mets un "overflow:hidden" dans le css du conteneur de "contenutableau" (j'imagine que c'est contenu2)
Enjoy
|
|
mercredi 10 août 2011 à 19:23:29 |
Re : aide css
yoyo77yo
|
cela ne change rien : j'ai mis cela :
Code PHP :
/* 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;
}
|
|
jeudi 11 août 2011 à 10:23:27 |
Re : aide css
dvwyns
|
Donne ton html, ça permettra de voir tes imbriquations et de faire des test
|
|
jeudi 11 août 2011 à 11:20:22 |
Re : aide css
yoyo77yo
|
voila :
Code HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<php>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Comfort hôtel Lagny</title>
<link href="stylehotel.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="stmenu.js"></script>
</head>
<body>
<div id="conteneur">
<div id="header">
<div id="entete">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="960" height="128">
<param name="movie" value="images/banniere.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="images/banniere.swf" width="960" height="128">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
<div>
<h4>Le contenu de cette page nécessite une version plus récente d'Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir le lecteur Adobe Flash" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</div>
<div id="lemenu">
<div id="lemenu2">
<a href="http://www.dhtml-menu-builder.com" style="display:none;visibility:hidden;">Drop Down Menu</a>
<script type="text/javascript" src="comfort.js"></script>
</div>
</div>
<div id="contenu">
<div id="contenu2">
<div id="contenutableau"><table width="75%" border="0" cellspacing="5">
<tr>
<td><img src="images/chambre/chambre4.jpg" width="200" height="150" /></td>
</tr>
<tr>
<td><img src="images/chambre/chambre2.jpg" width="200" height="150" /></td>
</tr>
<tr>
<td><img src="images/chambre/chambre3.jpg" width="200" height="150" /></td>
</tr>
</table>
</div>
<p class="cont2titre"> </p>
<p class="cont2titre">Les Chambres</p>
<p class="cont"> </p>
<p class="cont"> </p>
<p class="cont">Nos 56 chambres sont équipées de télévision à écran plat, ligne téléphonique directe, douches et toilettes privées. </p>
<p class="cont"><br />
</p>
<p class="cont"><strong>Chambres simple Lit 160</strong></p>
<p class="cont">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.</p>
<p class="cont"> </p>
<p class="cont"><strong>Chambres Double Lit Jumeaux</strong></p>
<p class="cont">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 .</p>
<p class="cont"> </p>
<p class="cont"><strong>Chambre Triple</strong></p>
<p class="cont">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.</p>
<p class="cont"> </p>
<p class="cont"><strong>Chambre Famille Quadruple</strong></p>
<p class="cont">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.</p>
</div>
</div>
<div id="pied">
<p class="piedcont">Copyright © 2011 : <a href="#" class="piedcont2">Comfort-hôtel-lagny</a></p>
<!-- Si vous retirez la référence ci dessus pour des raisons esthétiques, je vous remercie de laisser celle presente entre les balises NOSCRIPT ci-dessous que personne ne verra. Merci. Tcheval. -->
<noscript>
</noscript>
</div>
</div>
</body>
</php>
|
|
vendredi 12 août 2011 à 10:45:37 |
Re : aide css
dvwyns
|
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
|
|
vendredi 12 août 2011 à 14:00:07 |
Re : aide css
yoyo77yo
|
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 !!)
Code HTML :
/*////////////////////////*/
/* 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;
}
|
|
lundi 15 août 2011 à 21:00:33 |
Re : aide css
|
mardi 16 août 2011 à 16:44:23 |
Re : aide css
dvwyns
|
Réponse acceptée !
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
|
|
Cette discussion est classée dans : image, top, css, div, margin
 Répondre à ce message
 Sujets en rapport avec ce message
étirer une image avec du css [ par eax ]
bonsoir,je souhaite mettre une image en fond dans un tableau (dans la balise TD). je souhaiterai que cette image soit étirée, qu'elle prenne toute la
Style de menu css [ par CCJ ]
bonjour voila j'ai un petit probleme je veu que dans mon site dans une cellule d'un tableau il y ait une image et que quand je passe dessus l'image ch
Style CSS [ par CCJ ]
Bonjour je developpe actuellement un site et j'ai uun bleme voila la partie de ma source css foireuse: td.Menu { background-image: url("Images/MenuNeu
Modifier la taille d'une "background-image:url()" en CSS [ par Prototype51 ]
Bonjour à tous, Je ne savais où poster cette question mais j'espère que vous pourrez quand même m'aider.J'aimerais faire un menu en CSS avec une ima
scrollbar DIV [ par hackademius ]
bonjour a tous , me revoila avec mes questions stupides.... bon je suis en train de faire un galerie photo (simple html) et separé pour l'affichage en
problème d'affichage [ par rachidphp93 ]
bonjour tout le monde, j(ai un problème d'affichage d'un menu à gauche, (je sais ce n'est pas trop du
Probleme de CSS pour un blog [ par Ilsundal ]
Bonjour,je suis en train de coder un petit blog pour mon site personnel, mais j'ai un gros probleme, quand je met l'image en align=left (donc en flota
Probleme css div [ par toomsbzh ]
Bonjour, j'ai une petit problème dans mon css. je vais essayer d'expliquer le plus clairement possible. J'ai un "div_centre" qui englobe deux divs:
Div Dynamqiue [ par zazou11 ]
<div id="ctl00_CPH1_UCForumHome1_Message_UCForumMessage1_DGMsg_ctl02_DGG" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(/g/rs.png) no-
css ie et firefox !! [ par gaucyril ]
Bonjour, j'ai un petit probleme de compatibilité avec internet explorer et firefoxJ'esssaye de faire une liste avec un fond transparent et le bord du
 Livres en rapport
|
Derniers Blogs
 IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVESSHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg
Dernièrement, nous avons migré le site
myTIC
vers un nouveau serveur SharePoint 2010. Dans les contenus que nous vouloins récupérer, nous avions un certain nombre de blogs.
Nous avons utilisé les commandes Power...
Cliquez pour lire la suite de l'article par junarnoalg
Forum
 RE : GOOGLE MAPRE : GOOGLE MAP par inwebo
Cliquez pour lire la suite par inwebo GOOGLE MAPGOOGLE MAP par fatmanajjar
Cliquez pour lire la suite par fatmanajjar
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|