28172 sujets

CSS et mise en forme, CSS3

Problème au zoom et dezoom

Bonjour,

Je cherche depuis plusieurs jours et je n'arrive pas à trouver la solution alors qu'elle doit être toute bête...

Mon problème est le suivant: j'ai ma page html, tout est bien positionner et fonctionne parfaitement comme je veux sauf un détail. Quand je zoom ou dézoome la page, les 3drapeaux de traductions ne gardent pas leur place, ils se décalent.

Une idée du problème, voire de la solution (sa serait encore mieux Smiley biggrin )??

Merci d'avance pour votre aide

Mel
Modérateur
Bonjour,

cela peut dépendre du navigateur, et du problème. Actuellement, ils multiplient généralement toutes les valeurs de taille afin d'afficher une page zoomée. Traditionnelement, ils se contentaient d'aggrandir le texte avec les problématiques que ça générait.

Ton problème arrive sûrement de la même façon lorsque tu redimensionne ta fenêtre plus petite. Les moteurs de rendu essayent généralement de tricher pour pouvoir afficher avec l'espace à disposition. Si tu souhaites éviter ces effets il peut y avoir parfois des moyens, parfois pas. Il faudrait voir le code pour cela...

Par exemple sur ce site, j'ai un petit décalage qui apparait avant le changement de mode en dessous des onglets, sur la gauche. (largeur de fenêtre entre 800 et 1000 à peu près).

a écrit :
tout est bien positionner

Essaie avec le verbe vendre Smiley cligne
Bonjour,

Voici le code html et css:
HTML:


<!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>Contact</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 class="niveau1">
     <li><a href="index.html" class="mot">Accueil</a></li>
     <li><a href="Societe.html" class="mot">Société</a></li>
     <li><a href="Competences.html">Compétences</a></li>
     <li class="sousmenu"><a href="Realisations.html" class="mot">Réalisations</a>
        <ul class="niveau2">
            <li><a href="electroniques.html" class="produit">Electroniques</a></li>
            <li><a href="informatiques.html" class="produit">Informatiques</a></li>
        </ul>
      </li>
      <li class="niveau1"><a href="Contact.html" id="contact">Contact</a></li>
                
</ul>
</div>


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

<div id="diapo"><img src="photos/diapo/img2.png" name="Ajout_Image" alt="diapo"/></div>
        
        
<div class="corps1">Au coeur du vignoble Nantais (Loire Atlantique, 44), RcosPi est situé à mi-chemin entre Nantes et Ancenis, à moins d'une heure d'Angers et de Cholet.
<br />De Nantes, accéder à la route Nantes-Cholet - N249 - et  prendre la sortie "Saint-Julien de Concelles/Le Loroux Bottereau".<br />
D'Ancenis, prendre la direction de Vallet - D763 -, à Saint-Laurent des Autels - D23 - prendre la direction "Le Loroux Bottereau".
</div>


<div  class="corpscontact">
RcosPi SARL<br />
51 rue de la Loire<br />
44430 Le Loroux Bottereau<br />
Tél: 02 28 00 01 93<br />
Fax: 02 28 00 04 28<br />
Email:<a href="mailto: contact@rcospi.fr">contact@rcospi.fr</a>
</div>


<div id="carte"><iframe width="350" height="275" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
                        src="http://maps.google.fr/maps/ms?hl=fr&amp;ie=UTF8&amp;s=AARTsJpncqyOrKJBMl376Tlab-bsE3olZg&amp;msa=0&amp;msid=109932272678260618657.0004631a689491bed6546&amp;ll=47.243012,-1.35797&amp;spn=0.020394,0.036478&amp;z=14&amp;output=embed">
                        </iframe>
                        
                        <br />
                        <a href="http://maps.google.fr/maps/ms?hl=fr&amp;ie=UTF8&amp;msa=0&amp;msid=109932272678260618657.0004631a689491bed6546&amp;ll=47.243012,-1.35797&amp;spn=0.020394,0.036478&amp;z=14&amp;source=embed" id="agrandir">Agrandir le plan</a>
                        </div>
                        




<div id="ingenieriecontact">
	<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="date_heure.js"></script>
<script type="text/javascript" src="traducteur2.js" ></script>
<script language="JavaScript" type="text/javascript" src="diapo.js"></script>

</body>
</html>


CSS:


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

/*mise en fome du site*/
body{
	width:100%;
	background-image:url(photos/degrade.png);/*image de fond*/
	overflow-x:auto; /*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*/
	background-attachement:fixed;/*fond défile avec le texte*/
	background-repeat:repeat;
	background-position:center;}
	
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:auto;
	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*/	
div#menu{
	width:700px;
	float:left;
	padding-left:70px;
	padding-top:3px;
	position:relative;}
	
div#menu a {color:#006;}
div#menu a:hover{color:#FFF} /*texte en blanc au passage de la souris*/

div#menu li:hover a{color:#FFF;}/*texte en blanc au passage de la souris*/

div#menu .niveau2 a {color:#006 !important;} /* texte en bleu; si on enlève cette ligne, le texte en blanc au survol de la souris se fera et le Realisation restera en blanc par contre le sous-onglet non survolé passera tt en blanc (texte et fond)*/
div#menu .niveau2 li:hover a{color:#FFF !important;}/* texte en blanc au survol de la souris (onglet: Réalisations et sous onglets: Informatiques et Electroniques)*/


div#menu ul {
	padding: 0; 
	margin:0; 
	width:900px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:14px;}
	
div#menu li {
	background:#FFF;
	width:139px; 
	height:50px;
	text-align:center;
	line-height:40px;}		
	
div#menu li:hover {background:#09C;}
div#menu li.sousmenu:hover {background:#09C;}

/* rajout couleur de fond */
div#menu li.sousmenu {
	background-color:#FFF;
	line-height:40px;
	width:139px;}
		
/* une petite bordure en top et bottom*/
div#menu ul li {
	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;}

div#menu ul ul {
	position: absolute;
	display:none; 
	width:100px;}
	
div#menu li a {
	text-decoration: none; 
	padding: 4px 0 4px; 
	display:block;}
	
.niveau1 li{
	margin : 0 1px 0 1px !important;  /* Pour les navigateurs autre que IE */
    margin : 0 1px 0 1px;  /* Pour IE  */}


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

div#menu ul.niveau1 li.sousmenu:hover ul.niveau2 li a{ padding-left:10px; width:119px;}

/*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;
	position:absolute;
	right:140px;
	height:100px;
	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;}
	


/*//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; width:150px; height:112px;}
#circulateurs{padding-top:30px; width:150px; height:112px;}
#freins{padding-top:90px; width:150px; height:77px;}
#baignoire{padding-top:20px; width:150px; height:148px;}
#calibre{padding-top:60px; width:150px; height:112px;}
#sondedo{padding-top:60px; width:150px; height:100px;}
#carteselec{padding-top:15px; width:150px; height:112px;}
#diwi{padding-top:90px; width:150px; height:112px;}
	
#scadibriq:hover, #circulateurs:hover, #freins:hover, #baignoire:hover, #calibre:hover, #sondedo:hover, #carteselec:hover, #diwi:hover{
	height:50%; width:50%; z-index:1; border:2px solid #000; 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}


Le css qui nous intéresse dans ce cas là est #drapeaux.

Au fait, désolé pour la faute de français Smiley ravi (positionné)

Merci pour ton aide
Sujet clos
Aller à