[HTML/CSS] Boutons dépassant le menu
Nouveau
-
Utilisateur anonyme -
Utilisateur anonyme -
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...
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!
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!
A voir également:
- [HTML/CSS] Boutons dépassant le menu
- Menu déroulant excel - Guide
- Editeur html - Télécharger - HTML
- A quoi servent les boutons de couleur sur une telecommande - Guide
- Canon quick menu - Télécharger - Utilitaires
- Comment réinitialiser un téléphone avec les boutons - Guide
2 réponses
bonsoir,
à la volée comme ça je répond a la question 3 :
le list-type:none il me semble qu'il faut le mettre sur le "li" et non sur le "ul"
tente déjà ça et je regarde le reste de ton code !!
à la volée comme ça je répond a la question 3 :
le list-type:none il me semble qu'il faut le mettre sur le "li" et non sur le "ul"
tente déjà ça et je regarde le reste de ton code !!
pour la question 1 essaye de mettre min-width:195px pour ta balise <nav> et ça devrait passer !
et pour tes collonnes, si vraiment tu ne veux pas en chier, tu mets des dimensions fixe au collonnes gauche et droite, et tu ne met que le contenu de ta page en élastique.
j'ai pas testé, mais comme ça à l'arrache c'est ce qui me parait le plus judicieux.
et pour tes collonnes, si vraiment tu ne veux pas en chier, tu mets des dimensions fixe au collonnes gauche et droite, et tu ne met que le contenu de ta page en élastique.
j'ai pas testé, mais comme ça à l'arrache c'est ce qui me parait le plus judicieux.
