18041 sujets

Questions générales et questions de débutants

[Résolu] Probleme d'agrandissement...

Bonsoir,

Sur mon site, j'ai penser faire un système d'agrandissement via une icône et du javascript.

J'ai réussi à le réaliser sans probleme... Mais car il y à toujours un "mais"... Mon design se désemboite... Surtout pour mon menu...

Au lieu de parler, mieux vos que vous voyez :

- Premier moyen, allez sur www.cder-immo.fr et faire un CTRL + molette souris

- Deuxième moyens, regarder mon screenshot ^^, http://img57.imageshack.us/img57/3680/sanstitreco7.png

Voici mon code CSS :





body
{
   width: 814px; /* Largeur de notre Site */
   margin:auto; /* Centrer notre Site */
   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur */
   margin-bottom: 20px; /* Idem pour le bas du navigateur */
   background-image:url(images/fond.gif);
   background-repeat:repeat-x; 
}

/* Textes */

.petit_em
{
   font-size: 0.6em;
   color:#FFFFFF;
   font-family: verdana, Times New Roman, serif; /* Soit mise en Verdana en priorité*/
   padding-top:10px;
}

.titre_em
{
   font-size: 2.0em;
   color:#FFFFFF;
   font-family: verdana, Times New Roman, serif; /* Soit mise en Verdana en priorité*/
}

.menu_em
{
   color:#FFFFFF;
   font-family: verdana, Times New Roman, serif; /* Soit mise en Verdana en priorité*/   
}

.asterix
{
   color:#FF0000;
     font-size: 0.8em;
}

.choix
{
   font-size: 0.8em;
   font-family: verdana, Times New Roman, serif; /* Soit mise en Verdana en priorité*/   
}

.choixtitre
{
   font-size: 1.2em;
   color:#FFFFFF;
   font-family: verdana, Times New Roman, serif; /* Soit mise en Verdana en priorité*/ 
}

.texte_societe
{
   font-size: 0.9em;
   color:#FFFFFF;
   font-family: verdana, Times New Roman, serif; /* Soit mise en Verdana en priorité*/      
}

.texte_societe2
{
   font-size: 0.9em;
   text-align:center;
   color:#FFFFFF;
   font-family: verdana, Times New Roman, serif; /* Soit mise en Verdana en priorité*/
}

.lien {
color: #ffffff;
border:none;
text-decoration:none;
}

.construction
{
   font-size: 1.2em;
   color:#FFFFFF;
   font-family: verdana, Times New Roman, serif; /* Soit mise en Verdana en priorité*/      
}


/* Language */

#taille
{
   width: 38px;
   height: 18px;
   color: #ffffff;
   position:absolute;
   left:8.2em;
   top:1.3em;
   text-decoration:none;
   background-repeat: no-repeat; 
}

#themes
{
   width: 110px;
   height: 16px;
   position:absolute;
   left:30.0em;
   top:1.4em;
   background-repeat: no-repeat; 
}


#france
{
   width: 18px;
   height: 18px;
   position:absolute;
   left:835px;
   top:21px;
   text-decoration:none;
   background-repeat: no-repeat; 
}

#anglais
{
   width: 18px;
   height: 18px;
   position:absolute;
   left:860px;
   top:21px;
   text-decoration:none;
   background-repeat: no-repeat;
}

/* L'en-tête */

#en_tete
{
   width: 814px;
   height: 216px;
   background-image: url("images/header.gif");
   background-repeat: no-repeat; 
}

/* Le Menu */


#menuh  {
    padding:0px;  
	margin-bottom:3.4em;
	font-size:12px;
    font-family: Verdana, Georgia, arial, Times, serif; /* Soit mise en Verdana en priorité*/
}

#menuh ul  {
    float:left;
    list-style-type:none;
    display:block;
    padding:0;
    margin:0;
}

#menuh ul li {
    float:left;
    display:block;
	text-align:center;
	margin:0;
    padding:0;
}

#menuh  a {
    color:#FFFFFF;
    text-decoration:none;
	/*padding-top:13px;*/
	/*padding-top:1.0em;*/
    display:block;
    float:left;
    margin:0px ;
    height:41px;

}

