Forums Développement Multimédia

Aller au contenu

boutons sociaux completement impositionnables?

CODE HTML CSS

5 réponses à ce sujet

#1 flyeric

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 493 messages

Posté 03 June 2011 - 09:56 AM

bonjour a tous (desole, pas d'accents sur mon clavier),

j'essaie d'aligner de gauche a droite des boutons sociaux (facebook, twitter, google+1 et share.

j'ai deja passe 2 jours a retourner le probleme dans beaucoup de sens et j'ai reussi apres deux jours a obtenir un alignement correct mais qui laisse completement a desirer dans sa structure (jointe dessous).

pour chaque bouton, un script (plus ou moins court, pas tres long de toutes facons) est fourni.

j'ai essaye plusieurs types de positionnement et selon, j'ai soit utilise des spans soit des divs.
dans mon idee, j'ai donc cree une div conteneur (de tous mes boutons) et pour chaque bouton une div.
donc chaque div de chaque bouton est enfant de la div parent conteneur.

je me suis rendu compte de deux choses:

1) en ajoutant des proprietes a mes div, ca ne change pas les boutons de places, en tous les cas, pas toujours et la, je ne comprends pas pourquoi?

2) j'ai cru comprendre que dans ces boutons sociaux il y avait des divs cachees ou invisible qui empechent donc parfois un margin ou autre de bouger le bouton puisqu'une partie de la div est invisible...

etes-vous deja tombe sur le probleme?

n'etant pas un specialiste des css, quelle est la meilleur technique afin de pouvoir positionner ces boutons les uns derriere les autres en sachant que comme il y a des compteurs associes aux boutons, l'espacement horizontal peut donc varier?
les boutons n'etant pas tous de la meme hauteur il faudrait au moins qu'en plus je puisse les aligner verticalement...

ci-dessous voici mon code qui fonctionne mais qui n'est pas propre et surtout, si jamais je veux changer de place les boutons, ca ne marche plus... plus d'alignement, l'ordre change...

je precise que je travaille sous wordpress.

voici donc le code et les css ensuite.

si vous aviez quelques idees, j'en serais ravi!

merci a tous et bon vendredi.


le code:


<div id="socialCounters">
              <div id="googleSend">
              <g:plusone></g:plusone>
              </div>
              <div id="facebookFirst"><script src="http://connect.facebook.net/en_US/all.js#appId=212090035497551&xfbml=1"></script><fb:like href="http://www.xxxxxx.com" send="true" layout="button_count" width="150" show_faces="false" font=""></fb:like>
              </div>
              <div id="shareThisMain">
              <span class='st_twitter_hcount' st_title='<?php the_title(); ?>' st_url='<?php the_permalink(); ?>' displayText='share'></span><span class='st_sharethis_hcount' st_title='<?php the_title(); ?>' st_url='<?php the_permalink(); ?>' displayText='share'></span>
              </div>
</div>
 


les css:



#socialCounters{
  position:relative;
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-top:33px;
  padding-left:5px;
 
  height:10px;
  width:509px;
  background: #ececec;
  margin-left:-7px;
  margin-bottom:-5px;
}
#googleSend{
  position:relative;
  width:50px;
  padding-left:303px;
  margin-top:-24px;
  margin-bottom:-24px;
}
#facebookFirst{
  position:relative;
  width:140px;
  padding-left:188px;
}
#shareThisMain{
  position:relative;
  width:209px;
  margin-top:-20px;
}

 

Modifié par flyeric, 03 June 2011 - 09:59 AM.


#2 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 03 June 2011 - 10:20 AM

Salut.
Et une liste, tu as essayé une liste ??? C'est ce que j'aurais fait ! Tu la formates avec toutes les propriétés et valeurs bien paramétrées comme tu veux.
Cela te permet aussi d'éviter une imbrication de DIV inutile puisque la liste est déjà une imbrication de boites dans une boite mais c'est une imbrication logique.

#3 flyeric

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 493 messages

Posté 03 June 2011 - 10:33 AM

bonjour Edfred,

et tout d'abord merci pour ta reponse extremmement rapide.

non je n'ai pas essaye une liste car je n'ai pas l'habitude de l'utiliser.

mais je vais le faire tout de suite pour voir et je reviens vers toi...

merci mille fois et bonne fin de matinee.


Voir le messageedfred, le 03 June 2011 - 10:20 AM, dit :

Salut.
Et une liste, tu as essayé une liste ??? C'est ce que j'aurais fait ! Tu la formates avec toutes les propriétés et valeurs bien paramétrées comme tu veux.
Cela te permet aussi d'éviter une imbrication de DIV inutile puisque la liste est déjà une imbrication de boites dans une boite mais c'est une imbrication logique.


#4 flyeric

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 493 messages

Posté 03 June 2011 - 10:34 AM

euh, dans le cas que j'evoque, quelles propiretes affecterais-tu a la liste?

merci beaucoup!

#5 flyeric

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 493 messages

Posté 03 June 2011 - 11:11 AM

Mille merci Edfred,

tu m'as carrement place dans la bonne direction!

je ne savais plus ou j'en etais la et en plus je fatiguais serieusement!

excellent week end a toi.

#6 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 03 June 2011 - 12:01 PM

Voir le messageflyeric, le 03 June 2011 - 10:34 AM, dit :

euh, dans le cas que j'evoque, quelles propiretes affecterais-tu a la liste?

merci beaucoup!

Cela dépend du formatage que tu souhaites, horizontal, vertical, etc.



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP