Mon border-bottom n'apparait pas entièrement

Bonjour
J'ai ce petit bout ce code :

  <div class="row">
       <div class="col-md-12 imgleft" style="background-image: url('http://demo.wpzoom.com/compass/files/2015/02/Claire-Hadden.jpg'); background-repeat: no-repeat; background-size: 100% auto; height: 300px; border-size:0.5px; border-style: solid; border-color: rgba(96, 96, 96, 0.1);  padding-right: 0px;">
       <div class="textright" style="background-color: white;">
         <h2 class="solt">Vous souhaitez vendre ou acquérir un bien</h2>
<p class="solp">(dans le neuf, dans l’ancien)(pour y habiter, investir ou en résidence sécondaire)</p>
</div>
       </div>
      </div><br/>

.solt{font-family: myriadpro; font-size:40px;}
.solp{font-family: 'Montserrat Bold'; font-size:30px;}
.solp, .solt, .solc{color:#272f54;}
.textright{float: right; width: 50%; height: 300px; padding: 50px 30px 0px 30px; z-index: 5;}

La bordure en bas de la div class="imgleft" n'apparait pas comme vous pouvez le voir sur ce rendu :


Merci de m'aider !

Bonjour.

L'étonnant est qu'il apparaisse.

Tout d'abord, l'épaisseur d'une bordure n'est pas définie par la propriété border-size mais par la propriété border-width, et ensuite, une valeur de 0.5px ne correspond à rien, les pixels étant les points des écrans (des objets physiques, donc), les valeurs définies en pixels sont donc toujours des entiers.

Je crains que tu doives revoir ou approfondir les bases en CSS.

Si tu ne connais pas déjà, je te suggère de faire un tour ici pour vérifier les propriétés CSS, existantes, leurs valeurs, etc. :

https://developer.mozilla.org/fr/

https://developer.mozilla.org/fr/docs/Web/CSS

https://developer.mozilla.org/fr/docs/Web/CSS/Reference

... et ici pour vérifier leur support par les différents navigateurs :

https://caniuse.com/


Ah oui, les styles inline, c'est mal (bon travail quand tu dois modifier lesdits styles), leur préférer des styles insérés dans le head des pages ou dans un fichier externe, et avec une valeur de zéro, il est généralement (mais pas toujours) inutile de spécifier l'unité : zéro, quelle que soit l'unité, c'est toujours zéro.

Bonne continuation.
Modifié par thierry (08 Jul 2018 - 10:19)

Normal !

Le height du .textright a une valeur de 300px avec un padding-top de 50px, soit au total 350px, tandis le div avec le inline-style a un height de 300px.
Du coup, le .textright bave sur le border.

En espérant que le niveau de clarté de mes explications atteigne celui de ton code HTML

Désolé, le inline-style c'est pas mon truc.
Modifié par bazooka07 (07 Jul 2018 - 14:50)

bazooka07

a écrit :
En espérant que le niveau de clarté de mes explications atteigne celui de ton code HTML Smiley lol

Désolé, le inline-style c'est pas mon truc.

De fait, ni bazooka07 ni moi n'avons vu l'ensemble des erreurs de ton code. A méditer pour quand tu devras modifier/revoir ton code.
Modifié par thierry (07 Jul 2018 - 21:07)

Un peu de lecture pour les plages ensoleillées :
https://www.eyrolles.com/Informatique/Livre/html-xhtml-et-css-pour-les-nuls-9782412034392