Partage

j'ai un petit probleme avec mon site xhtml/CSS

Le texte de mon corp est centré et revient a la ligne à chaque mots...

23 août 2006 à 12:31:59

Bonjour à tous,

Depuis hier, je suis en train de suivre le tuto pour créer un site XHTLM/CSS,
jusque là tout va bien, mais j'ai un petit probleme :

j'ai fais la structure de mon site, et le texte qui est dans le corp et centré et il revient à la ligne à chaque mots.
Je me suis permis de poser la question sur le forum, car je cherche depuis maintenant 1heure d'ou peut venir le probleme, et je n'ai pas trouvé...

Si vous avez besoin de mon code HTLM ou CSS pour trouver le probleme, signalez le moi, je le posterais sur le forum.

Merci d'avance et bonne appétit !!!

msg_dracula

23 août 2006 à 12:39:40

un petit bout de code servirai peut etre a quelques chose, c'est un peu vague.

delphiki

23 août 2006 à 12:40:16

En effet, ça serait sympa que tu postes ton code stp.

shynoby

23 août 2006 à 13:28:55

Le code Htlm
<!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>Manga Folie !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="structure" href="structure.css" />
</head>
<body>

<div id="en_tete">


</div>

<div id="menu"> 

<div class="element_menu"> 
<h4>Premier menu</4>
<ul>
<li><a href="page1.html">Naruto</a></li> 
<li><a href="page2.html">Dragon Ball</a></li>
<li><a href="page3.html">Hunter X Hunter</a></li>
</ul>

</div>

<div class="element_menu">
<h4>Second menu</h4>
<ul>
<li><a href="page4.html">download</a></li> 
<li><a href="page5.html">fond d'ecran</a></li>
<li><a href="page6.html">Video</a></li>
</ul>

<div id="corps">
<h1>Manga Folie</h1>

<p>
<strong>Bienvenue sur Manga Folie !
Vous allez adorer ce site, car vous y trouverez tout ce que vous cherchez !!!</strong>
</p>

<h2>Plein d'informations</h2>
<p>
<strong>Sur tout les grands mangas de ce monde tel que Naruto, bleach, Rave, Drangon Ball et plein d'autres...</strong>
</p>

<h2>Des Vidéos</h2>
<p>
Vous pourrez faire le plein d'épisodes, et regarder vos animés préférés !!!!
</p>
</div>

</div><div id="pied_de_page">
<p>Copyright "Mon premier site" 2006, tous droits réservés</p>
</div>
</body>
</html>

Le code CSS :
body
{
width: 760px;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
background-image: url("arriereplan.jpg");
background-repeat: repeat;
}

/* L'en-tête */

#en_tete
{
background-image: url("banniere.jpg");
width: 780px;
height: 150px;
background-repeat: no-repeat;
margin-bottom: 10px;
}

/* Le menu */

#menu
{
float: left;
width: 120px;
}

.element_menu
{
background-color: #d3d6d0;
background-image: url("images/motif.png");
background-repeat: repeat-x;

border: 2px solid black;

margin-bottom: 20px;
}

/* Quelques effets sur les menus */

