CSS

Résolu
bluenette -  
Bonjour,

voici ma page : www.perigordgite.fr

Je ne comprends pas pourquoi les 4 menus (le gîte, environnement, tarifs, et contact) ne s'allignent pas!

Voici mon code CSS :

body
{
background-image: url(images/fond_ecran.jpg);
background-attachment: fixed;
background-repeat: repeat-y;
background-position :top right;
}
p1
{
font-size:40px;
font-family:'Script Italic', Georgia, serif;
padding: 0px;
margin: 0px;
color: black;
}
p2
{
font-size:40px;
font-family:'Script Italic', Georgia, serif;
padding: 0px;
margin: 0px;
color: black;
}
p3
{
font-size:40px;
font-family:'Script Italic', Georgia, serif;
color: black;
padding: 0px;
margin: 0px;
}
p4
{
font-size:40px;
font-family:'Script Italic', Georgia, serif;
padding: 0px;
margin: 0px;
color: black;
}
a:hover
{
text-decoration: underline;
color: black;
}
a
{
color: black;
text-decoration: none;
}

Merci a tous pour votre aide

6 réponses

  1.  RAD ZONE Contributeur
    Salut

    ca serait plus correct de faire ca avec des <ul><li> et du CSS plutot que ces table !!!!! !! non ? ;-))

    exemple 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/*<![CDATA[*/

      #navigation {
      list-style: none ;
      margin: 0 ;
      padding: 0 ;
      overflow: hidden ;
      }
      #navigation li {
      float: left ;
      width: 150px ;
      border: 1px solid #600 ;
      margin-right: 1px ;
      color: #fff ;
      background: #c00 ;
      }
      #navigation li a {
      display: block ;
      background: #c00 ;
      color: #fff ;
      font: 1em "Trebuchet MS",Arial,sans-serif ;
      line-height: 1em ;
      padding: 4px 0 ;
      text-align: center ;
      text-decoration: none ;
      }
      #navigation li a:hover, #navigation li a:focus, #navigation li a:active {
      background: #900 ;
      text-decoration: underline ;
      }
      -->
/*]]>*/
</style>
  </head>
  <body>
    <div>
      <ul id="navigation">
        <li>
          <a href="#" title="aller au gîte">Le gîte</a>
        </li>
        <li>
          <a href="#" title="aller à l Environnement">Environnement</a>
        </li>
        <li>
          <a href="#" title="aller au Tarifs">Tarifs</a>
        </li>
        <li>
          <a href="#" title="aller à Contact">Contact</a>
        </li>
      </ul>
    </div>
  </body>
