La Communauté Webmaster  forum rss


  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  [résolu] problème texte qui bouge		 « Précédent Suivant »
Pages: [1] 2 Descendre
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
  Auteur  Sujet: [résolu] problème texte qui bouge  (Lu 6185 fois)
[résolu] problème texte qui bouge
« sur: le 09-06-2011 a 22:05:43 »
marjo
Membre récent
*

Hors-Ligne

Messages: 25





Voir le Profil
Répondre avec citation

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;
}
« Dernière Édition: le 13-06-2011 a 19:14:14 par Pad » Rapporter au modérateur  

Re:problème texte qui bouge
« Répondre #1 sur: le 09-06-2011 a 22:44:57 »
Pad
Modérateur Global
*****

Hors-Ligne

Sexe: Male
Messages: 1391





Voir le Profil    WWW
Répondre avec citation

si tu positionnes ton block en position absolute, il faut que le conteneur de ce block soit en relative pour éviter les problèmes d'affichage. Rajoute donc "position:relative" au style ".corps".

Pense aussi à définir un "width;" pour tes blocs comme le ".news"
Rapporter au modérateur  
Webdéveloppeur / Webdesigner Indépendant
http://vincentdapp.fr/
SIRET 517 691 408 00028
Re:problème texte qui bouge
« Répondre #2 sur: le 09-06-2011 a 23:07:25 »
marjo
Membre récent
*

Hors-Ligne

Messages: 25





Voir le Profil
Répondre avec citation

alors j'ai essayer ta méthode mais du coup pour que ça soit centré j'ai du mettre mon "position: left;" à 0px pour que ça soit bien recenté sur mon ordi mais cela reste pareille sur le autres ordi aux résolutions différentes :s

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

<br /><br />
<div style="text-align: center;">
<center><!-- End ImageReady Slices --><!-- DEBUT CODE compteur-gratuit.org -->
<script language="JavaScript" src="http://www.compteur-gratuit.org/count/c.js?id=4176843&amp;t=2&amp;d=14&amp;n=5&amp;s=0"></script>
<noscript>un <a target="_blank"
href="http://www.compteur-gratuit.org">compteur gratuit</a>
pour votre site web</noscript>
<!-- FIN CODE compteur-gratuit.org --> visiteurs
</center>
</div>


et mon code css pour le texte :
Code:
.news
{
  width: 250px;
  font-family: "Time New Roman", Georgia, Arial;
  color: #A00E59;
  font-size: 16px;
  position: absolute;
  top: 90px;
  left: 0px;
}


et pour le corps
Code:
#corps
{
  width: 250px;
  height: 585px;
  margin-left: 775px;
  margin-top: -618px;
  color: black;
  background-repeat: no-repeat;
  position:relative
}
Rapporter au modérateur  
Re:problème texte qui bouge
« Répondre #3 sur: le 09-06-2011 a 23:17:17 »
Pad
Modérateur Global
*****

Hors-Ligne

Sexe: Male
Messages: 1391





Voir le Profil    WWW
Répondre avec citation

Il faut revoir le positionnement du .corps et créer un conteneur avec ton image du fond + le bloc .corps. Car là on corps doit être défini à partir du coté gauche de l'écran se qui provoque ton décalage sur d'autres ordis.
Rapporter au modérateur  
Webdéveloppeur / Webdesigner Indépendant
http://vincentdapp.fr/
SIRET 517 691 408 00028
Re:problème texte qui bouge
« Répondre #4 sur: le 09-06-2011 a 23:29:02 »
marjo
Membre récent
*

Hors-Ligne

Messages: 25





Voir le Profil
Répondre avec citation

j'ai pas compris, désolé.
tu peut me montrer un exemple stp ?
Rapporter au modérateur  
Re:problème texte qui bouge
« Répondre #5 sur: le 09-06-2011 a 23:36:13 »
Pad
Modérateur Global
*****

Hors-Ligne

Sexe: Male
Messages: 1391





Voir le Profil    WWW
Répondre avec citation

Il faut que tu créer un nouveau bloc <div> avec ton image et autre bloc .corps. Et ce nouveau bloc doit être positionné au centre de ta page, puis ton bloc .corps devra se positionner par rapport à ce nouveau bloc.

