P'tit Serpent Je ne mords pas :) | 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
|
