Problème CSS (padding)

Résolu/Fermé

Leslie - 18 juin 2010 à 00:59
Leslie - 18 juin 2010 à 13:58

Bonsoir,
voilà j'ai codé mon site mais il me reste un souci
http://paradiseproduction.free.fr/test/affilates.php

comme vous pouvez le voir il y a un écart entre le titre et le contenu et la seul manière de l'enlever est que que je retire de mon CSS le padding top mais si je le fait le titre sera collé en haut

le CSS

.contenu_title{
position: relative;
background-image: url(pphaut.png);
background-repeat: no-repeat;
font-family: Tahoma;
color: #ffffff;
width: 597px;
height: 99px;
text-align: center;
font-weight: bold;
font-size: 35px;  
padding-top: 25px;
}

.contenu{
position: relative;
width: 597px;
left: 0px;
color: #a1d5f2;
background-image: url(fondnews.png);
font-family: Tahoma;
font-size: 12px;
background-repeat: repeat-y;
text-align: justify;
padding-left: 35px;
}

le contenu du site

<div class="contenu_title">AFFILATES</div>
<div class="contenu">
<strong>Graphiques/Design</strong></div>

Comment faire pour que le titre se place au centre sans décaler le bas?

Merci d'avance

A voir également:

3 réponses

Réponse 1 / 3

Krysstof Messages postés 1483 Date d'inscription mercredi 18 février 2009 Statut Membre Dernière intervention 23 août 2010 294
18 juin 2010 à 01:15

http://fr.selfhtml.org/css/proprietes/alignement.htm#vertical_align

Leslie
18 juin 2010 à 12:35

.contenu_title{
position: relative;
background-image: url(pphaut.png);
background-repeat: no-repeat;
font-family: Tahoma;
color: #ffffff;
width: 597px;
height: 99px;
text-align: center;
font-weight: bold;
font-size: 35px;
vertical-align: middle;
}

j'ai rajouté vertical-align: middle mais il n'y a aucun changement le texte reste figé en haut

Réponse 2 / 3

ChrisCompote Messages postés 73 Date d'inscription mardi 8 juin 2010 Statut Membre Dernière intervention 19 juin 2010 8
18 juin 2010 à 09:55

Met la hauteur de .contenu_title à 74px

Testé sur Firefox et internet explorer

Leslie
18 juin 2010 à 12:36

.contenu_title{
position: relative;
background-image: url(pphaut.png);
background-repeat: no-repeat;
font-family: Tahoma;
color: #ffffff;
width: 597px;
height: 74px;
text-align: center;
font-weight: bold;
font-size: 35px;
}
j'ai fait mais ça ne change rien le texte reste toujours en haut!

Réponse 3 / 3

louloute300 Messages postés 335 Date d'inscription jeudi 3 juin 2010 Statut Membre Dernière intervention 28 novembre 2012 29
Modifié par louloute300 le 18/06/2010 à 12:41

Il y a bien la solution du div dans un div...
Ex:

.centrer{
margin-top:10px; /* ou plus... */
}

<div class="contenu_title"><div class="centrer">AFFILATES</div></div>

Mais je suis assez d'accord, ca fait "déguelasse"...

C'est un pb que je rencontre aussi, et j'ai beau chercher, je trouve pas la bonne formule...

Leslie
18 juin 2010 à 13:19

je préfèrerais à na pas avoir à modifier toutes les pages une par une

louloute300 Messages postés 335 Date d'inscription jeudi 3 juin 2010 Statut Membre Dernière intervention 28 novembre 2012 29
18 juin 2010 à 13:36

aie... dommage que tu n'ai pas fait de fichier type que tu remplis au fur et à mesure...

Qd je fais un site, je n'ai qu'une fonction qui affiche les info que je lui donne donc, un fichier qui contient qu'une seul fois le contenu html de la page. C'est pr ça qu'à force, j'ai oublier que les autres faisait différemment... Donc, en effet, il te faut une autre solution...

Sinon, oui, l'idée du vertical-align: middle; enfin, c'est ce qu'il est inscrit de nombreuses fois ici et la, c'est un point de départ je pense...

louloute300 Messages postés 335 Date d'inscription jeudi 3 juin 2010 Statut Membre Dernière intervention 28 novembre 2012 29
Modifié par louloute300 le 18/06/2010 à 13:48

Je me suis permis de chercher un peu
https://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html

Ils indiquent clairement, que pr centrer verticalement, il faut feinter...

La une solution parait correcte:
https://forums.commentcamarche.net/forum/affich-7462634-div-et-css-centrer-txt-verticalement

Enfin, il y a aussi cette idée la:

Si ton texte ne doit être QUE sur une ligne:
.contenu_title{
position: relative;
background-image: url(pphaut.png);
background-repeat: no-repeat;
font-family: Tahoma;
color: #ffffff;
width: 597px;
text-align: center;
font-weight: bold;
font-size: 35px;
padding-top: 25px;

height: 99px;
line-height: 99px;
vertical-align: middle;

}

Leslie
18 juin 2010 à 13:58

Merci infiniment ça marche!!! j'ai cherché pendant des heures merci merci beaucoup!!

Discussions similaires

trait horizontal avec du css

Enlever le soulignement sous les liens en HTML/CSS

HTML - définir taille bouton

[CSS] Forcé retour à la ligne

indice et exposant en css ?