mise en forme cascade

pierrick · Message par **pierrick** » 26 janv. 2008, 16:53

Bonjour,

J'utilise kompozer et cascade pour la mise en forme. J'ai reussi à figer mon menu et je souhaite le faire pour mon pied de page( qu'il apparait en permanence en bas d'ecran). Losque je precise dans cascade mon pied de page en position fixe, celui ci disparait?
J'espere avoir été assez clair sinon voici le lien http://pingpongfalaise.free.fr/

Merci d'avance

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322)

Invité · Message par **Invité** » 27 janv. 2008, 07:24

Bonjour,

Essaye en précisant

Code : Tout sélectionner

  html, body {
    height : 100%;
      }

et

Code : Tout sélectionner

    position : fixed; bottom : 0;

pour le #pied.

Ta manière de faire est un peu aléatoire.
Ce qui fait que la gestion des différents éléments de ta page est difficile, confuse.
Comme tu sembles te lancer dans les CSS, j'ai tendance à te suggérer autre chose qui te simplifiera la vie pour la suite.
Place l'ensemble des éléments de ta page dans un bloc qui les contiendra tous et auquel tu donneras, ou pas, des dimensions.

Je te propose de tester cet exemple.
Tu remarqueras ces différents choix :

— Pour supprimer l'espace par défaut des navigateurs, c'est le

Code : Tout sélectionner

html, body

qui a reçu

Code : Tout sélectionner

margin: 0; padding: 0;

(et pas une marge négative qui peut varier selon les navigateurs. 16px en général).
— Des dimensions ont été définies un peu partout. C'est souvent nécessaire et utile.
— Le #conteneur (le bloc qui contiend tous les autres) aussi, mais ce n'est pas obligatoire.
— Ces dimensions permettent de mieux gérer le #tete et le #pied et surtout les éléments de la liste du menu. En particulier les liens <a> qui ont été définis avec un

Code : Tout sélectionner

display : block;

Là, plus besoin de les gérer avec padding.

Si le cœur t'en dis, amuse-toi à tester tout ça.

En voici le code :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Une piste pour ESF</title>
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
      text-align: center;
      background-color: #000;
      color : #fff;
      height : 100%;
      }
    #conteneur {
      position: relative;
      margin: 0 auto;
      width: 760px;
      font-family: 'Comic Sans MS';
      text-align: left;
      border : 1px solid #fff;
      background-color: #3a0000;
      }
    #corps {
      margin : 126px 0 60px;
      }
    #tete, #pied {
      position : fixed;
      left : 50%;
      margin-left : -380px;
      width : 760px;
      background-color: #c0c0c0;
      }
    #tete {
      top : 0;
      height : 116px;
      text-align : center;
      font-family: 'Arial Rounded MT Bold';
      color: #000;

      }
    #pied {
      bottom : 0;
      height : 50px;
      }
    #horaire {
      margin-left : 10px;
      width: 740px;
      font-family: Georgia, serif;
      text-align: center;
      }
    #horaire td {
      border-bottom : 1px solid #c0c0c0;
      background-color: #5c2222;
      text-align: center;
      }
    #menu {
    /*  margin: 0px;*/
      width: 100%;
      text-align: center;
      background-color: black;
      color: white;
    /*  position: fixed;
      top: 77px;*/
      }
    #menu ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      }
    #menu li {
      float: left;
    /*  border-style: none;
      margin-bottom: 0;
      margin-top: -4px;*/
    /*  padding-right: 20px;
      padding-left: 20px;*/
      width: 20%;
      height: 25px;
      line-height: 25px;
      font-family: 'Futura Bk', sans-serif;
    /*  font-weight: bold;*/
      text-align: center;
      color: white;
      background-color: #000;
      }
    #menu li a {
      display : block;
      text-decoration: none;
      color: #a66c6c;
      }
    #menu li a:hover {
      color : #fff;
      background-color: #a66c6c;
      }
    p {
      margin : 1em;
      font-size : 1.1em;
      text-align : justify;
      color : #e5e5e5;
      }
    a {
      color : #fff;
      }
    </style>
