Je m'y perd dans le "margin"

Bonjour,

J'ai adapté un script de vote style "j'aime / j'aime pas" avec le pouce.
La mise en page ne me plaisait pas. Les pouces d'un côté et les notes de l'autre:


Le script est fait de tel manière qu'il n'est pas si simple à modifier.. en tout cas, pour moi.

Je me suis dis qu'il serait plus simple de jouer sur les class.
J'ai écarté les pouces avec des "margin-right" et des "margin-left". Et avec un "margin-left" négatif, j'affiche les notes entre les pouces.
Ca le fait, sauf que j'ai l'ensemble qui se trouve décentré, et le je ne comprends pas:

Si quelqu'un avait une idée...

Merci.
Modifié par Stegue (13 Nov 2013 - 09:28)

J'arrive pas à insérer 2 images différentes dans le même post donc voici la 2e:


EDIT:
Eh ben non, j'arrive toujours pas !
Modifié par Stegue (13 Nov 2013 - 09:30)

Hello,
Ce qu'il faudrait, c'est surtout une page en ligne ou a minima le code généré…

Mais plutôt que jouer sur des margin négatifs, j'aurais essayé de déplacer ces éléments avec un positionnement relatif par exemple.
Modifié par audrasjb (13 Nov 2013 - 10:27)

L'image affichée représente le code modifié avec le margin négatif. Sans ça les 2 chiffres se trouvent à droite du pouce rouge.
Voici le code CSS: La classe des chiffres est .youtube .pulse_result_format.
Ma demande est de savoir si j'ai pas une erreur à ce niveau là.

.pulse_votes_container.youtube {
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border:1px solid #cccccc;
	width:120px;
	text-align:center;
	padding:3px;
}

.youtube  .pulse_vote_buttons{
	padding:2px;
}

.youtube  input.vote_up {
	width:20px;
	display:inline-block;
	text-indent:-100000%;
	background:url("../Pulse_quest/assets/images/youtube_thumb_up.png") no-repeat center center;
	margin-right:15px;
}

.youtube  input[disabled='disabled'].vote_up, .youtube  input.vote_up.disabled{
	width:20px;
	display:inline-block;
	text-indent:-100000%;
	background:url("../Pulse_quest/assets/images/youtube_thumb_up_disabled.png") no-repeat center center;
	margin-right:15px;
}

.youtube  input.vote_down{
	width:20px;
	display:inline-block;
	text-indent:-100000%;
	background:url("../Pulse_quest/assets/images/youtube_thumb_down.png") no-repeat center center;
	margin-left:15px;
}

.youtube  input[disabled='disabled'].vote_down, .youtube  input.vote_down.disabled {
	width:20px;
	display:inline-block;
	text-indent:-100000%;
	background:url("../Pulse_quest/assets/images/youtube_thumb_down_disabled.png") no-repeat center center;
	margin-left:15px;
}

.youtube .pulse_result_format {
	display:inline-block;
	font-family:verdana,arial,helvetica,sans-serif;
	margin-top:0px;
	font-size:11px;
	text-align:center;
	margin-left:-60px;
}

Modifié par Stegue (13 Nov 2013 - 11:42)

Ok mais il semble qu'il manque la règle CSS s'appliquant au conteneur de cet élément du site.
Tu ne peux pas reproduire la partie qui pose problème sur une page en ligne ou sur un JsFiddle (ou autre service) ?
A minima, il faudrait donner l'ensemble des règles CSS s'appliquant (conteneur compris) ET le code HTML correspondant.

Le reste du CSS est un peu creux:

.pulse_votes_container {

}

.pulse_vote_buttons {

}

input.pulse_vote_button {
	border:none;
	outline:none;
	cursor:pointer;
}

input.pulse_vote_button.disabled {
	cursor:default;
	/*cursor:not-allowed;*/
}

Et là le code:

<?php
/**
Pulse Lite Voting Script
 http://s.technabled.com/PulseVote
 
**/

include("pulse.config.php");
class Pulse {
	private $style;
	private $votes_table;
	private $format = "%7Bup%7D%20+&nbsp;+&nbsp;+%7Bdown%7D"; // encoded value of '{up} upvotes, {down} downvotes'
	
	
	function __construct($style=''){
		$this->style = empty($style) ? 'youtube' : $style;
		$this->votes_table = 'pulse_votes_quest';
	}
	
	function setFormat($tpl) {
		$this->format = urlencode($tpl);
	}
	
