Sujet Précédent Sujet Suivant

Problème texte qui bouge

Résolu/Fermé
marjo - 9 juin 2011 à 22:02
marj0 Messages postés 29 Date d'inscription vendredi 10 juin 2011 Statut Membre Dernière intervention 24 octobre 2011 - 13 juin 2011 à 11:08
Bonjour,

je suis en train de refaire un site avec mes nouvelles connaissance en css/html.
mais je rencontre un problème. mon texte sur mon écran est centré sur la colonne de texte comme je le veut. mais sur l'écran de mes parents le texte par sur la droite et sur celui d'un amis le texte part sur la gauche. je n'arrive pas à fixer mon texte comme sur mon écran. :s

voici mon site (c'est l'adresse test sinon je suis hebergé chez 1&1 mais le problème reste le même.)
http://officiant.voila.net

voici mon code css du texte en question : 
.news
{
   font-family: "Time New Roman", Georgia, Arial;
   color: #A00E59;
   font-size: 16px;
   position: absolute;
   top: 90px;
   left: 770px;
}



14 réponses

Réponse 1 / 14
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
10 juin 2011 à 05:47
Le problème viens de là: 
   left: 770px;

Ton texte est positionné par rapport à gauche de l'écran.
Toutefois, la largeur de l'écran est différente d'un écran à l'autre. Le miens à une largeur de 1440px. Celui de mon père est en 1900px. Le texte sera positionné différemment.
Faute d'information supplémentaire, je dirai de remplacer 
   left: 770px;
par 
   text-align:center;
0
Réponse 2 / 14
marjo
10 juin 2011 à 16:53
cela met bien le texte à au centre du bloc mais ce n'est pas ça que je veut, je veut qu'il soit justifié sur la gauche mais centré sur le colonne pour toutes les résolutions.

je sait pas pourquoi mais je n'arrive pas à envoyer le message avec les codes :/
0
Réponse 3 / 14
marjo
10 juin 2011 à 16:54
entre <body> et </body>, j'ai ça : 
<div id="conteneur">
        <div class="conteneurimage"> <center><IMG SRC="images/deroulementceremonie.jpg" WIDTH=800 HEIGHT=600 BORDER=0 ALT="" USEMAP="#deroulement_Map">
