28172 sujets

CSS et mise en forme, CSS3

Zoom et position des blocs

Bonjour,

j'ai un souci avec mes pages, lorsque je zoom +, mes blocs ne bougents pas, mais lorsque je zoom- un de mes blocs change de position.
J'ai beau modifier le css, cela ne change rien, à quoi cela pourrait-ètre bien du?

Merci pour votre réponse
Bonjour,

j'ai mis un peu de temps à vous répondre car j'ai essayé de chercher d'ou cela pourrait venir et je pense que cela vient du scrollbar.Je pense qu'il y a quelque chose à modifier dans le plugin.scrollbar.js.

C'est ce que je pense, put etre que ca n'est pas cela.

Je vous mets tout le code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso_8859-1" />
<title>Produits biologiques aux ingrédients naturels  </title>
<link href="design_fr.css" title="Design" rel="stylesheet" type="text/css" media="screen" />
<script src="AC_RunActiveContent.js" type="text/javascript">
 <!--[if lte IE 6]>
<!--sfHover = function() {
        var sfEls = document.getElementById("menu").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);-->
<![endif]-->
</script>
	    
        <script type="text/javascript" src="jquery-1.8.3.js"></script>
		<script type="text/javascript" src ="jquery-ui.js "></ script > 
		<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
		<script type="text/javascript" src="plugin.scrollbar.js"></script>
		
		<script type="text/javascript">
			$(document).ready(function(){
				$("#contenu").scrollbar();
			});			
		</script>
		
		
    		
</head>


<body>
  
<img src="images/logo_mini.png" alt="Logo" title="Produits biologiques" id="logo" />

<div id="header">
<div id="header-contenant">
<a href="index_fr.php"><img src="images/drapeau-france.png" alt="français" title="Langue française" class="france" /></a>
<a href="index_en.php"><img src="images/drapeau-britain.png" alt="anglais" title="Langue anglaise" class="anglais" /></a>
<a href="connexion.php" class="connexion">Connexion</a>
<a href="inscription.php" class="inscription">Inscription</a>
<a href="mon-panier.php" class="monpanier">Mon panier</a>
</div>
</div>


<img src="images/titre.png" alt="coucou" id="titre" />


<ul id="menu">

<li>

<a href="index_fr.php">Philosophie</a>

<ul class="menuderoulant">

<li><a href="Le bio.php">Le bio </a></li>
<li><a href="lee produits.php">Lee produits</a></li>
<li><a href="art-du-naturel.php">L'art du naturel</a></li>

</ul>
</li>

<li>

<a>Ligne de produit</a>

<ul class="menuderoulant">

<li><a href="vin.php">vin </a></li>
<li><a href="fromage.php">Fromage</a></li>
<li><a href="patisserie.php">Patisserie</a></li>

</ul>

</li>

<li>

<a>Recettes</a>

<ul class="menuderoulant">

<li><a href="nos-recettes.php">Nos recettes</a></li>
<li><a href="ingredients.php">Ingredients</a></li>
<li><a href="conservation.php">Conservation</a></li>

</ul>

</li>

<li>

<a href="prix-de-vente.php">Prix de vente</a>

</li>


<li>

<a>Guide produits bio</a>

<ul class="menuderoulant">

<li><a href="la-nature-en-parle.php">La nature en parle</a></li>
<li><a href="blog-bio.php">blog-bio</a></li>
<li><a href="ecobio.php">écobio</a></li>

</ul>

</li>

<li>

<a>Newsletter</a>

<ul class="menuderoulant">

<li><a href="inscrivez-vous.php">Inscrivez-vous</a></li>
<li><a href="connectez.php">Connectez vous</a></li>

</ul>

</li>
</ul>






<img src="images/bio.png" alt="Le bio" id="titre1" />
<div id="contenu">
La marque Vitae ne fait pas qu'utiliser 
du bio,</br>
elle en fait tout un art.
<p>Un art de vivre, parce que bien vivre c'est
prendre </br>
soin de soi, de son alimentation et de son environnement.</p>
<p>Nos produits ont été travaillés pour apporter 
un santé à notre corps</br>.
<p>Nos formules sont basées sur le respect </ br>
de la nature,de l'authentique.</p>
<p>Nous privilégions les vertues naturelles 
des richesses que nous offre la Terre.</p>
<p>Plus nous faisons du bien à notre corps, 
plus elle nous </br>
le rend.Telle est la devise de </br>
la marque Vitae.</p>