<base href="http://pingpongfalaise.free.fr/" />
</head>
<body>
  <div id="conteneur">
    <div id="tete">
    <h1 style="margin-top: 0px; height: 71px;">
      <img style="border: 8px solid ; width: 60px; height: 60px;" alt=""
      src="gif/pingpong006.gif" align="middle" hspace="10" vspace="10">
      <strong style="background-color: rgb(255, 102, 0);">ESF TENNIS DE TABLE</strong>
      <img style="border: 8px solid ; width: 60px; height: 60px;" alt="" src="gif/pingpong007.gif" align="middle" hspace="10" vspace="10">
     </h1>

      <div id="menu">
        <ul>
          <li>Accueil</li>
          <li><a href="http://lepingafalaise.free.fr/championnats.html">Championnats</a></li>
          <li><a href="http://lepingafalaise.free.fr/classements.html">Classements</a></li>
          <li><a href="http://lepingafalaise.free.fr/revuepresse.html">Revue de Presse</a></li>
          <li><a href="http://lepingafalaise.free.fr/contacts.html">Contacts</a></li>
        </ul>
      </div>
      <div style="clear:left;"></div>
    </div>
    <div id="corps">
    HAUT<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&nbsp;
    <p>
    Si l'envie vous démange, vous pouvez nous rejoindre à <a href="contacts.html">l'espace
    sportif Didier Blanco</a> aux horaires suivants&nbsp;:
    </p>
    <table id="horaire" border="0" cellpadding="4" cellspacing="0">
      <tbody>
        <tr>
          <td style="color: black; background-color: rgb(51, 204, 255);">Jours</td>
          <td style="background-color: rgb(51, 204, 255); color: black;">Horaires</td>
          <td style="background-color: rgb(51, 204, 255); color: black;" colspan="2" rowspan="1">
          Type d'entrainement</td>
        </tr>
        <tr>
          <td>lundi</td>
          <td>20 h 00 - 22 h 00</td>
          <td colspan="2" rowspan="1">libre</td>
        </tr>
        <tr>
          <td colspan="1" rowspan="3">mardi</td>
          <td>17 h 15 - 18 h 15</td>
          <td>jeune</td>
          <td colspan="1" rowspan="3">dirigé par Anthony</td>
        </tr>
        <tr>
          <td>18 h 15 - 19 h 45</td>
          <td>confirmé</td>
        </tr>
        <tr>
          <td>20 h 30 - 22 h 00</td>
          <td>adulte</td>
        </tr>
        <tr>
          <td colspan="1" rowspan="3">mercredi</td>
          <td>18 h 00 - 19 h 00</td>
          <td>babyping</td>
          <td>dirigé par Cyril</td>
        </tr>
        <tr>
          <td>18 h 00 - 19 h 00</td>
          <td>jeune</td>
          <td>dirigé par Anthony</td>
        </tr>
        <tr>
          <td>20 h 00 - 22 h 00</td>
          <td colspan="2" rowspan="1">libre</td>
        </tr>
        <tr>
          <td>jeudi</td>
          <td>20 h 00 - 22 h 00</td>
          <td colspan="2" rowspan="1">libre</td>
        </tr>
        <tr>
          <td colspan="1" rowspan="2">vendredi</td>
          <td style="background-color: rgb(0, 153, 0);">20 h 00 - 24 h 00</td>
          <td colspan="2" rowspan="1" style="background-color: rgb(0, 153, 0);">compétition départementale</td>
        </tr>
        <tr>
          <td>ou 20 h 00 - 22 h 00</td>
          <td colspan="2" rowspan="1">libre</td>
        </tr>
        <tr>
          <td colspan="1" rowspan="2">samedi</td>
          <td style="background-color: rgb(0, 153, 0);">15 h 00 - 24 h 00</td>
          <td colspan="2" rowspan="1" style="background-color: rgb(0, 153, 0);">compétition régionale</td>
        </tr>
        <tr>
          <td>ou 15 h 00 - 22 h 00</td>
          <td colspan="2" rowspan="1">libre</td>
        </tr>
      </tbody>
    </table>
    <br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>&mdash;<br>BAS
    </div>
    <div id="pied">pied
    </div>
  </div>
