Positionner des éléments "inline-block"

Utilisateur anonyme -  
tryan44 Messages postés 1381 Statut Membre -
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...

A voir également:

1 réponse

Réponse 1 / 1
tryan44 Messages postés 1381 Statut Membre 220
 
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>

0

Discussions similaires

Renseignement 1fichier
Lasmala91 -
Lasmala91 -

2 réponses