28172 sujets

CSS et mise en forme, CSS3

[résolu] Fond Libre Non Correct

Bonjour tous

D'une manière classique,pour faire dans une div un fond pour mettre en evidence un texte je fais:


xhtml:
<p class="fond"></p>

Et CSS
.fond
{
  padding-left: 5px;
  padding-right: 5px;
  background-color: #f2f3f8;
}


Le probleme est que si je change les valeurs de left ou right à 20px ben je suis toujours
à 5px à l'affichage
Modifié par griggione (06 Jul 2008 - 11:33)
Hello,

ben à priori il n'y a aucune raison pour que ça ne fonctionne pas Smiley rolleyes ... Peut-être un problème de cache (faire Ctrl + F5)...

Ou alors une autre déclaration avec une priorité plus importante.
Modifié par Heyoan (02 Jul 2008 - 12:30)
Bonjour Heyoan

Je n'ai pas trouvé sur le lien,enfin si mais autre chose Smiley smile

Par contre je me demande si c'est pas le css de la div qui me bloque,puisque que j'impose la largeur
Le padding n'est il pas responsable ?
Et je me demande s'il le faut dailleurs?
oupsss EDIT: ben oui ça évite de coller le texte sur les bords Smiley rolleyes 

#corps
{
  background-color: #ffffff;
  border-color: #ffa500;
  border-width: 4px;
  border-style: solid;
  height: auto;
  font-family: "Comic Sans MS", verdana, arial, sans-serif;
  font-size: 0.95em;
  margin-left: 21%;
  margin-right: 1%;
  padding: 5px 5px ;
  margin-top: 55px;
  margin-bottom: 10px;
}

Modifié par griggione (02 Jul 2008 - 16:25)
Hello,

pour être sûr que l'on parle de la même chose, voici un petit test en mettant un padding à 25px :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<style type="text/css" media="screen,projection"><!--
#corps {
  background-color: #ffffff;
  border: #ffa500 4px solid;
  font-family: "Comic Sans MS", verdana, arial, sans-serif;
  font-size: 0.95em;
  padding: 5px;
  margin: 55px 1% 10px 21%;
}

.fond {
  padding: 0 25px;
  background-color: #f2f3f8;
}

	--></style>
</head>
<body>
	<div id="corps">
		<p class="fond">xcvxcvxcv</p>
	</div>
</body>
</html>
RE

On vient de nous remettre le jus.......les orages. Smiley fache

OK je regarde ça au calme,de plus tu as modifié le css comme on doit,en gagnant des lignes.
faut que je m'y mette aussi mais c'est pas encore entré......déja en classique Smiley rolleyes
Bonjour Heyoan

Mon erreur dans ce cas:
je me suis mal expliqué en ne disant pas que c'est le fond que je voulais rectifier.
Et comme je ne regardais que le résultat pour la marge,je voyais pas le texte qui lui suivant les modifications.
C'est en exagerant à 100px qu'enfin je me suis aperçu de mon erreur entre padding et margin

.fond
{
  padding: 0 5px;
  margin: 0 15px;
  background-color: #f2f3f8;
}


Une question,toujours pas compris pourquoi 0 5px et pas simplement 5px
griggione a écrit :
Une question,toujours pas compris pourquoi 0 5px et pas simplement 5px
Comme dirait Florent : Lisez les specs saperlotte Smiley biggol !
Re

Ben justement,j'ai vu,j'ai lu,j'ai pas compru

parce que la logique (heu......la mienne...oui je sais) serait:
padding: 5px; ou padding: 5 5px;
Pourquoi 0 5px Smiley mur
a écrit :
Quand il n'y a qu'une seule valeur spécifiée, celle-ci s'applique à tous les côtés. S'il y en a deux, alors la première valeur s'applique pour l'espacement du haut et celui du bas, et la seconde pour l'espacement de droite et celui de gauche. Avec trois valeurs, l'espacement du haut reçoit la première valeur, les espacements gauche et droite la deuxième et l'espacement du bas la troisième. Pour quatre valeurs, celles-ci s'appliquent respectivement aux espacements du haut, de droite, du bas et de gauche.
Re

Ha oui j'avais déja lu ça.....comme quoi quand on ne pratique pas tous les jours il est dur de retenir.

C'est pour ça que je reste sur une ligne pour chaque padding ou margin,l'ordre ne reste pas en tête.

Je te remercie Heyoan Smiley jap
Sujet clos
Aller à