Positionnement d'une DIV

Bonsoir,
J'ai un ch'ti pb.
J'ai possitionner une div comme je voulais sous IE7, mais sous FF et Safari elle est 4px trop haut.
Comment contourner le pb.
Merci

christobal a écrit :

Comment contourner le pb.

Hello,

Le problème est que sans code ni page en ligne ni boule de cristal, je crois bien que personne ne pourra deviner à quoi est due ta différence d'affichage.

La règle est simple : il faut toujours donner un maximum de détails pour être sûr d'avoir une chance que les autres comprennent et aident.

Alors en attendant je pourrais commencer par t'inviter à consulter tous les tutoriels et articles concernant le positionnement, mais tu risques d'en avoir pour quelques jours.

Je sais, j'ai le même pb au taf.
Donc voici le css de la div en question.

.pdf_article a { font-family: Verdana, Arial, Helvetica, sans-serif; position: relative; float: right; top: -36px; font-size: 12px; font-weight: bold; color: #EEE; padding-right: 10px; }

et les deux lignes de codes concernées.

<div><h1 class="Titrearticle"><?php echo $titre ; ?></h1></div>
<div class="pdf_article"><h2><a href="pages/pdf-article.php?article=<?php echo $url ; ?>" target="_blank">PDF</a></h2></div>

upload/7929-bon.gif" alt="upload/7929-bon.gifupload/7929-bon.gif" />
Modifié par christobal (11 Feb 2009 - 22:17)

Hello

christobal a écrit :
Je sais, j'ai le même pb au taf.

??


Sinon pour ton problème, quelques remarques concernant le balisage :
- Les deux <div> qui englobent les deux titres sont clairement inutiles,
- La méthode de positionnement du lien "PDF" me semble assez douteuse,
- J'ai un peu de mal avec l'utilisation d'un deuxième titre pour un élément (lien vers PDF) qui est un complément du premier,
- (Un <h1> pour un sous(-sous)-titre ? Moui...).

Voici une solution à mon sens plus appropriée :

<h1>
     <span class="titre_article"><?php echo $titre ; ?></span>
     <span class="pdf_article"><a href="#">PDF</a></span>
</h1>

h1 {
position:relative;
height:...px;
line-height:...px;}

h1 span.pdf_article {
position:absolute;
top:0;
right:0;}

- Combinaison height / line-height pour le centrage vertical,
- <h1> en positionnement relatif pour servir de référence au <span> positionné absolument,
- Lien PDF dans un <span> en position:absolute pour le positionnement en haut à droite.

Reste plus qu'à mettre en forme (marges, bordures et couleurs)

Et Voilà...

Note :
J'ai quand même hésité à utiliser un <h1>. Certaines personnes utilisent le <h1> pour le nom du site, d'autres pour le titre de la page en cours (et d'autres pour encore autre chose).

Pour ce type d'information (titre d'un article) un <h2> ou <h3> me semble plus approprié (faudrait voir le contexte).

Ce n'est qu'une appréciation personnelle...
Modifié par BeliG (12 Feb 2009 - 10:01)

Bonjour,

a écrit :
Ce n'est qu'une appréciation personnelle...

Mais tellement fondée! Sans détourner ce thread, la visualisation de (bon nombre de) sites en mode textuel ne donne pas une lecture aisée... D'où l'intérêt de bien différencier les niveaux d'informations.