Problème css

Résolu/Fermé
habeo Messages postés 19 Date d'inscription mercredi 9 septembre 2009 Statut Membre Dernière intervention 6 novembre 2016 - Modifié par habeo le 27/12/2012 à 16:34
habeo Messages postés 19 Date d'inscription mercredi 9 septembre 2009 Statut Membre Dernière intervention 6 novembre 2016 - 27 déc. 2012 à 17:23
Bonjour,

Je suis plutôt novice en php et malgrès un nombre incalculable de recherches sur google je n'arrive pas à comprendre se qui cloche.

J'essaye de créer un sommaire, rien de bien sorcier :

link href="style/style.css" rel="stylesheet" type="text/css">   

    <!-- Division pour le sommaire -->   
    <div id="menu">     

        <ul id="menu">   
           <li class="menu">   
              <a href="mapage.php" title="Page d'accueil">Accueil</a>   
           </li>   
              
           <li class="menu">   
              <a href="mapage2.php" title="mapage2">Page 2</a>   
           </li>            
         </ul>        
    </div>



Avec l'extrait du css concerné :

<style type="text/css">   
ul#menu li{    
display : inline;   
padding : 0 1em; /* Pour espacer les boutons entre eux */   
color : #FF0000;   
text-decoration: none;   
}   
ul#menu {   
list-style-type : none; /* Car sinon les puces se placent n'importe où */   
margin-top : 100px;   

}   
</stlye>



Mon souci étant le suivant :
Lorsque je fait varier le padding dans le css, les liens de mon sommaire s'écartent en conséquence mais les propriétés comme color ou text-decoration ne sont pas prise en compte et je ne comprend pas pourquoi.


J'ai le même souci pour redéfinir par exemple le <h1>, j'ai mis pourtant cela dans mon css :

H1  {   
  font-size:300%;   
  color:#FF6699;   
}


Mais rien n'est pris en compte dans mes page lorsque j'utilise les balises <h1></h1> alors que d'autre propriété comme

#body {   
height: 50%;   

margin:50px;   
margin-right:50px;   
padding: 0%;   
position: relative;


passent sans problème.

Merci à quiconque voudrait bien m'aider

ps: je n'ai pas fait attention à la catégorie du post sur le forum et je m'en excuse, je ne pense pas que webmaster soit la plus appropriée :) mais je ne peux pas la changer

12 réponses

ul#menu li { 
    display: inline; 
    padding: 0 1em; /* Pour espacer les boutons entre eux */ 
     
   } 
   ul#menu { 
    list-style-type: none; /* Car sinon les puces se placent n'importe où */ 
    margin-top: 100px; 
   } 
   ul#menu li a { 
    color: #FF0000; 
    text-decoration: none; 
   }


noyeux joël et bonne fête de fin du monde
1
Utilisateur anonyme
27 déc. 2012 à 17:09
pour h1 il faudrait voir le code avec le titre
0
Utilisateur anonyme
27 déc. 2012 à 16:26
Bonjour, déjà vous utiliser deux identifiant menu. Un id doit être unique.
Essayez de mettre h1 et non H1
0
habeo Messages postés 19 Date d'inscription mercredi 9 septembre 2009 Statut Membre Dernière intervention 6 novembre 2016
Modifié par habeo le 27/12/2012 à 16:33
Bonjour lobotoFix,

cela ne change malheureusement rien.
0
Utilisateur anonyme
27 déc. 2012 à 16:32
Le mieux serai de voir l'ensemble de votre code
0

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

Posez votre question
Utilisateur anonyme
27 déc. 2012 à 16:39
Vous avez ecrit </stlye> au lieux de </style>
0
habeo Messages postés 19 Date d'inscription mercredi 9 septembre 2009 Statut Membre Dernière intervention 6 novembre 2016
Modifié par habeo le 27/12/2012 à 16:43
Voici l'ensemble du code du sommaire :

<link href="style/style.css" rel="stylesheet" type="text/css"> 
    <!-- Division pour le sommaire --> 
    <div id="menu">   
        <ul id="menu"> 
           <li class="menu"> 
              <a href="accueil.php" title="Page d'accueil">Accueil</a> 
           </li>            
           <li class="menu"> 
              <a href="map.php" title="mapage2">Snori dans le monde</a> 
           </li> 
    <li class="menu"> 
              <a href="mapage.php" title="Page d'accueil">Notre métier</a> 
           </li> 
      <li class="menu"> 
              <a href="mapage.php" title="Page d'accueil">Contact</a> 
           </li> 
         </ul>                
    </div>



et celui du css:


