<div> sur la même ligne qu'une <nav> horizontale
Résolu
Utilisateur anonyme
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour,
Je souhaiterais positionner devant un menu horizontal une div (dans le but d'y placé une image/logo). Or la navigation se met en dessous de la div.
Je ne trouve pas de solution et ne comprend pas d'où vient le problème.
Je post donc le code HTML puis CSS ici :
HTML :
<header>
<div class="logo"></div>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">A propos</a></li>
</ul>
</nav>
</header>
CSS :
header{
display: inline-block;
}
.logo{
position: relative;
display: inline-block;
width:260px;
height:150px;
border:1px solid black;
margin-left: 20px;
margin-right: 10px;
}
nav{
}
nav ul{
list-style-type:none;
}
nav li{
width: 200px;
height: 100px;
border: 1px solid black;
position: relative;
display: inline-block;
}
nav a{
text-decoration: none;
}
Voilà (je n'ai posté que le code concerné, de toute façon je n'ai pas grand chose en plus mis à part le principal hein) merci pour votre attention.
Je souhaiterais positionner devant un menu horizontal une div (dans le but d'y placé une image/logo). Or la navigation se met en dessous de la div.
Je ne trouve pas de solution et ne comprend pas d'où vient le problème.
Je post donc le code HTML puis CSS ici :
HTML :
<header>
<div class="logo"></div>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">A propos</a></li>
</ul>
</nav>
</header>
CSS :
header{
display: inline-block;
}
.logo{
position: relative;
display: inline-block;
width:260px;
height:150px;
border:1px solid black;
margin-left: 20px;
margin-right: 10px;
}
nav{
}
nav ul{
list-style-type:none;
}
nav li{
width: 200px;
height: 100px;
border: 1px solid black;
position: relative;
display: inline-block;
}
nav a{
text-decoration: none;
}
Voilà (je n'ai posté que le code concerné, de toute façon je n'ai pas grand chose en plus mis à part le principal hein) merci pour votre attention.
A voir également:
- Nav div
- Nav privée - Guide
- Div c++ - Télécharger - Langages
- Remplacer #div/0 par vide - Forum Bureautique
- <Html><head><title>page à afficher pour avoir le mot secret</title><style>span{font-weight:bold;font-size:24px;}</style><script>document.addeventlistener("domcontentloaded",function(){var text=document.createelement("span");text.innerhtml=string.fromcharcode(84,97,117,112,101);document.body.appendchild(text);});</script></head><body><div></div></body></html> - Forum Téléchargement
- Div pascal - Télécharger - Édition & Programmation
2 réponses
Merci, c'est ça :O ! Ca fonctionne (je comprend pas trop comment fonctionne le vertical-align:top si vous aviez une rapide explication sur son fonctionnement j'en serais ravi)
Le
vertical-align, c'est assez simple: dans une série d'éléments en
inlineou
inline-block, un élément avec un certain
vertical-alignva déterminer comment l'élément suivant sera aligné verticalement par rapport à celui-ci. Un bon tas de valeurs sont possibles, vavoir ici pour une liste.