Pour le moment, le bloc .corps est positionné par rapport au bord tout à gauche de ton écran et quand la dimension d'affichage change, ton bloc se ballade de droite à gauche.
Rapporter au modérateur  
Webdéveloppeur / Webdesigner Indépendant
http://vincentdapp.fr/
SIRET 517 691 408 00028
Re:problème texte qui bouge
« Répondre #6 sur: le 09-06-2011 a 23:57:19 »
marjo
Membre récent
*

Hors-Ligne

Messages: 25





Voir le Profil
Répondre avec citation

tu veut dire une "class" .corps ( qui est chez moi .news ) et un bloc div ( qui est chez moi id="corps" )

le problème c'est que je sait pas comment faire ça 
je suis un peu embrouillé là lol.

je fait d'abord le bloc div avec mon image et le compteur de visite ?
ensuite les class avec le texte

et dans le css je fait quoi ?
comment je centre le bloc div pour toute les resolutions ? et les class ?
Rapporter au modérateur  
Re:problème texte qui bouge
« Répondre #7 sur: le 10-06-2011 a 05:02:14 »
Pad
Modérateur Global
*****

Hors-Ligne

Sexe: Male
Messages: 1391





Voir le Profil    WWW
Répondre avec citation

pour t'aider à centrer par rapport à la page : http://www.google.fr/search?q=centrer+div+verticalement&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:fr:official&client=firefox-a

La structure en gros :
Code:

<div id="conteneur">
        <div class="conteneurimage">ton image</div>
        <div class="corps">
                <p class="news">ton texte</p>
                <p class="news">2e paragraphe</p>       
        </div>
</div>
« Dernière Édition: le 10-06-2011 a 05:02:41 par Pad » Rapporter au modérateur  
Webdéveloppeur / Webdesigner Indépendant
http://vincentdapp.fr/
SIRET 517 691 408 00028
Re:problème texte qui bouge
« Répondre #8 sur: le 10-06-2011 a 16:17:40 »
marjo
Membre récent
*

Hors-Ligne

Messages: 25





Voir le Profil
Répondre avec citation

ok je vais essayer mais si c'est une image map c'est la même chose ? car mon background est une image map

Rapporter au modérateur  
Re:problème texte qui bouge
« Répondre #9 sur: le 10-06-2011 a 18:04:51 »
Pad
Modérateur Global
*****

Hors-Ligne

Sexe: Male
Messages: 1391





Voir le Profil    WWW
Répondre avec citation

Oui c'est la même chose. Ce que je t'ai mis c'est surtout la structure, après que dans tes divs tu met une image, un texte ou une image map ça ne change rien

Rapporter au modérateur  
Webdéveloppeur / Webdesigner Indépendant
http://vincentdapp.fr/
SIRET 517 691 408 00028
Re:problème texte qui bouge
« Répondre #10 sur: le 10-06-2011 a 22:52:49 »
marjo
Membre récent
*

Hors-Ligne

Messages: 25





Voir le Profil
Répondre avec citation

je sais pas pourquoi mais je n'y arrive pas, j'ai essayer toute les façon possible et c'est pire que bien :s je sais que c'est abusé mais peut tu essayer ? parce que si je règle pas le problème je suis mal, cela marchez bien mais le site était fait a l'époque avec "webexpert" donc d'un très bas niveau j'ai voulue tester le html/css que je connais mais je n'en connais pas assez pour réussire ça aparemment donc si je rectifie pas le site de celui qui me l'a commander ça va pas trop le faire car il sera pas content ce qui serait normal, je te donne mon html et css

voici donc mon code html :
Code:
<!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="http://www.officiant-de-ceremonie-laique.com/&quot;">
          <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://www.compteur-gratuit.org/count/c.js?id=4176843&amp;t=2&amp;d=14&amp;n=5&amp;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>


