SPIP ecureuil


x SPIP, système de publication pour l’internet
x Forums de discussion


Thème de ce forum :
Créer ses squelettes

Site en vrac sous Safari 1



Jul11
Site en vrac sous Safari 1
13 mai 2008 10:50

Bonjour,

Je finalise ce site : http://jul11.idoo.com, qui s’affichait correctement sur l’ensemble des navigateurs... jusqu’à ce qu’un ami m’envoie une capture d’écran de ce qu’il voit sous Safari version 1. Le bloc orange "Actualités" qu’on peut voir normalement sur la page sommaire disparaît, et son contenu remonte sous le bloc "Notre sélection".

Je pense à un pb de positionnement des blocs "Contenuactualités" et "Programmes"...

Mais : comment en modifier les propriétés sans que ça affecte l’affichage sur les autres navigateurs, qui eux, se comportent gentiment ?!

Merci d’avance.

Voici le CSS :

@charset "UTF-8";
/* CSS Document */

/* Disposition et habillage des principaux blocs */

#Entete {
        position:static;
        left:0px;
        top:20px;
        width:800px;
        height:95px;
        z-index:1;
        background-color: #FFFFFF;
        margin-right: auto;
        margin-left: auto;
}
#Conteneur {
        position:static;
        left:0px;
        top:115px;
        width:800px;
        height:680px;
        z-index:2;
        background-color: #000000;
        margin-right: auto;
        margin-left: auto;
}
#Pied {
        position:relative;
        left:0px;
        top:3px;
        width:800px;
        height:80px;
        z-index:4;
        background-repeat: no-repeat;
        margin-right: auto;
        margin-left: auto;
        background-image: url(piedpage.gif);
}
#Contenuselection {
        position:relative;
        left:auto;
        top:55px;
        width:760px;
        height:420px;
        z-index:1;
        background-image: url(notreselection.gif);
        background-repeat: no-repeat;
        margin-right: 0px;
        margin-left: auto;
        right: auto;
}
#Contenuactualités {
        position:relative;
        left:auto;
        width:620px;
        height:170px;
        z-index:5;
        background-image: url(animations.gif);
        background-repeat: no-repeat;
        right: 91px;
        margin: auto;
        top: 72px;
}
#Programme {
        position:relative;
        left:310px;
        top:auto;
        width:140px;
        height:50px;
        z-index:3;
        margin-right: auto;
        margin-left: auto;
        bottom: 50px;
        color: #FFFFFF;
        font-family: "Myriad Pro Bold It", "Gill Sans", sans-serif;
        font-size: 20px;
        font-weight: normal;
}
#Trouver {
        position:relative;
        top:5px;
        width:190px;
        height:90px;
        z-index:1;
        margin-right: auto;
        margin-left: auto;
        left: auto;
        right: 290px;
}
#Logo {
        position: relative;
        height: 90px;
        width: 470px;
        margin-right: auto;
        margin-left: auto;
        left: 165px;
        top: -85px;
}

/* Habillage et disposition des extraits introductifs de l'encart Notre sélection */

.liste-articlesselection ul { margin: 0; padding: 0; list-style: none; }
.liste-articlesselection li { margin-bottom: 1em; clear: both; }

.liste-articlesselection li .titre {
        font-size: 26px;
        font-family: "Myriad pro", sans-serif;
        margin-bottom: 1px;
        padding-top: 0px;
        padding-left: 20px;
        color: #000000;
}

.liste-articlesselection li .spip_logos {
        float: left        ;
        margin-top: -15px;
        margin-bottom: 40px;
        padding-left: 10px;
        padding-right: 10px;
        border: 0;
        clear: right; }

.liste-articlesselection li .chaposelection {
        margin: 0;
        padding-bottom: 0;
        padding-right: 20px;
        padding-left: 20px;
        font-family: "Gill Sans", sans-serif;
        text-align:justify;
        font-size: 12px;
        color: #000000;
}

/* Habillage et disposition des extraits introductifs de l'encart Actualités */

.liste-articlesactus ul {
        margin: 0;
        padding: 0;
        list-style: none;
        position: absolute;
}
.liste-articlesactus li { margin-bottom: -10px; padding-top: 8px; }

.liste-articlesactus li .titreactus {
        font-size: 18px;
        font-family: "Myriad pro", sans-serif;
        margin-top: 20px;
        margin-bottom: 1px;
        padding-top: 0px;
        padding-left: 20px;
        color: #000000;
}
.liste-articlesactus li .chapoactus {
        margin: 0;
        padding-top: 0px;
        padding-left: 20px;
        padding-right:10px;
        padding-bottom: -10px;
        font-family: "Gill Sans", sans-serif;
        text-align:justify;
        font-size: 12px;
        color: #000000;
}

/*  ------------------------------------------
/*  Couleurs des liens
/*  ------------------------------------------ */
a {
        text-decoration: none;
        color: #FFFFFF;
}
a:hover { text-decoration: underline; }
Rechercher dans les forums:
  

Jacques Péters
14 mai 2008 19:33
Site en vrac sous Safari 1

Bonjour,

Je ne peux pas répondre à votre problème de décalage.

Mais en regardant vos feuilles de style, j’ai remarqué que vous utilisez le Myriad Pro et le Gill Sans.

Je n’en suis pas sûr complètement, mais je pense que ce sont des fontes qui ne sont pas installées par défaut. Il faut acheter les licences. Donc, il est donc probable que la plus grande majorité de vos lecteurs n’en seront pas équipés.

De mémoire, le Myriad "Pro" est une police d’Adobe qui permet de créer ses propres graisses. Il doit y avoir un Myriad "tout court" plus commun.

Par sécurité vous avez rajouté dans le css, les génériques "serif" et "sans serif".

Pour info, chez moi, les polices, sur un pc "de base", sont transformées en Arial. Et ceci est confirmé par l’extension de Firefox, Font Finder.

Travaillez-vous sur Mac ?

Cordialement,

Jacques Péters
Jul11
15 mai 2008 11:48
Site en vrac sous Safari 1

Merci pour ces indications ! Oui je travaille sur mac (OSX Tiger). C’est bien pour remédier à un éventuel pb d’affichage des polices que j’ai prévu du sans-serif en dernier recours. J’ai aussi ajouté un arial avant pour être parfaitement sûr...

Par contre j’ai un autre pb de police très très bizarre : un ami qui est sur Mac OSX Leopard avec Safari 3.0.4 a les polices de certains textes (pas tous !!!) qui s’affichent en majuscules blanches d’une typo sans-serif. Je n’ai rien paramétré dans le css qui explique ces majuscules étranges..

C’est d’autant plus incompréhensible que les polices des titres s’affichent correctement, et que sur ma version 3.0.4 de safari (mais pour Tiger) je ne rencontre pas du tout ce problème.

Je croyais avoir remédié au pb en ajoutant l’appel à de l’arial, mais ça n’a rien changé.

Vous auriez une idée ?

Cdlt,

Jul.
RSS



Nouvelle réponse

Répondre à la question



squelette