	/**
	echo Pulse::css()
	outputs the required css
	@return str
	@scope public
	**/
	public static function css(){
		return "<link rel='stylesheet' href='".PULSE_DIR."/assets/css/pulse.css'></link>";
	}

	/**
	echo Pulse::javascript()
	outputs the required javascript
	@return str
	@scope public
	**/
	public static function javascript(){
		return "<script type=\"text/javascript\" src='".PULSE_DIR."/assets/js/jquery-1.4.2.min.js'></script>\n<script type=\"text/javascript\" src='".PULSE_DIR."/assets/js/pulse.core.js'></script>";
	}
	
	/**
	Checks whether a user has already voted
	@return bool; true if voted before, false if not
	@param item_id int
	@scope public
	**/
	public function votedBefore($item_id){
		if($_COOKIE['pulse_item_'.$item_id] == 1) { // check sessions first; voted before
			return true;
		} else { // session says user hasn't voted yet. So check against IP
			$ip = $_SERVER['REMOTE_ADDR'];
			$query = "SELECT * FROM {$this->votes_table} WHERE `ip` = '$ip' AND `item_id` = $item_id";
			$result = mysql_query($query);
			if(mysql_num_rows($result)>0){ // already voted
				return true;
			} elseif(mysql_num_rows($result)==0){ // haven't voted
				return false;
			}
		}
	}

	/**
	Counts the number of upvotes of a given item
	@param item_id int
	@return int
	@scope public
	**/
	public function countUpVotes($item_id) {
		$query = "SELECT * FROM {$this->votes_table} WHERE `item_id`= $item_id AND `vote_value`>0";
		$result = mysql_query($query);
		$votes = 0;
		while($row = mysql_fetch_assoc($result)){
			$votes+=$row['vote_value'];
		}
		return (int) $votes;
	}

	/**
	Counts the number of down votes of a given item
	@param item_id int
	@return POSITIVE int
	@scope public
	**/
	public function countDownVotes($item_id) {
		$query = "SELECT * FROM {$this->votes_table} WHERE `item_id`= $item_id AND `vote_value`<0";
		$result = mysql_query($query);
		$votes = 0;
		while($row = mysql_fetch_assoc($result)){
			$votes+=$row['vote_value'];
		}
		return (int) -$votes; // returns a POSITIVE integer
	}
	
	/**
	Creates the buttons for voting of a given item
	@param item_id
	@return str html of the buttons
	**/
	private function createButtons($item_id){
		if($this->votedBefore($item_id)==true){
			$html = <<<EOD
<span class='pulse_vote_buttons'>
\t\t<input type='button' class='pulse_vote_button vote_up disabled' data-dir='up' data-itemId='$item_id' data-format='$this->format' disabled='disabled'/>
\t\t<input type='button' class='pulse_vote_button vote_down disabled' data-dir='down' data-itemId='$item_id' data-format='$this->format' disabled='disabled'>
\t</span>
EOD;
		return $html;
		} else {
		$html = <<<EOD
<span class='pulse_vote_buttons'>
\t\t<input type='button' class='pulse_vote_button vote_up' data-dir='up' data-itemId='$item_id' data-format='$this->format'/>
\t\t<input type='button' class='pulse_vote_button vote_down' data-dir='down' data-itemId='$item_id' data-format='$this->format'>
\t</span>
EOD;
		return $html;
		}
	}
	
	/**
	Format the result of the voting 
	@param  item_id int
			format str
				{up} is replaced by number of upvotes
				{down} is replaced by number of downvotes
				{balance} is replaced by difference between up and down votes
	@return str formatted result
	@scope public
	**/
	public function getFormatted($item_id, $format) { // get formatted results
		$upVotes = $this->countUpVotes($item_id);
		$downVotes = $this->countDownVotes($item_id);
		$balance = $upVotes - $downVotes;
		$result = preg_replace('/{up}/',$upVotes, urldecode($format));
		$result = preg_replace('/{down}/', $downVotes, $result);
		$result = preg_replace('/{balance}/',$balance, $result);
		return $result;
	}
	
	/**
	Creates everything needed for voting including buttons and formatted result
	@param item_id int
	@return str HTML for the voting buttons and result
	@scope public
	**/
	public function voteHTML($item_id) {
		$html = "<div class='pulse_votes_container $this->style'>\n".$this->createButtons($item_id)."\n<span class='pulse_result_format'>".$this->getFormatted($item_id, $this->format)."</span>\n</div>";

				return $html;
	}
	
	/**
	Votes up on a given item
	@param item_id int
	@return bool
			true if vote is successful
			false if voting fails
	@scope public
	**/