18067 sujets

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

Probleme Avec les feuille de Style Help ME

Bonjour je suis entrain de faire un site avec les feuille de style mais le problemme est que je n'arrive pas a faire la meme chose avec IE6 et Fire Fox

je vous montre le code. si quelqu'un arriverais bien a me le corriger un peu sa serrais simpa

Ma feuille de style:
-------------------------------------------------------------------

/*
        FEUILLE DE STYLE CSS
        Date : 25.08.06
        par Free-Nun'S
--------------------------------------------------------------------------------
*/
/*
* Les balises html et body
* ------------------------
*/
html body{
        font-family: verdana, arial, sans-serif ;
        font-size: 9pt ;
        color: #000000 ;
        background-image: url('../imgs/afrique.jpg');
        }
/*
 * Titre du site
 * ---------------
 */

#bloc_site {
        margin-top : 0px;
        margin-left: 0px;
        margin-right: 0px ;
        margin-bottom: 0px ;
        margin: 0px;
        width: 100%;
        height: 100%;
        border: #000000 0px solid;

}

.BlocTitre {
        margin-top : 0px;
        margin-left: 0px;
        margin-right: 0px ;
        margin-bottom: 0px ;
        width: 100%;
        border-bottom: #FF0000 2px ridge ;
}

.ImageTitre {
        float : center;
}
.ImageGauche {
        float-top: center;
}

/*
 * Menu Titre
 * ----------
 */

.titre-menu {
        margin-left: 0px;
        margin-right: 0px ;
        margin-bottom: 0px ;
        font-weight: bold;
        font-size: 7pt;
        text-align: right;
        width: 100%;

}

.bordure-table{
        width: 100%;
        margin-left: 0px;
        margin-right: 0px ;
        margin-bottom: 0px ;
        margin-top: 5px;
        border: #33CC00 2px ridge ;

}

/* Modules Menu-Global
-----------------------*/
#bloc_menu {
        border:  0px ;
        margin: 0px;
        margin-right: 5px;
        padding: 0px;
        width: 190px;
        float: left;
}

.bloc_menu_titre {
        background-color:#009900;
        height: 0px;
        padding-top: 1px;
        padding-left: 5px;
        color: #FFFF00 ;
        font-size: 10pt ;
        font-weight: bold ;
}

.bloc_menu_bas {
        background-color:#009900;
        height: 0px;
        padding-top: 1px;
        padding-left: 5px;
        color: #FFFF00 ;
        font-size: 7pt ;
        text-align: right;
}

.bloc_menu_contenu {
        font-size: 10pt ;
        padding: 10px ;
        margin-top: 0px ;

}

/* Modules Contenu-Global
-----------------------*/
#bloc_contenu {
        margin-right: 0px;
        border: 0px ;
        padding-left: 0px;
        padding: 0px;
        float: right;
        margin-bottom: 0px;
}

.bloc_contenu_titre {
        background-color:#009900;
        height: 0px;
        padding-top: 1px;
        padding-left: 5px;
        color: #FFFF00 ;
        font-size: 10pt ;
        font-weight: bold ;
}

.bloc_contenu_bas {
        background-color:#009900;
        height: 0px;
        padding-top: 1px;
        padding-left: 5px;
        color: #FFFF00 ;
        font-size: 7pt ;
        text-align: right;

}

.bloc_contenu_contenu {
        font-size: 10pt ;
        padding: 10px ;
        margin-top: 0px ;
}

/* Bloc pour le pied de page
-----------------------------*/

#pieddepage {
        height: 18px ;
        padding-top: 0px ;
        margin: 1px;
        text-align: center ;
        border-bottom: #FF0000 3px ridge ;
        clear: both ;
        }

.textepieddepage {
        padding: 0px ;
        padding-top: 2px ;
        margin: 0px ;
        color: #000000 ;
        }







/* Style pour les lien
-----------------------*/
A:link          {
        text-decoration: none;
        font-weight: bold;
        color: #FFFFFF;

}
A:visited       {
        text-decoration: none;
        font-weight: bold;
        color: #FFFFFF;

}
A:hover         {
        color: #000000;
        font-weight: bold;
        text-decoration: none;
}

.sidelink:link        {
        color: #838383;
        font-weight: bold;
        text-decoration: none;


}
.sidelink:visited        {
        color: #838383;
        font-weight: bold;
        text-decoration: none;


}
.sidelink:hover        {
        color: #838383;
        font-weight: bold;
        text-decoration: underline overline;
}

-------------------------------------------------------------------


Premier PAGE
--------------------------------------------------------------------

// Attention Correction d'un bug
echo '<?xml version="1.0" encoding="iso-8859-1" ?>'

?>
<!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">

<title>Africa Guinee News</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<body>
<DIV id="bloc_site">
<!-- DEBUT LOGO+PUB -->
    <div>
    <table class="BlocTitre" >
      <tr>
         <td class="ImageGauche"><img src="../imgs/drapeau.gif" width="80" height="60" /></td>
         <td width="100"></td>
         <td class="ImageTitre"><div id="imagetitre"><img src="../imgs/titresite.jpg" width="567" height="85" /></div></td>
       </tr>
    </table>
<!-- FIN LOGO+PUB -->

<!-- DEBUT MENU HAUT -->

      <table width="100%" class="bordure-table">
              <tr>
                <td class="titre-menu"><a href="#" class="sidelink" >Accueil</a> | <a href="#" class="sidelink" >Partie
                      1</a> | <a href="#" class="sidelink">Contact</a></td>
              </tr>
      </table>

<!-- FIN MENU HAUT -->



