Alignement "inline" footer

**padouk** · 24/07/2012, 04h56

Bonjour,

J'ai un petit souci que je n'arrive pas à résoudre...

J'ai fait beaucoup de tests en utilisant des valeurs différentes, mais également des recherches sur internet, le problème est que je ne comprends pas la moitié des solutions proposées...

J'ai dans mon index.html la partie footer, dans le footer j'ai déjà inséré des images (drapeaux) pour les différentes langues, je l'ai fait en html mais je pense tout faire en css (drapeaux + images à gauche). Je souhaite maintenant ajouter 3 images (twitter, youtube et newsletter).

Je veux que ces images soient placées avant les drapeaux (dans la partie gauche), qu'elles soient alignées avec les drapeaux mais également qu'il y ait une barre de séparation de type (  | &nbsp

entre mes images et les drapeaux.

J'ai commencé par ajouter une image...

Je n'arrive pas à la positionner correctement ! elle est soit trop haute, trop basse, elle passe à droite etc. etc.

Pourriez-vous m'aider, car là je commence à péter un plomb

Voici le code de mon footer html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="footer">
        <div class="indent-footer1">
          <p><a href="index-1-home.html">Home</a> &nbsp; &nbsp; ~ &nbsp; &nbsp; <a href="index-2-aboutus.html">About Us</a> &nbsp; &nbsp; ~ &nbsp; &nbsp; <a href="index-3-wine-guide.html">Wine Guide</a> &nbsp; &nbsp; ~ &nbsp; &nbsp; <a href="index-9-winelist-tableau-0.html">Wine List</a> &nbsp; &nbsp; ~ &nbsp; &nbsp; <a href="index-5-contact-us.html">Contact us</a><br />
            Lucas Wine 2012 &nbsp; | &nbsp;<a href="index-6-privacy.html"><strong>Privacy Policy</strong></a>
            <div class="indent-footer2"></div></div>
            <div class="indent-footer3">
<a href="index-7-coming-soon.html"><img src="images/vn.png"></a><a href="index.html"> <img src="images/gb.png"></a><a href="fr/index.html"> <img src="images/fr.png"></a></p>
        </div>
    </div>
 </div>
 
</body>
</html>

Et voici la partie CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
/*footer*/
#footer { color:#7d733f; font-size:0.625em; text-align:right }
#footer .indent-footer{ padding:42px 51px 0 30px;}
#footer .indent-footer1{ padding:18px 51px 0 30px;}
#footer a {color:#7d733f; text-decoration:none}  
#footer a:hover {  text-decoration:underline}
#footer .indent-footer2{ background:url(images/newsletter_s.gif) no-repeat; display:inline; float:centre; padding:10px 60px 0 40px;}
#footer .indent-footer3{ float:right; padding: 0px 50px 0 30px;}

et une capture d'écran du résultat...

:

Je vous remercie de votre aide précieuse !!

**Muchos** · 24/07/2012, 19h24

Lorsque vous réalisez un menu, commencez par une bonne structure html. Ensuite, évitez d'utiliser des   pour faire des espaces. CSS est là pour ça.

Je verrais plutôt quelque chose dans ce genre-là, avec les menus réseaux sociaux à gauche et les drapeaux à droite.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<!doctype html>
<html lang="fr-FR">
 
<head>
	<meta charset="UTF-8" />
	<title>Test alignement liens footer</title>
 
	<style type="text/css">
#footer-menu {background-color: palegoldenrod;}
#footer-menu ul {list-style-type: none; margin: 0;}
#footer-menu li {display: inline;} /* Les éléments de liste sont alignés */
#footer-menu a {display: inline-block; margin: 1ex; padding: 1ex;}
.separator:after {content: "\007C";} /* Met un pipe après l'élément de liste */
 
#footer-menu-social {float: left; padding: 0;}
#footer-menu-lang {text-align: right;}
        </style>
</head>
 
<body>
	<div id="footer-menu"> <!-- Les images ont des alt au cas où elles ne chargent pas -->
		<ul id="footer-menu-social">
			<li class="separator"><a href="#"><img alt="twitter" src="#" /></a></li>
			<li class="separator"><a href="#"><img alt="youtube" src="#" /></a></li>
			<li><a href="#"><img alt="newsletter" src="#" /></a></li>
		</ul>
		<ul id="footer-menu-lang">
			<li class="separator"><a href="#"><img alt="chinese version" src="#" /></a></li>
			<li class="separator"><a href="#"><img alt="english version" src="#" /></a></li>
			<li><a href="#"><img alt="french version" src="#" /></a></li>
		</ul>
	</div>
</body>
</html>

**padouk** · 25/07/2012, 04h05

Merci de pour votre réponse !

En faite, comme je suis complètement débutant je travaille sous Dreamweaver CS5, je pense que c'est ce soft qui à ajouté "&nbsp", enfin je ne sais pas...

J'ai donc essayé votre solution, j'ai enlevé la couleur du background mais les icônes ne sont pas à la bonne place enfin presque... j'ai essayé de faire quelque modifs mais sans arriver à ce que je souhaite...

Voici le résultat de votre code :

J'ai fait une image afin que vous compreniez la mise en page que je recherche :

Peu importe la couleur du background ou la couleur de la barre, c'est vraiment la position des images comme sue l'image que je souhaite réaliser...

Je vous remercie encore de votre aide !

**Muchos** · 25/07/2012, 14h11

Le background, c'est juste pour mieux visualiser

Je pense que vous pouvez aussi changer le contenu du #footer-menu-social:after par une image par ex. .

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!doctype html>
<html lang="fr-FR">
 
<head>
	<meta charset="UTF-8" />
	<title>Test alignement liens footer</title>
 
	<style type="text/css">
#footer-menu {background-color: palegoldenrod; text-align: right;} /* Contenu du menu aligné à droite */
#footer-menu ul {display: inline; list-style-type: none; margin: 0; padding: 0;} /* Les listes sont alignées */
#footer-menu li {display: inline;} /* Les éléments de liste sont alignés */
#footer-menu a {display: inline-block; margin: 1ex; padding: 1ex;} /* Inline-block permet de faire des margin et padding sur les liens*/
 
#footer-menu-social:after {content: "\00A0\007C\00A0";} /* Met un pipe après l'élément */
        </style>
</head>
 
<body>
	<div id="footer-menu"> <!-- Les images ont des alt au cas où elles ne chargent pas -->
		<ul id="footer-menu-social">
			<li><a href="#"><img alt="twitter" src="#" /></a></li>
			<li><a href="#"><img alt="youtube" src="#" /></a></li>
			<li><a href="#"><img alt="newsletter" src="#" /></a></li>
		</ul>
		<ul id="footer-menu-lang">
			<li><a href="#"><img alt="chinese version" src="#" /></a></li>
			<li><a href="#"><img alt="english version" src="#" /></a></li>
			<li><a href="#"><img alt="french version" src="#" /></a></li>
		</ul>
	</div>
</body>
</html>

**padouk** · 25/07/2012, 17h52

Merci pour le code ! génial !

pour le background j'ai compris après l'envoi de mon message

Alors les nouvelles...

J'ai fais de tout petits changements (je viens de découvrir Firefox Bug...) je n'ai par gardé la barre de séparation, après réflexion cela n'est pas si mal sans la barre...

Voici le résultat final:

Alors j'ai une autre question.....

Comment faire des "hover" sur chaque image ??

Je me suis déjà débrouillé pour mon menu principale, j'ai fait cela en css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.ul li :hover {
background-image:url(images/m1-hover.jpg);
}
 
