28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous
Je viens vous demander votre aide pour vérifier mon site. Ma cliente qui est sur PC (elle n'arrive pas à me dire quelle version d'internet explorer elle utilise) voit de drôle de choses, fond jaune qui s'arrête net en bas des blocs dans "production" et "contact"...
Je suis sur mac et je n'ai pas de PC à proximité. Sur mac tout est bien calé.
Merci pour votre aide
Virge Smiley cligne
virge a écrit :
(elle n'arrive pas à me dire quelle version d'internet explorer elle utilise)
Demande lui de te faire une impression d'écran

Perso voici ce que je vois sous IE6 et FF (en fond).
upload/6331-screen1.jpg
Comme tu peux le voir il manque un bout sous IE6, et pourtant j'ai l'impression que c'est lui qui a le bon comportement (parce que sous FF ça parait bizarre cette coupure du contenu nette sur le fond sans bordure).
virge a écrit :
Je suis sur mac et je n'ai pas de PC à proximité.

Une page Web testée sous Mac avec Firefox, Opera et Safari produira le même résultat avec les mêmes versions de ces navigateurs sous Windows (puisque ces navigateurs utilisent le même moteur de rendu, quel que soit l'OS sur lequel ils peuvent être installés), si l'on excepte le lissage ou non des polices et la forme par défaut des contrôles de formulaire.

Soit dit en passant, tu n'as besoin d'avoir un PC : il te suffit d'utiliser avec ton Mac un logiciel de virtualisation (comme VirtualBox) qui te permet d'installer des machines virtuelles tournant sous Windows, voire Linux. Personnellement (c'est un Mac-user qui parle Smiley cligne ), j'ai une machine virtuelle Kubuntu (pour tester sous Konqueror) et trois machines virtuelles Windows XP SP3 (avec, respectivement, IE 6, IE 7 et IE 8, chaque IE étant installé nativement).
Victor BRITO a écrit :

Une page Web testée sous Mac avec Firefox, Opera et Safari produira le même résultat avec les mêmes versions de ces navigateurs sous Windows (puisque ces navigateurs utilisent le même moteur de rendu, quel que soit l'OS sur lequel ils peuvent être installés), si l'on excepte le lissage ou non des polices et la forme par défaut des contrôles de formulaire.

Soit dit en passant, tu n'as besoin d'avoir un PC : il te suffit d'utiliser avec ton Mac un logiciel de virtualisation (comme VirtualBox) qui te permet d'installer des machines virtuelles tournant sous Windows, voire Linux. Personnellement (c'est un Mac-user qui parle Smiley cligne ), j'ai une machine virtuelle Kubuntu (pour tester sous Konqueror) et trois machines virtuelles Windows XP SP3 (avec, respectivement, IE 6, IE 7 et IE 8, chaque IE étant installé nativement).


Oui merci, pouvez-vous me faire des copies écrans en me disant le logiciel et sa version utilisé..
Merci à tous
virge a écrit :
Oui merci, pouvez-vous me faire des copies écrans en me disant le logiciel et sa version utilisé..
Merci à tous

Tu veux un café avec ?

Il existe de nombreux services (certains gratuis) sur la toile qui permette de le faire... Accessoirement, Victor t'as expliqué comment le faire toi même avec une certitude de résultat maximale.
non merci (pour le café)
je voulais juste un peu d'aide...
Bref je vais voir ailleurs, si je trouve
merci quand-même..
Laurie-Anne a écrit :

Il existe de nombreux services (certains gratuis) sur la toile qui permette de le faire...


Par exemple je n'ai pas de PC non plus et j'utilise ceci :

IE NetRenderer qui fait intantanément une capture d'écran pour les différentes versions d'IE. Vues des pages telles qu'ouvertes uniquement (le haut de page)
Browsershots beaucoup plus complet et paramètrable mais avec une liste d'attente souvent très longue. Vues des pages complètes avec le défilement.
merci beaucoup pour ton aide, je vais essayer. J'étais en train de tester browserlab mais ça n'a pas l'air de me donner toute la page..
Akhilleus a écrit :
Bonjour,

Windows 7 - MFF 3.5.5 :
http://omicronlab.net/upic/4b1e7beb-1d.png


Bonjour je reviens à la charge..
J'ai un problème sur cette partie du menu à droite (le bloc "contact") qui dépasse (ce site est fait en css) et je ne comprend pas pourquoi ça dépasse... Car quand je charge le site il ne dépasse pas, quand je survole le menu il déborde du cadre..
le lien :
http://www.provherbes.com/essai/fr/contact.html
Si vous avez une idée...

Le code css :

/**************************************************************

	Image Menu
	v 2.2

**************************************************************/
ul#imageMenu { position: relative; top: -15px; width: 1010px; height: 175px; list-style:none; padding:0; }

ul#imageMenu li { float: left; }

ul#imageMenu li a { width:250px; height: 175px; cursor: pointer; display: block; }

ul#imageMenu li.societe a { background-image: url(img_menu/societe.jpg); }

ul#imageMenu li.productions a { background-image: url(img_menu/productions.jpg); }

ul#imageMenu li.produits a { background: url(img_menu/produits.jpg) 0 50%; }

ul#imageMenu li.contact a { background: url(img_menu/contact.jpg) 0 50%; }
a:link { color: #fb1eec; }
a:hover { color: purple; }
a:visited { color: #800080; }
a:active { color: #800080; padding: 0; }
.clear {
	clear: both;
}
#cadre { background-color: black; background-image: url('(EmptyReference!)'); top: 0; margin-left: auto; margin-right: auto; width: 1000px; height: 680px; margin-top:-15px  }

#logo { background-image: url(img/logo.jpg); background-repeat: no-repeat; width: 1000px; height: 72px; margin-top: 10px; }
#fondSociete { background-color: white; width: 990px; height: 405px; margin-top: -20px; margin-right: auto; margin-left: auto; }
body { background-image: url(img/fond.jpg); background-repeat: no-repeat; background-attachment: fixed; }
#texte { color: black; font-size: 13px; font-family: Geneva, sans-serif, Arial, Helvetica, SunSans-Regular; font-variant: small-caps; line-height: normal; text-align: justify; width: 900px; height: 400px; margin-right: auto; margin-left: auto; }
#imageContact { background-image: url(img/fauteuil.gif); background-repeat: no-repeat; cursor: pointer; position: relative; top: -270px; right: -430px; width: 461px; height: 262px; }
.cssform label{ color: #c39; position: relative; top: -20px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
position: relative; top: -35px; left: 80px; width: 200px; height: 10px; }

.cssform textarea{ position: relative; top: -35px; left: 80px; width: 300px; height: 150px; }
/*************************************************************/

J'avais oublié de vous montrer mon code JS du menu


/**************************************************************

	Script	: Image Menu
	Version	: 2.2
	Authors	: Samuel Birch
	Desc	: 
	Licence	: Open Source MIT Licence

**************************************************************/

var ImageMenu = new Class({
	
	getOptions: function(){
		return {
			onOpen: false,
			onClose: Class.empty,
			openWidth: 200,
			transition: Fx.Transitions.quadOut,
			duration: 400,
			open: null,
			border: 0
		};
	},

	initialize: function(elements, options){
		this.setOptions(this.getOptions(), options);
		
		this.elements = $$(elements);
		
		this.widths = {};
		this.widths.closed = this.elements[0].getStyle('width').toInt();
		this.widths.openSelected = this.options.openWidth;
		this.widths.openOthers = Math.round(((this.widths.closed*this.elements.length) - (this.widths.openSelected+this.options.border)) / (this.elements.length-1))
		
		
		this.fx = new Fx.Elements(this.elements, {wait: false, duration: this.options.duration, transition: this.options.transition});
		
		this.elements.each(function(el,i){
			el.addEvent('mouseenter', function(e){
				new Event(e).stop();
				this.reset(i);
				
			}.bind(this));
			
			el.addEvent('mouseleave', function(e){
				new Event(e).stop();
				this.reset(this.options.open);
				
			}.bind(this));
			
			var obj = this;
			
			el.addEvent('click', function(e){

				if(obj.options.onOpen){
					new Event(e).stop();
					if(obj.options.open == i){
						obj.options.open = null;
						obj.options.onClose(this.href, i);
					}else{
						obj.options.open = i;
						obj.options.onOpen(this.href, i);
					}
					
					
				}
				
			})
			
		}.bind(this));
		
		if(this.options.open){
			if($type(this.options.open) == 'number'){
				this.reset(this.options.open);
			}else{
				this.elements.each(function(el,i){
					if(el.id == this.options.open){
						this.reset(i);
					}
				},this);
			}
		}
		
	},
	
	reset: function(num){
		if($type(num) == 'number'){
			var width = this.widths.openOthers;
			if(num+1 == this.elements.length){
				width += this.options.border;
			}
		}else{
			var width = this.widths.closed;
		}
		
		var obj = {};
		this.elements.each(function(el,i){
			var w = width;
			if(i == this.elements.length-1){
				w = width+5
			}
			obj[i] = {'width': w};
		}.bind(this));
		
		if($type(num) == 'number'){
			obj[num] = {'width': this.widths.openSelected};
		}
				
		this.fx.start(obj);
	}
	
});

ImageMenu.implement(new Options);
ImageMenu.implement(new Events);


/*************************************************************/
[/i]
c'est bon j'ai trouvé !!
C'était bien dans mon code JS de mon menu en bas de page lamention :
w = width+5
ja'i modifié :
w = width+0
et ça ne deborde plus !
Reste à savoir à quoi ça pouvait servir... Smiley confus