<MAP NAME="deroulement_Map">
<AREA SHAPE="rect" ALT="" COORDS="243,276,505,302" HREF="textesetmusique.html">
<AREA SHAPE="rect" ALT="" COORDS="174,238,508,265" HREF="deroulementceremonie.html">
<AREA SHAPE="rect" ALT="" COORDS="298,198,507,226" HREF="roleofficiant.html">
<AREA SHAPE="rect" ALT="" COORDS="151,163,508,190" HREF="pkceremonielaique.html">
<AREA SHAPE="rect" ALT="" COORDS="350,125,508,152" HREF="quisuisje.html">
<AREA SHAPE="rect" ALT="" COORDS="395,89,508,114" HREF="index.html">
</MAP></center>
</div>
0
Réponse 4 / 14
marjo
10 juin 2011 à 16:56
le code est pas finit mais je n'arrive pas à te l'envoyer :s
0
marjo
10 juin 2011 à 16:56
tu à une adresse mail ? encore désolé pour tout ces messages car le site n'accepte pas de trop longue reponses.
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
10 juin 2011 à 20:13
Il y a peut-être une limitation de longueur pour ceux qui ne sont pas inscrit (en tout cas, que je sache, il n'y a pas de limitation).
Je t'invite toutefois à t'y inscrire.
T'aider n'est pas un problème mais j'ai pas forcement envie d'exposer en clair mon adresse mail.
0
marjo
10 juin 2011 à 22:31
oki je vais m'inscrire ;)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 14
marj0 Messages postés 29 Date d'inscription vendredi 10 juin 2011 Statut Membre Dernière intervention 24 octobre 2011
10 juin 2011 à 22:35
code html : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
      <head> 
          <title>officiant de mariage laique</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <meta name="Keywords" content="Jean-George Brunet, comédien de formation et modèle sénior, il possede à son actif de nombreuses ceremonies en region parsienne et en province. Avant toute ceremonies Jean-George rencontre les mariés, il peut aussi communiquer par mail et par telephone pour lui permettre de mieux comprendre les motivations et les souhaits des maries pour leur ceremonie.">
          <meta name="Robots" content="index, follow">
          <meta name="Identifier-URL" content="https://www.jeux-raconte.fr/">
          <meta name="Description" content="Jean-George Brunet, comédien de formation et modèle sénior, il possede à son actif de nombreuses ceremonies en region parsienne et en province. Avant toute ceremonies Jean-George rencontre les mariés, il peut aussi communiquer par mail et par telephone pour lui permettre de mieux comprendre les motivations et les souhaits des mariés pour leur ceremonie.">
          <link rel="stylesheet" media="screen" type="text/css" title="Design" href="designofficiant.css" />

</head>


<body style="color: rgb(0, 0, 0); background-color: rgb(219, 219, 219);" leftmargin="0" topmargin="0" alink="#000099" link="#000099" marginheight="0" marginwidth="0" vlink="#990099">




<div style="text-align: center;">
<!-- ImageReady Slices (ideroulementceremonie.jpg) --><br>


</div>


<table style="text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0" width="800">


  <tbody>


    <tr>


      <td style="text-align: center;" colspan="6" rowspan="2">
      
      <center>
      <IMG SRC="images/index.jpg" WIDTH=800 HEIGHT=600 BORDER=0 ALT="" USEMAP="#index_Map">
<MAP NAME="index_Map">
<AREA SHAPE="rect" ALT="" COORDS="243,276,505,302" HREF="textesetmusique.html">
<AREA SHAPE="rect" ALT="" COORDS="174,238,508,265" HREF="deroulementceremonie.html">
<AREA SHAPE="rect" ALT="" COORDS="298,198,507,226" HREF="roleofficiant.html">
<AREA SHAPE="rect" ALT="" COORDS="151,163,508,190" HREF="pkceremonielaique.html">
<AREA SHAPE="rect" ALT="" COORDS="350,125,508,152" HREF="quisuisje.html">
<AREA SHAPE="rect" ALT="" COORDS="395,89,508,114" HREF="index.html">
</MAP>
</center>
</tbody>
</table>

<div id="corps"><!--CORPS-->
<p class="news">Une cérémonie,<br />
émouvante et solenelle,<br />
doit être conduite <br />
par un officiant experimenté.<br /><br /><br /><br /><br />
L'union de deux personnes<br />
est toujours un moment unique,<br />
une journée inoubliable.</p><br /><br /><br /><br />
<p class="taille">C'est un mariage autrement, <br />
c'est votre mariage,<br />
il doit être à votre image.</p><br /><br />
<p class="contact">contact par mail : jgbdauphins@aol.com</p>
</div>

<center><p class="compteur"><script language="JavaScript" src="http://script.compteur-gratuit.org/count/c.js?id=4176843&t=2&d=14&n=5&s=0"></script>
<noscript>un <a target="_blank"
href="http://www.compteur-gratuit.org">compteur gratuit</a>
pour votre site web</noscript>
 visiteurs</p></center>
</body>
</html>





code css : 
/*PARAGRAPHE*/
.news
{
   width: 250px;
   height: 585px;
   margin: Opx;
   margin-top: 100px;
   font-family: "Time New Roman", Georgia, Arial;
   color: #A00E59;
   font-size: 16px;
   overflow: auto;
}

.taille
{
   margin : 0px;
   margin-top: -400px;
   font-size: 12px;
   font-family: "Time New Roman", Georgia, Arial;
   color: #A00E59;
   font-style: italic;
}

.news2
{
   width: 250px;
   height: 585px;
   margin: Opx;
   margin-top: 180px;
   margin-left: -15px;
   font-family: "Time New Roman", Georgia, Arial;
   color: black;
   font-size: 14px;
   text-align: justify;
}

.news3
{
   width: 250px;
   height: 585px;
   margin: Opx;
   margin-top: 180px;
   margin-left: -15px;
   font-family: "Time New Roman", Georgia, Arial;
   color: black;
   font-size: 14px;
   text-align: justify;
}

.contact
{
   color: #5F5E5E;
   margin : 0px;
   margin-top: 120px;
   margin-left: 0px;
   font-size: 14px;
   font-family: Arial, "Arial Black", Verdana, "Time New Roman";
}

.compteur
{
   margin : 0px;
   margin-top: -500px;
   margin-left: 0px;
   font-size: 14px;
   font-family: Arial, "Arial Black", Verdana, "Time New Roman";
}

/*IMAGES*/

.news2 img

{
   margin: 0px;
   margin-left: -1px;
   border : 3px solid white;
}

.news3 img

{
   margin: 0px;
   margin-left: 10px;
   border : no-border;
}


/*CORPS*/

#corps
{
   width: 250px;
   height: 585px;
   margin-left: 775px;
   margin-top: -618px;
   color: black; 
   background-repeat: no-repeat; 
 }
0
Meoran Messages postés 1562 Date d'inscription vendredi 28 août 2009 Statut Membre Dernière intervention 8 avril 2015 206
11 juin 2011 à 01:14
Juste pour commencer, je viens de poster ton code au w3c : résultat 54 erreurs.

Alors je sais que la validité d'un site web n'en fais pas pour autant un site joli, mais cela t'aiderais déjà surement fortement...
0
marj0 Messages postés 29 Date d'inscription vendredi 10 juin 2011 Statut Membre Dernière intervention 24 octobre 2011
11 juin 2011 à 11:03
Meoran,
je me doute mais là comme je l'ai fait à la base avec webexpert c'est forcement "à chié" mais quand j'ai voulue le reprendre avec mes petites connaissance en html/Css le texte bouge tout le temps à chaque résolution, donc je cherche à ce qu'on m'explique juste ça pour que le site marche bien car il y à juste ça qui ne va pas ;)
mais c'est quoi le w3c ?
0
Meoran Messages postés 1562 Date d'inscription vendredi 28 août 2009 Statut Membre Dernière intervention 8 avril 2015 206
11 juin 2011 à 11:16
Le w3c contrôle les standards du web. SI ton site est valide w3c, tu peux être sur que l'affichage de ton site web sur les navigateurs webs qui respectent les standards du web (c'est à dire presque tous dans leur dernière version, attention pas IE8 et inférieur) sera (quasiment) le même.