.ul .li2 :hover {
background-image:url(images/m2-hover.jpg);
}
 
.ul .li3 :hover {
background-image:url(images/m3-hover.jpg);
}
 
.ul .li4 :hover {
background-image:url(images/m4-hover.jpg);
}

Mais comme vous le voyez et d'après ce que je comprends, mes "li" sont numéroté...

Comment puis-je faire de même avec mon footer sans reprendre tout le code ??

Pour info, mon site en ligne est : www.lucas-wine.com.vn

je n'ai évidemment pas fait le site, j'ai acheté un template, mais cela dit j'ai quand même eu une tonne de boulot...

**padouk** · 26/07/2012, 02h50

Petite mise à jour "hover"...

Pourriez-vous me confirmer ce code ? cela fonctionne mais je ne suis pas sur si cela n'est pas mieux de passer par le css...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
     <div id="footer-menu"> <!-- Les images ont des alt au cas où elles ne chargent pas -->
		<ul id="footer-menu-social">
			<li><a href="#"><img src="images/twitter_s.gif" alt="twitter" onmouseover="this.src='images/twitter_hover_s.gif';" onmouseout="this.src='images/twitter_s.gif';" /></a></li>                 
            <li><a href="#"><img src="images/youtube_s.gif" alt="youtube" onmouseover="this.src='images/youtube_hover_s.gif';" onmouseout="this.src='images/youtube_s.gif';"/></a></li>
			<li><a href="#"><img src="images/newsletter_s.gif" alt="newsletter" style="padding-right: 5px;" onmouseover="this.src='images/newsletter_hover_s.gif';" onmouseout="this.src='images/newsletter_s.gif';" /></a></li>
 
		</ul>
		<ul id="footer-menu-lang">
			<li><a href="#"><img alt="vietnam version" src="images/vn.gif" /></a></li>
			<li><a href="#"><img alt="english version" src="images/gb.gif" /></a></li>
			<li><a href="#"><img alt="french version"  src="images/fr.gif" /></a></li>
		</ul>
	</div>

Alignement "inline" footer

Positionnement en CSS

Vue hybride

Partager

Partager