Aller au contenu
Tabouet

Réalisation d'une "social bar"

Noter ce sujet :

Recommended Posts

Bonjour à tous,

Je suis en train d'essayer d'ajouter une "social bar" sur mon site perso. Rien de bien terrible, c'est juste une petite <div> qui est située sur la gauche de la page.
Elle contient divers icônes qui permettent de partager la page sur les réseaux sociaux.

Pour mieux vous rendre compte, voici un lien pour tester:
http://genealexis.fr/cartes-postales/la-vilette.php

Comme vous le constatez, ça ne marche pas encore à 100%... thumbdown.gif

Il y a deux problèmes qui sont les plus importants à mes yeux, et c'est eux qui m'amènent vers vous.

Le premier concerne la position de la barre. Elle est sensé être centrée verticalement. On dirait que ça marche avec Firefox, Opera, Chrome et IE 9 mais pas avec IE 7 et 8.
C'est un code que j'ai "pondu" et il est peut-être pas génial:

<script type="text/javascript">hauteur = window.innerHeight;document.getElementById('social_bar').style.marginTop = (hauteur  - document.getElementById('social_bar').offsetHeight) / 2 +"px";</script>

Le second problème concerne le look de la <div>, elle est sensé être arrondie en haut à droite et en bas à droite. J'ai donc utilisé un peu de css3, pour assurer la compatibilité avec IE 7 et 8, j'ai voulu même en place PIE.htc
via le code:

#social_bar     {    position:fixed;    text-align:center;    width:70px;    z-index:10;    background-color:#deccb3;    padding-top:20px;    padding-bottom:20px;    -webkit-border-top-right-radius: 8px;    -webkit-border-bottom-right-radius: 8px;    -moz-border-radius-topright: 8px;    -moz-border-radius-bottomright: 8px;    border-top-right-radius: 8px;    border-bottom-right-radius: 8px;    box-shadow: 1px 1px 12px #555;    behavior:url(/PIE.htc);    }

Le "hic", c'est ce ça ne marche pas non plus, pourtant j'ai pris soin de mettre PIE dans le même dossier que la page.
Si vous avez des conseils ou des idées, ils sont les bienvenus.

A bientôt smile.gif
Alexis

Modifié par Tabouet

Partager ce message


Lien à poster
Partager sur d’autres sites

Plutôt que



hauteur = window.innerHeight;


Mets donc :



hauteur = document.documentElement.clientHeight;


ça marchera sur tous les navigateurs wink.gif



Pour ton deuxième problème, le moyen le plus radical pour faire des coins arrondis sur IE7 et IE8, ça reste l'utilisation d'images pour simuler ces arrondis.


Partager ce message


Lien à poster
Partager sur d’autres sites

Si les arrondis sous IE sont obligatoires, j'ai déjà réussi à très bien m'en sortir avec DD roundies : http://dillerdesign.com/experiment/DD_roundies/



J'ai vu que tu ne mentionnais plus PIE pour cet élément dans ta feuille de style : tu as abandonné ? Est-ce que ça fonctionne pour les autres éléments pour lesquels c'est toujours déclaré ?


Partager ce message


Lien à poster
Partager sur d’autres sites

Merci pour les réponses.



J'ai modifié le code javascript pour utiliser





hauteur = document.documentElement.clientHeight;

Et ça marche super bien ! Même avec IE7 et IE8 !



Quant aux arrondis, PIE ne marche toujours pas, je crois que je ne vais pas me casser la tête. Le site sera juste un peu moins joli pour ceux qui utilisent IE7 et 8

Partager ce message


Lien à poster
Partager sur d’autres sites

Salut

Quant aux arrondis, PIE ne marche toujours pas, je crois que je ne vais pas me casser la tête. Le site sera juste un peu moins joli pour ceux qui utilisent IE7 et 8

C'est une sage décision, frappée au coin du bon sens.

En effet, les navigateurs récents (et récemment mis-à-jour) implémentent des fonctionnalités de mise en page (CSS 3 notamment) qui auparavant pouvaient uniquement se faire avec du bricolage cradingue Javascript et/ou du dégueulis de <div> à l'envi, alors qu'il suffit aujourd'hui d'à peine une ligne de CSS et ce sans interférer avec la sémantique HTML.

L'envie -voire le besoin- de se sentir compatible avec des navigateurs vieillots (ou pas mis à jour) est louable et elle est saine :

il serait indélicat de renvoyer des visiteurs qui parfois n'ont pas le choix de leur navigateur (cas d'école typique du lieu de travail avec un DSI crétin et vieux-jeu qui ne jure que par Explorer 6, il y en a malheureusement encore) vers des pages d'erreur du type "votre navigateur est naze, téléchargez-donc le dernier truc à la mode".

Pour autant, et je prends exprès un exemple extrême, il faut se rendre à l'évidence qu'un design magnifique en CSS3 ne saura être lu correctement sur un authentique Netscape 4.

Le but du jeu est d'être lisible par tout le monde, mais que selon la qualité du navigateur de chacun, le design puisse être enjolivé grâce aux nouvelles fonctionnalités de mise-en-page d'aujourd'hui.

En d'autres termes, le design n'est qu'une surcouche qui ne doit pas entraver la bonne lisibilité d'une page.

Partager ce message


Lien à poster
Partager sur d’autres sites

C'est une sage décision, frappée au coin du bon sens.

Merci happy.gif

Partager ce message


Lien à poster
Partager sur d’autres sites

Enfin bon là ta social bar semble être de largeur et de hauteur fixes, il est donc très simple de faire les arrondis en lui mettant en background un png avec arrondis dans les angles q_smallexcla.gif Ça se résume à une seule malheureuse ligne dans le CSS.



Autant la question de la technique peut se poser quand les dimensions sont fluides (car il faut alors manipuler plusieurs blocs et plusieurs images pour les coins), autant pour un bloc de dimensions fixes, je ne vois pas où est le problème.


Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

×