28172 sujets

CSS et mise en forme, CSS3

Positionnement d'un conteneur DIV principal avec + DIV

Bonjour,

Voilà maintenant plus de trois jours que j'essaie de centrer un DIV en conteneur principal avec d'autres DIV à l'intérieur.

Mais quand je centre le div conteneur, il se met bien mais pas les autres,
je ne comprends mon erreur.

Pour mon code css de mon conteneur est
[#global
{
margin-left:auto;
margin-right:auto;
width:950px;
height:600px;
border:1px solid black;

}]
Je croyais qu'il y avait hérédité sur les DIV enfant.

Merci de bien vouloir aiguiller mes lanternes.

Bon courage.

Philippe
Hello wape et bienvenue Smiley cligne ,

pour avoir une chance d'aiguiller tes lanternes ( Smiley lol ) l'idéal serait de voir une page en ligne. A défaut montres-nous l'intégralité de ton code (html + css).

A+
Voici mon code comme demandé pour le CSS 

*
		{
	padding:0;
	margin:1px;
		}
body
		{
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#000000;
		}
#conteneur 
		{
	width:950px; 
	height:550px;
	margin:0 auto;
	border:1px solid #009900;
		}
			
#header	
		{
	width:950px;
	height:125px;
		}
#header td
		{
	text-align:center;
		}
#wrap 
		{ 
	overflow:hidden;
		}
#sidebar
		{
	float:left; 
	background-color:#009933;
	width:170px;
	height:35px
		}
#contenu 
		{
	margin-left:170px;
	width:500px;
	background-color:#99FF33;
		}
#numerovert
		{
	position:absolute;
	width:300px;
	height:86px;
	margin-left:10px;
		}
#diagurgent
		{
	position:absolute;
	width:300px;
	top:460px;
	height:86px;
	margin-left:700px;
		}
#form
		{
	margin-left:670px;
	width:270px;
	height:auto;
	border:1px solid #339900;
		}

#form td
		{
	text-align:left;
	color:#000000;
	font-size:10px;
		}
#form input
		{
	width:90px;
	line-height:15px;
	font-size:10px;
	color:#000000;
	border:1px solid #339900;
	background-color:#CCFFCC;
		}
#form select
		{
	width:90px;
	line-height:15px;
	font-size:10px;
	border:1px solid #339900;
	background-color:#CCFFCC;
		}
#form textarea
		{
	width:120px;
	height:70px;
	font-size:10px;
	border:1px solid #339900;
	background-color:#CCFFCC;
		}
#formimage 
		{
	vertical-align:middle;
	text-align:center;
		}
#footer 
		{
		width:500px;
		height:auto;
		background-color:#FFCC00;
		}

et pour la page 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="/css/test.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="conteneur">
	<div id="header">
		<!-- Ceci est mon haut de page -->
	    <table width="100%">
          <tr>
            <td><img src="/images/diag_plus.jpg" width="343" height="80" /></td>
            <td><img src="/images/img5.jpg" width="583" height="117" /></td>
          </tr>
        </table>
	</div>
	<div id="wrap">
		
		</tr></table></div>
		<div id="diagurgent"><table><tr><td><img src="/images/numurgent.png" /></td></tr></table></div>
		<div id="contenu">
		</div>
          <div id="form">
		    <form id="form1" name="form1" method="post" action="valid_form_demande.php">
		      <table>
                <tr>
                  <td colspan="2"><div id="formimage"><img src="/images/dem_dev.PNG" /></div></td>
                </tr>
                <tr>
                  <td>Nom :</td>
                  <td><input type="text" name="lastname" value="<? if(isset($_POST['lastname'])) echo $_POST['lastname']; ?>"/></td>
                </tr>
                <tr>
                  <td>Pr&eacute;nom :</td>
                  <td><input type="text" name="firstname" /></td>
                </tr>
                <tr>
                  <td>Code postal  :</td>
                  <td><input type="text" name="zipcode" /></td>
                </tr>
                <tr>
                  <td>T&eacute;l&eacute;phone :</td>
                  <td><input type="text" name="phone" /></td>
                </tr>
                <tr>
                  <td>Courriel :</td>
                  <td><input type="text" name="email" /></td>
                </tr>
                <tr>
                  <td>Sujet :</td>
                  <td><select name="sujet" >
                      <option value="Vente">Vente</option>
                      <option value="Location">Location</option>
                      <option value="Gestion">Gestion</option>
                    </select>                  </td>
                </tr>
                <tr>
                  <td>Type de bien :</td>
                  <td><select name="typebien" >
                      <option value="Appartement">Appartement</option>
                      <option value="Villa">Villa</option>
                      <option value="Maison de ville">Maison de Ville</option>
                      <option value="Immeuble">Immeuble</option>
                      <option value="Commerce">Commerce</option>
                      <option value="Industriel">Industriel</option>
                    </select>                  </td>
                </tr>
                <tr>
                  <td>Superficie :</td>
                  <td><input type="text" name="superficie" /></td>
                </tr>
                <tr>
                  <td>Ann&eacute;e de construction :</td>
                  <td><select name="anneeconstruction" >
                      <option value="Avant 1949">Avant 1949</option>
                      <option value="Entre 1949 et juillet 1997">Entre 1949 et juillet 1997</option>
                      <option value="Apr&egrave;s juillet 1997">Apr&egrave;s juillet 1997</option>
                    </select>                  </td>
                </tr>
                <tr>
                  <td>Commentaires :</td>
                  <td><textarea name="commentaires" ></textarea></td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td><input type="submit" name="submit" value="Validez" />
                      <input type="hidden" name="submitted" /></td>
                </tr>
              </table>
	        </form>
			<!-- Ceci est mon contenu principal -->
		</div>
	</div>
	<div id="footer">Ceci est une pied de page je ne sais où je me trouve
		<!-- Ceci est mon pied de page -->
	</div>
</div>
</body>
</html>


Quand je vérifie sous firefox ça marche et sous IE 7 ça se décale vers la droite pour le téléphone en rouge en bas à droite.

Tu peux le voir en essai sur ce lien http://www.diagplus.wape.eu/index2.php

Merci à ceux qui me pourront me donner des explications.

Bonne soirée

Philippe
Modifié par wape (19 Aug 2008 - 09:04)
Sujet clos
Aller à