28172 sujets

CSS et mise en forme, CSS3

Probléme d'affichage

Bonjour, j'ai voulu refaire le site de notre team petite lune mais , je rencontre un problème d'affichage. Et je doit reconnaitre que je ne trouve aucun solution pour résoudre mon problème.
Je pense qu'il sera plus simple de vous le montrer plutôt que de blablater: http://gwek.free.fr/essai
Alors que si vous aller dans l'une des pages de projets vous ne trouver aucun problème.

Voici le CSS
body 
{
	background-color:#images/designgd1_01.jpg;
	background-repeat:repeat-x;
	margin: 0;
	padding: 0;
	font: 80% verdana, arial, sans-serif;
	background-color:#9BBAF0;
}
#Corps
{
	width:900px;
	text-align:center;
	margin:auto;
	height:auto;
	background-image:url(images/designgd1_07.jpg);
	overflow:hidden;
}
#Header
{
	background-image:url(images/designgd1_01.jpg);
	background-repeat:no-repeat;
	height:278px;
}
#MenuB
{
	background-image:url(images/designgd1_04.jpg);
	background-repeat:repeat-x;
	height:107px;
	overflow:hidden;
}
#Contenu
{
	margin-left:294px;
	padding-right:105px;
	padding-left:15px;
	
}
#Ccontenu
{
	overflow:hidden;
}
#menu {
float:left;
top: 64px;
left: 73px;
width:294px;
background-image:url(images/designgd1_03.jpg);
background-repeat:no-repeat;
}
/*--------- Menu -----------*/
.navigation 
{
      margin: 0;
      padding: 0;
      list-style: none;
      width: 294px;
      font: 1.2em "Trebuchet MS", sans-serif;
}
   .navigation a, .navigation span
{
      display: block;
      padding: 4px 10px;
	  color:#FFFFFF;
      text-decoration: none; 
}
	.navigation li 
{
	list-style-type: none;
}

   .navigation .open a, .navigation .open span
{
      background-image: url(menu-item-enroule.png);
}
   .navigation a:hover, .navigation a:focus, .navigation a:active 
{
      text-decoration: underline;
	  color:#3543C3;
}
   .navigation .subMenu
{
      font-size: .8em;
      font-size: .9em;
      margin: 0;
      padding: 0;
	  padding-left: 90px;
	  text-align:left;
}
   .navigation ul.subMenu a 
{
      background: none;
      padding: 3px 20px;
}
/*--------- Fin Menu -----------*/
/*--------- News -----------*/
.news_projet
{
	width: 480px;
}
.news_titre
{
	font-weight	 : bold;
	height		 : 22px;
	line-height	 : 22px;
	padding-left : 32px;
}
.news_msg
{
	color		: #3543C3;
	font-weight	: bold;
	text-align	: center;
	padding		: 8px 15px 8px 15px;
	border:1px solid #FFFFFF;
	margin: 2px;
}
.projet
{
	width:23px;
	background-image:url(images/designgd1_12.jpg);
	background-repeat:no-repeat;
	background-position:top right;

}
.news_content
{
	border: 1px solid;
	border-color:#0066CC
}
.projet_cadre
{
	border:1px solid;
	border-color:#336699;
	vertical-align:top;
	padding:6px;
}
img 
{
	border-color:#3399FF;
}
.info 
{
	width: 23px;
	background-image:url(images/designgd1_13.jpg);
	background-repeat:no-repeat;
	background-position:top right;
}
.projet_infos
{
	border:1px solid #336699;
	vertical-align:middle;
	text-align:center;
}
.projet_fline
{
	line-height:25px; height:25px;
	border-bottom:1px solid #336699;
}
.projet_back
{
	color:#483A26;
	text-align:center;
}
.comments
{
text-align:right;
border-bottom:1px solid #336699;
}
/*--------- Fin News -----------*/



#Pied
{
	background-image:url(images/designgd1_10.jpg);
	background-repeat:no-repeat;
	background-position:bottom;
	height: 98px;
	width:900px;
	text-align:left;
	overflow:hidden;
}
#shoutbox 
{
	padding-left: 63px;
}

#Pied h3
{
	text-align:center;
	color:#0066CC;
	margin:0;
	margin-left:150px;
	font: 12px/70px verdana;

}

ET voici la structure de l'index

<div id="Corps">
  <!-- -->
  <div id="Header">
    <!-- -->
  </div>
  <div id="MenuB">
    <!-- -->
    <div id="MenuBG">
      <!-- -->
    </div>
    <div id="MenuBD">
      <!-- -->
    </div>
  </div>
  <div id="Img">
    <!-- -->
  </div>
  <div id="Ccontenu">
    <!-- -->
    <div id="menu">
      <ul class="navigation">
        <li><a href="index.php?page=index" title="Aller à l'accueil">Accueil</a></li>
      </ul>
      <div id="shoutbox"><br />
          <!-- Debut  -  http://www.i-tchat.com  -->
          <iframe src="http://www.i-tchat.com/shoutbox/shoutbox.php?idShoutbox=53306" width="150" height="350"frameborder="0" 		 allowtransparency="true" >Votre navigateur n'est pas compatible avec le , il est grand temps de passer a mozilla , je le crains!</iframe>
        <!-- Fin shoutbox -->
      </div>
    </div>
    <div id="Contenu">
      <!-- -->
      <p>&nbsp;</p>
    </div>
  </div>
  <div id="Pied">
    <!-- -->
    <h3>Site de la team petite lune.</h3>
  </div>
</div>

et la c'est la page des news: http://gwek.free.fr/essai/pages/news.php

MErci pour votre aide.
Salut,

Tu dois avoir des balises non fermées ... un pti tour de validateur html pour vérifier sur tes 2 pages... Smiley cligne
Re,

Sauf si je suis à côté de la plaque, une page d'un de tes projets 2 erreurs au validateur, correctement affichée sous FF Par contre ta page d'accueil quelque peu en vrac 18 erreurs dont pas mal de balises non fermées...

Bah non le validateur ne corrige rien... Dommage !

Ps ta page de test ne s'affiche pas ... erreurs d'include Smiley cligne
Modifié par ghost (09 Mar 2008 - 01:00)
Modérateur
bonsoir,

plusieurs erreurs rapidement constatées sur ta page d'accueil.


1) le fichier css lightbox.css , n'est pas la ou attendue , du coup tu charge une page d'erreur 404 au risque d'incorporer a ta page ses styles CSS (ceux de la page d'erreur).

2) 
   <div id="Contenu">

      <!-- -->
      <p>
        <div style="overflow:hidden; width:416px;"><div class="news_projet">

En principe le validateur tousse la Smiley smile (le <p> )

3) tes script php sont peut-etre mal pensé :
		</table>
	</div>
		
	</div>
</div>

</div></div>
<div class="news_projet">

N'y a t-il pas la des balises fermantes en trop ? .. qui refermerait #contenu trop tôt par exemple ?

...

pour le fichier : <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> qui finalement integre ta page 404 , ce probleme peut se repeter pour tes autres balises link ou script

Reprends bien l'ensemble de tes elements de ta page et de tes scripts (php), corrige ce qui ne vas pas avant de tenter de 'rattrapper' ça a coup de css ou autres.
Lorsque tu teste une page , n'omet pas de la tester avec tout ses fichiers lié , .. au risque de t'arracher les cheveux sinon Smiley smile .

GC
Modifié par gcyrillus (09 Mar 2008 - 01:23)
Sujet clos
Aller à