La marque Vitae ne fait pas qu'utiliser 
du bio,</br>
elle en fait tout un art.
<p>Un art de vivre, parce que bien vivre c'est
prendre </br>
soin de soi, de son alimentation et de son environnement.</p>
<p>Nos produits ont été travaillés pour apporter 
un santé à notre corps</br>.
<p>Nos formules sont basées sur le respect </ br>
de la nature,de l'authentique.</p>
<p>Nous privilégions les vertues naturelles 
des richesses que nous offre la Terre.</p>
<p>Plus nous faisons du bien à notre corps, 
plus elle nous </br>
le rend.Telle est la devise de </br>
la marque Vitae.</p>


<div id="footer">
    <div id="footer-part">
       <span class="copyright"> copyright © 2011 Vitae.Tous droits réservés</span>
       <a href="#" class="cgv">CGV</a> 
       <a href="#" class="mentions_legales">MENTIONS LEGALES</a>
       <a href="index.php" class="autre_langue">CHOISIR SA LANGUE</a>
       <a href="#" class="contact">CONTACT</a>
    </div>
</div>



</body>
</html>


Voici le code CSS:
[code=css
]
body {
width:100%;
background-color: #f2dade;
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 0pt;
}

#header {
width: 100%;
min-width: 1400px;
margin-top: 10px;
height: 30px;
}

#header-contenant {
text-decoration:none;
float: right;
margin-right: 15%;
padding-right: 40px;
}


#contenu {
width:440px;
color: #bdae82;
margin-right: 0px;
margin-top: 10px;
margin-bottom: 100px;
margin-left: 0px;
left: 10px;
top: 130px;
right: 700px;
font-family: Arial;
font-size: 13px;
font-weight: 900;
padding-left: 20px;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
}


#footer {
position: fixed;
background-color: #ffffff;
height: 28px;
width: 100%;
min-width: 1450px;
bottom:0px;
padding-bottom: 0pt;
padding-top: 0pt;
margin-bottom: 0pt;
margin-top: 0pt;
}


#footer-part {
position: absolute;
width: 1300px;
padding-left: 5%;
right: 24px;
left: 0pt;
}
[/code]

Pour ce qui est du code javascript,le plugin-scrollbar.js:



(function($) {
	$.fn.scrollbar = function(params) {
		// Fusionner les paramètres par défaut et ceux de l'utilisateur
		params = $.extend( {
			taille_englobe: 320,			//Taille de l'espace visible - /!\ Doit être un nombre ou 'auto'
			taille_scrollbar: 280,		    //Taille de la scrollbar - /!\ Doit être un nombre ou 'auto'
			taille_bouton: 30,				//Taille du bouton - /!\ Doit être un nombre
			pas:80,							//Pas du scroll molette - /!\ Doit être un nombre ou 'auto'
			molette: true,					//Détection du scroll molette - /!\ true ou false
			drag: true,						//Bouton de la scrollbar déplacable à la souris - /!\ true ou false
			debug: false,					//Afficher la console de debug - /!\ true ou false
			style: 'basic',					//Choix des styles - /!\ Par défault, il n'y a que le style 'basic'
			position:'droite',				//Position de la scrollBar - /!\ 'gauche' ou 'droite'
			alignement_scrollbar:'haut',	//Alignement de la scrollBar. Utilisé uniquement si elle à une taille inférieur à celle de taille_englobe
			orientation: 'vertical',		//Orientation du contenu, 'vertical' ou 'horizontal'
			marge_scroll_contenu: 20,		//Marge entre la scrollBar et le contenu - /!\ Doit être un nombre
			largeur_scrollbar: 10,           //Largeur de la scrollbar
			}, params);
		
		return this.each(function() {
			var $$ = $(this);
			var taille_englobe_init = params.taille_englobe;
			var taille_scrollbar_init = params.taille_scrollbar;
			
			//Fonction de calcul de position top maximum du contenu
			function calcul_contenu_top_max(){
				return  params.taille_englobe - taille_contenu ;
			}
			
			//Fonction de calcul de position top maximum du bouton
			function calcul_bouton_top_max(){
				return params.taille_scrollbar - params.taille_bouton
			}
			
			//Fonction de calcul du déplacement du bouton
			function deplacement_bouton(info_top_contenu){
				//On calcul la nouvelle position du bouton
				var depl_bouton = (info_top_contenu/calcul_contenu_top_max())*(calcul_bouton_top_max());
				//On vérifie que ca déborde pas en haut
				if(depl_bouton < 0){depl_bouton = 0;}
				//On vérifie que ca déborde pas en bas
				if(depl_bouton > calcul_bouton_top_max()){depl_bouton = calcul_bouton_top_max();}
				$('#bouton').css({'top':depl_bouton+"px"});
			}
			
			function deplacement_contenu(info_top_bouton){
				//On calcul la nouvelle position du contenu
				var depl_contenu = (info_top_bouton/calcul_bouton_top_max())*(calcul_contenu_top_max());
				//On vérifie que ca déborde pas en haut
				if (depl_contenu > 0){depl_contenu = 0}
				//On vérifie que ca déborde pas en bas
				if (depl_contenu < calcul_contenu_top_max()){depl_contenu = calcul_contenu_top_max()}
				$('#englobe').css({'top':depl_contenu+"px"});
			}
			
			function styler_scrollbar(position,orientation){
				var type_marge_position;
				var marge_position;
				var marge_orientation;
				switch (position){
					case 'droite':
						$('#englobe').after('<div id="scrollbar"><div id="bouton">&nbsp;</div></div>');
						$('#scrollbar').css({'margin-left':params.marge_scroll_contenu+'px'});
					break;
					case 'gauche':
						$('#englobe').before('<div id="scrollbar"><div id="bouton">&nbsp;</div></div>');
						$('#scrollbar').css({'margin-right':params.marge_scroll_contenu+'px'});
					break;
				}
				switch (orientation){
					case 'haut':
						$('#scrollbar').css({'margin-top':'0px'});
					break;
					case 'centre':
						var marge = (params.taille_englobe -params.taille_scrollbar)/2;
						$('#scrollbar').css({'margin-top':marge+'px'});
					break;
					case 'bas':
						var marge = params.taille_englobe -params.taille_scrollbar;
						$('#scrollbar').css({'margin-top':marge+'px'});
					break;
				}
			}
			var padTop=0;
			var padBot=0;
			//Hauteur du contenu
            var taille_contenu = $$.height()+40;
			
			function calcul_hauteur_auto(){
				if(params.taille_englobe == "auto"){
					padTop = $('#contenu').css('padding-top');
					padTop = padTop.substring(0,padTop.length-2);
					
					padBot = $('#contenu').css('padding-bottom');
					padBot = padBot.substring(0,padBot.length-2);
					
					params.taille_englobe = $(window).height()-40-padBot-padTop;
					
				}else{return false}
			}
			calcul_hauteur_auto();
			//La hauteur de l'espace visible est la hauteur de la fenetre du navigateur si taille_englobe="auto"
			
			
			function controle_donnee(){
				calcul_hauteur_auto();
				//La taille du contenu doit être supérieur à celle de l'espace visible (taille_englobe)
				if(taille_contenu > params.taille_englobe){
					//La hauteur de la scroll bar est égale à la hauteur de "englobe" si hauteur_srollbar="auto"
					if(params.taille_scrollbar == "auto"){params.taille_scrollbar = params.taille_englobe;}
					//La taille de la scrollbar doit être inférieur ou égale à la taille de taille_englobe
					if(params.taille_scrollbar > params.taille_englobe){						
						params.taille_scrollbar = params.taille_englobe;	
					}
					return true;
				}else{return false;}		
			}
			
			//Si la hauteur du contenu est supérieur à la hauteur de l'espace visible
			if(controle_donnee()){
				//Au redimensionnement de la fenetre
				//N'est concerné par cette fonction que les éléments en 'auto'
				window.onresize = function() {
					if(taille_englobe_init == "auto"){
						params.taille_englobe = $(window).height()-40-padBot-padTop;
						$$.css({'height':params.taille_englobe+'px'});
						if(taille_scrollbar_init == "auto"){
							params.taille_scrollbar = params.taille_englobe;
							$('#scrollbar').css({'height':params.taille_scrollbar+'px'});
							deplacement_bouton($("#englobe").css('top').substring(0,$("#englobe").css('top').length-2));
							if(params.debug){affiche_position();}
						}
					}	
				};
				
				//calcul des largeurs
				var temp = $$.width();
				$$.css({'width':params.marge_scroll_contenu+params.largeur_scrollbar+temp+'px'});
				//On construit une div autour du contenu, mais à l'intérieur de la div
				$$.wrapInner('<div id="englobe"></div>');
				$$.css({'height':params.taille_englobe+'px','overflow':'hidden','position':'relative'});
				$("#englobe").css({'top':0+'px','float':'left','position':'relative','width':temp+'px'});	
				
				//On construit la scrollBar
				styler_scrollbar(params.position,params.alignement_scrollbar);
				
				$$.append('<div class="clear"></div>');
				$(".clear").css({'clear':'both'});
				
				
				switch (params.style) {
					case 'basic':
						//Style de la scrollBar
						$('#scrollbar').css({'width':params.largeur_scrollbar+'px',
											'float':'left',
											'height':params.taille_scrollbar+'px',
											'margin':10+'px',
											'top':10+'px',
											'background':'#f2dade'		
						});
				
						//Style du bouton de la scrollBar
						$("#bouton").css({'width':params.largeur_scrollbar+'px',
										'height':params.taille_bouton+'px',
										'background':'#ffffff',
										'top':0+'px',										
										'cursor':'pointer'
										});
					break;
				}

				
				
				//Si le drag du bouton est activé(true)
				if(params.drag){
					$("#bouton").draggable({ 
						containment: 'parent',
						axis: 'y',
						start:function(){},
						drag: function(event, ui) {
							//ui.position.top est la valeur renvoyé par le plugin JQuery UI
							deplacement_contenu(ui.position.top);
							if(params.debug){affiche_position();}
						},
						stop: function(){}
					});
				}
				
				if(params.molette){
					$$.mousewheel(function(event, delta) {
						//On récupère la position du contenu
						var top_contenu = $('#englobe').css('top');
						
						//On enlève le 'px' et on le convertit en entier pour pouvoir le manipuler
						top_contenu = parseInt( top_contenu.substring(0,(top_contenu.length-2)) );
						
						//On récupère la position du bouton
						var top_bouton = $('#bouton').css('top');
						//On enlève le 'px' et on le convertit en entier pour pouvoir le manipuler
						top_bouton = parseInt( top_bouton.substring(0,(top_bouton.length-2)) );
						
						//Si le delta est positif, c'est à dire que l'on "pousse" la molette
						if (delta > 0) {							
							top_contenu = top_contenu + params.pas;
							//On vérifie que l'on n'a pas atteint le haut du contenu
							if(top_contenu > 0){top_contenu = 0}
							$('#englobe').css({'top':top_contenu+"px"});
						//Si le delta est négatif, c'est à dire que l'on "ramène" la molette
						}else if (delta < 0){							
							top_contenu = top_contenu - params.pas;
							//On vérifie que l'on n'a pas atteint le bas du contenu
							if(top_contenu < calcul_contenu_top_max()){top_contenu = calcul_contenu_top_max()}
							$('#englobe').css({'top':top_contenu+"px"});							
						}
						
						//calcul de déplacement du bouton					
						deplacement_bouton(top_contenu);
						
						if(params.debug){affiche_position();}
					});
				}
				
				//Affiche la console de debug
				if(params.debug){
					$$.after('<div id="debug"></div>');
					$('#debug').css({'position':'fixed','top':'200px','right':'50px', 'border':'2px solid #EF9700','background':'#FFDC9F','padding':'0px'})				
					.append('<p id="hauteurcontenu">Hauteur du contenu:'+taille_contenu+'</p>')
					.append('<p id="hauteurenglobe">Hauteur de l\'espace visible:'+params.taille_englobe+'</p>')
					.append('<p id="hauteurscrollbar">Hauteur du srcoll:'+params.taille_scrollbar+'</p>')
					.append('<p id="hauteurbouton">Hauteur du bouton:'+params.taille_bouton+'</p>')
					.append('<p id="topcontenu">Top du contenu:'+$$.css('top')+'</p>')
					.append('<p id="topbouton">Top du bouton:'+$('#bouton').css('top')+'</p>')
					.append('<p id="topmaxbouton">Top max du bouton:'+calcul_contenu_top_max()+'</p>')
					.append('<p id="topmaxcontenu">Top max du contenu:'+calcul_bouton_top_max()+'</p>')
					.children().css({'margin':'0','padding':'5px'});
					
					//Fonction de mise à jour des infos de la console de debug
					function affiche_position(){
						$("#hauteurcontenu").html('Hauteur du contenu:'+taille_contenu);
						$("#hauteurenglobe").html('Hauteur de l\'espace visible:'+params.taille_englobe);
						$("#hauteurscrollbar").html('Hauteur du srcoll:'+params.taille_scrollbar);
						$("#hauteurbouton").html('Hauteur du bouton:'+params.taille_bouton);
						$("#topcontenu").html('Top du contenu:'+$('#englobe').css('top'));
						$("#topbouton").html('Top du bouton:'+$('#bouton').css('top'));
						$("#topmaxbouton").html('Top max du bouton:'+calcul_contenu_top_max());
						$("#topmaxcontenu").html('Top max du contenu:'+calcul_bouton_top_max());
					}
				}	
			}else{
				alert('Pas de scrollbar');
			}
        });
	}
})(jQuery);


Mon probleme, pour bien l'expliquer est le bloc de texte contenu.
Dès que je dézoom à 75%, le bloc de texte se deplace.Par contre quand je zoom à + de 100%, rien ne se passe.

Je ne comprends pas pourquoi.

Merci pour votre aide. Smiley smile [/i][/i]
Sujet clos
Aller à