#menuh #bord_d {
     width:22px;
     height: 41px;
     background-image: url("images/bord_d.gif");
	 background-repeat: no-repeat;
	 }
	 
#menuh #bord_g {
     width:21px;
     height: 41px;
     background-image: url("images/bord_g.gif");
	 background-repeat: no-repeat;
	 }
	 
#menuh #un {
     width:150px;
     height: 41px;
     background-image: url("images/bouton1.gif");
	 /*text-indent:20px;*/
	 background-repeat: no-repeat;
	 }
	 
	 
#menuh #deux {
     width:153px;
     height: 41px;
     background-image: url("images/bouton2.gif");
	 background-repeat: no-repeat;
	 }
	 
#menuh #trois {
	 width:158px;
	 height: 41px;
	 background-image: url("images/bouton3.gif");
	 background-repeat: no-repeat;
	 }
	 
#menuh #quatre {
	 width:157px;
	 height: 41px;
	 background-image: url("images/bouton4.gif");
	 background-repeat: no-repeat;
	 }
	 
#menuh #cinq {

	 width:153px;
	 height: 41px;
	 background-image: url("images/bouton5.gif");
	 /*text-indent: -25px;*/
	 background-repeat: no-repeat;
	 }	
			

#menuh #un:hover {
    width:150px;
    background-image:url("images/bouton1_P.gif");
    height:41px;
	 }

#menuh #deux:hover {
    width:153px;
    background-image:url("images/bouton2_P.gif");
    height:41px;
}

#menuh #trois:hover {
    width:158px;
    background-image:url("images/bouton3_P.gif");
    height:41px;
}

#menuh #quatre:hover {
    width:157px;
    background-image:url("images/bouton4_P.gif");
    height:41px;
}

#menuh #cinq:hover {
    width:153px;
    background-image:url("images/bouton5_P.gif");
    height:41px;
}

/* Le Corps */

#corps
{
   width: 814px;
   height: 651px;
   background-image: url("images/corps.gif");
   background-repeat: no-repeat;
   margin-top:0px;
   padding-top:0px;
}

#construction
{

   padding-top:10.5em;
   padding-left:17.5em;
}

#texte_contact
{
   color:#FFFFFF;
   text-align: left;
   padding-top:20px;
   padding-left:75px
}

#texte_contact2
{
   color:#FFFFFF;
   text-align: left;
   padding-top:35px;
   padding-left:75px
}

#societe
{
   padding-left:45px;
   padding-right:45px;
   padding-top:50px;
}


/* Le Pied de Page*/

#pied_de_page
{
   width: 814px;
   height: 60px;
   color:#FFFFFF;
   text-align: center;
   text-decoration:none;
   padding-bottom:1px;
   padding-top:8px;
   background-image: url("images/footer.gif");
   background-repeat: no-repeat;

}

#xiti
{
   padding-top:2.0em;
   padding-left:0em;
}


Et voici mon code 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>

<!-- DEBUT DU SCRIPT -->
<SCRIPT LANGUAGE="JavaScript">
nav = navigator.appName.substring(0,3);
ver = navigator.appVersion.substring(0,1)
function addFav()
	{
	if (nav == "Mic" && ver >= 4)
		{
		url_site="http://www.cder-immo.fr";
		titre_site = "CDER";
		document.write('<A HREF="http://www.cder-immo.fr/index.html" onClick="window.external.AddFavorite(url_site, titre_site);return(false);;">Ajouter ce site à vos favoris</A>')
		}
	else
		{
		document.write('CTRL+D pour ajouter ce site &agrave; vos favoris')
		}
	}
</SCRIPT>
<!-- FIN DU SCRIPT -->

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="CDER" content="Création Et Développement d'Entreprises en Réseau"/>
<meta name="description" contents="Création Et Développement d'Entreprises en Réseau"/>
<meta name="keywords" content="Creation,developpement,entreprises,réseau,cder,CDER,Création Et Développement d'Entreprises en Réseau,creation et developpement d'entreprises en reseau">	  
<link rel="shortcut icon" type="image/gif" href="images/favicon.gif" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" /> 
<title>CDER : Création Et Développement d'Entreprises en Réseau</title>

</head>

<body>
	
<div id="en_tete">

