28172 sujets

CSS et mise en forme, CSS3

Positionnement de la bordure

Bonjour à tous,
J'espère que vous pourrez m'aider car depuis une heure je cherche à reproduire un effet sans succès...

Ci dessous le screen du menu actuel et celui désiré:
Menu actuel: http://img15.hostingpics.net/pics/881187menu1.gif
Menu désiré: http://img15.hostingpics.net/pics/373146menu2.jpg

Egalement voila le code css: 
body
{
	background-color: #ffffff;
	margin: auto;
}

#bloc-page
{
	width: 100%;

}

header
{
	width: 100%;
	height: 260px;
	background-color: #77B548;

}

nav
{
	width: 100%;
	height: 50px;
	background-color: #55634C;
	display:flex;
 	flex-direction: row;
 	align-items: center;
	

}

#logo
{
	
	padding-left: 5%;
	width: 40%;
	color: #ffffff;
	font-size: 1.5em;
	margin-right: 10px;

}

nav ul
{
list-style-type: none;
display: flex;
width: 50%;
justify-content: flex-end;
	
}

nav li 
{
	margin: 0px 35px 0px 0px;

}

nav a 
{
	color: #ffffff;
	font-size: 1.5em;
	text-decoration: none;

}

nav li:hover 
{
	border-top: solid 4px;
	border-color: #ffffff;

}


Et une partie du code html

<nav>
			<div id="logo">
				<p>Mon site</p>
			</div>
			
				<ul>
					<li><a href="#">Menu</a></li>
					<li><a href="#">Menu</a></li>
					<li><a href="#">Menu</a></li>
					<li><a href="#">Menu</a></li>
					<li><a href="#">Menu</a></li>
				</ul>
		</nav>


Merci d'avance pour votre aide
Salut,

Peux-tu essayer en remplaçant ton nav li:hover par
nav li:hover 
{
	border-top-color: #ffffff;

}
et en ajoutant ceci à ton nav li
nav li 
{
	border: solid 4px transparent;
}
pour voir ?
Modifié par Greg_Lumiere (18 May 2016 - 20:09)
Cela ne change rien, le problème est le meme.
En revanche la barre au dessus aura plus la forme d'un trapeze car les bords font une légère diagonale.
Salut,

Le principe est de donner la même hauteur à tes <li> et <a> que la <nav>.
Voici une démo commentée, n'hésite pas à revenir demander des détails.
MatthieuR a écrit :
Salut,

Le principe est de donner la même hauteur à tes &lt;li&gt; et &lt;a&gt; que la &lt;nav&gt;.
Voici une démo commentée, n'hésite pas à revenir demander des détails.


Merci, on retrouve l'un des test que j'ai fait à un moment avec la barre au bon endroit.
Le soucis est que le mot menu est trop haut du coup (partie supérieur et non au centre).

De plus quand on passe sur le menu le hoover fait décaler légérement de quelques pixels le premier élément alors que je ne souhaite pas cet effet.
connecté
Administrateur
Hello,

Le souci d'une bordure est qu'elle agrandir les éléments.

La meilleure manière de procéder serait d'opter pour un box-shadow ou un linear-gradient.

Voici une piste : http://codepen.io/raphaelgoetter/pen/qyDcd (à adapter bien-sûr)
Modifié par Raphael (19 May 2016 - 07:10)
On peut aussi définir une bordure pour l'élément sans état :hover, qui serait de la même couleur que son background, le css de la position :hover change simplement la couleur :
.element {
    background-color: Tan;
    border: 1px solid Tan;
}
.element:focus,
.element:hover,
.element:active {
    border-color: Orange;
}
connecté
Administrateur
Olivier C a écrit :

.element {
    background-color: Tan;
    border: 1px solid Tan;
}

Dans ce cas, border: 1px solid transparent; devrait être encore plus pratique Smiley cligne
Raphael a écrit :
Hello,

Le souci d'une bordure est qu'elle agrandir les éléments.

La meilleure manière de procéder serait d'opter pour un box-shadow ou un linear-gradient.

Voici une piste : http://codepen.io/raphaelgoetter/pen/qyDcd (à adapter bien-sûr)


Merci le problème est résolu avec ta solution.
Ce que tu proposes se rapproche le + de ce que j'avais fait et me semble le plus logique.
Merci a toi
Sujet clos
Aller à