Sujet Précédent Sujet Suivant

Impossible d'aligner du texte à gauche

Fermé
Selimk11 Messages postés 31 Date d'inscription jeudi 24 juin 2010 Statut Membre Dernière intervention 13 mai 2011 - 13 mai 2011 à 23:41
 mpmp93 - 14 mai 2011 à 08:55
Bonjour, je n'arrive pas à aligner du texte dans ma page en php.

Voici le code source de la page :

"<html>
<head>

<!-- CENSDEV ; Selim & XP3 & Nixnox -->
<meta http-equiv="X-UA-Compatible" content="IE=7">
<link rel="stylesheet" type="text/css" href="azer.css">
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>Entreprise AMINA | Construction et rénovation dans l'aude</title>
<meta name="keywords" content="btp | entreprise | amina | maison | construction | renovation | aude | batiment | macon | maconnerie">
<meta name="description" content="AMINA">
</head>
<body id="body">
<div id="marge"></div>
<div id="page">
<div id="marge"></div>
<div id="baniere">
<div id="lien">
<a href="http://aminabtpaude.fr/"></a>
</div>

</div>

<div id="ventre"><br>
<br>
<br>
<div id="lacceuil">
<a href="https://www.google.fr/?gws_rd=ssl" class="blanc"><center>Acceuil</center></a></div>

<div id="photos">
<a href="https://www.google.fr/?gws_rd=ssl" class="oeuvre"><center>Nos oeuvres</center></a>

<div id="contact">
<a href="contactt.php" class="contact"><center>Contact</center></a>

<div id="infos">
<a href="https://www.google.fr/?gws_rd=ssl" class="infos"><center>Infos +</center></a>

</div>
<div id="marge"></div>
<center><div id="fiche">
<div id="lien">
<a href="https://www.google.fr/?gws_rd=ssl"></a>
</div>

</div></center>
<div id="marge"></div>
<div id="copyright">
<p>Copyright 2011 - 2012 ©<br>ENTREPRISE AMINA, tous droits réservés. Toute copie partielle ou intégrale des éléments mis à disposition par ce site (graphiques, auditifis) sans l'autorisation du propriétaire de ce site et/ou du propriétaire de l'élément est totalement interdite.</p>
</div>
<div id="marge"></div>
</div>
<div id="marge"></div>

</body></html>"

Et voici le CSS :

" /*-> CSS BY XP3 <-*/
a {
color: green;
}

a.blanc {
color: white;
font : bold 15px verdana, tahoma, arial, helvetica, sans-serif;
padding: 17px 0px;
}
a.oeuvre {
color: white;
font : bold 15px verdana, tahoma, arial, helvetica, sans-serif;
padding: 15px 1px;
}
a.contact {
color: white;
font : bold 15px verdana, tahoma, arial, helvetica, sans-serif;
padding: 15px 0px;
}

a.infos {
color: white;
font : bold 15px verdana, tahoma, arial, helvetica, sans-serif;
padding: 15px 0px;
}

.maclasse
{
text-align: left;
}

#body {

background: url(http://www.egmb-batiment.com/img/bg-total.gif) repeat-x top left white;
background-image: url(http://www.egmb-batiment.com/img/bg-total.gif);
background-repeat-x: repeat;
background-repeat-y: no-repeat;
margin: 0px;
padding: 0px;
text-align: left;
}

#page {
background-image: url(image/mur_050.jpg);
margin: 0 auto;
width: 1000px;
border: 3px solid;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

#marge {
margin-top: 0px;
margin-bottom: 30px;
}

#baniere {
padding: 0px;
border: 5px solid;
color: #000000;
width: 880px;
height: 200px;
margin: 0 auto;
background: url(image/ban.png);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

#lien {
width: 237px;
height: 100px;
margin-top: 0px;
margin-left: 0px;
background: url(image/lien.png);
}

#lien a {
display: block;
width: 237px;
height: 66px;
}

#menu {
width: 720px;
height: 50px;
margin: 0 auto;
}

#config {
list-style-type: none;
height: 85px;
width: 720px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0;
}

#acceuil a{
display: block;
border: 2px solid;
color: #FF0000;
height: 30px;
width: 130px;
list-style-type: none;
float: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin-left: 4px;
margin-right: 10px;
background: url(images/acceuil.png);
}