</body>
</html>

++
“gif/pingpong006.gif” est absente.

As-tu testé ta page dans un navigateur plus ancien que le tien ?
Parce que le “fixed” dans IE6
Y tiens-tu vraiment ?

[/url]

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X; fr) AppleWebKit/523.12 (KHTML, like Gecko) Safari/419.3

GihefBey · Message par **GihefBey** » 27 janv. 2008, 07:28

Zut, je n'étais pas connecté, ce qui fais que je ne peux pas le reprendre pour en modifier la largeur.

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X; fr) AppleWebKit/523.12 (KHTML, like Gecko) Safari/419.3

Mongo Bob · Message par **Mongo Bob** » 27 janv. 2008, 10:51

IE7 a implémenté la position fixe, finalement?

http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx

Finally, we added new features from CSS2.1:
(...) * Fixed positioning support

même avec un dico d'anglais, c'est pas trés clair pour moi :
"réparé le support du positionnement" ou "prise en charge de la positionnement en fixe"?
Etant entendu que IE6 est encore le plus répandu.

GihefBey a écrit :Parce que le “fixed” dans IE6
Y tiens-tu vraiment ?

+1, à éviter.

GihefBey · Message par **GihefBey** » 27 janv. 2008, 12:49

Oui, il me semble que c'est un des trucs qu'ils ont modifiés.

Sinon, pierrick aurrait posé une autre question.
?

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X; fr) AppleWebKit/523.12 (KHTML, like Gecko) Safari/419.3

Mongo Bob · Message par **Mongo Bob** » 27 janv. 2008, 13:41

de toute façon, je me risquerais pas à utiliser le positionnement fixe dans un 1er temps, si je débutais.
et même... Il me semble que rester dans le flux ou positionner en relative ou en absolu est largement suffisant.
Le positionnement statique me semble utile exceptionnellement pour éviter un effet d'héritage de propriété malvenu, ex.: un élément contenu qui hérite de son conteneur d'un positionnement dont je ne veux pas, il faut bien mettre qqch à "Position" dans le contenu pour éviter ça.
Bref, je sais pas si pierrick a eu sa réponse, du coup...

remarque, y'a une ressource pour émuler le fixed sur IE/Win (avec un dico) :
http://css-discuss.incutio.com/?page=Em ... ositioning

pierrick · Message par **pierrick** » 27 janv. 2008, 22:16

Merci pour vos reponses, je regarde et analyse tout ca et vous tiens au courant.

Pierrick

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322)

pierrick · Message par **pierrick** » 27 janv. 2008, 22:28

Message pour GihefBey
Merci pour ton code et exemple(c'est exactement ce que je cherche mais en page pleine en largeur). Pour ton info les marges negatives servaient à avoir une zone qui remplissait entierement la page?(bonne ou mauvaise idée??).
Bon demain ou dans la semaine ) j'analyse ton code et vous tiens au courant. Pas de pb le gif n'est pas sur le serveur de free, il s'agit d'un site en test l'original se trouve : http://lepingafalaise.free.fr/
Voila et encore merci a plus!

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322)

pierrick · Message par **pierrick** » 28 janv. 2008, 00:29

Message pour Mongo Bob
Merci pour l'info mais comme je débute à quoi corresondent les positions absolue et relative ?
Merci d'avance.
Pierrick

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322)

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 28 janv. 2008, 00:56

pierrick a écrit :Merci pour l'info mais comme je débute à quoi corresondent les positions absolue et relative ?

Voir
http://css.alsacreations.com/Bases-et-i ... ses-en-CSS

Geckozone

mise en forme cascade

mise en forme cascade

Qui est en ligne ?