Problème CSS

Marsh Posté le 20-03-2014 à 15:25:10

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

Reply

Marsh Posté le 20-03-2014 à 15:25:10

Reply

Marsh Posté le 20-03-2014 à 16:20:49

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 :

.menuP ul li a  
{  
 transition: 0.5s;
 text-decoration: none;
 padding: 10px;
 color: black;
 display: inline-block;
}

Reply

Marsh Posté le 20-03-2014 à 21:16:20

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

Reply

Problème CSS

Sujets relatifs:

Leave a Replay