Centrage éléments
Zackarin
Messages postés
3
Date d'inscription
Statut
Membre
Dernière intervention
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
J'ai créé une petite page qui devrait servir de portail vers deux ou trois dossiers en ligne.
Le code html est le suivant :
Soit un en-tête et bloc qui contient trois liens.
Ensuite le CSS :
Le code fonctionne correctement mis à part deux éléments et c'est là que j'aurais besoin de votre aide :
- le centrage des images n'est pas parfait, si on regarde le bandeau <nav>, on voit que les images sont légèrement décalées sur la droite... Pourquoi ? je ne vois pas du tout.
- j'aurais voulu mettre le texte des liens (ceux entre les balises <a></a>) centré sur les images et, la cerise sur le gâteau, que même avec le zoom avec le :hover, le texte se grossisse aussi.
Pour le zoom je pensais qu'un font-size devrait aller, mais j'ai pas testé.
Voilà, j'espère que vous avez compris mon problème et que des âmes généreuses m'aideront parce que je suis un peu perplexe là...
Merci.
J'ai créé une petite page qui devrait servir de portail vers deux ou trois dossiers en ligne.
Le code html est le suivant :
<!DOCTYPE html><html lang="fr">
<head>
<meta charset="utf-8" />
<title>Bla bla</title>
<link rel="stylesheet" href="style.css" /></head>
<body>
<header>Titre sur la page</header>
<nav><ul>
<li><a href="#"><img src="images/favicon.jpg" />lien1</a></li>
<li><a href="#"><img src="images/module_stamp.jpg" />lien2</a></li>
<li><a href="#"><img src="images/favicon.jpg" />lienversla</a></li>
</ul></nav>
</body></html>
Soit un en-tête et bloc qui contient trois liens.
Ensuite le CSS :
body{
background-image:url(images/page.jpg);
text-align:center;
margin:0;
}
header{
background:url(images/banniere.png) no-repeat;
width:500px;
height:100px;
padding-top:35px;
margin-left:auto;margin-right:auto;
}
ul{
width:100%;
margin:0 auto;
}
li{
display:inline-block;
margin:10px;
width:150px;
list-style:none;
}
img{
width:150px;
height:150px;
}
ul li a:hover img{
transform: scale(1.5) rotate(-10deg);
box-shadow: 4px 4px 10px #777;
}
Le code fonctionne correctement mis à part deux éléments et c'est là que j'aurais besoin de votre aide :
- le centrage des images n'est pas parfait, si on regarde le bandeau <nav>, on voit que les images sont légèrement décalées sur la droite... Pourquoi ? je ne vois pas du tout.
- j'aurais voulu mettre le texte des liens (ceux entre les balises <a></a>) centré sur les images et, la cerise sur le gâteau, que même avec le zoom avec le :hover, le texte se grossisse aussi.
Pour le zoom je pensais qu'un font-size devrait aller, mais j'ai pas testé.
Voilà, j'espère que vous avez compris mon problème et que des âmes généreuses m'aideront parce que je suis un peu perplexe là...
Merci.
A voir également:
- Centrage éléments
- Photoshop elements gratuit - Télécharger - Retouche d'image
- Copier plusieurs éléments - Guide
- Pdf elements gratuit - Télécharger - PDF
- Ma souris sélectionne plusieurs éléments lors d'un clic simple - Forum Windows
- Impossible d’effectuer l’opération car certains éléments ont dû être ignorés. pour chacun des éléments, choisissez fichier > lire les informations, assurez-vous que « verrouillé » n’est pas sélectionné, puis vérifiez la section partage et permissions. après avoir vérifié que les éléments ne sont ni verrouillés, ni en mode de lecture seule ou d’accès interdit, réessayez. ✓ - Forum MacOS
3 réponses
Une piste qui pourrait marcher
<li><a href="#"><img src="images/favicon.jpg" /><span>lien1<span></a></li>
puis tu positione le span avec ton CSS
pour grossir nav a:hover span
pour les images non décalée rajoute dans le css au lie de img
ul li a img {
margin: 0;
padding: 0;
width:150px;
height:150px;
}
voila a tester
Un petit merci vaut mieux qu'une grande ignorance
<li><a href="#"><img src="images/favicon.jpg" /><span>lien1<span></a></li>
puis tu positione le span avec ton CSS
pour grossir nav a:hover span
pour les images non décalée rajoute dans le css au lie de img
ul li a img {
margin: 0;
padding: 0;
width:150px;
height:150px;
}
voila a tester
Un petit merci vaut mieux qu'une grande ignorance
Merci de ta réponse Animo,
Plutôt qu'un <span>, j'ai mis un <p> puisque c'est du texte, je me suis dit que ce serait mieux non ?
Oui, je précise que je suis grand débutant hein en html :).
Du coup j'ai changé le html en
et le CSS correspondant :
et j'ai bien sûr enlevé la balise <img>, ce qui me fait mieux dormir la nuit :).
Par contre, j'ai testé ta méthode pour le centrage, je n'y arrive pas. Comme je n'ai plus <img>, j'ai mis ça sur le <p> :
en plus du reste ci-dessus.
En fait, je me demande si le problème ne viendrait pas du display:inline-block; sur les <li>. J'ai tenté un float:left; et de centrer après, mais rien à faire.
Comme je ne connais pas bien le comportement de display, je ne peux être sûr de rien, mais je vois pas où se situerait l'erreur sinon.
Pour que ce soit plus parlant, le résultat est visible ici :
http://machin.chezgina.com/
Plutôt qu'un <span>, j'ai mis un <p> puisque c'est du texte, je me suis dit que ce serait mieux non ?
Oui, je précise que je suis grand débutant hein en html :).
Du coup j'ai changé le html en
<li><a href="#"><p id="lien1">lien1</p></a></li>
et le CSS correspondant :
p{
width:150px;
height:150px;
background-size:150px 150px;
line-height:150px;
}
p:hover{
transform: scale(1.5) rotate(-10deg);
box-shadow: 4px 4px 10px #777;
}
#lien1{background-image:url(images/favicon.jpg);}
#lien2{background-image:url(images/module_stamp.jpg);}
#lien3{background-image:url(images/vrac-10173.jpg);}
et j'ai bien sûr enlevé la balise <img>, ce qui me fait mieux dormir la nuit :).
Par contre, j'ai testé ta méthode pour le centrage, je n'y arrive pas. Comme je n'ai plus <img>, j'ai mis ça sur le <p> :
p {
margin: 0;
padding: 0;
}
en plus du reste ci-dessus.
En fait, je me demande si le problème ne viendrait pas du display:inline-block; sur les <li>. J'ai tenté un float:left; et de centrer après, mais rien à faire.
Comme je ne connais pas bien le comportement de display, je ne peux être sûr de rien, mais je vois pas où se situerait l'erreur sinon.
Pour que ce soit plus parlant, le résultat est visible ici :
http://machin.chezgina.com/
si tu as viré les img plus besoin de mettre un p ou un span
<li><a href="#" id="lien1"> lien 1 </a></li> suffit
puis le CSS tu l'applique comme ca
nav {
width:100%;
text-align:center;
}
nav ul li {
display:inline-block;
width:150px;
height:150px;
margin: 0 20px; /*margin que tu veux pour ecarter plus ou moins les elements*/
list-style: none;
text-align:center;
width:150px;
height:150px;
background:red;
}
#lien1 a {
display:block;
width:150px;
height:150px;
background-image:url(images/favicon.jpg);
}
/**a repeter pour chaque id de lien en changeant background-image, ajuster le texte avec line-height, font size etc**/
a:hover{
transform: scale(1.5) rotate(-10deg);
box-shadow: 4px 4px 10px #777;
font-weight:bold;
}
voila essaie de ne pas inventer d'autre trucs car c'est la meilleurs facon
<li><a href="#" id="lien1"> lien 1 </a></li> suffit
puis le CSS tu l'applique comme ca
nav {
width:100%;
text-align:center;
}
nav ul li {
display:inline-block;
width:150px;
height:150px;
margin: 0 20px; /*margin que tu veux pour ecarter plus ou moins les elements*/
list-style: none;
text-align:center;
width:150px;
height:150px;
background:red;
}
#lien1 a {
display:block;
width:150px;
height:150px;
background-image:url(images/favicon.jpg);
}
/**a repeter pour chaque id de lien en changeant background-image, ajuster le texte avec line-height, font size etc**/
a:hover{
transform: scale(1.5) rotate(-10deg);
box-shadow: 4px 4px 10px #777;
font-weight:bold;
}
voila essaie de ne pas inventer d'autre trucs car c'est la meilleurs facon