Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1374 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème CSS

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Problème CSS

n°2222719
P'tit Serp​ent
Je ne mords pas :)
Posté le 20-03-2014 à 15:25:10  profilanswer
 

Bonjour,
Alors voilà j'ai un problème avec mon CSS, j'ai tenté plein de choses et rien ne marche.
J'aurais besoin de votre aide pour adapter mon menu selon le nombre de boutons.
Voici le code html :

Spoiler :


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" title="Design du site" href="style04.css" />
  <title>Accueil</title>
 </head>
 <body>
  <header>
   <h1 class="nomSite">Mon Site</h1>
   <nav class="menuP">
    <ul>
     <li><a href="./accueil.html">Accueil</a></li>
     <li><a href="./modele.html">Articles</a></li>
     <li><a href="#">Menu 1</a></li>
     <li><a href="#">Menu 2</a></li>
     <li><a href="#">Menu 3</a></li>
     <li><a href="#">Menu 1</a></li>
     <li><a href="#">Menu 2</a></li>
     <li><a href="#">Menu 3</a></li>
     <li><a href="#">Menu 1</a></li>
     <li><a href="#">Menu 2</a></li>
     <li><a href="#">Menu 3</a></li>
     <li><a href="#">Menu 1</a></li>
     <li><a href="#">Menu 2</a></li>
     <li><a href="#">Menu 3</a></li>
     <li><a href="#">Menu 1</a></li>
     <li><a href="#">Menu 2</a></li>
     <li><a href="#">Menu 3</a></li>
     <li><a href="#">Menu 1</a></li>
     <li><a href="#">Menu 2</a></li>
     <li><a href="#">Menu 3</a></li>
     <li><a href="#">Menu 1</a></li>
     <li><a href="#">Menu 2</a></li>
     <li><a href="#">Menu 3</a></li>
     <li><a href="#">Menu 1</a></li>
     <li><a href="#">Menu 2</a></li>
     <li><a href="#">Menu 3</a></li>
    </ul>
   </nav>
  </header>
   
  <div class="bandeau"></div>
   
  <section class="contenu">
   <article>
    <h1 class="titre">Bienvenue</h1>
    <p>
     Vous voici sur le site de Snake76930.<br/>
     Vous pouvez voir les articles existants via le bouton "Articles" du menu principal.<br/>
    </p>
   </article>
  </section>
   
  <footer>
   <p>© Copyright Groupe 12</p>
   <p>Site créé à partir du générateur HTML</p>
  </footer>
 </body>
</html>


 
Et voici son CSS :

Spoiler :


html
{
 background-image : url("images/p.png" );
        background-color : grey;
 min-width    : 1000px;
 max-width    : 1920px;
}
 
 
body
{
 margin    : 0px;
 font-family   : "Arial";
}
 
header
{
 margin-left   : 40px;
 margin-right   : 40px;
 margin-top    : 40px;  
}
 
/* Nom du site */
.nomSite
{
 margin    : 0px;
 font-style   : italic;
 font-family   : none;
 margin-bottom  : 40px;
 padding-left  : 20px;
 color     : #EDEDED;
 text-shadow   : 0 3px 5px black;
}
 
/* Bandeeau entre le menu et le contenu */
 
/* Menu Principal */
.menuP  
{
 font-size    : 20px;
 padding    : 1px;
 background    : linear-gradient(white,#D3D4D4) ;
 border-top-left-radius  : 10px;
 border-top-right-radius : 10px;
}
 
.menuP ul
{
 list-style   : none;
}
 
.menuP li
{
 display    : inline;
}
 
.menuP ul li a  
{  
 transition    : 0.5s;
 text-decoration  : none;
 padding    : 10px;
 color     : black;  
}
 
.menuP ul li a:hover
{
 transition    : 0.5s;
 box-shadow   : 0 1px 0 rgba(255, 255, 255, .4);
 text-shadow   : 0 1px 0 rgba(255, 255, 255, .8);
 border-radius   : 5px;
 background-color : rgba(150, 150, 150, .3);
}
 
/* Contenu du site */
.contenu
{
 margin-left   : 40px;
 margin-right   : 40px;
 padding-bottom   : 10px;  
 background-color : rgba(0,0,0,0.5);
 color     : white;
 border     : 1px solid grey;
 min-height   : 500px;
}
 
/* Titre d'un article */
.titre
{
 font-size : 25px;
}
 
/* Article */
article
{
 padding    : 10px;
}
 
footer
{  
 font-size   :12px;
 padding    :1px;
 padding-left  :10px;
 padding-right  :10px;
 background    :linear-gradient(#D3D4D4,white) ;
 border-bottom-left-radius  : 10px;
 border-bottom-right-radius  : 10px;
 margin-left   : 40px;
 margin-right   : 40px;
 margin-bottom   : 20px;
}
 
hr
{
 width     : 60%;
}


 
Comme vous pouvez le constater en utilisant le code, les boutons se chevauchent à moitié. J'ai eu beau jouer du padding ou du margin, rien ne marche et je ne comprend pas pourquoi je n'arrive pas à les déplacer. Si vous vouliez bien m'aider :)
 
Merci d'avance


Message édité par P'tit Serpent le 20-03-2014 à 15:26:29
mood
Publicité
Posté le 20-03-2014 à 15:25:10  profilanswer
 

n°2222728
tpierron
Posté le 20-03-2014 à 16:20:49  profilanswer
 

Le padding n'est pas pris en compte sur les éléments "display: inline". Ce que tu voulais, c'est des éléments "inline-block", donc un truc du genre:

Code :
  1. .menuP ul li a  
  2. {  
  3. transition: 0.5s;
  4. text-decoration: none;
  5. padding: 10px;
  6. color: black;
  7. display: inline-block;
  8. }

n°2222753
P'tit Serp​ent
Je ne mords pas :)
Posté le 20-03-2014 à 21:16:20  profilanswer
 

Ah merci bien, j'avais tout tenté sauf ça ^^ j'ai appris un truc aujourd'hui. En tout cas ça me sauve merci :)


---------------
Poupi Poupi Poupipou

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème CSS

 

Sujets relatifs
probleme CSS avec ie8probleme d'incompatibilité CSS entre firefox et chrome
problème CSS externe pour facebook boxProblème d'actualisation image/CSS
[CSS] Problème avec un overflow hidden[HTML - CSS] Problème avec la balise <a>href="#"></a>
[Resolu] problème CSS : faire un 100% et soustraire des PX[HTML/CSS/Javascript] probleme checkForm is not definied
Problème largeur colonne d'un tableau PHP/CSSProblème d'affichage CSS sous Internet Explorer
Plus de sujets relatifs à : Problème CSS


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR