3 petits problèmes (background, photos lourdes, zoom/dézoom

Question

mel2412

28 Feb 2012 à 11:13

Bonjour à tous,

Et oui j'ai encore un souci, enfin plusieurs .

Je fais appel à votre aide afin de finaliser mon site que je dois mettre en ligne cette semaine.

1er souci: le chargement de la page index prend du temps et est très ralentie, à cause des photos (jpg) que j'ai mis en dans un script (diaporama). Quel format je pourrai utiliser pour qu'elles soient moins lourdes pour le navigateur?

2ème souci : j'ai 3 drapeaux en script (en haut à droite de la page). Ils sont positionner comme il faut mais lors des zooms et dézooms (et selon les tailles d'écran)les drapeaux ne restent pas à leur place; alors qu'ils n'ont pas de float attribué (j'ai des éléments en float et ils suivent parfaitement les différentes résolutions d'écran ainsi que le zoom et dézoom). Pourquoi?? Quelle est la solution??

3ème souci (et dernier ): j'ai une image de fond (dégradé bleu) à laquelle j'ai attribué un background-repeat:repeat mais sur la page "électroniques" l'image ne se répète pas en bas de la page. J'ai tout essayé, le scroll, le repeat-y, les heights, min-height, etc mais rien ne fonctionne. Cela fait déjà plusieurs jours que je cherche sur internet et que j'essai des solutions apportées sur les forums mais rien n'y fait, cela ne veut pas marcher.

Je vous post le code de la page électroniques ainsi que le css où tout y est.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
<title>Réalisations électroniques</title>

<link href="miseenforme.css" rel="stylesheet" type="text/css"/>

</head>

<body>
<div id="contenu">
<div><a name="haut_de_page"></a></div>

<a href="index.html"><img src="logos/rcospi.png" alt="logo rcospi" id="logo"/></a>

<div id="menu">
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="Societe.html">Société</a></li>
<li><a href="Competences.html">Compétences</a></li>
<li><a href="Realisations.html" id="realisations">Réalisations</a>
<ul>
<li><a href="electroniques.html" id="electroniques">Electroniques</a></li>
<li><a href="informatiques.html">Informatiques</a></li>
</ul>
</li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</div>

<div id="date_heure"></div>
<div id="drapeaux"></div>

<h1> Quelques réalisations électroniques:</h1>
<ul class="listegauche21">
<li><a href="#diwi">DiWi Timer</a></li>
<li><a href="#baignoire">Automate baignoire</a></li>
<li><a href="#calibre">Calibre</a></li>
<li><a href="#sondedo">SondeDO</a></li>
<li><a href="#carteselec">Cartes électroniques</a></li>
</ul>

<div><img id="diwi" alt="diwi" src="photos/diwi_timer/afficheur.jpg"/><h3>DiWi Timer</h3>
<br /><div class="corps2">Outil d'aide managériale. Ce système innovant permet une meilleure organisation des tâches, du temps, etc.; grâce à une minuterie visuelle et / ou sonore et une remise à zéro.
<br /><br />Installé depuis 2010 dans des restaurants "rapides", le Diwi Timer leur permet de vérifier l'état de propreté des toilettes et leur a permis de gagner en point de propreté.
<br /><br />Il se compose de deux boîtiers : un afficheur qui donne le temps écoulé, et un boîtier clé qui permet d'effectuer la remise à zéro de l'afficheur. La communication entre ces deux boîtiers se fait sans fils (Xbee). De plus, sa liaison sans fils performante permet d'installer ce produit dans tout type de bâtiment.
<br />
<br /><a href="http://www.dmoz.fr/actualite/le-diwi-timer-outil-daide-au-controle/" target="_blank" class="telechargez">Lisez ici un article sur le Diwi Timer</a>
<br />
<br /><a href="photos/diwi.pdf" target="_blank" class="telechargez">Téléchargez ici la plaquette Diwi Timer</a>
<br /><a href="bon_de_commande.pdf" target="_blank" class="telechargez">Téléchargez ici le bon de commande Diwi Timer</a>
</div>
<hr class="trait"/>
</div>

<div><img id="baignoire" alt="baignoire" src="photos/automate_baignoire/boitier.jpg"/><h3>Automate baignoire</h3>
<br /><div class="corps2">Cet équipement IP67 permet de programmer les temps de remplissage et de vidage d'une baignoire, ainsi que de gérer les niveaux d'eau.
<br /><br />Conçu autour d'un microcontrôleur 16 bits (PIC18F), le système dispose d'un écran LCD, d'un mini clavier à touches tactiles, d'entrées pour des capteurs de niveau et des sorties relais pour piloter des électrovannes. Un port USB permet de transférer l'histoire des activités journalièes et des défauts.</div>
<div class="hautdepagerea"><a href="#haut_de_page">Haut de page</a></div>
<hr class="trait"/>
</div>

<div><img id="calibre" alt="calibre" src="photos/calibre/IMAG0201.jpg"/><h3>Calibre</h3>
<br /><div class="corps2">Cet équipement est un outil de traçabilité embarqué dans une péniche transportant des matériaux ou des céréales et communicant à distance avec un gestionnaire.
<br /><br />Il associe donc un système de jauge de mesure et des cartes GPS et GSM. Les jauges de mesure sont des capteurs de profondeurs communiquant en liaison hertzienne (protocole Xbee). Un écran LCD (128x64 pixels) associé à un clavier 5 touches permet à l'opérateur de paramétrer l'outil et de suivre le chargement et le déchargement de la péniche. Une imprimante thermique délivre des procès-verbaux des livraisons.
<br /><br />L'historique des opérations, sauvegardé dans une clé USB ou une SDcard, fournit des informations exploitables sous EXCEL ou sur GoogleMap.</div>
<div class="hautdepagerea"><a href="#haut_de_page">Haut de page</a></div>
<hr class="trait"/>
</div>

<div><img id="sondedo" alt="sondedo" src="photos/sondedo/acquisition.jpg"/><h3>SondeDO: mesure de densité optique</h3>
<br /><div class="corps2">Ce boîtier d'acquisition est un système de mesure permettant de contrôler la densité de micro algues présentes dans un volume déterminé et d'enregistrer la valeur dans le temps.
<br /><br />Une sortie analogique représentant la valeur de densité peut être connectée à un automate de pilotage d'un réacteur. Un afficheur LCD et un mini clavier permettent le paramétrage et l'exploitation du boîtier.
<br /><br />La mesure optique est réalisée au moyen d'une DEL à longueur spécifique et de traitements analogiques puis numériques du signal bruité afin de s'affranchir des variations externes. </div>
<div class="hautdepagerea"><a href="#haut_de_page">Haut de page</a></div>
<hr class="trait"/>
</div>

<div><img id="carteselec" alt="cartes_electroniques" src="photos/cartes_electroniques/c3m2.jpg"/><h3>Cartes électroniques</h3>
<br /><div class="corps2">Ces exemples de cartes au format Europe, équipé d'un connecteur fond de panier, ont pour fonctions de traiter analogiquement des signaux et de piloter des relais.
<br /><br />Notre société réalise à l'unité ou en petite et moyenne série des cartes et boîtiers électroniques pour tout type d'activités.</div>
<div class="hautdepagerea"><a href="#haut_de_page">Haut de page</a></div>
<hr class="trait"/>
</div>

<div id="ingenierie">
<marquee onMouseOut="this.start();" onMouseOver="this.stop();" loop="1" scrolldelay="20" scrollamount="5" direction="left" behavior="slide">
L'Ingénierie adaptée à vos besoins
</marquee></div>

</div>

<div id="contenu2">
<div id="mentions"><a href="mentions_legales.html" target="_blank">Mentions Légales</a></div>
<div id="hautdepage"><a href="#haut_de_page"><small>Haut de page</small></a></div>
<div id="coordonnées">RcosPi - 51, rue de la Loire - 44430 Le Loroux Bottereau</div>
<div id="mail"><a href="mailto:contact@rcospi.fr">contact@rcospi.fr</a></div>

</div>
<script type="text/javascript" src="traducteur2.js" ></script>
<script type="text/javascript" src="date_heure.js"></script>
<script type="text/javascript" src="diapo_elec.js"></script>

</body>
</html>
[/code]

@charset "utf-8";
/* CSS Document */
								/*////////////////////////////*MISE EN PAGE COMMUNE A TOUTES LES PAGES*/

/*mise en fome du site*/

body{
	height:100%;
	width:100%;
	margin:0 auto;
	padding:0;
	background-image:url(photos/degrade.png);/*image de fond*/
	background-attachement:fixed;/*fond défile avec le texte*/
	background-repeat:repeat;
	background-position:center center;
	overflow-x:hidden; /*limite les dimensions et permet ici de cacher le reste de l'écran à droite, car sinon barre de défilement en bas pr rien*/
	overflow-y:auto;/*limite les dimensions, ici pr le body et permet ac auto de mettre en automatiq une barre de défilement qd besoin est*/
	behavior:url(csshover.htc);/*rapport avec le menu déroulant*/
	margin-top:1px;/* marge en haut de la page*/

	}
	
p{margin:0; padding:0;}	

a:link, a:visited, a:active, a:hover{text-decoration: none;}
a:hover {color: #039}

#logo{
	position:relative;
	text-decoration: none;/*pas de déco sur le logo, ex:souligné/ surligné..*/
	border:none;/*bordure*/
	float:left; /*positionne le logo à gauche*/
	padding-left:30px;
	padding-top:3px;
	width:150px;
	height:50px;}
	
/*défini la page blanche */
#contenu{
	background-color:#FFF; 
	width:1000px;
	height:100%;
	margin:auto;
	margin-top:15px;
	/*bords arrondis*/
	-moz-border-radius:30px 30px 30px 30px;/*pour mozilla firefox*/
	-webkit-border-radius:30px 30px 30px 30px;/*pour chrome et safari*/
	border-radius:30px 30px 30px 30px;
	-khtml-border-radius:30px 30px 30px 30px;}
	
/*défini le bandeau blanc en bas de page*/
#contenu2{
	background-color:#FFF; 
	width:1000px;
	height:55px;
	margin:auto;
	margin-top:15px;
	/*bords arrondis*/
	-moz-border-radius:15px 15px 15px 15px;/*pour mozilla firefox*/
	-webkit-border-radius:15px 15px 15px 15px;/*pour chrome et safari*/
	border-radius:15px 15px 15px 15px;
	-khtml-border-radius:15px 15px 15px 15px;}

/*Menu déroulant horizontal*/	
#menu{
	width:700px;/*si pb la taille était de 700 px avant*/
	float:left;
	padding-left:70px;
	padding-top:3px;
	position:relative;
}

#menu a{color:#006}
#menu a:hover{color:#FFF} /*texte en blanc au passage de la souris; peut pas le mettre avec #menu li:hover meme en rajoutant a (soit #menu li a:hover) car fond bleu déterminé dans li:hover n'aurait pas les arrondis; et sans le a le blanc ne marche pas */

#menu li {
	background:#FFF; /*fond blanc*/
	width:139px; 
	height:50px;
	text-align:center;
	line-height:40px;
	position:relative; 
	list-style: none; 
	float:left; 
	border-top:3px solid;
	border-bottom:3px solid;
	border-color:#F60;
	/*bords arrondis*/
	-moz-border-radius:15px 0 15px 0;/*pour mozilla firefox*/
	-webkit-border-radius:15px 0 15px 0;/*pour chrome et safari*/
	border-radius:15px 0 15px 0;
	-khtml-border-radius:15px 0 15px 0;
	margin : 0 1px 0 1px !important;  /* Pour les navigateurs autre que IE */
    margin : 0 1px 0 1px;  /* Pour IE  */}
	
#menu li a {
	text-decoration: none; 
	padding: 4px 0 4px; 
	display:block;}	
	
#menu li:hover {background:#09C} /*fond en bleu au passage de la souris; peut pas le mettre avec #menu a:hover car le fond bleu n'aurait pas les arrondis*/

#menu ul {
	padding: 0; 
	margin:0; 
	width:900px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:14px;}	

#menu ul ul {
	position: absolute;
	display:none; 
	width:100px;}


#menu ul li:hover ul{display:block;}
#menu ul li:hover ul li{
	text-align:left;
	height:30px;
	line-height:18px;
	width:139px;
	font-size:12px;
	border-top:0;
	border-right:3px solid;
	border-color:#F60;}

#menu ul li:hover ul li a{ width:129px; padding-left:10px;}
#menu ul li:hover ul li:hover a{color:#FFF !important}
/*Pour que quand la page est active, cad quand l'internaute est sur 1 page, pour indiquer que c sur cette page qu'il est, on peut changer le style css. par contre il faut modifier ds chaque page l'id (ou la clase) au lien "a href"*/
	
#accueil, #societe, #competences, #realisations, #contact, #electroniques, #informatiques {
	background:#09C; /*fond en bleu quand on est sur la page*/
	color:#FFF !important;
	/*bords arrondis*/
	-moz-border-radius:15px 0 15px 0;/*pour mozilla firefox*/
	-webkit-border-radius:15px 0 15px 0;/*pour chrome et safari*/
	border-radius:15px 0 15px 0;
	-khtml-border-radius:15px 0 15px 0;}
	
#accueil, #societe, #competences, #realisations, #contact {
	line-height:40px;
	height: 42px;
	}
	
#electroniques, #informatiques{
	line-height:20px;
	height: 23px;
}
	
	
/*script saint du jour,date et heure*/
#date_heure, #saint{
	color:#33C;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 10px;
	font-style: italic;
	clear:both;
	margin-left:50px;}

	
/*drapeau de traduction*/
#drapeaux{	
	font-size: 8px; /*taille*/
	font-style: normal;/*style normal, italique, gras..*/
	font-weight: normal; /*poids*/
	font-variant: normal;
	text-decoration: none;
	clear:both;
	position:absolute;
	right:140px;
	top:80px; /*éloignement du haut*/
}
		
/*phrase défilante en bas de page*/
#ingenierie, #ingenieriecontact{
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size:24px;
	color:#039;
	text-decoration:none;
	font-style:oblique;
	margin-left:250px;
	clear:both;
	padding-top:30px;}
	
#ingenierie{padding-bottom:10px}
#ingenieriecontact{margin-top:430px}
	
	
/* coordonnées bas de page, encadré blanc*/
	/*encre haut de page*/
#hautdepage, #hautdepage a{
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	color: #039;
	text-decoration:none;
	float:right;
	padding-right:5px;
	padding-top:5px;}

#hautdepage a:hover{
	background-color:#F60;
	text-decoration:underline;
	-moz-border-radius:0 15px 0 0;/*pour mozilla firefox*/
	-webkit-border-radius:0 15px 0 0;/*pour chrome et safari*/
	border-radius:0 15px 0 0;
	-khtml-border-radius:0 15px 0 0;
	height:15px;}

.hautdepagerea, .hautdepagerea a{
	font-family:Tahoma, Geneva, sans-serif;
	font-size:10px;
	color: #039;
	text-decoration:none;
	float:right;
	padding-right:25px;
	position:relative;}

	
#coordonnées{
	text-align:center;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	padding-top:15px;
	color: #000;}
	
/*les liens comme contact...*/
#mail, #mail a{
	text-align:center;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	color: #039;
	text-decoration:none;
	margin:0;
	margin-top:8px;
	clear:both;}
		
#mail:hover{
	background-color:#F60;
	text-decoration:underline;
	/*bords arrondis*/
	-moz-border-radius:0 0 15px 15px;/*pour mozilla firefox*/
	-webkit-border-radius:0 0 15px 15px;/*pour chrome et safari*/
	border-radius:0 0 15px 15px;
	-khtml-border-radius:0 0 15px 15px;
	height:20px;}
		
#mentions, #mentions a{
	float:left;
	margin-left:5px;
	margin-top:5px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	color: #039;}
	
#mentions:hover{
	background-color:#F60;
	text-decoration:underline;
	/*bords arrondis*/
	-moz-border-radius:15px 0 0 0;/*pour mozilla firefox*/
	-webkit-border-radius:15px 0 0 0;/*pour chrome et safari*/
	border-radius:15px 0 0 0;
	-khtml-border-radius:15px 0 0 0;
	height:20px;}
	 
										/*//////////////////////////*PAGES SU SITE WEB*/


/*CORPS TEXTE DES PAGES WEB*/
.corps1, .corps2, .corpscontact{
	font-family:Tahoma, Geneva, sans-serif;
	font-size:14px;
	color:#333;
	text-align:justify;}
	
.corps1{
	float:left; 
	padding-left:250px; 
	margin-right:200px; 
	margin-bottom:25px;
	width:700px; 
	padding-top:15px}
	
.corps2{
	text-align:left; 
	padding-left:310px; 
	width:600px;}
	
.corpscontact{
	float:left;
	color:#000;
	line-height:25px;
	padding-left:250px;
	}


#cir, .cirindex{clear:both; font-family:Tahoma, Geneva, sans-serif;}

.cirindex{
	float:left;
	width:170px;
	margin-left:30px;
	margin-top:25px;
	color:#039;
	font-size:15px;}

#cir{
	font-size:16px;
	text-align:center;
	color:#333;
	font-weight:600;
	padding-left:200px;}
	
	
/*le bandeau d'images en page acceuil*/	
#bandeau{margin-left:250px; margin-top:100px;}

/*titre de la liste en page accueil*/
#activitesaccueil{ 
	padding-top:30px;
	color:#039;
	font-size:17px;
	font-weight:lighter;
	font-family:Tahoma, Geneva, sans-serif;
	font-style:normal;
	text-decoration:underline;
	text-align:left;
	margin-left:280px;}
	
.listeaccueil{
	text-align:left; 
	list-style:circle;
	font-style:italic;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	color:#333;
	font-size:20px;
	margin-left:360px;}


/*DIAPORAMA PHOTOS SUR TOUTES LES PAGES SAUF INDEX/ACCUEIL*/
#diapo{
	position:absolute;
	float:left;
	padding-left:40px;
	padding-top:150px;}
	
#diapo_photo{max-height:112px; max-width:150px;}
	


/*//PAGE SOCIETE, COMPETENCES et REALISATION, ELECTRONIQUES, INFORMATIQUES*/	
h1, h1 a{
	color:#039;
	font-size:16px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:normal;
	font-weight:lighter;
	text-decoration:underline;
	text-align:left;
	text-indent:250px; 
	margin:0; 
	padding:0;
	clear:both;}
	
h2{
	color:#06C;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:12px;
	font-style:italic;
	text-decoration:underline;
	font-weight:lighter;
	text-align:left;
	margin-left:330px;}
h3{
	color:#009;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:16px;
	font-style:normal;
	text-decoration:underline;
	font-weight:lighter;
	text-align:left;
	text-indent:270px;
	padding:0;
	margin:0;}
	
.telechargez, .telechargez a{
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	font-style:italic;
	color:#06C;}

.telechargez:hover{color:#06C; text-decoration:underline;}

hr{width:700px;}
.trait{
	display:inline-block; 
	margin-top:15px; 
	margin-bottom:15px;
	width:700px; 
	margin-left:250px; 
	height:2px; 
	color:#F60; 
	background-color:#F60; 
	position:relative;}

/*liste <ul>*/
.listesct, .listegauche, .listedroite, .listegauche2, .listegauche2 a, .listedroite2, .listedroite3, .listegauche21, .listegauche21 a{
	list-style:circle;
	font-style:italic;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	color:#333;
	font-size:14px;
	margin-bottom:40px;}

.listegauche{float:left; margin-left:350px;}
.listedroite{float:right; margin-right:250px;}

.listesct{float:left; margin-left:250px;}

.listegauche2{float:left; margin-left:240px;}
.listegauche21{text-align:left; margin-left:240px; margin-bottom:50px;}


.listedroite2{float:right; margin-right:80px;}
.listedroite3{float:right; padding-right:150px;}



#diwi, #baignoire, #calibre, #sondedo, #carteselec, #scadibriq, #circulateurs, #freins{float:left; margin-left:60px; position:absolute;}

#scadibriq{padding-top:60px; max-width:150px; max-height:112px;}
#circulateurs{padding-top:30px; max-width:150px; max-height:112px;}
#freins{padding-top:90px; max-width:150px; max-height:77px;}
#baignoire{padding-top:20px; max-width:150px; max-height:148px;}
#calibre{padding-top:60px; max-width:150px; max-height:112px;}
#sondedo{padding-top:60px; max-width:150px; max-height:100px;}
#carteselec{padding-top:15px; max-width:150px; max-height:112px;}
#diwi{padding-top:90px;max-width:150px; max-height:112px;}
	
#scadibriq:hover, #circulateurs:hover, #freins:hover, #baignoire:hover, #calibre:hover, #sondedo:hover, #carteselec:hover, #diwi:hover{
	max-height: 350px; max-width:300px; z-index:1; left:250px;}
	

/*logo des clients et partenaires*/
.logos1ligne{padding-top:30px; clear:both;}

#mcdo{float:left; margin-left:280px;}
#pernod{float:left; padding-left:100px;}
#lcpc{float:left; padding-left:100px;}
#michelin{float:left; margin-left:280px; padding-top:5px;}
#lactalis{float:left; padding-left:100px; padding-top:10px;}
#cstb{float:left; padding-left:100px; padding-top:10px;}
#vectra{float:right; padding-top:35px; padding-right:150px;}
#renault{float:left; padding-top:10px; padding-left: 320px; margin-bottom:40px;}
#psa{float:left; padding-left:100px; padding-top:35px;}

#partenaires{clear:both; float:left; padding-top:30px; margin-left:370px; margin-bottom:55px;}
#oseo{padding-left:100px; border:0;}


/*Contact*/
#carte{
	position:relative;
	float:right;
	margin-top:5px;
	padding-right:70px;
	}
#agrandir{
	font-size:10px}

J'espère que vous pourrez m'aider, car je ne vois plus de solutions à essayer.

Mel

Isabelleglm

28 Feb 2012 à 11:36

bonjour,

pour le premier souci tente de réduire le poids de tes images/photos à moins de 10 ko. il faut jouer sur la qualité. Tu peux les mettre en qualité 50%.

d'une manière générale travailles-tu avec une débogueur de navigateur (F12). c'est très pratique pour trouver d'où viennent les erreurs...

as-tu un lien de tes pages pour test ?

mel2412

28 Feb 2012 à 11:43

Re bonjour,

Je viens tout juste de réussir à accélérer le chargement de la page avec un display:none sur les photos et en allongeant leur temps d'affichage.

Oui j'utilise régulièrement le débogueur. Ce qu'il m'indique concernant le body où le background est déclaré c'est background-attachement:fixed qui est rayé.

Non désolé je n'ai pas de lien vers les pages. Je peux poster les codes des pages si besoin est.

Afin d'optimiser encore plus le chargement de la page je vais essayer d'allier ta solution Isabelleglm à celle que je viens de faire.

Merci pour ta rapidité de réponse

mel2412

28 Feb 2012 à 15:16

Je viens de résoudre le problème avec le background.

Reste maintenant celui des drapeaux.

En espérant que vous continuerez à m'aidez pour cet ultime problème (enfin j'espère que c'est le dernier, je dois mettre le site en ligne cette semaine).

Merci d'avance

Sujet clos

CSS et mise en forme, CSS3

3 petits problèmes (background, photos lourdes, zoom/dézoom