<div id="taille">
<a href="http://www.cder-immo.fr"><span class="lien">a</span></a>
<a href="http://www.cder-immo.fr"><span class="lien">A</span></a>
</div> 

<div id="themes">
 
		<a href="<?php echo $actuel; ?>?style=style1"><img src="images/default.png" alt="Theme Default" title="Theme Default" BORDER="0" /></a>    
		<a href="<?php echo $actuel; ?>?style=style1"><img src="images/black.png" alt="Theme Black" title="Theme Black" BORDER="0" /></a>   
		 <a href="<?php echo $actuel; ?>?style=style1"><img src="images/metal.png" alt="Theme Metal" title="Theme Metal" BORDER="0" /></a>
 
</div>  

<div id="france">
<a href="http://www.cder-immo.fr"><img src="images/flag_francais.png" alt="Version Françaiseé" title="Version Française" BORDER="0" /></a></div>  
  
<div id="anglais">
<a href="http://www.cder-immo.fr"><img src="images/flag_anglais.png" alt="English Version" title="English Version"  BORDER="0" />  </a></div> 

</div>

<div id="menuh">
    <ul>
      <li><a id="bord_d"></a></li>
      <li><a href="http://www.cder-immo.fr" id="un">&nbsp;<span class="menu_em"><br/>Notre Société</span></a></li>
      <li><a href="http://www.cder-immo.fr" id="deux">&nbsp;<span class="menu_em"><br/>Nos Missions</span></a></li>
      <li><a href="http://www.cder-immo.fr" id="trois">&nbsp;<span class="menu_em"><br/>Nos Projets</span></a></li>
      <li><a href="http://www.cder-immo.fr" id="quatre">&nbsp;<span class="menu_em"><br/>Nos Partenaires</span></a></li>
      <li><a href="http://www.cder-immo.fr/contact.html" id="cinq">&nbsp;<span class="menu_em"><br/>Nous Contacter</span>
	  </a>
      <li><a id="bord_g"></a></li>
    </ul>
</div>
		
<div id="corps">
<div id="construction">
  
  <img src="images/Panneau.png" width="256" height="256" /><br/>
  <span class="construction">.:. Site en Construction .:.</span>    
</div>
</div>

<div id="pied_de_page">
<span class="petit_em">All Rights Reserved CDER<br/>

  Version 1.2 |  <!-- DEBUT DU SCRIPT -->
<SCRIPT LANGUAGE="JavaScript">
addFav();
</SCRIPT>
<!-- FIN DU SCRIPT --> |<A HREF="http://www.cder-immo.fr/contactwebmaster.html" class="lien" style=" text-decoration:none ; " > Webmaster </A>   
</span>

