28172 sujets

CSS et mise en forme, CSS3

[Résolu] Taille en % - 1px

bonjour,
je cherche a savoir si il est possible de donner une taille en % a un block en enlevant un certain nombre de pixel.
cela reviendrais a ça : 
block{ height:25%-1px; }
malheureusement ce code d'exemple n'est pas possible, je cherche donc un moyen similaire.

J'en ai besoin car je veux que chaqu'un des 4 block de ma page fasse 25% mais chaque block est séparer par une ligne de 1px du coup il faut scroller Smiley decu

Merci de votre aide et réponses.
Bonjour et bienvenue,

Je ne saisis pas bien votre demande (je crois que la réponse est simple!) et pour éviter de se perdre en conjectures envoyez votre code correspondant à votre problème. Smiley cligne
Le code HTML

<!DOCTYPE html>
<html>
<head>
	<link type="text/css" rel='stylesheet'href="stylesheet.css"/>
	<title> News</title>




</head>


<body>
	<a href="http://example.fr/" title="lien vers l'article">

		<p> Acticle 1 </p>

	</a>
	<hr>

	<a href="http://example.fr/" title="lien vers l'article"> 

		<p> article 2 </p>

	</a>
	<hr>
	
	<a href="http://example.fr/" title="lien vers l'article"> 

		<p> article 3 </p>

	</a>
	<hr>
	
	<a href="http://example.com/" title="lien vers l'article">

		<p> article 4 </p>

	</a>


Le code CSS

html{
	height:100%;
	}

body{
	padding:0px;
	margin:0px;
	height:100%;
	}

p{
	padding:0px;
	margin:0px;
	}
	
a{
	padding:0px;
	margin:0px;
	display:block;
	text-decoration:none;
	height:25%; /* ici je voudrais 1px de moins que 25% */
	}
hr{ 
	padding:0px;
	margin:0px;
	border: 1px solid black;
	}


merci de vous pencher sur mon petit problème
Tu peux utiliser la propriété box-sizing avec la valeur border-box et ajouter ta bordure de 1 pixel à ton lien :


a {
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  text-decoration: none;
  height: 25%;
  border-bottom: 1px solid #f00;
}


Autre solution avec calc()


a {
  display: block;
  padding: 0;
  margin: 0;
  text-decoration: none;
  height: 25%;
  height: -moz-calc(25% - 1px);
  height: -webkit-calc(25% - 1px);
  height: calc(25% - 1px);
}


Mais box-sizing est actuellement mieux supporté que calc().
jb_gfx a écrit :

Mais box-sizing est actuellement mieux supporté que calc().

D'ailleurs vivement que ce soit implémenté partout, très utile.
HammHetfield a écrit :
Le prefix n'est plus nécessaire pour Mozilla depuis la version 16 selon la page MDN https://developer.mozilla.org/en-US/docs/CSS/calc pour calc()

Oui mais ce n'est ni implémenté par Opera, ni par IE8, ni sur Android, donc mieux vaut éviter pour le moment (surtout que c'est pas utilisé par du cosmétic en général).
Sujet clos
Aller à