CSS

Résolu

bluenette Messages postés 224 Statut Membre -
arthezius Messages postés 3756 Statut Membre - 10 déc. 2010 à 18:03

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

Afficher la suite

A voir également:

CSS
Css download - Télécharger - HTML
Enlever soulignement lien css ✓ - Forum CSS
Aligner horizontalement css - Forum CSS
Centrer une image css ✓ - Forum CSS
Psd vers css ✓ - Forum CSS

6 réponses

Réponse 1 / 6

RAD ZONE Messages postés 5362 Statut Contributeur 1 360

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>

arthezius Messages postés 3756 Statut Membre 475

C'est en effet beaucoup plus adapté :)

Réponse 2 / 6

skieurdemontagne007 Messages postés 201 Statut Membre 9

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 ;)

arthezius Messages postés 3756 Statut Membre 475

Les tableaux ne sont pas fait pour ça...

coeus Messages postés 3296 Statut Membre 120

Je seconde.
C'est vrai que les tableaux vont être relativement stables, mais ils ne sont effectivement absolument pas faits pour ça.

Réponse 3 / 6

bluenette Messages postés 224 Statut Membre 3

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?

Réponse 4 / 6

bluenette Messages postés 224 Statut Membre 3

<!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;
}

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

ideal23 Messages postés 505 Statut Membre 28

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.

arthezius Messages postés 3756 Statut Membre 475

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.

Réponse 6 / 6

ideal23 Messages postés 505 Statut Membre 28

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;
}

RAD ZONE Messages postés 5362 Statut Contributeur 1 360

Salut

Vous ne lisez jamais le reponse deja donnee !

les tables ne sont pas faite pour cela !

lire ici la repone deja donnee https://forums.commentcamarche.net/forum/affich-20095378-css#4

A+

Discussions similaires

Mettre du texte à côté d'une image

indice et exposant en css ?

Faire passer du texte SOUS une image HTML / CSS

Enlever le soulignement sous les liens en HTML/CSS

Superposer du texte sur une image (HTML/CSS)

Discussions similaires

Newsletters