<div id="xiti">
<a href="http://www.xiti.com/xiti.asp?s=327917" title="WebAnalytics" >
<script type="text/javascript">
<!--
Xt_param = 's=327917&p=page_d_accueil';
try {Xt_r = top.document.referrer;}
catch(e) {Xt_r = document.referrer; }
Xt_h = new Date();
Xt_i = '<img width="39" height="25" border="0" alt="" ';
Xt_i += 'src="http://logv144.xiti.com/hit.xiti?'+Xt_param;
Xt_i += '&hl='+Xt_h.getHours()+'x'+Xt_h.getMinutes()+'x'+Xt_h.getSeconds();
if(parseFloat(navigator.appVersion)>=4)
{Xt_s=screen;Xt_i+='&r='+Xt_s.width+'x'+Xt_s.height+'x'+Xt_s.pixelDepth+'x'+Xt_s.colorDepth;}
document.write(Xt_i+'&ref='+Xt_r.replace(/[<>"]/g, '').replace(/&/g, '$')+'" title="Internet Audience">');
//-->
</script>
<noscript>
<img width="39" height="25" src="http://logv144.xiti.com/hit.xiti?s=327917&p=page_d_accueil" alt="WebAnalytics" BORDER="0"/>
</noscript></a></div>

</div>
</body>
</html>


Merci de votre aide Smiley smile
Modifié par Cocopop (13 Sep 2007 - 14:40)
Bonsoir,
tu as une margin_bottom au niveau de #menuh qui est défini en em, donc sa valeur augmente avec l'agrandissement du texte, d'ou cet espace qui se crée dessous. Transformer cette valeur en pixel.

2 remarques au hasard:
> ta baseline (création et dév...) très difficilement lisible et le lissage de la police n'est pas adapté à ce genre de typo et à sa taille réduite.

> pas besoin d'associer display:block à float:left : le float
fait passer la valeur calculée du display à block de manière transparente
comme la position:absolute.
Modifié par Hermann (13 Sep 2007 - 12:05)
Hermann a écrit :
tu as une margin_bottom au niveau de #menuh qui est défini en em, donc sa valeur augmente avec l'agrandissement du texte, d'ou cet espace qui se crée dessous.

Cocopop, il me semble que dans un sujet que tu as ouvert dans les derniers jours (à propos de l'agrandissement du texte via un bouton sur la page), j'avais soulevé ce problème des EM utilisées pour dimensionner les blocs.

Si je parle dans le vide, il faut me le dire, hein. Smiley cligne
Florent, nul mon intention de te vexer.. Et je t'ai répondu sur ce topic en question car j'avais un leger probleme...

J'ai bien lu ton topic en long et en large, et ce que je n'ai pas compris ce n'est pas les em, mais plutot les % qui vont avec...

a écrit :
J'ai bien lu ton article, fort interresant au passage sur les em.

Cependant je n'ai pas trop compris ou placer ceci :

/* Taille de texte globale */
html {font-size: 100%;} <=== Surtout cette ligne
body {font-size: .85em;}


Et sur mon site www.cder-immo.fr, faites un coup de CTRL+Roulette et vous verrez que j'ai un bloc qui se détache... Savez vous pourquoi ?

Merci de vos réponses Smiley smile

Merci à toi et sache que je lis des tutos avec grande attention et que si j'avance aussi vite c'est grace à toi et aux autre membres Smiley cligne
Modifié par Cocopop (13 Sep 2007 - 11:42)
Je ne retrouve plus l'autre sujet, donc je réponds aux différents points ici:

Cocopop a écrit :
Cependant je n'ai pas trop compris ou placer ceci :
/* Taille de texte globale */
html {font-size: 100%;} <=== Surtout cette ligne
body {font-size: .85em;}

Ben... vu que c'est du code CSS, ça se place dans ta feuille de style CSS. Ensuite, tu peux le mettre au début, à la fin, au milieu... mais plutôt au début, pour être un peu cohérent (feuille de style où l'on va du plus général au plus particulier).
Quant au font-size: 100% pour l'élément html, il est uniquement destiné à éviter un bug d'Internet Explorer (mentionné dans le tutoriel).
On pourrait aussi faire ceci: 
/* Taille de texte globale */
body {font-size: 85%;}


Problème d'éléments qui se décalent lorsqu'on augmente la taille du texte: comme je le disais dans l'autre sujet, il ne faut pas utiliser les EM pour dimensionner les blocs ou les positionner, à moins de savoir précisément ce que l'on fait. À la rigueur, on pourra utiliser des marges ou padding verticaux en EM (exemple: p {margin: .5em 0;}, mais on évitera de le faire pour tout ce qui est dimension ou positionnement horizontal.

Pour ton bloc de menu, voir la réponse d'Hermann.

Cependant, j'aurais tendance à dire qu'utiliser une marge est une erreur dès le départ, dans ce cas précis. Je suppose que la valeur de la marge a été trouvée un peu au petit bonheur la chance?
Remplacer la valeur en EM de margin-bottom par une valeur en pixels corrige le problème, mais il reste que le positionnement du menu est assez hasardeux, et démontre une certaine méconnaissance de quelques spécificités du positionnement CSS, et notamment du positionnement flottant. Bien sûr, quand on débute, c'est tout à fait normal. Smiley cligne

Donc disons que ça ira bien comme ça. Mais pour aller plus loin, on pourra faire une petite recherche sur le dépassement des flottants.
Encore une fois un grand merci à toi, je vais étudier ta réponse ainsi que des Tutos sur les flottants.

Allez je me remet au travail, merci encore Smiley smile
Encore une fois, merci à toi Florent, mon probleme vient d'être réglé grace à la commande float.

Meric encore Smiley smile Smiley smile Smiley smile
Sujet clos
Aller à