Positionner des éléments "inline-block"
Bonjour,
Il se trouve que je tente de nettoyer et mettre à jour mon site web.
Au cours de ce nettoyage, je suis retomber sur des façons de coder que je n'aimais pas mais que je n'avais jamais réussi à résoudre... J'espère que vous me permettrez d'enfin être clair dans mon esprit :D
Le problème commence ici :
Dans la barre du haut de ma page, une balise HEADER, j'ai trois autres balises NAV de type "inline-block" qui sont : #domains, #pages et #accounts.
Pour les besoins de mon site, il fallait que la balise NAV#domains soit alignée à gauche et les deux autres à droites.
|--- Header --------------------------------------------------------------------------------|
| |---NAV#domains------|...........|---NAV#pages------||---NAV#accounts-------||
| |_________________|...........|_______________||_________________||
|___________________________________________________________|
Pour ce faire, j'avais utilisé plusieurs techniques qui étaient :
- Position: absolute; right: 0; sur les deux dernières balises; ce qui n'est pas forcement propre pour mon cas (en plus les balises se superposaient).
- Float: right; sur les deux dernières balises; mais ça n'allait toujours pas, en inversant alors le sens de mes balises.
Au final, j'avais fais deux blocs; et dans le deuxième, qui était aligné à droite grâce à "float: right;", j'avais posé mes deux autres blocs...
Cela marche, mais ne me convient pas au niveau de la forme. On m'a appris à ne pas me contenter du fais que ça marche mais aussi de rester cohérent, alors, auriez-vous une meilleure solution ?
Merci à tous ceux qui ont pris le temps de lire mon sujet et à tous ceux qui prennent le temps d'aider d'autres personnes grâce à CÇM...
Il se trouve que je tente de nettoyer et mettre à jour mon site web.
Au cours de ce nettoyage, je suis retomber sur des façons de coder que je n'aimais pas mais que je n'avais jamais réussi à résoudre... J'espère que vous me permettrez d'enfin être clair dans mon esprit :D
Le problème commence ici :
Dans la barre du haut de ma page, une balise HEADER, j'ai trois autres balises NAV de type "inline-block" qui sont : #domains, #pages et #accounts.
Pour les besoins de mon site, il fallait que la balise NAV#domains soit alignée à gauche et les deux autres à droites.
|--- Header --------------------------------------------------------------------------------|
| |---NAV#domains------|...........|---NAV#pages------||---NAV#accounts-------||
| |_________________|...........|_______________||_________________||
|___________________________________________________________|
Pour ce faire, j'avais utilisé plusieurs techniques qui étaient :
- Position: absolute; right: 0; sur les deux dernières balises; ce qui n'est pas forcement propre pour mon cas (en plus les balises se superposaient).
- Float: right; sur les deux dernières balises; mais ça n'allait toujours pas, en inversant alors le sens de mes balises.
Au final, j'avais fais deux blocs; et dans le deuxième, qui était aligné à droite grâce à "float: right;", j'avais posé mes deux autres blocs...
Cela marche, mais ne me convient pas au niveau de la forme. On m'a appris à ne pas me contenter du fais que ça marche mais aussi de rester cohérent, alors, auriez-vous une meilleure solution ?
Merci à tous ceux qui ont pris le temps de lire mon sujet et à tous ceux qui prennent le temps d'aider d'autres personnes grâce à CÇM...
1 réponse
-
Salut,
Je ne sais pas si ce qui suit est la meilleurs solution mais c'est ce que je ferais :
Pour créer les onglets de navigations, j'utilise une liste qui est "enveloppé" dans un conteneur :<div id="menu"> <ul> <li><a href="#">teste</a></li> <li><a href="#">teste</a></li> <li><a href="#">teste</a></li> </ul> </div>
Dans un 1er temps je définis les dimensions de mon conteneur :#menu{ border:1px solid blue; height:50px; }
Ensuite je supprime les espaces :#menu ul{ margin:0; padding:0; }
Et pour finir je transformes l'élément "li" qui est une balise de type "block" pour la faire passer en ligne (inline) plus quelques misent en forme :#menu li{ display:inline; line-height:50px; padding:10px; background:yellow; }
Un exemple concret :<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Teste</title> <style type="text/css"> #conteneur{ margin:0 auto; width:800px; height:auto; overflow:auto; border : 1px solid black; } #entete{ background:purple; height:200px; } #menu{ background:green; height:50px; } #menu ul{ margin:0; padding:0; } #menu li{ display:inline; line-height:50px; padding:10px; margin: 5px; background:yellow; } #corps{ background:red; padding:5px; margin:5px; } </style> </head> <body> <div id="conteneur"> <div id="entete">#entete</div> <div id="menu"> <ul> <li><a href="#">teste</a></li> <li><a href="#">teste</a></li> <li><a href="#">teste</a></li> </ul> </div> <div id="corps"> <p>#corps</p> </div> </div> </body> </html>
