Réalisation d'une "social bar"

[Tabouet]

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%...

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
Alexis

Modifié 21 Février 2013 par Tabouet

[Ernestine]

Plutôt que

hauteur = window.innerHeight;

Mets donc :

hauteur = document.documentElement.clientHeight;

ça marchera sur tous les navigateurs

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.

[captain_torche]

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é ?

[Tabouet]

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

[Dudu]

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.

[Tabouet]

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

Merci

[Ernestine]

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 Ç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.