Probleme pour centrer
Ike
-
Ike -
Ike -
Bonjour,
voila mon code CSS et le HTML suit
body
{
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-color: black;
}
/* L'en-tête */
#en_tete
{
width: 700px;
height: 100px;
margin-bottom: 10px;
margin-left: 90px;/*Pour que la banniere soit alignee avec le corps*/
}
#menu
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
background-color: #B60000;
border: 2px solid white;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
overflow:auto;
}
.imageMenu{
width :120px;
}
.imageSousMenu{
display: block; /* il faut savoir que la balise img n'est pas considérée comme un block par défaut
donc vous ne pouvez pratiquer un margin: 0 auto; ou margin-left: 0 auto; et margin-right: 0 auto;
que si vous appliquez comme propriété display: block; */
margin: 0 auto;
width: 110px;
margin-bottom: 20px;
}
.tableau{
margin :0 auto;
width :440px;
text-align: center;
}
td{
border:1px solid white;
}
.style_lien_menu{
text-align:left;
margin:0 auto;
font-size: 12px; font-family: Verdana;
list-style-type: none;
margin-top:5px;
margin-bottom:5px;
}
.titre{
text-align:center;
font-family: Arial;
}
.image_grande{
width: 300px;
display: block; /* il faut savoir que la balise img n'est pas considérée comme un block par défaut
donc vous ne pouvez pratiquer un margin: 0 auto; ou margin-left: 0 auto; et margin-right: 0 auto;
que si vous appliquez comme propriété display: block; */
margin: 0 auto;
}
.photoBoxeurGauche{
width: 130px;
float : left;
}
.photoBoxeurDroite{
width: 140px;
float : right;
}
}
.logo{
display: block; /* il faut savoir que la balise img n'est pas considérée comme un block par défaut
donc vous ne pouvez pratiquer un margin: 0 auto; ou margin-left: 0 auto; et margin-right: 0 auto;
que si vous appliquez comme propriété display: block; */
margin: 0 auto;
width : 180px;
}
#corps
{
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
color: white;
background-color: #B60000; /* Une couleur de fond pour le corps */
border: 2px solid white; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
.auteurDuSite{
text-align: right;
font-weight: bold;
font-style: italic;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CCCCCC;
}
a:hover {
text-decoration: underline;
color: #000000;
}
a:active {
text-decoration: none;
color: #FF0000;
}
<html>
<head>
<title>Accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div id="en_tete">
<img src="image/b.jpg" alt="Banniere du site">
</div>
<div id="menu">
<img class="imageMenu" src="image/menu.jpg" alt="image du menu">
<ul class="style_lien_menu">
<li><a href="index.html">- Accueil</a></li>
<li><a href="pageHTML/historique.html">- Historique</a></li>
<li><a href="pageHTML/federations.html">- Les fédérations</a></li>
<li><a href="pageHTML/categories.html">- Les catégories</a></li>
<li><a href="pageHTML/MonTop5.html">- Mon Top 5</a></li>
<li><a href="pageHTML/BoxeEtCinema.html">- Boxe et Cinéma</a></li>
<li><a href="pageHTML/Extra.html">- Extra</a></li>
</ul>
<img class="imageSousMenu" src="image/sous menu.jpg" alt="Image sous le menu">
</div>
<div id="corps">
</div>
</body>
</html>
voila mon code CSS et le HTML suit
body
{
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-color: black;
}
/* L'en-tête */
#en_tete
{
width: 700px;
height: 100px;
margin-bottom: 10px;
margin-left: 90px;/*Pour que la banniere soit alignee avec le corps*/
}
#menu
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
background-color: #B60000;
border: 2px solid white;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
overflow:auto;
}
.imageMenu{
width :120px;
}
.imageSousMenu{
display: block; /* il faut savoir que la balise img n'est pas considérée comme un block par défaut
donc vous ne pouvez pratiquer un margin: 0 auto; ou margin-left: 0 auto; et margin-right: 0 auto;
que si vous appliquez comme propriété display: block; */
margin: 0 auto;
width: 110px;
margin-bottom: 20px;
}
.tableau{
margin :0 auto;
width :440px;
text-align: center;
}
td{
border:1px solid white;
}
.style_lien_menu{
text-align:left;
margin:0 auto;
font-size: 12px; font-family: Verdana;
list-style-type: none;
margin-top:5px;
margin-bottom:5px;
}
.titre{
text-align:center;
font-family: Arial;
}
.image_grande{
width: 300px;
display: block; /* il faut savoir que la balise img n'est pas considérée comme un block par défaut
donc vous ne pouvez pratiquer un margin: 0 auto; ou margin-left: 0 auto; et margin-right: 0 auto;
que si vous appliquez comme propriété display: block; */
margin: 0 auto;
}
.photoBoxeurGauche{
width: 130px;
float : left;
}
.photoBoxeurDroite{
width: 140px;
float : right;
}
}
.logo{
display: block; /* il faut savoir que la balise img n'est pas considérée comme un block par défaut
donc vous ne pouvez pratiquer un margin: 0 auto; ou margin-left: 0 auto; et margin-right: 0 auto;
que si vous appliquez comme propriété display: block; */
margin: 0 auto;
width : 180px;
}
#corps
{
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
color: white;
background-color: #B60000; /* Une couleur de fond pour le corps */
border: 2px solid white; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
.auteurDuSite{
text-align: right;
font-weight: bold;
font-style: italic;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CCCCCC;
}
a:hover {
text-decoration: underline;
color: #000000;
}
a:active {
text-decoration: none;
color: #FF0000;
}
<html>
<head>
<title>Accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div id="en_tete">
<img src="image/b.jpg" alt="Banniere du site">
</div>
<div id="menu">
<img class="imageMenu" src="image/menu.jpg" alt="image du menu">
<ul class="style_lien_menu">
<li><a href="index.html">- Accueil</a></li>
<li><a href="pageHTML/historique.html">- Historique</a></li>
<li><a href="pageHTML/federations.html">- Les fédérations</a></li>
<li><a href="pageHTML/categories.html">- Les catégories</a></li>
<li><a href="pageHTML/MonTop5.html">- Mon Top 5</a></li>
<li><a href="pageHTML/BoxeEtCinema.html">- Boxe et Cinéma</a></li>
<li><a href="pageHTML/Extra.html">- Extra</a></li>
</ul>
<img class="imageSousMenu" src="image/sous menu.jpg" alt="Image sous le menu">
</div>
<div id="corps">
</div>
</body>
</html>
A voir également:
- Probleme pour centrer
- Fusionner et centrer excel grisé - Forum Excel
- Ce colis est en attente de dédouanement ou de résolution d’un problème dans un centre sécurisé. ✓ - Forum Vos droits sur internet
- Gimp centrer texte ✓ - Forum The Gimp
- Dans le document à télécharger, léa a utilisé 2 méthodes différentes pour centrer le nom des continents. lesquels sont centrés correctement ? ✓ - Forum Excel
- Comment centrer l'écran de mon ordinateur ✓ - Forum Windows
3 réponses
et donc voila j ai bo faire ce que je vx je n arrive pas a centrer les liens de mon menu
qulequ un peut il m expliquer ? (je ss plus ou moin debutant)
qulequ un peut il m expliquer ? (je ss plus ou moin debutant)
<a href="https://www.casimages.com/i/081207052703621312.jpg.html" >Cliquez ici pour voir le probleme</a>
donc vous pouvez mieu analyser le probleme :p, c vrmnt les liens du menu a gauche qui me pose probleme... il faudrait essayer de mieu les replacer
donc vous pouvez mieu analyser le probleme :p, c vrmnt les liens du menu a gauche qui me pose probleme... il faudrait essayer de mieu les replacer
