3
votes

Comment définir la position inférieure d'un lien dans l'en-tête

Comment puis-je définir la position de mes éléments de lien en bas de l'en-tête?

<header>
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</header>

header {
  height: 200px;
  width: 100%;
  padding-left: 500px;
  background-color: grey;
  border-bottom: solid blue 6px;
}

a {
  display: block;
  float: left;
  width: 125px;
  height: 50px;
  border: solid blue 2px;
  padding-left: 2px;
  border-radius: 15px 15px 0px 0px;
  text-align: center;
  line-height: 50px;
  color: white;
  background-color: black;
}

J'ai essayé de définir bottom: 0; mais sans résultat. J'ai également essayé avec margin-top et padding-top mais le résultat est une hauteur d'en-tête différente. Si je définis une marge ou un remplissage de 200 pixels, j'obtiens un en-tête plus élevé pour 200 pixels.

html css css-position

0 commentaires

3 Réponses :

2
votes

Modifiez simplement le css de l'en-tête comme suit:

<header>
		<a href="#home">Home</a>
		<a href="#news">News</a>
		<a href="#contact">Contact</a>
		<a href="#about">About</a>
</header>

header{
       height: 200px;
       width: 100%;
       padding-left: 500px;
       background-color: grey;
       border-bottom: solid blue 6px;
    
       display: flex;
       flex-direction: row;
       justify-content: center;
       align-items: flex-end;
    }

a {
	display: block;
	float: left;
	width: 125px;
	height: 50px;
	border: solid blue 2px;
	padding-left: 2px;
	border-radius: 15px 15px 0px 0px;
	text-align: center;
	line-height: 50px;
	color: white;
	background-color: black;
}

2 commentaires

vous devez ajouter des commentaires et expliquer ce que vous avez fait ou au moins un lien vers une référence

Oui @TommySchmidt! J'ai lu attentivement la question du propriétaire de la question. Et j'ai fait quelques modifications au code et cela fonctionne.

-1
votes

Si vous ajoutez position: relative à l'en-tête et position: absolue aux attributs du lien, alors le bottom: 0 fonctionnera comme prévu.

<header>
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</header>

header {
  height: 200px;
  width: 100%;
  padding-left: 500px;
  background-color: grey;
  border-bottom: solid blue 6px;
  position:relative;
}

a {
  position:absolute;
  bottom:0;
  display: block;
  float: left;
  width: 125px;
  height: 50px;
  border: solid blue 2px;
  padding-left: 2px;
  border-radius: 15px 15px 0px 0px;
  text-align: center;
  line-height: 50px;
  color: white;
  background-color: black;
}

3 commentaires

Cela ne fonctionne pas comme ça, vous pouvez le voir dans l'extrait de code. J'ai mis mes liens à l'intérieur de div qui a la position absolue et le bas 0 et cela fonctionne maintenant.

... et les faire s'effondrer les uns dans les autres.

La question semble avoir changé après que j'ai suggéré ma réponse. Mon extrait de code ci-dessus est dupliqué à partir de ce que j'ai lu initialement, en ajoutant simplement les attributs de position. Ce qui fonctionne bien. Donc obtenir un vote négatif est ... juste impoli?

1
votes

Tout d'abord, vous devez définir une position pour votre en-tête , dans ce cas il sera relatif .
Deuxièmement, vous devrez utiliser un conteneur pour empêcher vos liens de s'effondrer. Je l'appellerai .menuHolder et cela aura tous les liens de menu sur le côté lui-même.

Ensuite, pour les placer en bas de l'en-tête, vous devez définir une position absolue sur votre conteneur de liens. dans ce cas .menuHolder et encore; c'est parce que nous ne voulons pas que les liens se séparent librement les uns des autres, nous voulons qu'ils restent en place.

<header>
	<div class="menuHolder">
		<a href="#home">Home</a>
		<a href="#news">News</a>
		<a href="#contact">Contact</a>
		<a href="#about">About</a>
	</div>
</header>

header {
	height: 200px;
	width: 100%;
	padding-left: 500px;
	background-color: grey;
	border-bottom: solid blue 6px;
	position: relative;			/* RELATIVE POSITION ON HEADER TO KEEP ANYYTHING WITH ABSOLUTE POS INSIDE IT */
}

a {
	display: block;
	float: left;
	width: 125px;
	height: 50px;
	border: solid blue 2px;
	padding-left: 2px;
	border-radius: 15px 15px 0px 0px;
	text-align: center;
	line-height: 50px;
	color: white;
	background-color: black;
}

/* A CONTAINER FOR LINKS WHICH WILL KEEP LINK FROM COLLAPSING INTO EACHOTHER*/
.menuHolder {
	position: absolute; /* TO BE ABLE TO FREELY PLACE IT */
	bottom: 0;/* MAKE IT STICK TO BOTTOM */
	display: block;
}

0 commentaires