Erreur code html/css
reda91
-
dubdub44 Messages postés 2389 Date d'inscription Statut Membre Dernière intervention -
dubdub44 Messages postés 2389 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je suis débutant en html/css donc pardonnez mon ignorance ^^.
Je veux placer des liens vers différents réseaux sociaux en bas de ma page web, pour cela j'ai donc mis en place le code suivant:
Le problème c'est qu'il me place les liens n'importe comment, alors que moi je voudrais qu'ils soient bien alignés et de même taille.
J'appelle donc à l'aide.
Merci d'avance pour vos réponses.
Salut :)
Je suis débutant en html/css donc pardonnez mon ignorance ^^.
Je veux placer des liens vers différents réseaux sociaux en bas de ma page web, pour cela j'ai donc mis en place le code suivant:
<!DOCTYPE HTML>
<head>
<title></title>
<style type="text/css">
<!--
#lien_facebook{
width: 50px;
height: 100px;
bottom: 200px;
left: 30px;
}
#lien_twitter{
width: 50px;
height: 100px;
bottom: 200px;
left: 460px;
}
#lien_pinterest{
width: 50px;
height: 100px;
bottom: 200px;
left: 890px;
}
#lien_google+{
width: 50px;
height: 100px;
bottom: 200px;
left: 1320px;
}
//-->
</style>
</head>
<body>
<p id="lien_facebook">
<a href="http://www.facebook.com/pages/Creative-Professionals-Worldwide-Community-Talent-Agency/187077784688536"><br />
<img src="http://leelabellydance.com/wp-content/uploads/2011/09/facebook.png" alt="rejoignez-nous sur facebook" /><br />
</a>
</p>
<p id="lien_twitter">
<a href="http://www.seoreseaux.fr/wp-includes/images/experts/referencement-twitter.png"><br />
<img src="http://www.seoreseaux.fr/wp-includes/images/experts/referencement-twitter.png" alt="rejoignez-nous sur twitter" /><br />
</a>
</p>
<p id="lien_pinterest">
<a href="http://pinterest.com/worldcreatives/"><br />
<img src="http://www.jeffbullas.com/wp-content/uploads/2012/02/Pinterest-Logo-Icon1.png" alt="cpww aussi sur pinterest" /><br />
</a>
</p>
<p id="lien_google+">
<a href="https://www.google.com/"><br />
<img src="http://upload.wikimedia.org/wikipedia/commons/5/51/Google.png" alt="cpww aussi sur google+" /><br />
</a>
</p>
</body>
</html>
Le problème c'est qu'il me place les liens n'importe comment, alors que moi je voudrais qu'ils soient bien alignés et de même taille.
J'appelle donc à l'aide.
Merci d'avance pour vos réponses.
Salut :)
A voir également:
- Erreur code html/css
- Code ascii - Guide
- Code puk bloqué - Guide
- Comment déverrouiller un téléphone quand on a oublié le code - Guide
- Code activation windows 10 - Guide
- Editeur html - Télécharger - HTML
4 réponses
Et quand 'un code va mettre souk,tu vas faire comment???Courir sur les forum demander de l'aide??Faut apprendre ce langage parce que si tu ne connaissais les balises <ul> et <li> c'est que tu n'as pas été bien loin,et que tu dois piocher les codes un peu partout,après c'est juste un conseil prend le comme tu veux...
css:
a
{
display:block;
text-align:center;
}
met si tu as d autres liens à mettre à d autre endroits de ta page sache que celui ci s'appliquera à toutes tes balises (a)
vas ici:
c'est très bien expliqué et je mis met aussi pour les néophytes c'est l'idéal
https://openclassrooms.com/fr/courses
vas ici:
c'est très bien expliqué et je mis met aussi pour les néophytes c'est l'idéal
https://openclassrooms.com/fr/courses
Tout d'abord les images sont trops grandes! Essaies d'utiliser par exemple ces icons:
http://ecorrect.net/google-plus-share-button-facebook-twitter-and-pinterest-buttons/
Puis mets les dans une list:
<ul>
<li><a href="#"><img src="image.png"></a></li>
<li><a href="#"><img src="image.png"></a></li>
<li><a href="#"><img src="image.png"></a></li>
<li><a href="#"><img src="image.png"></a></li>
</ul>
Si tu veux qu'elles soit dans la même ligne, ajoute une classe à l'ul:
<ul class="social"> ...
Puis dans le CSS:
http://ecorrect.net/google-plus-share-button-facebook-twitter-and-pinterest-buttons/
Puis mets les dans une list:
<ul>
<li><a href="#"><img src="image.png"></a></li>
<li><a href="#"><img src="image.png"></a></li>
<li><a href="#"><img src="image.png"></a></li>
<li><a href="#"><img src="image.png"></a></li>
</ul>
Si tu veux qu'elles soit dans la même ligne, ajoute une classe à l'ul:
<ul class="social"> ...
Puis dans le CSS:
.social li {
list-style:none;
float:left;
display:table-cell;
}
.social li a {
padding: 4px 10px;
}
