18073 sujets

Questions générales et questions de débutants

Extension du conteneur ne marche pas !

Bonjour,

je désespère depuis hier sur mon site.

voici l'adresse Mon site

Comme vous pouvez le voir l'image de fond ne fait pas l'extension du contenu de mon conteneur ".centre". Es ce que vous pouvez m'aider svp ?

Voici mon xHtml:


<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CicatriceHP.com</title>
	<!--[if IE]>
	<link rel='stylesheet' media='screen' type='text/css' href='defaut_ie.css' />
	<![endif]-->
	<!--[if !IE]> <-->
	<link rel='stylesheet' media='screen' type='text/css' href='defaut.css' />
	<!--><![endif]-->

<body>

<div class="fond">
   <div class="img">
     <div class="menu">
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <?php include("menu.php"); ?>
     </div>
	 
     <div class="center">
      <?php include("centre.php"); ?>
     </div>
   </div>
<div class="footer"></div>
</div>



</body>
</html>


voici mon css:


/* CSS Design defaut */

body {
margin: 0;
font-family: "Trebuchet MS";
font-size: 12px;
background-color : #000000;  
}

.fond {
position: relative;
width: 770px;
margin-left: auto;
margin-right: auto;
background-image: url("img/centre.jpg");
background-repeat: repeat y;
}

/* Menu de gauche - début */
.menu {
position: absolute;
width: 230px;
margin-left: 20px;
}

.menu a 
{
	color: #775555;
    text-decoration: none;
}

.menu a:visited 
{
	color: #775555;
	text-decoration: none;
}
.menu a:hover 
{
	color: #FF0000;
	text-decoration: none;
}
.menu a:active 
{
	color: #775555;
	text-decoration: none;
}

.element_menu
{
   margin: auto;
   margin-left: 5px;
   margin-top: 17px;
   background-repeat: repeat-x;
   color : #CCCCCC;
   font-family : Verdana, sans-serif;
   text-decoration : none;
   font-size : 10px;
   text-decoration : none;
}

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

.element_menu2
{
   margin: auto;
   margin-left: 10px;
   margin-right: 10px;
   background-repeat: repeat-x;
   color : #CCCCCC;
   font-family : Verdana, sans-serif;
   text-decoration : none;
   font-size : 10px;
   text-decoration : none;
}

/* Menu de gauche - fin */

.center {
min-height: 1300px;
position: absolute;
margin-left: 275px;
margin-top: 400px;
float: right;
width: 480px;
float: right;
background-color: #132525;
border: solid #666666 1px;

}

.img {
width: 770px;
height: 540px;
background-image: url("img/header1.jpg");
background-repeat: no-repeat;
}

.footer {
width: 770px;
height: 255px;
background-image: url("img/footer.jpg");
background-repeat: no-repeat;
}


Merci, merci d'avance. Smiley sweatdrop
Modifié par Tumult (16 Apr 2006 - 13:22)
Je t'aurrai bien filer un coup de mains mais ton code est farcis d'erreur, ce n'est pas du XHTML strict.

aucune de tes balise <img /> n'est fermée, ton code comporte des accents en français, des guillemets et autres irregularitée (fait valider ta page en XHTML)

Pour cerner ton problème, integre chacun de tes élement petit à petit dans une nouvelle page "test" et essais de voir à partir d'où ça commencer à bloquer.

Au lieu d'utiliser une multitude de <br />, positionne le bloc <div class="element_menu"> grâce à ta feuille de style.

Si tu utilise le PHP, profite en pour integrer tes feuille de styles pour IE et pour les autres navigateur directement grâce à une condition en fonction du nom de ton navigateur (au lieu d'utiliser des commentaires conditionnel)

Pour finir, essais ceci :

/*Pour spécifier toute la fenetre*/
html, body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}

.fond {
	position: absolute;
        width: 770px;
        margin-left: auto;
        margin-right: auto;
	height: 100%;
	background-image: url(img/centre.jpg);
	background-repeat: repeat-y;
}


Je peut pas confirmer que ça fonctionne du premier coup mais une fois toutes les erreurs supprimée, tu y verra plus clair

Ps : n'oublie pas le tiret entre repeat et Y, peut être que ça marche sans mais j'ai apris comme ça
Je suis d'accord avec percherie.
utilise d'abord le validateur du w3c : http://validator.w3.org
Et corrige les erreurs du code html.
Ensuite, et ensuite seulement tu pourras savoir si vraiment il y a quelque chose à changer dans le code CSS.

PS: la file de <br /> c'est vraiment pas l'esprit de la maison, utilise plutôt un attribut "padding-top" dans ta classe "menu".
Modifié par Charlycoste (16 Apr 2006 - 15:55)
merci de vos reponses je vais essailler !