<!-- DEBUT COLONNE GAUCHE -->
<DIV id="bloc_menu">
<!-- DEBUT 1er ENCART -->

     <table class="bordure-table">
            <tr>
              <td class="bloc_menu_titre">Acc&egrave;s membre</td>
            </tr>
            <tr>
              <td class="bloc_menu_contenu">Login :
                <input name="textfield" type="text" size="15">      <br>
                 Pass :
              <input name="textfield2" type="text" size="10"> <input type="submit" name="Submit" value="GO"></td>
            </tr>
            <tr>
              <td class="bloc_menu_bas"><a href="#">s'inscrire!</a></td>
            </tr>
     </table>

<!-- FIN 1er ENCART -->

<!-- DEBUT 2eme ENCART -->
      <table  class="bordure-table">
              <tr>
                <td Class="bloc_menu_titre">Ma rubrique 2</td>
              </tr>
              <tr>
                <td class="bloc_menu_contenu"><a href="#" class="sidelink">Sous-rubrique 1</a><br>
                    <a href="#" class="sidelink">Sous-rubrique 2</a><br>
                    <a href="#" class="sidelink">Sous-rubrique 3</a><br>
                    <a href="#" class="sidelink">Sous-rubrique 4</a><br>
                    <a href="#" class="sidelink">Sous-rubrique 5</a><br>
                    <a href="#" class="sidelink">Sous-rubrique 6</a><br>
                    <a href="#" class="sidelink">Sous-rubrique 7</a><br>
                  <a href="#" class="sidelink">Sous-rubrique 8</a></td>
              </tr>
              <tr>
                <td class="bloc_menu_bas"><a href="#">toutes
                      les rubriques</a></div>
                </td>
              </tr>
            </table>
<!-- FIN 2eme ENCART -->

<!-- FIN COLONNE GAUCHE -->
</DIV>


<!-- DEBUT CONTENU CENTRAL -->
<DIV id="bloc_contenu">

<!-- DEBUT 1er ENCART -->
        <table  class="bordure-table">
            <tr>
              <td class="bloc_contenu_titre">Mon titre 1</td>
            </tr>

            <tr>
              <td class="bloc_contenu_contenu"><img src="../imgs/demo.jpg" width="72" height="60" border="1" align="left">Votre
                Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
                Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
                 Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
                 Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla<br>
                <br>
                <strong>En r&eacute;sum&eacute;</strong> : votre design &quot;portail&quot; ou webmaster press&eacute; [smile]</td>
            </tr>

            <tr>
              <td class="bloc_contenu_bas"><div align="right"><a href="#">en savoir
                    plus</a></div>
              </td>
            </tr>
        </table>

<!-- FIN 1er ENCART -->


<!-- DEBUT 2eme ENCART -->
        <table  class="bordure-table">
              <tr>
                <td class="bloc_contenu_titre">Mon titre 2</td>
              </tr>

              <tr>
                <td><strong>Les
                  couleurs utilis&eacute;es :</strong><br>
                  <br>
                </td>
              </tr>

              <tr>
                <td class="bloc_contenu_bas"><a href="#">en savoir
                      plus</a>
                </td>
              </tr>
        </table>
</DIV>



<!-- FIN 2eme ENCART -->


    <div id="pieddepage">
        <p class="textepieddepage">The Nun'S copyright -- design by Nun'S</p>
    </div>

<!-- FIN Bloc Principal -->
</DIV>

</body>
</html>

---------------------------------------------------------------------


Si il aurrais quelqu un qui pourrais m'aider

Merci ...............

--------------------------------------------------------------------
Modifié par nuns (27 Aug 2006 - 12:33)
Modérateur
Bonjour nuns et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Modérateur
Rebonjour, Smiley cligne

Bien que la remarque de dom soit tout à fait justifiée, je t'indique déjà quelques erreurs en ce qui concerne ta feuille de style.

Pour agir réellement sur deux balises dans ton css, tu dois séparer les déclarations par des virgules. Ici, tu ne fais qu'agir sur l'élément body inclus dans l'élément html. Celà dit, çà suffit dans ce cas.

Dans un soucis d'accessibilité, tu dois laisser les polices redimensionnables afin que tout le monde puisse lire correctement ton contenu. Ce n'est pas le cas lorsque tu définis la taille de tes polices en pt.
Le mieux est de définir un font-size de 100% sur la balise body puis de définir chacun de tes éléments en em.

Il est inutile d'écrire :

#bloc_site {
        margin-top : 0px;
        margin-left: 0px;
        margin-right: 0px ;
        margin-bottom: 0px ;
        margin: 0px;
...
}




#bloc_site {
        margin: 0;
...
}
... suffit.

Les deux propriétés suivantes n'existent pas...

.ImageTitre {
        float : center;
}
.ImageGauche {
        float-top: center;
}

cf http://openweb.eu.org/articles/initiation_float/

Comme te l'a précisé dom, une page en ligne nous aiderait à mieux cerner ton problème. Quoiqu'il en soit, il serait déjà bénéfique de supprimer les tableaux puisqu'ils ne devraient pas servir à la mise en page. La structure xhtml de ton site devrait réfléter le contenu qu'elle englobe.
C'est le choix d'un doctype strict et la profusion de tableaux qui m'ont amené à faire ce commentaire trop bref.
Il faut effectivement passer par un apprentissage des standards et une refonte totale!
La théorie et la pratique, par les tutoriels disponibles sur Alsacréations et Openweb.
Premier cours par koala64 ! Smiley cligne

Bon après-midi à tous.

___________
* Liens utiles:

Les problèmes de la mise en page par tableaux

Initiation CSS

Initiation au positionnement CSS
Modifié par dom (27 Aug 2006 - 17:43)
Sujet clos
Aller à