CSS

Résolu/Fermé
bluenette Messages postés 213 Date d'inscription lundi 25 mai 2009 Statut Membre Dernière intervention 21 mars 2019 - 9 déc. 2010 à 19:27
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 - 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

6 réponses

RAD ZONE Messages postés 5226 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 1 juin 2024 1 355
9 déc. 2010 à 22:33
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
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
10 déc. 2010 à 07:09
C'est en effet beaucoup plus adapté :)
0
skieurdemontagne007 Messages postés 114 Date d'inscription vendredi 25 décembre 2009 Statut Membre Dernière intervention 14 mai 2011 9
Modifié par skieurdemontagne007 le 9/12/2010 à 19:39
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
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
10 déc. 2010 à 07:07
Les tableaux ne sont pas fait pour ça...
0
coeus Messages postés 3019 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
10 déc. 2010 à 17:30
Je seconde.
C'est vrai que les tableaux vont être relativement stables, mais ils ne sont effectivement absolument pas faits pour ça.
0
bluenette Messages postés 213 Date d'inscription lundi 25 mai 2009 Statut Membre Dernière intervention 21 mars 2019 3
9 déc. 2010 à 21:34
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
bluenette Messages postés 213 Date d'inscription lundi 25 mai 2009 Statut Membre Dernière intervention 21 mars 2019 3
9 déc. 2010 à 22:00
<!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

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

Posez votre question
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
10 déc. 2010 à 13: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.
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
10 déc. 2010 à 18:03
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
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
10 déc. 2010 à 11:25
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
RAD ZONE Messages postés 5226 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 1 juin 2024 1 355
10 déc. 2010 à 12:23
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+
0