Si ton site n'est pas valide w3c, il risque fortement de se passer que l'affichage de ton site sera foireux d'un navigateur à un autre.

Donc déjà corrige les 54 erreurs présentes sur ta page ( pour ça c'est par ici http://validator.w3.org/ ). Te dis pas, 54 erreurs c'est énorme, ca peut aller vite, des fois la correction d'une seule erreur en corrige plusieurs (voir une dizaine à la fois).

Donc par exemple, première erreur, pour ton code :

Line 6, Column 83: end tag for "meta" omitted, but OMITTAG NO was specified


Correction : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Voilà, à toi de jouer ;)
0
Réponse 6 / 14
marj0 Messages postés 29 Date d'inscription vendredi 10 juin 2011 Statut Membre Dernière intervention 24 octobre 2011
11 juin 2011 à 12:43
ah merci !!! en plus ils expliquent tout, en général en plus c'est un bête erreur de "/>"

ou d'espace entre " 0"
0
Meoran Messages postés 1562 Date d'inscription vendredi 28 août 2009 Statut Membre Dernière intervention 8 avril 2015 206
11 juin 2011 à 13:24
Corrige les toutes.

SI tu bloques sur quelques unes, on est là pour ça ;)
0
marj0 Messages postés 29 Date d'inscription vendredi 10 juin 2011 Statut Membre Dernière intervention 24 octobre 2011
11 juin 2011 à 17:02
merci ;) je vais faire ça tout à l'heure.
0
Réponse 7 / 14
marj0 Messages postés 29 Date d'inscription vendredi 10 juin 2011 Statut Membre Dernière intervention 24 octobre 2011
12 juin 2011 à 15:15
Pour réparer une erreur, j'aurais besoin de savoir comment fait on pour mettre une image map dans le css ?

