45 utilisateurs inconnus

 Mot :   Pseudo :  
 
Bas de page
Auteur
 Sujet :

BESOIN d'un pro en HTML!!!

 
n°61946
alex_fm_cool
Profil : New Penguin
Avatar
profil
Posté le 22-04-2008 à 00:26:08  
 

Bonjour tout le monde! Et bien voilà, j'ai fais la page principale de mon premier site web, mais il y a un petit problème. Il y a des petits tirets noires qui s'affichent entre les cases. En fait c'est un background que j'ai utilisé pour donner à mes cases un effet d'ombre. Mais je ne veux pas que ce background dépasse les cases.
Je ne sais pas comment faire. Est-ce que vous aurez une idée?
Merci d'avance de m'aider, je sais que je suis pas fameuse en info. ^^''

 

Sur l'image joint vous pouvez voir les tirets noirs (encerclés en rouge).

 

Voici le code complet de la page:

 

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>Dream Chanlex</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <style type="text/css">
body {
scrollbar-arrow-color:#ff9801;
scrollbar-track-color:#c21614;
scrollbar-face-color:#c21614;
scrollbar-highlight-color:#ff9801;
scrollbar-3dlight-color:#c21614;
scrollbar-darkshadow-color:#c21614;
scrollbar-shadow-color:#ff9801
}
</style>
  <style type="text/css">
   body
   {
    width:800px;
    margin:auto;
    margin-top:20px;
    margin-bottom:20px;
    background:url('http://img214.imageshack.us/img214/8721/generalbackkb2.jpg';) no-repeat fixed right bottom;);
   }

 

  /* L'en-tête */

 

  #en_tete
   {
    width:800px;
    height:270px;
    background-image:url("http://img151.imageshack.us/img151/9682/bunnydw7.jpg";);
    background-repeat:no-repeat;
    margin-bottom:10px;
   }

 


   /* Le menu */

 

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

 

  .element_menu
   {
    background-image:url("http://img155.imageshack.us/img155/7510/milieubacklp3.jpg";);
    border:0px solid black;
    margin-bottom:10px;
   }
           
            .element_pou
   {
    background-image:url("http://img155.imageshack.us/img155/7510/milieubacklp3.jpg";);
    border:0px solid black;
    margin-bottom:10px;
   }

 


   /* Quelques effets sur les menus */

 


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

 

  .element_menu ul
   {
    list-style-image:url("http://img214.imageshack.us/img214/9141/pucefqb2.gif";);
    padding:0px;
    padding-left:25px;
    margin:5px;
    margin-bottom:0px;
   
   }

 

           .element_pou ul
   {
    list-style-image:url("http://img214.imageshack.us/img214/9141/pucefqb2.gif";);
    padding:0px;
    padding-left:25px;
    margin:5px;
    margin-bottom:200px;
   }

 

  .element_menu a
   {
    color:#000000;
   }

 

  .element_menu a:hover
   {
    color:black;
   }

 


   /* Le corps de la page */

 

  #corps
   {
       width:625px;
       height:680px;
    margin-left:170px;
    margin-bottom:50px;
    padding:0px;
   
    color:#B3B3B3;
    background-image:url("http://img214.imageshack.us/img214/1845/barre3principalefg8.jpg";);
       
    border:0px solid black;
   }

 

  #corps h1
   {
    color:#B3B3B3;
    text-align:center;
    font-family:Arial, "Arial Black", "Verdana", "Forte";
   }

 

  #corps h2
   {
    background-image:url("titre.png";);
    background-repeat:no-repeat;
   
    padding-left:25px;
    color:#B3B3B3;
    text-align:left;10
   }

 


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

 

  #pied_de_page
   {
       width:625px;
       height:70px;
    text-align:center;
    margin-left:170px;
                margin-bottom:80px;
    border:0px solid black;
   }
  </style>
 </head>
 <body link="#8B8B8B" vlink="#ACD8F7" alink="#B3B3B3">
  <div id="en_tete">
   <img src="http://img151.imageshack.us/img151/9682/bunnydw7.jpg">
  </div>

 

 <div id="menu">  
   <div class="element_pou">
    <img src="http://img155.imageshack.us/img155/7031/activitesel3.jpg">
    <ul><font face="Tahoma">
     <li> <a href="http://dreamchanlex.ifrance.com/test.htm" target="hublot"><span style="text-decoration: none">Coucou</span></a></li>
     <li> <a href="page2.html" target="hublot"><span style="text-decoration: none">Lien</span></a></li>
     <li> <a href="page3.html" target="hublot"><span style="text-decoration: none">Lien</span></a></li>
    </ul></font>
    <img src="http://img155.imageshack.us/img155/6905/finbarrezs2.jpg">
   </div>

 

  <div class="element_menu">
    <img src="http://img155.imageshack.us/img155/8530/liensutilesvo4.jpg">
    <ul><font face="Tahoma">
     <li> <a href="page4.html" target="hublot"><span style="text-decoration: none">Lien</span></a></li>
     <li> <a href="page5.html" target="hublot"><span style="text-decoration: none">Lien</span></a></li>
     <li> <a href="page6.html" target="hublot"><span style="text-decoration: none">Lien</span></a></li>
    </ul></font>
    <img src="http://img155.imageshack.us/img155/6905/finbarrezs2.jpg">
   </div>
   
             <div class="element_menu">
    <img src="http://img155.imageshack.us/img155/594/2conseiljj4.jpg">
    <ul><font face="Tahoma">
     <li> <a href="page4.html" target="hublot"><span style="text-decoration: none">Lien</span></a></li>
     <li> <a href="page5.html" target="hublot"><span style="text-decoration: none">Lien</span></a></li>
     <li> <a href="page6.html" target="hublot"><span style="text-decoration: none">Lien</span></a></li>
    </ul></font>
    <img src="http://img155.imageshack.us/img155/6905/finbarrezs2.jpg">
   </div>  
  </div>

 

 <div id="corps">
  <img src="http://img214.imageshack.us/img214/9641/barre1principalezk8.jpg">
  <center>
  <iframe src="http://dreamchanlex.ifrance.com/test.htm" name="hublot" width="605" height="600"
  frameborder="0" framepadding="0" framespacing="0" SCROLLING=NO style="FILTER: chroma(color=#CC9966)" allowTransparency>
