Besoins d'aide pour un projet: border-bottom

**djtimo80** · 02/08/2012, 18h53

Bonjour,
je recherche sur un bouton à rajouter une bordure au bas(border-bottom) bordure qui doit faire toute la longueur de la page sur une épaisseur de 5px.
le bouton lui ne devra pas changer de taille pour autant,pour info le bouton fait 130px par 30px).

Cordialement

**Atomya Rise** · 02/08/2012, 20h12

C'est un peu flou, entre le border-bottom et quand tu parles de "longueur" ^^

N'est il pas plus simple d'insérer une balise <hr> juste après ton bouton, qui aura un margin-top à 0 ?

Sinon, as-tu une div ou autre qui englobe le tout ?

**Graimbault** · 03/08/2012, 10h34

Bonjour djtimo80,

Il ne me semble pas possible d'avoir un bouton que de 130px de width mais sa bordure basse (border-bottom) faisant 100% de la page.

L'idée d'un <hr /> de Atomya Rise semble effectivement bonne, sachant qu'après tu lui applique le style que tu veux. Si tu veux donner l'impression que c'est le bas de ton bouton, tu le colle à celui-ci avec des margin et des padding à 0 (ou même moins!) si besoin.

Bonne chance, tiens nous au courant de ta solution.

Graimbault.

**djtimo80** · 04/08/2012, 22h53

bonjour,
Merci pour les information, il est vrai la balise <hr/> sera la plus judicieuse.
Cependant est il possible de changer sa couleur via une feuille de style pour que quand je survol le bouton en question la couleur du <hr/> soit modifié.
le bouton est le suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#menu-item-296 a:hover {
	background-color:#fdc100 ;
}

cordialement

**NoSmoking** · 05/08/2012, 11h12

Bonour,
peut être une approche de ce type

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
button{
  width:100%;
}
button >hr{
  color:red;
}
button:hover >hr{
  color:blue;
}
</style>
</head>
<body>
<button>Un Bouton <hr></button>
</body>
</html>

Besoins d'aide pour un projet: border-bottom

CSS

Vue hybride

Discussions similaires

Partager

Partager