le code de mon image map c'est ça : 
<IMG SRC="images/index.jpg" WIDTH=800 HEIGHT=600 BORDER=0 ALT="" USEMAP="#index_Map">
<MAP NAME="index_Map">
<AREA SHAPE="rect" ALT="" COORDS="243,276,505,302" HREF="textesetmusique.html">
<AREA SHAPE="rect" ALT="" COORDS="174,238,508,265" HREF="deroulementceremonie.html">
<AREA SHAPE="rect" ALT="" COORDS="298,198,507,226" HREF="roleofficiant.html">
<AREA SHAPE="rect" ALT="" COORDS="151,163,508,190" HREF="pkceremonielaique.html">
<AREA SHAPE="rect" ALT="" COORDS="350,125,508,152" HREF="quisuisje.html">
<AREA SHAPE="rect" ALT="" COORDS="395,89,508,114" HREF="index.html">
</MAP>
0
Meoran Messages postés 1562 Date d'inscription vendredi 28 août 2009 Statut Membre Dernière intervention 8 avril 2015 206
Modifié par Meoran le 12/06/2011 à 15:54
L'erreur ici viendrait plutôt du fait que les noms des balises et des attributs sont en majuscules.

Ils doivent tous être en minuscules pour être valide w3c en xhtml
0
marj0 Messages postés 29 Date d'inscription vendredi 10 juin 2011 Statut Membre Dernière intervention 24 octobre 2011
12 juin 2011 à 16:29
ah oki merci ! je vais changer mais j'aimerais quand même mettre l'image map en css si c'est possible bien sûre.
0
Réponse 8 / 14
marj0 Messages postés 29 Date d'inscription vendredi 10 juin 2011 Statut Membre Dernière intervention 24 octobre 2011
12 juin 2011 à 16:43
voilà j'ai modifier mon site en même temps que de corriger les sites , j'ai essayer une autre façon de présentation voici mon code entier :

il reste 3 erreurs mais je ne comprend pas, je n'arrive pas à les corriger... et le problème de texte qui bouge à chaque résolution est le même ou presque. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="fr-ca" xml:lang="fr-ca" xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>Design fluide height: 100%;</title>

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <meta http-equiv="content-style-type" content="text/css" />

  <style type="text/css" media="all">

* {padding: 0; margin: 0;}

html, body { 

   height: 100%; 

}

#corps { 

   background: #cccccc; 

   height: auto !important; 

   height: 100%; 

   min-height: 100%; 

}

#droite { 

   margin-left: 17%; 

}

.news

{ 
   font-family: "Time New Roman", Georgia, Arial;
   color: #A00E59;
   font-size: 16px;
   margin-top: -50%;
   margin-left: 50%;
}

.taille

{ 
   font-family: "Time New Roman", Georgia, Arial;
   color: #A00E59;
   font-size: 16px;
   margin-top: 0%;
   margin-left: 50%;
}

.contact

{ 
   font-family: "Time New Roman", Georgia, Arial;
   color: #646464;
   font-size: 14px;
   margin-top: 12%;
   margin-left: 50%;
}


  </style>

 </head>

 <body>

  <div id="corps">
  
   <div id="droite"><img src="images/index.jpg" alt= "image map" width=800 height=600/>
