28172 sujets

CSS et mise en forme, CSS3

Boutons dépassant le menu

Bonjour,
1) Mes boutons, qui sont des images 180 x 160, dépassent mon menu (<nav>) qui est placé à gauche. Résultat : le menu devient plus gros que la taille prévue et les autres blocs sont décalés à la ligne suivante...


<!DOCTYPE html>
<html>
    <head>
        <title>Titre</title>
    </head>
		<body>
			<div id="bloc_page">
			<header>
				<p>Logo</p>
			</header>
			<nav>
				<ul>
					<li><a href="1.html"><img src="1.png" alt="1" border="0" /></a></li>
					<li><a href="2.html"><img src="2.png" alt="2" border="0" /></a></li>
					<li><a href="3.html"><img src="3.png" alt="3" border="0" /></a></li>
					<li><a href="4.html"><img src="4.png" alt="4" border="0" /></a></li>
					<li><a href="5.html"><img src="5.png" alt="5" border="0" /></a></li>
					<li><a href="6"><img src="6.png" alt="6" border="0" /></a></li>
				</ul>
			</nav>
			<section id="corps">
				<p>Corps de la page.</p>
			</section>
			<div id="droite">
				<p>
					<h1>Artiste</h1>
						<img src=".jpg" width="100%" height="100%" />
						Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla
				</p>
			</div>
			<footer>
				<p>
					<a href="#"><img src="images/facebook.jpg" border="0" alt="Trouvez-nous sur Facebook" /></a><br />
					<img src="images/eau.png" alt="" />PHRASE BLA BLA BLA. Tous droits réservés.
				</p>
			</footer>
		</div>
    </body>
</html>



#bloc_page
{
    margin: auto;
	border: 4px solid #53B1DC;
	text-align: ;
	padding: 3px;
}

p
{
    text-align: justify;
}

nav
{
	float: left;
    display: inline-block;
    min-width: ;
	width: 19%;
    border: 1px solid black;
	vertical-align: top;
	overflow: auto;
}

nav ul
{
    list-style-type: none;
}

nav li
{
    margin-left: 15px;
}

#corps
{
	min-height: 120px;
	width: 45%;
    display: inline-block;    
    border: 1px solid blue;
	vertical-align: top;
	overflow: auto;
}

#droite
{
	min-height: 120px;
	max-width: 30%;
    display: inline-block;    
    border: 1px solid blue;
	vertical-align: top;
	overflow: auto;
}


2) J'aimerais aussi mettre une background-image derrière PHRASE BLA BLA BLA dans le footer. J'ai essayé de mettre une background-image dans footer dans mon code CSS, sans résultat...
3) Finalement, malgré le list-style-type: none; on voit quand même les points devant les boutons. J'aimerais les enlever s'il vous plait.
Merci!
Sujet clos
Aller à