</html>
    3
    1. arthezius
      C'est en effet beaucoup plus adapté :)
      0
  2. skieurdemontagne007
    hello,
    au lieu de faire différents paragraphes je changerais carrément le html pour mettre le menu dans un tableau.

    genre :
    <table>
    <tbody>
    <tr>
    <td>bouton 1</td><td>bouton ou lien 2</td>
    </tr>
    etc...

    Le tableau fera l'alignement automatiquement.

    je te conseille de voir ce site : http://cinecran.over-blog.com qui est une de mes créations...

    Je reste disponible si t'as d'autres questions ;)
    0
    1. arthezius
      Les tableaux ne sont pas fait pour ça...
      0
    2. coeus
      Je seconde.
      C'est vrai que les tableaux vont être relativement stables, mais ils ne sont effectivement absolument pas faits pour ça.
      0
  3. bluenette Auteur
    Tu es top! Ca fonctionne!

    Maintenant j'ai un nouveau soucis :

    www.perigordgite.fr

    Pourquoi une ligne est sautée entre "Le" et "Gîte"?

    Et aussi comment réduire l'espace entres les différents menus?
    0
    1. bluenette Auteur
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <meta name="description" content="Le gite de la famille Borie. Gite rural dans le Perigord, idéal pour passer d'agréables vacances" />
      <meta name="keyword" content="Gite, Perigord, Borie, Jean Michel, Claire, Location, Semaine, Week-end, campagne, vacances, beaumont, monpazier, pas cher, chèque vacances, agréable, calme, silencieux, animaux, enfants, 5, 6, 4, 3, 2, deux, trois, quatre, cinq, six, personnes, piscine, chauffage, chauffée" />
      <title>Le gîte de la famille Borie.</title>
      <link rel="stylesheet" media="screen" type="text/css" title="Design espace" href="style.css" />
      </head>
      <body>
      <table>
      <tbody>
      <tr>
      <td><a href="https://www.google.fr/?gws_rd=ssl">Le gîte</a></td>
      <td><a href="https://www.google.fr/?gws_rd=ssl">Environnement</a></td>
      <td><a href="https://www.google.fr/?gws_rd=ssl">Tarifs</a></td>
      <td><a href="https://www.google.fr/?gws_rd=ssl">Contact</a></td>
      </tr>
      </table>
      </html>
      </body>

      CSS :

      body
      {
      background-image: url(images/fond_ecran.jpg);
      background-attachment: fixed;
      background-repeat: repeat-y;
      background-position :top right;
      }
      a:hover
      {
      text-decoration: underline;
      color: black;
      }
      a
      {
      color: black;
      text-decoration: none;
      }
      td
      {
      color: black;
      marging: 100px;
      padding: 100px;
      font-size: 30px;
      font-family:'Script Italic', Georgia, serif;
      }
      0
      2. ideal23
        Tout à fait d'accord avec vous mon petit RAD ZONE. Je sais lire, mais bluenette avait l'air d' insister avec les tableaux. Je sais que vous avez toujours de bons conseils et que vous êtes compétent.
        0
        1. arthezius
          En même temps, un réponse concernant les tableaux avait déjà été donné. Tu ne fais donc que répété ce qui avait été déjà dit.
          0
      3. ideal23
        essai çà mais il vaut mieux utiliser les div et des menus

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <meta name="description" content="Le gite de la famille Borie. Gite rural dans le Perigord, idéal pour passer d'agréables vacances" />
        <meta name="keyword" content="Gite, Perigord, Borie, Jean Michel, Claire, Location, Semaine, Week-end, campagne, vacances, beaumont, monpazier, pas cher, chèque vacances, agréable, calme, silencieux, animaux, enfants, 5, 6, 4, 3, 2, deux, trois, quatre, cinq, six, personnes, piscine, chauffage, chauffée" />
        <title>Le gîte de la famille Borie.</title>
        <link rel="stylesheet" media="screen" type="text/css" title="Design espace" href="style.css" />
        </head>
        <body>
        <div id="menu_tableau">
        <table width="1024">
        <tbody>
        <tr>
        <td><a href="https://www.google.fr/?gws_rd=ssl">Le gîte</a></td>
        <td><a href="https://www.google.fr/?gws_rd=ssl">Environnement</a></td>
        <td><a href="https://www.google.fr/?gws_rd=ssl">Tarifs</a></td>
        <td><a href="https://www.google.fr/?gws_rd=ssl">Contact</a></td>
        </tr>
        </table>
        </div>
        </html>
        </body>

        css

        body
        {
        background-image: url(images/fond_ecran.jpg);
        background-repeat: repeat-y;
        background-position :top right;
        }
        #menu_tableau{
        width: 1024px;
        float: right;
        font-family:'Script Italic', Georgia, serif;
        font-size: 30px;
        color: black;
        text-align:center;
        padding-top: 100px;
        }
        a:hover
        {
        text-decoration: underline;
        color: black;
        }
        a
        {
        color: black;
        text-decoration: none;
        }
        -1

      Discussions similaires

      indice et exposant en css ?
      yiv

      19 réponses
      Mettre du texte à côté d'une image
      yuls13

      3 réponses
      Comment aligner des éléments html css
      eligame

      1 réponse
      Faire passer du texte SOUS une image HTML / CSS
      Mihai

      2 réponses
      Superposer du texte sur une image (HTML/CSS)
      bh_france

      1 réponse