<map name="indexmap">
<area shape="rect" coords="243,276,505,302" alt= "texte"    href="textesetmusique.html"/>
<area shape="rect" coords="174,238,508,265" alt="ceremonie" href="deroulementceremonie.html"/>
<area shape="rect" coords="298,198,507,226" alt="role"      href="roleofficiant.html"/>
<area shape="rect" coords="151,163,508,190" alt="pourquoi"  href="pkceremonielaique.html"/>
<area shape="rect" coords="350,125,508,152" alt="qui"       href="quisuisje.html"/>
<area shape="rect" coords="395,89,508,114"  alt="index"     href="index.html"/>
</map>

<p class="news">Une cérémonie,<br />
émouvante et solenelle,<br />
doit être conduite <br />
par un officiant experimenté.<br /><br /><br /><br /><br />
L'union de deux personnes<br />
est toujours un moment unique,<br />
une journée inoubliable.</p><br /><br /><br /><br />
<p class="taille">C'est un mariage autrement, <br />
c'est votre mariage,<br />
il doit être à votre image.</p><br /><br />
<p class="contact">contact par mail : jgbdauphins@aol.com</p>
</div>

  </div>

 </body>
0
Réponse 9 / 14
marj0 Messages postés 29 Date d'inscription vendredi 10 juin 2011 Statut Membre Dernière intervention 24 octobre 2011
12 juin 2011 à 17:04
j'avais oublié de mettre le compteur de visiteur après : 
<p class="contact">contact par mail : jgbdauphins@aol.com</p>


du coup il y à 5 erreurs que je comprend pas (au lieux de 10 quand j'ai mis le compteur) voici le code du compteur : 
<p class="compteur"><script language="javascript" src="http://script.compteur-gratuit.org/count/c.js?id=4176843&t=2&d=14&n=5&s=0"></script>
 visiteurs</p></div>
0
Réponse 10 / 14
Meoran Messages postés 1562 Date d'inscription vendredi 28 août 2009 Statut Membre Dernière intervention 8 avril 2015 206
12 juin 2011 à 18:11
salut,

les valeurs des attributs doivent entre quote simple ou double

ex : width='800' ou width="800"

Il te faut obligatoirement un attribut "id" dans ta balise map (quitte à ce que ce soit le même que le name...)

Pour le JS ce n'est pas :
<script language="javascript" ...
mais
<script type="text/javascript" ...

Voici les 5 erreurs corrigées ;)
0
Réponse 11 / 14
marj0 Messages postés 29 Date d'inscription vendredi 10 juin 2011 Statut Membre Dernière intervention 24 octobre 2011
12 juin 2011 à 18:30
merci ! les width='800' ou width="800" sont corrigé !
mais apparemment il reste 2 erreurs ligne 106. :s
0
Réponse 12 / 14
marj0 Messages postés 29 Date d'inscription vendredi 10 juin 2011 Statut Membre Dernière intervention 24 octobre 2011
12 juin 2011 à 18:34
ah bah non c'est bon j'avais juste corrigé "tex/javascript" et non le "srcipt type"
autant pour moi XD
0
Réponse 13 / 14
marj0 Messages postés 29 Date d'inscription vendredi 10 juin 2011 Statut Membre Dernière intervention 24 octobre 2011
12 juin 2011 à 20:48
le texte bouge toujours à chaque résolution différente :s comment régler ce problème.
sur un autre forum ils me disent que c'est parce qu'il ne faut pas mettre de "top" et "left" à la position obsolute. mais ils ne me disent pas comment régler le problème car si je retire le top et left ça sera forcement plus centrer du tout lol.
0
Réponse 14 / 14
marj0 Messages postés 29 Date d'inscription vendredi 10 juin 2011 Statut Membre Dernière intervention 24 octobre 2011
13 juin 2011 à 11:08
Problème résolue j'ai réussie à faire comme un design extensible, car le texte est maintenant réglé sur les bords du desgin et non de la fenêtre :D
0

Discussions similaires

Formule Excel : "SI" une cellule contient un mot, alors ?
Tonio5933 -
Mike-31 -

9 réponses
Symbole Attention dans Word
Nortec59 -
LOUL7619 -

33 réponses