<p>Votre navigateur ne peut malheureusement pas afficher de cadre!</p>
</iframe></center>
<img src="http://img214.imageshack.us/img214/9928/barre2principalekw4.jpg">
   </div>

 

 <div id="pied_de_page">
  <img src="http://img139.imageshack.us/img139/2706/barrefinsiteqd4.jpg">
  </div>    
 </body>
</html>

 

answer
mood
GoogleAds
profil
Posté le 22-04-2008 à 00:26:08  
 

answer
n°61947
Tardio
Profil : Penguin Pro
Avatar
profil
Posté le 22-04-2008 à 03:39:02  
 

Je suis pas un pro mais si tu rajoutes ceci c'est ok...

 

.element_menu
{

 

 max-height : 191px;

 

}
           
.element_pou
{

 

max-height : 397px;

}

 

Par contre du coup, si tu veux que les menus soit plus long faudra changer les tailles. Il y à peut-être d'autre méthode.

 

Par contre, fait un css apart c'est beaucoup plus clair, et le coup des images hébergé sur Imageshack j'espere que c'est temporaire :he:

answer
n°61954
alex_fm_cool
Profil : New Penguin
Avatar
profil
Posté le 22-04-2008 à 16:15:27  
 

Merci, je vais essayer. ^^

answer
n°61964
alex_fm_cool
Profil : New Penguin
Avatar
profil
Posté le 22-04-2008 à 18:20:19  
 

Ça marche pas. :frown:

 

Et j'ai un autre problème, quand je mets le tout sur le net, les cases sont toutes à gauches et non au centre... et quand je mets la balise center, les cases sont au centre mais le texte dans les cases aussi. :frown:

answer
n°61965
alex_fm_cool
Profil : New Penguin
Avatar
profil
Posté le 22-04-2008 à 18:22:55  
 

Si vous avez d'autre façon d,arriver au même résultat ce serais apprécié! :biggrin:

answer
n°61966
Tardio
Profil : Penguin Pro
Avatar
profil
Posté le 22-04-2008 à 18:26:47  
 

Je viens de le refaire sa marche parfaitement sous IE, FF et Opera.

 

Tu rajoutes juste l'element en gras dans les bonne balises du css et c'est bon...

answer
n°61970
lorien
Profil : Penguin
Avatar
profil
Posté le 22-04-2008 à 19:16:26  
 

au lieu de mettre une image en haut et en bas, tu crée 3 div à l'intérieur de ton élément de menu. les deux premier reste vides avec comme fond l'image de début et de fin de bloc et le div central contient la liste et possède le fond pour le milieu du bloc.

 

et maintenant je vais faire un peu le chieur mais c'est pas très joli tout ca :

 

CODE<ul><font face="Tahoma">
    <li> <a href="page4.html" target="hublot"><span style="text-decoration: none">Lien</span></a></li>
    <li> <a href="page5.html" target="hublot"><span style="text-decoration: none">Lien</span></a></li>
    <li> <a href="page6.html" target="hublot"><span style="text-decoration: none">Lien</span></a></li>
</ul></font>

 

quand tu veux fermer une balise, tu dois d'abord fermer celles que tu as ouvert ensuite...

 

donc :

 

CODE<ul><font></font></ul>

 

et essaie d'utiliser le css au lieu de font :wink:

answer

Aller à :
Ajouter une réponse