#actujeu a{
display: block;
border: 2px solid;
color: #FF0000;
height: 30px;
width: 130px;
list-style-type: none;
float: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin-right: 10px;
background: url(images/actujeu.png);
}

#trailers a{
display: block;
border: 2px solid;
color: #FF0000;
height: 30px;
width: 130px;
list-style-type: none;
float: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin-right: 10px;
background: url(images/trailers.png);
}

#videos a{
display: block;
border: 2px solid;
color: #FF0000;
height: 30px;
width: 130px;
list-style-type: none;
float: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin-right: 10px;
background: url(images/videos.png);
}


#inscription a{
margin-top: 10px;
margin-left: 221px;
margin-right: 5px;
display: block;
border: 2px solid;
color: #FF0000;
height: 30px;
width: 130px;
list-style-type: none;
float:left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: url(images/inscription.png);
}

#connexion a{
margin-top: 10px;
margin-right: 221px;
margin-left: 5px;
display: block;
border: 2px solid;
color: #FF0000;
height: 30px;
width: 130px;
list-style-type: none;
float: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: url(images/connexion.png);
}

#profil a{
margin-top: 10px;
margin-right: 10px;
margin-left: 55px;
display: block;
border: 2px solid;
color: #FF0000;
height: 20px;
width: 110px;
list-style-type: none;
float: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: url(images/profil.png);
}

#membres a{
margin-top: 10px;
margin-right: 10px;
display: block;
border: 2px solid;
color: #FF0000;
height: 20px;
width: 110px;
list-style-type: none;
float: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: url(images/membres.png);
}

#compte a{
margin-top: 10px;
margin-right: 10px;
display: block;
border: 2px solid;
color: #FF0000;
height: 20px;
width: 110px;
list-style-type: none;
float: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: url(images/compte.png);
}

#connectes a{
margin-top: 10px;
margin-right: 10px;
display: block;
border: 2px solid;
color: #FF0000;
height: 20px;
width: 110px;
list-style-type: none;
float: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: url(images/connectes.png);
}

#msg a{
margin-top: 10px;
margin-right: 55px;
display: block;
border: 2px solid;
color: #FF0000;
height: 20px;
width: 110px;
list-style-type: none;
float: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: url(images/msg.png);
}

#deconnexion a{
margin-top: 10px;
margin-bottom: 30px;
margin-right: 303px;
margin-left: 303px;
display: block;
border: 2px solid;
color: #FF0000;
height: 20px;
width: 110px;
list-style-type: none;
float: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: url(images/deco.png);
}

#acceuil a:hover {
height: 30px;
width: 130px;
background: url(images/acceuil1.png);
}

#actujeu a:hover {
height: 30px;
width: 130px;
background: url(images/actujeu1.png);
}

#trailers a:hover {
height: 30px;
width: 130px;
background: url(images/trailers1.png);
}

#videos a:hover {
height: 30px;
width: 130px;
background: url(images/videos1.png);

}

#inscription a:hover {
height: 30px;
width: 130px;
background: url(images/inscription1.png);
}

#connexion a:hover {
height: 30px;
width: 130px;
background: url(images/connexion1.png);
}

#profil a:hover {
height: 20px;
width: 110px;
background: url(images/profil1.png);
}

#membres a:hover {
height: 20px;
width: 110px;
background: url(images/membres1.png);
}

#compte a:hover {
height: 20px;
width: 110px;
background: url(images/compte1.png);
}

#connectes a:hover {
height: 20px;
width: 110px;
background: url(images/connectes1.png);
}

#msg a:hover {
height: 20px;
width: 110px;
background: url(images/msg1.png);
}

#deconnexion a:hover {
height: 20px;
width: 110px;
background: url(images/deco1.png);
}

#sms {
background: url(images/pictur12.png);
-moz-border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
border: 2px dashed;
color: #801580;
}

#ventre {
color: #ffffff;
text-align: left;
margin: 0 auto;
width: 700px;
height: 1000px;
}

#ventre p{
color: #000000;
}

#ventre h2{
color: #ffffff;
}

#inscriptionf{
font-family: comic sans MS;
font-size: 12px;
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
width: 500px;
border: 2px solid;
color: #ffffff;
margin: 0 auto;
}

