28220 sujets

CSS et mise en forme, CSS3

[Resolu] Probleme de décalage avec balise <h1>

Bonjour à tous, c'est encore moi Smiley sweatdrop
Après avoir résolu mon problème de décalage en repensant et modifiant un peu mon design dans la forme, me voila confronté à un probleme que je ne m'explique pas Smiley confus
Ma page actuelle donne ceci, centrée sous Firefox et IE, sans problème apparent dde décalage ni autre: ICI
Mais voila, des que je veux ajouter un titre a l'aide des balises <h1></h1> cela me donne un décalage en hauteur non souhaité: ICI
Le problème disparait dès lors que je déclare un "padding-top: 1px;" dans #centre mais les dimensions de padding ne me conviennent toujours pas, elles ne sont pas conformes à celles que j'ai définies ...
Donc si quelqu'un pouvait m'aider à obtenir des titres convenables Smiley biggrin
Modifié par Deathlapinoo (25 Jun 2005 - 11:49)
Une solution qui vaut ce qu'elle vaut, modifie ton h1 :
h1 {
padding-left: 15px;
line-height: 2em;
font-size: 14px ;
font-style: Verdana;
color: #B0305A ;
border-bottom: 1px solid #B0305A ;
margin-bottom: 0px;
margin-top: -.2em;
}

Le décalage disparait.

Ton codage essentiellement en pixels est gênant : le redimensionnement des caractères bouscule la mise en page, et sur un grand écran ce sera difficile à lire pour beaucoup de personnes.

La même chose codée en pourcentage serait un plus !
Merci beaucoup pour ta réponse, effectivement mon décalage est résolu mais cela entraine d'autres problemes Smiley sweatdrop
Sur Firefox: le titre empiete sur la barre de navigation horizontale, et sous IE la couleur du background laisse place par endroits au background du conteneur Smiley eek
Résultat visualisable: ICI
Donc si quelqu'un a une solution Smiley ohwell
Pour le codage en pourcentages je vais aller lire le tutorial sur Alsa et me pencher la dessus, merci pour ton conseil Smiley cligne
Modifié par Deathlapinoo (25 Jun 2005 - 10:05)
Bon et bien voila, je ne sais pas vraiment par quel miracle mais j'ai réussi à éviter le probleme, grâce à un margin-top: 0px; qui ne marchait pas auparavant le problème est évité sur IE et Firefox
Je poste le code css de ma balise <h1> pour les intéressés et j'édite le sujet avec un [Résolu] au début Smiley biggrin 


h1 {
padding-left: 10px;
line-height: 2.1em;
font-size: 14px ;
font-style: Verdana;
color: #B0305A ;
border-bottom: 1px solid #B0305A ;
margin-right: 10px;
margin-left: 10px;
margin-top: 0px;
margin-bottom: 5px;
}


Il ne me reste plus qu'à me pencher sur les tailles en pourcentages des polices et je pourrais m'occuper du contenu Smiley biggrin
Merci à Jcm pour son aide Smiley cligne
Sujet clos
Aller à