et le css :
Code:
/*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;
}
Rapporter au modérateur  
Re:problème texte qui bouge
« Répondre #11 sur: le 12-06-2011 a 17:02:58 »
marjo
Membre récent
*

Hors-Ligne

Messages: 25





Voir le Profil
Répondre avec citation

Re-bonjour !

j'ai finalement modifier un peu la présentation de mon site est corrigé mes erreurs w3c.
mais mon problème de texte qui bouge à chaque résolution différente est le même !
pouvez vous m'aider ?

voici mon nouveau code :
Code:
<!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>Officiant</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%;
}

.compteur
{
  color: #646464;
  margin-top: -5%;
  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&eacute;r&eacute;monie,<br />
&eacute;mouvante et solenelle,<br />
doit &ecirc;tre conduite <br />
par un officiant experiment&eacute;.<br /><br /><br /><br /><br />
L'union de deux personnes<br />
est toujours un moment unique,<br />
une journ&eacute;e inoubliable.</p><br /><br /><br /><br />
<p class="taille">C'est un mariage autrement, <br />
c'est votre mariage,<br />
il doit &ecirc;tre &agrave; votre image.</p><br /><br />
<p class="contact">contact par mail : jgbdauphins@aol.com</p>

<p class="compteur"><script language="javascript" src="http://www.compteur-gratuit.org/count/c.js?id=4176843&amp;t=2&amp;d=14&amp;n=5&amp;s=0"></script>
visiteurs</p>
</div>

  </div>

</body>
Rapporter au modérateur  
Re:problème texte qui bouge
« Répondre #12 sur: le 12-06-2011 a 17:45:24 »
Pad
Modérateur Global
*****

Hors-Ligne

Sexe: Male
Messages: 1391





Voir le Profil    WWW
Répondre avec citation

lis cet article : http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html
Rapporter au modérateur  
Webdéveloppeur / Webdesigner Indépendant
http://vincentdapp.fr/
SIRET 517 691 408 00028
Re:problème texte qui bouge
« Répondre #13 sur: le 12-06-2011 a 18:18:23 »
marjo
Membre récent
*

Hors-Ligne

Messages: 25





Voir le Profil
Répondre avec citation

merci pour l'article mais malheureusement il n'y à pas ma réponse.
car je ne travaille pas en colonne et j'ai déjà utiliser "positiion: fixed ou absolute" sans résultat.

d'ailleurs en ce moment je viens tout juste de réésayer et j'ai ça dans mon css :

Code:
* {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;
  position: fixed;
  top: 10%;
  left: 60%;
}

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

.contact
{
  font-family: "Time New Roman", Georgia, Arial;
  color: #646464;
  font-size: 14px;
  position: fixed;
  top: 83%;
  left: 58%;
}

.compteur
{
  color: #646464;
  position: fixed;
  top: 78%;
  left: 58%;
}
Rapporter au modérateur  
Re:problème texte qui bouge
« Répondre #14 sur: le 12-06-2011 a 18:32:57 »
Pad
Modérateur Global
*****

Hors-Ligne

Sexe: Male
Messages: 1391





Voir le Profil    WWW
Répondre avec citation

tu n'as surement pas du le lire, vu que tu as raté la ligne...

"Le positionnement fixe (position:fixed) s'apparente au positionnement absolu, à l'exception des points suivants: Lorsque le positionnement est précisé (top, right, …), l'élément est toujours positionné par rapport à la fenêtre du navigateur".

Donc déjà, c'est pas ce que tu veux, donc c'est pas un positionnement statique...
Rapporter au modérateur  
Webdéveloppeur / Webdesigner Indépendant
http://vincentdapp.fr/
SIRET 517 691 408 00028
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
Pages: [1] 2 Monter
« Précédent Suivant »
Sauter à: 

Votre statut : Invité
Vous devez être membre pour participer.
 
 
Let’s Encrypt : le certificat SSL gratuit
Tester votre site internet sur différents navigateurs
[WordPress] Des problèmes avec l’administration ?
Rappel : Mettez à jour vos CMS et vos sites E-commerce
Le .fr fête ses 25 années d’existence !
Mesurer votre audience en temps réel avec BubbleStat
Porter réclamation contre Google Panda ?
Zlio n’est plus …
 
 
 
 
 
Logo du forum du webmaster

Copyright (c) Devclic 2002 - 2026 - Tous droits réservés

creation site internet strasbourg