mais pour les br c'est a cause justement du margin-top ou padding... que je mettais. Car quand je mettais pour le menu un margin-top et un pour le centre bein... le centre fait un double margin-top (il additione le sien et celui du menu) donc tout était décalé sous IE (50% de mes visiteurs ont IE...)

C'est la seul solution que j'avais trouvé.

puis c'est surtout le systeme de news qui fait n'est pas aux normes strict. Mais je vais essailler de le rendre aux normes ! Merci encore je vais tester tout cela.
Salut,

J'aimerai savoir pourquoi on trouver un peut partout dans ton code (6 fois au total)

<style type="text/css">
<!--
.Style2 {
	font-size: 11px;
	font-style: italic;
	color: #FFFFFF;
}
a:link {
	color: #775555;
	text-decoration: none;
}
a:visited {
	color: #775555;
	text-decoration: none;
}
a:hover {
	color: #FF0000;
	text-decoration: none;
}
.Style3 {color: #FFFFFF}
.Style4 {font-weight: bold; font-size: 15px;}
-->
</style>


Au risque de paraitre embettant, il te reste encore 38 erreurs dans ton code : http://validator.w3.org/check?uri=http://www.cicatricehp.com/site/index2.php

Il semble que tu utilise la fonction include en php, ça integre également les balise <body> et <head> de chacune des pages à inclure... ce qui rend ton code completement erroné

Après vérification, ton commentaire conditionner qui met en place la feuille de style pour les autres navigateurs que IE n'est pas ecrit correctement, remplace le par (ajoute les crochets autour de endif, ça passe pas sur le forum) :

<!--[if !IE]>
	<link rel='stylesheet' media='screen' type='text/css' href='defaut.css' />
	<![endif]-->


Tu semble utiliser des <table> ce qui est possible mes déconseillé, les <div> te laisse bien plus de flexibilitée

Ton pied de page (qui est vide) ce trouve entre deux balise </head> (il doit en avoir qu'une)

Pour l'instant ça risque de te faire pas mal de travail, je te cache pas que chercher l'erreur qui te pose problème au milieu des autres est très difficile voir impossible

J'espère que tu finira ça rapidement, je suis moi même curieux de voir ce code propre pour enfin chercher l'erreur tranquillement Smiley langue

Ps : pense à fermer tes balises <img /> correctement
Nota : evite egalement de spécifier des style à la mains au seins de ton code, pour cela prefère l'utilisation des class, id et selecteur de balise, ça evite les surprise => ce genre de style est prioritaire par rapport à ta feuille de style

Par exemple, au lieu de spécifier des bordure de 0px sur chacune de tes images, fait ceci :

img {border: 0px}


Il existe des attributs comme "align" dans tes images, bloc et autre

Tes listes sont incomplette, on les déclare bien avec <ul> mais chacune des donnée doit être entourée par des <li> (je parle des listes pour les partenaires)

Heuu je pense que c'est tout, puis j'ai faim, je file me faire à bouffer Smiley murf
Je vais finir par te prendre le choux, mais bon, c'est pour la bonne cause.

Il y a quelques semaines j'ai apris une astuce qui peut être utile chez toi.

Au lieu de placer des images contenant uniquement du texte, place y du texte puis avec les CSS tu y place ton image en fond et déplace ton texte en retrait négatif de -1000em 

.maClass {
        text-indent: -1000em;
	background-image: url(mon_image.png);
        }


Bon faut vraiment que j'arrete, j'ai l'impression d'être un donneur de leçon alors que je débute depuis 1 mois ou 2 mais j'espère que mes conseils et remarques te feront progressé Smiley cligne

Ps : jette un coup d'oeil sur ce site : http://www.csszengarden.com/tr/francais/
Modifié par percherie (16 Apr 2006 - 21:14)
Re,

Merci de vos reponse mais y a quelques choses qui sont fauses. J'utilise belle et bien les <div> pour mon site (c'est le script cutenews qui utilise les tableaux) donc beaucoup d'erreurs xHTML sont du au script de news.

j'ai eu une bonne idee. C'est de prendre comme exemple un Gabarits de mise en page CSS de se site. Donc maintenant le site est strict xHTML. On va pouvoir corriger le problème.

Je crois l'avoir localisé. Voici l'adresse pour visualisé le site:

Le site web ici

Comme vous pouvez le voir, le contenu (centre) et le menu sont placé beaucoup trop bas. (mon header étant tres grand). Donc l'idée c'etait de mettre <div id="gauche"> et <div id="centre"> dans le <div id="header">. Sauf que dans se cas la. Le centre traverse le footer ( il n'est plus repoussé selon la taille du centre).

merci d'avance !

PS: Code css: 


/* CSS Document */

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color: #000000;
}
p {
margin: 0 0 10px 0;
}
#header {
height: 540px;
background-image: url("img/header1.jpg");
background-repeat: no-repeat;
background-color: #99CCCC;
}
#conteneur {
width:770px;
margin:0 auto;
background-image: url("img/centre.jpg");
background-repeat: repeat-y;
}
#centre {
background-color:#132525;
border: solid #666666 1px;
margin-left: 275px;
margin-right: 20px;
margin-bottom: 50px;
}
#gauche {
float:left;
width: 210px;
margin-left: 20px;
}
#droite {
float:right;
width: 150px;
}
#pied {
clear:both;
height: 255px;
background-image: url("img/footer.jpg");
background-repeat: no-repeat;
}
#menuhaut {
list-style-type: none;
margin: 0;
padding:0;
}
#menuhaut li {
display: inline;
}
#menuhaut a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menuhaut a:hover {
text-decoration: none;
}
#menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
#menugauche li {
margin-bottom: 5px;
}
#menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menugauche a:hover {
text-decoration: none;
}


