Imprimer la Page

Forum-webmaster

Technique - programmation => HTML / CSS / XHTML => Message commencé par: marjo le le 09-06-2011 a 22:05:43

Titre: [résolu] problème texte qui bouge
Posté par: marjo le le 09-06-2011 a 22:05:43

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;
}

Titre: Re:problème texte qui bouge
Posté par: Pad le le 09-06-2011 a 22:44:57

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"

Titre: Re:problème texte qui bouge
Posté par: marjo le le 09-06-2011 a 23:07:25

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">
<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 /></div>
<p class="contact">contact par mail : jgbdauphins@aol.com</p>

<br /><br />
<div style="text-align: center;">
<center>
<script language="JavaScript" src="http://www.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
</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
}

Titre: Re:problème texte qui bouge
Posté par: Pad le le 09-06-2011 a 23:17:17

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.

Titre: Re:problème texte qui bouge
Posté par: marjo le le 09-06-2011 a 23:29:02

??? j'ai pas compris, désolé.
tu peut me montrer un exemple stp ?

Titre: Re:problème texte qui bouge
Posté par: Pad le le 09-06-2011 a 23:36:13

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.

Titre: Re:problème texte qui bouge
Posté par: marjo le le 09-06-2011 a 23:57:19

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 :-X
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 ?

Titre: Re:problème texte qui bouge
Posté par: Pad le le 10-06-2011 a 05:02:14

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 (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>

Titre: Re:problème texte qui bouge
Posté par: marjo le le 10-06-2011 a 16:17:40

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

Titre: Re:problème texte qui bouge
Posté par: Pad le le 10-06-2011 a 18:04:51

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 ;)

Titre: Re:problème texte qui bouge
Posté par: marjo le le 10-06-2011 a 22:52:49

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/"">
<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;">
<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">
<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&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>

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;
}

Titre: Re:problème texte qui bouge
Posté par: marjo le le 12-06-2011 a 17:02:58

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é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>

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

</div>

</body>

Titre: Re:problème texte qui bouge
Posté par: Pad le le 12-06-2011 a 17:45:24

lis cet article : http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html (http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html)

Titre: Re:problème texte qui bouge
Posté par: marjo le le 12-06-2011 a 18:18:23

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%;
}

Titre: Re:problème texte qui bouge
Posté par: Pad le le 12-06-2011 a 18:32:57

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...

Titre: Re:problème texte qui bouge
Posté par: marjo le le 12-06-2011 a 19:01:09

si je l'avais lu pas j'avais pas compris ça comme ça .... :s
donc du coup je doit faire quoi pour le placé de manière fixe et pareille pour tout le monde ? je comprend pas.... (je sais je suis nul :P )

Titre: Re:problème texte qui bouge
Posté par: Pad le le 12-06-2011 a 19:28:07

Il faut chercher un peu, lire beaucoup et tester pour apprendre... c'est pour ça que je te donne pas la réponse comme ça, ça te servira pas...

Repars sur l'idée de ma structure du début :

Code:

<div id="page>
<div class="conteneurimage">ton image</div>
<div class="corps">
<p class="news">ton texte</p>
<p class="news">2e paragraphe</p>
</div>
</div>

le div#page doit être placé au centre de ta page internet. le tuto pour ça : http://covertprestige.info/css/centrer-bloc/ (http://covertprestige.info/css/centrer-bloc/)

ensuite ton div.conteneurimage et div.corps peuvent être positionné de facon absolute (ce positionnement se fera par rapport au div#page.

Titre: Re:problème texte qui bouge
Posté par: marjo le le 12-06-2011 a 19:51:01

sauf que pour chercher et apprendre j'aurais toutes les vacances pour ça sauf que là c'est vraiment très urgent si j'ai pas régler ça avant mardi je suis dans la merde !!! parce que je n'aurais pas ma formation ! je sais faire des sites mais j'ai encore beaucoup de choses à apprendre et je m'y pencherais plus en juillet/aout mais là je t'en prie donne moi la réponse sinon j'ai pas envie de revivre une année de galère au chômage !
soit sympa. quitte à plus tard si tu veut me donner un petit exercice pour que j'apprenne ce problème là.

si je prend ta structure ça va me refaire tout reprendre à zéro et ça me prendra tel que je me connais pour tout comprendre au minimum 1 semaine et au max 2 semaine, l'école pour ma formation sera fermé d'ici 2 semaines et ça sera foutue pour moi.

Titre: Re:problème texte qui bouge
Posté par: Pad le le 12-06-2011 a 20:01:38

Citation de: marjo le le 12-06-2011 a 19:51:01

je sais faire des sites

Faudrait peut être pas aller si vite en besogne vu que tu ne connais même pas les bases du html/css. Mais tu as tout en main pour trouver tes erreurs et les corriger d'ici mardi...

Titre: Re:problème texte qui bouge
Posté par: marjo le le 12-06-2011 a 20:39:57

puisque tu en doute voici mon site perso et tu verra que je sais en faire et si j'ai mis "webdesigner" c'est parce qu'à la formation ils m'ont de le mettre même si je n'ai que les bases car c'est pour trouver un employer pour le stage : http://marjorie.laforest.voila.net ou même un "faux" site (qu'ils m'ont demandé) : http://baie-de-somme.voila.net
je n'ai pas dit que j'était une pro du web, j'ai dit que je savais faire des sites même si j'ai beaucoup à apprendre.

et franchement je suis désolé mais je n'arriverais pas à trouver mes erreurs seuls car j'ai strictement rien compris et je n'ai pas du tout la même structure que toi et je souhaite vraiment farder la mienne.

Titre: Re:problème texte qui bouge
Posté par: marjo le le 13-06-2011 a 11:10:07

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

Titre: Re:problème texte qui bouge
Posté par: Pad le le 13-06-2011 a 19:13:58

bravo !