<style type="text/css">
h1{
font-size:300%;
color:#FF6699;
}
#Presentation{
float:left;
width:100%;
position: relative;
margin: 50 px;
}
#htmlMap {
height: 100%;
}
#bodyMap {
height: 50%;
margin:50px;
margin-right:50px;
padding: 0%;
position: relative;
}
#EmplacementDeMaCarte {
height: 100%
}
/*style du sommaire */
ul#menu li{
display : inline;
padding : 0 1em; /* Pour espacer les boutons entre eux */
color : #FF0000;
text-decoration: none;
}
ul#menu {
list-style-type : none; /* Car sinon les puces se placent n'importe où */
margin-top : 100px;
}
</stlye></code>
0
Utilisateur anonyme
27 déc. 2012 à 16:51
Bonjour, j'ai corrigé quelques erreurs

<!DOCTYPE html>
<html>
	<head>
		<title>essai</title>
		<meta charset="UTF-8" />
		<style type="text/css">
			ul#saturday {
				margin: 0;
				padding: 0;
				list-style-type: none;
				width: auto;
				position: relative;
				display: block;
				height: 36px;
				text-transform: uppercase;
				font-size: 12px;
				font-weight: bold;
				background: transparent url("images/bgOFF.gif") repeat-x top left;
				font-family: Helvetica, Arial, Verdana, sans-serif;
				border-bottom: 4px solid #336666;
				border-top: 1px solid #C0E2D4;
			}
			ul#saturday li {
				display: block;
				float: left;
				margin: 0;
				padding: 0;
			}
			ul#saturday li a {
				display: block;
				float: left;
				color: #874B46;
				text-decoration: none;
				padding: 12px 20px 0 20px;
				height: 24px;
				background: transparent url("images/bgDIVIDER.gif") no-repeat top right;
			}
			ul#saturday li a:hover {
				background: transparent url("images/bgHOVER.gif") no-repeat top right;
			}
			ul#saturday li a.current, ul#saturday li a.current:hover {
				color: #fff;
				background: transparent url("images/bgON.gif") no-repeat top right;
			}
			/* ^^^^^^^^ ABOVE IS THE CODE FOR THE MENU ^^^^^^^^^^ */

			h1 {
				font-size: 300%;
				color: #FF6699;
			}
			#Presentation {
				float: left;
				width: 100%;
				position: relative;
				margin: 50px;
			}
			#htmlMap {
				height: 100%;
			}
			#bodyMap {
				height: 50%;
				margin: 50px;
				margin-right: 50px;
				padding: 0%;
				position: relative;
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
			/*style du sommaire */
			ul#menu li {
				display: inline;
				padding: 0 1em; /* Pour espacer les boutons entre eux */
				color: #FF0000;
				text-decoration: none;
			}
			ul#menu {
				list-style-type: none; /* Car sinon les puces se placent n'importe où */
				margin-top: 100px;
			}

		</style>
	</head>
	<body>
		<!-- Division pour le sommaire -->
		<div>
			<ul id="menu">
				<li class="menu">
					<a href="accueil.php" title="Page d'accueil">Accueil</a>
				</li>
				<li class="menu">
					<a href="map.php" title="mapage2">Snori dans le monde</a>
				</li>
				<li class="menu">
					<a href="mapage.php" title="Page d'accueil">Notre métier</a>
				</li>
				<li class="menu">
					<a href="mapage.php" title="Page d'accueil">Contact</a>
				</li>
			</ul>
		</div>
	</body>
</html>

0
habeo Messages postés 19 Date d'inscription mercredi 9 septembre 2009 Statut Membre Dernière intervention 6 novembre 2016
Modifié par habeo le 27/12/2012 à 17:04
Merci beaucoup d'essayer de m'aider !

J'ai modifier mon code par celui que vous venez de me fournir mais j'ai toujours les mêmes problèmes, mes titre <h1> restent noirs et les <li> de mon sommaire restent bleus et soulignés.
0
habeo Messages postés 19 Date d'inscription mercredi 9 septembre 2009 Statut Membre Dernière intervention 6 novembre 2016
Modifié par habeo le 27/12/2012 à 17:18
Magnifique, merci beaucoup lobotoFix !

Cela a également débloqué les propriétés du h1, tout fonctionne.

Pour info, le a sert à spécifier que l'on définit les propriétés du texte?
0
Utilisateur anonyme
27 déc. 2012 à 17:19
non c'était les propriétés pour les liens de votre menu et a c est les liens
0
Utilisateur anonyme
27 déc. 2012 à 17:20
penser à mettre résolu
0
habeo Messages postés 19 Date d'inscription mercredi 9 septembre 2009 Statut Membre Dernière intervention 6 novembre 2016
27 déc. 2012 à 17:23
ok,

Merci encore pour tout et bonnes fêtes de fin d'année !
0