code xHTML:


<!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"
lang="fr">
  <head>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1" />
    <title>
      CicatriceHP.com
    </title>
	<link rel='stylesheet' media='screen' type='text/css' href='defaut.css' />
	</head>
	
<body>
    <div id="conteneur">

      <div id="header"></div>
      <div id="gauche">
        <p>

          menu gauche
        </p>
        <p>
          largeur fixe : 150px avec utilisation de la propriété <code>float:left;</code>
        </p>
        <ul id="menugauche">
          <li>
            <a href="#">Menu 1</a>

          </li>
          <li>
            <a href="#">Menu 2</a>
          </li>
          <li>
            <a href="#">Menu 3</a>
          </li>
          <li>

            <a href="#">Menu 4</a>
          </li>
        </ul>
      </div>
      <div id="centre">
        <p>Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété <code>clear:both;</code> sur le pied de page, permet à ce dernier de "pousser" le conteneur pour intégrer les éléments en float. Le pied de page est correctement positionné à la suite des parties en float les plus longues.Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété <code>clear:both;</code> sur le pied de page, permet à ce dernier de "pousser" le conteneur pour intégrer les éléments en float. Le pied de page est correctement positionné à la suite des parties en float les plus longues.Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété <code>clear:both;</code> sur le pied de page, permet à ce dernier de "pousser" le conteneur pour intégrer les éléments en float. Le pied de page est correctement positionné à la suite des parties en float les plus longues.Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété <code>clear:both;</code> sur le pied de page, permet à ce dernier de "pousser" le conteneur pour intégrer les éléments en float. Le pied de page est correctement positionné à la suite des parties en float les plus longues.</p>
<p>Si le contenu central est plus long que les menus latéraux, il "pousse" également le pied de page vers le bas.</p>
      </div>

      <div id="pied"></div>
    </div>
  </body>
</html>
Petit conseil personnel: n'essai jamais de résoudre un problème d'affichage en modifiant le code html. Ou du moins sa structure... sauf si le problème d'affichage révèle une erreur de structure du document.
Je dis ça parce qu'une partie "gauche" et une partie "centre" n'ont rien à faire dans un "header" sauf s'il s'agit de sous-partie du "header" lui même, ce qui n'est pas le cas ici.
Ceci dit pour résoudre ton problème, je te conseille (je ne sais pas ce que diront les autres) de mettre ton image header1.jpg en fond positionné vers le haut de ton conteneur.

#conteneur {

width:770px;

margin:0 auto;

background-image: url("img/header1.jpg") top no-repeat;

}

Tu vas me dire... y a déjà un fond dans le conteneur.. et tu ne peux pas t'en passer parce que sinon il y aura un décalage entre le haut de ton menu et le centre au niveau de la bordure puisqu'elle est définie dans une image et qu'elle ne correspond donc pas à un attribut css.
Pour palier à cela, essaye donc de rajouter la couleur de fond à ton conteneur. Ainsi les zones non-couvertes par l'image seront tout de même bleu.
#conteneur {

width:770px;

margin:0 auto;

background: url("img/header1.jpg") top #07191d no-repeat;

}


Je sais pas si c'est la meilleure solution mais c'est celle qui me semble la plus logique. Tente toujours, ou attends que quelqu'un dise s'il est d'accord avec moi ou si je débloque... Smiley lol

PS: Jolie travail au niveau de l'image quand même... J'adore trop
Modifié par Charlycoste (17 Apr 2006 - 03:08)
Tient je n'avais pas forcement pensé à ça mais il est clair que ça reste propre comme solution.

Ca permet ensuite de placer #gauche et #centre comme on le souhaite au dessus de l'image en question

Ps : elle est jolie ton interface, je t'ai envoyé un mail, l'a tu reçu?
Si c'est pour moi que tu dis ça Antoine... Oui je l'admet... je ne retiens pas encore très bien l'ordre des propriétés abrégées... J'utilise TopStyle Lite qui le fait à ma place... Smiley langue
Sujet clos
Aller à