#connexionf{
font-family: comic sans MS;
font-size: 12px;
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
width: 320px;
border: 2px solid;
color: #ffffff;
margin: 0 auto;
}

#pass_veriff{
font-family: comic sans MS;
font-size: 12px;
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
width: 420px;
border: 2px solid;
color: white;
margin: 0 auto;
}

#fiche {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid;
color: white;
margin: 0 auto;
margin-left: -180px;
height: 92px;
width: 245px;
background: url(image/contact.png);
}

#copyright {
color: #000000;
background ;url(image/bgcop.jpg);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 2px solid;
text-align: center;
margin: 0px;
margin-left : -400px;
margin-right: 150px;
width: 720px;
height: 100px;
}

#lacceuil {
background : url(image/mur_037.jpg);
margin: 0px;
text-align: center;
width: 150px;
height: 50px;
border: 3px solid;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
color: black;
margin-top: 20px;
margin-right: 10px;
margin-bottom: 600px;
margin-left: 0px;
}

#lacceuil a {
display: block;
width: 150px;
height: 50px;

}

#photos {
margin: 0px;
text-align: center;
background : url(image/mur_037.jpg);
margin-top: -656px;
margin-right: 0px;
margin-bottom: 600px;
margin-left: 200px;
width: 150px;
height: 50px;
border: 3px solid;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
color: black;
}

#photos a {
display : block;
width: 150px;
height : 50px;
}

#contact {
margin: 0px;
text-align: center;
background: url(image/mur_037.jpg);
margin-top: -81px;
margin-right: 0px;
margin-bottom: 600px;
margin-left: 200px;
width: 150px;
height: 50px;
border: 3px solid;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
color: black;
}
#contact a {
display : block;
width : 150px;
height: 50px;
}

#infos {
margin: 0px;
text-align : center;
background: url(image/mur_037.jpg);
margin-top: -81px;
margin-right: 0px;
margin-bottom: 600px;
margin-left: 200px;
width : 150px;
height : 50px;
border : 3px solid;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
color: black;
}

#infos a {
display : block;
width: 150px;
height : 50px;
}

div.gauche{
text-align: left;
}"

2 réponses

Réponse 1 / 2
Edawards Messages postés 17125 Date d'inscription dimanche 25 juillet 2010 Statut Membre Dernière intervention 21 juillet 2020 1 935
13 mai 2011 à 23:52
Bonsoir,
Voir cela :

https://forums.commentcamarche.net/forum/affich-8170159-aligner-texte-gauche-sans-p
0
Réponse 2 / 2
mpmp93
Modifié par mpmp93 le 14/05/2011 à 08:56
Bonjour,

Juste une remarque,

Si vous codez votre page HTML à la main,

évitez la balise CENTER. Elle est maintenant complètement obsolète selon les nouvelles spécifications HTML5. Google utilise à fond HTML5.

Exemple, votre code: 
<div id="lacceuil"> 
<a href="http://google.fr/" class="blanc"><center>Acceuil</center></a></div> 
<div id="photos"> 
<a href="http://google.fr/" class="oeuvre"><center>Nos oeuvres</center></a> 
<div id="contact"> 
<a href="contactt.php" class="contact"><center>Contact</center></a> 
<div id="infos"> 
<a href="http://google.fr/" class="infos"><center>Infos +</center></a> 
</div>


devient en HTML5: 

<style type="text-css"> 
  nav { text-align: center; } 
  nav a { display: block; } 
</style> 

<nav id="accueil"> 
    <a href="http://google.fr/" class="blanc">Acceuil</a> 
    <a href="http://google.fr/" class="oeuvre">Nos oeuvres</a> 
    <a href="contactt.php" class="contact">Contact</a> 
    <a href="http://google.fr/" class="infos">Infos +</a> 
</nav>


Je vous renvoie vers un article qui expliqu ebien HTML5:
http://html5.immo-scope.com/index.php?page=html5/premierePageHtml5

A+
0

Discussions similaires

Alignement du texte à gauche et à droite
Owrell -
Anonyma16_42 -

8 réponses
problème de pixel
bernie33260 -
contrariness -

14 réponses
Résolution d'une image 500 pixels largeur
sassou -
transat -

2 réponses
adele
marine carnet-pantier -
irongege -

2 réponses
avantages et inconvénients du téléphone portable
elle -
Giscard -

5 réponses