.element_menu h3
{
color: #d3d6d0;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul
{
list-style-image: url("images/puce.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

.element_menu a
{
color: orange; /* la couleur du texte dans le menu */
}

.element_menu a:hover
{
background-color: #d3d6d0; /* le fond du texte du menu */
color: black; /* La couleur du texte quand on passe dessus */
}

/* Le corps de la page */

#corps
{
margin-left: 150px; /* Ici c'ets la bordure */
margin-bottom: 20px;
padding: 350px; /* Ici c'ets la largeur du corp */

color: orange;
background-image: url("fondecran.jpg");
background-repeat: repeat-2;
border: 2px solid black;
}
#corp p
{
height: 300px;
}
#corps h1
{
color: orange;
text-align: center;
font-family: Arial;
height: 300px;
}

#corps h2
{
height: 300px;
font-family: Arial;
background-image: url("images/titre.png");
background-repeat: no-repeat;

padding-left: 30px;
color: orange;
text-align: left;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
text-align: center;

width: 746px;
height: 104px;

background-image: url("footer.jpg");

background-repeat: no repeat;

clear: both;

}
h1
{
color: orange;
border-bottom: 3px dotted black;
text-align: center;
}
p
{
color: #ff7800;
width: 50%;
text-align: justify; /* Texte justifié pour mieux voir la largeur du block */}
margin: auto; /* On peut donc demander à ce que le block soit centré avec "auto" */
margin-bottom: 20px;
}

delphiki

23 août 2006 à 13:32:11

Tu as oublié de fermer ce div :

<div class="element_menu">
<h4>Second menu</h4>
<ul>
<li><a href="page4.html">download</a></li> 
<li><a href="page5.html">fond d'ecran</a></li>
<li><a href="page6.html">Video</a></li>
</ul>

PS: stp édites ton message et mets tes codes dans les balises appropriées

Anonyme

23 août 2006 à 13:33:51

Utilise les balises Zcodes :

<!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>Manga Folie !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="structure" href="structure.css" />
</head>
<body>

<div id="en_tete">


</div>

<div id="menu"> 

<div class="element_menu"> 
<h4>Premier menu</4>
<ul>
<li><a href="page1.html">Naruto</a></li> 
<li><a href="page2.html">Dragon Ball</a></li>
<li><a href="page3.html">Hunter X Hunter</a></li>
</ul>

</div>

<div class="element_menu">
<h4>Second menu</h4>
<ul>
<li><a href="page4.html">download</a></li> 
<li><a href="page5.html">fond d'ecran</a></li>
<li><a href="page6.html">Video</a></li>
</ul>

<div id="corps">
<h1>Manga Folie</h1>

<p>
<strong>Bienvenue sur Manga Folie !
Vous allez adorer ce site, car vous y trouverez tout ce que vous cherchez !!!</strong>
</p>

<h2>Plein d'informations</h2>
<p>
<strong>Sur tout les grands mangas de ce monde tel que Naruto, bleach, Rave, Drangon Ball et plein d'autres...</strong>
</p>

<h2>Des Vidéos</h2>
<p>
Vous pourrez faire le plein d'épisodes, et regarder vos animés préférés !!!!
</p>
</div>

</div><div id="pied_de_page">
<p>Copyright "Mon premier site" 2006, tous droits réservés</p>
</div>
</body>
</html>

body
{
width: 760px;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
background-image: url("arriereplan.jpg");
background-repeat: repeat;
}

/* L'en-tête */

#en_tete
{
background-image: url("banniere.jpg");
width: 780px;
height: 150px;
background-repeat: no-repeat;
margin-bottom: 10px;
}

/* Le menu */

#menu
{
float: left;
width: 120px;
}

.element_menu
{
background-color: #d3d6d0;
background-image: url("images/motif.png");
background-repeat: repeat-x;

border: 2px solid black;

margin-bottom: 20px;
}

/* Quelques effets sur les menus */

.element_menu h3
{
color: #d3d6d0;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul
{
list-style-image: url("images/puce.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

.element_menu a
{
color: orange; /* la couleur du texte dans le menu */
}

.element_menu a:hover
{
background-color: #d3d6d0; /* le fond du texte du menu */
color: black; /* La couleur du texte quand on passe dessus */
}

/* Le corps de la page */

#corps
{
margin-left: 150px; /* Ici c'ets la bordure */
margin-bottom: 20px;
padding: 350px; /* Ici c'ets la largeur du corp */

color: orange;
background-image: url("fondecran.jpg");
background-repeat: repeat-2;
border: 2px solid black;
}
#corp p
{
height: 300px;
}
#corps h1
{
color: orange;
text-align: center;
font-family: Arial;
height: 300px;
}

#corps h2
{
height: 300px;
font-family: Arial;
background-image: url("images/titre.png");
background-repeat: no-repeat;

padding-left: 30px;
color: orange;
text-align: left;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
text-align: center;

width: 746px;
height: 104px;

background-image: url("footer.jpg");

background-repeat: no repeat;

clear: both;

}
h1
{
color: orange;
border-bottom: 3px dotted black;
text-align: center;
}
p
{
color: #ff7800;
width: 50%;
text-align: justify; /* Texte justifié pour mieux voir la largeur du block */}
margin: auto; /* On peut donc demander à ce que le block soit centré avec "auto" */
margin-bottom: 20px;
}

Quelque chose ue je ne comprens pas : Tu as ouvert le coprs avant de refermer le menu et element menu o_O

. A mon avis le probleme vient de la

shynoby

23 août 2006 à 13:40:16

C'est a dire ???
( désolé mais je débute

)
j'ai fermé la balise :

Citation : undefined

<div class="element_menu">
<h4>Second menu</h4>
<ul>
<li><a href="page4.html">download</a></li> 
<li><a href="page5.html">fond d'ecran</a></li>
<li><a href="page6.html">Video</a></li>
</ul>
</div>

et ça n'a rien changé...

Anonyme

23 août 2006 à 14:31:19

Alors :

Ici il faut rajouter deux div pour fermer le bloc menu et le bloc element menu.

</div><div id="pied_de_page">
<p>Copyright "Mon premier site" 2006, tous droits réservés</p>
</div>
</body>
</html>

Et ici, il faut que tu enleve le premier </div>, ce qui donne :

<div id="pied_de_page">
<p>Copyright "Mon premier site" 2006, tous droits réservés</p>
</div>
</body>
</html>

Voila ca devrait marcher

Au fait, pour colorer ton texte comme ca , en haut quand tu tape ton message, tu peux voir une liste déroulante où il y a marqué code.Choisis xhtml ou css, et tape ton code entre les deux balises

shynoby

23 août 2006 à 18:14:21

ça avance, mais j'ai toujours le probleme de l'écriture centrée dans le corp...
Mais, je vais encore chercher pour trouver d'ou vient le probleme

ne vous inquietez pas

Grace à vous, maintenant mon corp est devant les menus tout de meme

Merci !!!

Mon code maintenant :

body
{
width: 760px;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
background-image: url("arriereplan.jpg");
background-repeat: repeat;
}

/* L'en-tête */

#en_tete
{
background-image: url("banniere.jpg");
width: 780px;
height: 150px;
background-repeat: no-repeat;
margin-bottom: 10px;
}

/* Le menu */

#menu
{
float: left;
width: 120px;
}

.element_menu
{
background-color: #d3d6d0;
background-image: url("images/motif.png");
background-repeat: repeat-x;

border: 2px solid black;

margin-bottom: 20px;
}

/* Quelques effets sur les menus */

.element_menu h3
{
color: #d3d6d0;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul
{
list-style-image: url("images/puce.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

.element_menu a
{
color: orange; /* la couleur du texte dans le menu */
}

.element_menu a:hover
{
background-color: #d3d6d0; /* le fond du texte du menu */
color: black; /* La couleur du texte quand on passe dessus */
}

/* Le corps de la page */

#corps
{
margin-left: 150px; /* Ici c'ets la bordure */
margin-bottom: 20px;
padding: 350px; /* Ici c'ets la largeur du corp */

color: orange;
background-image: url("fondecran.jpg");
background-repeat: repeat-2;
border: 2px solid black;
}
#corp p
{
height: 600px;
}
#corps h1
{
color: orange;
text-align: center;
font-family: Arial;
height: 300px;
}

#corps h2
{
height: 300px;
font-family: Arial;
background-image: url("images/titre.png");
background-repeat: no-repeat;

padding-left: 30px;
color: orange;
text-align: left;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
text-align: center;

width: 746px;
height: 104px;

background-image: url("footer.jpg");

background-repeat: no repeat;

clear: both;

}
h1
{
color: orange;
border-bottom: 3px dotted black;
text-align: center;
}
p
{
color: #ff7800;
width: 100%;
margin-bottom: 1px;
}

et mon code htlm :

<!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>Manga Folie !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css" title="structure" href="structure.css" />
</head>
<body>

<div id="en_tete">


</div>

<div id="menu"> 

<div class="element_menu"> 
<h4>Premier menu</4>
   <ul>
<li><a href="page1.html">Naruto</a></li> 
<li><a href="page2.html">Dragon Ball</a></li>
<li><a href="page3.html">Hunter X Hunter</a></li>
</ul>

</div>

<div class="element_menu">
<h4>Second menu</h4>
   <ul>
<li><a href="page4.html">download</a></li> 
<li><a href="page5.html">fond d'ecran</a></li>
<li><a href="page6.html">Video</a></li>
</ul>
   </div>
   </div>

<div id="corps">
<h1>Manga Folie</h1>


<p>
<strong>Bienvenue sur Manga Folie !
Vous allez adorer ce site, car vous y trouverez tout ce que vous cherchez !!!</strong>
</p>

<h2>Plein d'informations</h2>
<p>
<strong>Sur tout les grands mangas de ce monde tel que Naruto, bleach, Rave, Drangon Ball et plein d'autres...</strong>
</p>

<h2>Des Vidéos</h2>
<p>
Vous pourrez faire le plein d'épisodes, et regarder vos animés préférés !!!!
</p>
</div>

<div id="pied_de_page">
<p>Copyright "Mon premier site" 2006, tous droits réservés</p>
</div>
</body>
</html>

mick3y

23 août 2006 à 19:37:53

Ton erreur se trouve ici : padding: 350px; /* Ici c'ets la largeur du corp */

Le padding ne définit pas la largeur. Pour mettre ton corps à 350px, tu dois faire ceci : width: 350px;

Le padding est la marge intérieur de ton corps et donc si tu l'as mis à 350px (ce qui est assez gros), pas étonnant que tu as des problèmes. L'idéal selon moi, est de mettre un padding à 1em.

shynoby

24 août 2006 à 9:42:48

Merci !!!
Tu as résolu mon probleme en 1 coup d'oeil alors que moi, je m'embettais depuis hier pour trouver !!!

Je remercie tout ceux qui on tenté de m'aider.
Grand merci, ça fait plaisir.

Ce site est superbe ainsi que les webmaster qui le fréquente !!!

Bonne journée !!!

( Affaire résolue )

Gregoo

24 août 2006 à 9:52:05

Citation : shynoby

Ce site est superbe inscit que les webmaster qui le fréquente !!!

Salut, celà n'as aucun rapport mais je ne l'avais jamais vu écrit comme ça auparavant, je n'ai pas pu m'empêcher.
Si ça t'intéresse, l'expression est ainsi que.

Cordialement,
Gregoo

Scroux

24 août 2006 à 11:18:35

Figure-toi que j'avais lui "inscrit" et étant donné que je suis pas complètement réveillé je suis resté fixé sur le mot pendant quelques longues secondes

Merci de m'avoir sortit de là Grego !