28172 sujets

CSS et mise en forme, CSS3

Centrer le corps du texte

Bonjour à tous!
j'ai un petit souci, je n'arrive pas à positionner le corps du texte entre les deux blocs de gauche et de droite pour que tous soit au même niveau.
voici les codes si quelqu'un pourrai m'aider


Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Traduction Pro</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="site" href="test.css" />
</head>
<body>
	<div id="maPage">
		<div id="en_tete">
		</div>
		<div id="monContenu2">
			<div class="element_menu2">
				<p><ul class="rien"></p>
					
					<li><a href="site.html">image1</a></li>
					
					<li><a href="competences.html">image2</a></li>
					
					<li><a href="tarifs.html">image3</a></li>
					
					<li><a href="contact.html">image4</a></li>
				</ul>
			</div>

		<div id="monContenu">
			<div class="element_menu">
				<p><ul class="rien"></p>
					
					<p><li><a href="site.html">Accueil</a></li></p>
					
					<p><li><a href="competences.html">Compétences</a></li></p>
					
					<p><li><a href="tarifs.html">Tarifs</a></li></p>
					
					<p><li><a href="contact.html">Contact</a></li></p>
				</ul>
			</div>
			
			
			<div id="corps">
				<h1>Bienvenue sur Traduction Pro</h1>
				<h2>Fiabilité & Qualité<br/></h2>

				<h3>Parce que chaque mot compte...</h3>
				<p>Traductrice indépendante diplômée et qualifiée, j’offre des services de <span class="nom">traduction de qualité professionnelle</span>.<br/></p>

				<p>Je traduis vos textes du <span class="nom">portugais</span> vers le français</span> ou de l'<span class="nom">espagnol</span> vers le français.<br/></p>
				<p><span class="nom">Entreprises ou particuliers</span>, pour toutes vos traductions , je vous propose :</p>

				<ul>
					<li>une traduction de <span class="nom">qualité</span></li>
					<li>des tarifs <span class="nom">avantageux</span></li>
					<li>des délais <span class="nom">toujours respectés</span></li>
					<li>une grande <span class="nom">réactivité</span></li>
				</ul>
			</div>			
		</div>
		
		<div id="pied_de_page">
			<p>N’hésitez pas à me contacter, à me faire parvenir votre document à traduire. A réception de votre demande je vous établirai rapidement un devis gratuit.</p>
		</div>
	</div>
	

</body>
</html>





body{
	width: 980px;
   margin: auto; /* Pour centrer notre page */
   margin-top: 5px; 
   margin-bottom: 5px;
   background-image: url("fondsite.jpg"); /* Une image de fond */
   margin-left: 0px;
   margin-right: 0px
}

#maPage /* Contenu de ma page */
{
	width: 950px;
	margin: auto; /* Pour centrer notre page */
	margin-top: 5px;
	margin-bottom: 5px;
	background-image: url("fondsite.jpg"); /* Une image de fond */
	font-family : serif
}

/* L'en-tête */
#en_tete
{
	width: 980px;
	height: 150px;
	background-image: url("monlogo3.jpg");
	background-repeat: no-repeat;
	margin-bottom: 5px;
}
#monContenu2
{
width: 900px; /* Très important : donner une taille au menu */
	float:right,left;
	clear:both;
	margin-bottom: 50px;

}
.element_menu2 /* Tous les titres de menus */
{float:right;
	width: 30px;
	margin-right: 50px;
	list-style-type: none;
	text-decoration: none;
	color: black;
	margin-bottom: 0px; /* Pour éviter que les éléments du menu ne soient trop collés */
	font-size: 20px
	}
.element_menu2  a
{margin-right: 50px;
list-style-type: none;
	text-decoration: none;
	color: black;
	font-family : monotype corsiva
}

#corps /* contenu du corps */
{
	text-align: center;
	width: 400px;
	float:center;
}

.rien
{
   list-style-type: none;
}

#corps p{
	margin:10px 0px 15px 0px;
}

#corps h1 /* titre */
{text-align: center;
	font-family : monotype corsiva;
	font-size:45px;	
}

#corps h2 /* titre */
{text-align: center;
	font-weight:bold;
}

#corps h3 /* titre */
{font-family : monotype corsiva;
	font-size:30px;
	font-weight:bold;
}

#pied_de_page /* derniere phrase */
{
	text-align: center;
	width: 860px;
	clear:both;
	padding:20px;
}
.nom
{
   font-weight: bold;
}
p,h1,h2,h3
{
   border-left: 4px groove red;
   border-right: 4px groove red;
}
Voici ce que ça donne upload/24776-site.jpg
Modifié par sue93 (01 Nov 2009 - 13:17)
Bonjour,
Il faut mettre ton menu gauche dans un bloc : 


[#red]<div id="left">[/#]
<ul class="rien">
                     
                    <li><a href="site.html">image1</a></li> 
                     
                    <li><a href="competences.html">image2</a></li> 
                     
                    <li><a href="tarifs.html">image3</a></li> 
                     
                    <li><a href="contact.html">image4</a></li> 
</ul> 
[#red]</div>[/#]


Et rajouter ceci dans ton fichier CSS : 


#left
{ 
    text-align: center; 
    width: 400px; 
    [#red]float:left;[/#]
}


Et puis modifier la proprieté float de l'idantifiant corps :


#corps /* contenu du corps */ 
{ 
    text-align: center; 
    width: 400px; 
    [#red]float:left;[/#]
}


Je croix que c'est bon. Par contre ton code est un peu mélangé, il faut penser a faire le nettoayge Smiley cligne

Bonne chance
Sujet clos
Aller à