Sujet Précédent Sujet Suivant

[HTML/CSS] Boutons dépassant le menu

Fermé
Nouveau - 19 août 2012 à 16:56
 Utilisateur anonyme - 29 août 2012 à 21:20
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!
A voir également:

2 réponses

Réponse 1 / 2
Utilisateur anonyme
29 août 2012 à 21:13
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 !!


0
Réponse 2 / 2
Utilisateur anonyme
29 août 2012 à 21:20
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.
0

Discussions similaires

les entrées et les sortées
oussman -
MarsuGL -

2 réponses
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse