Pb affichage pc ???

minoula2006 -  
Bonjour,
comment mettre tous mes page html s'adapte avec la résolution(paramétre d'affichage) du pc que se soit 1024 ou 1050...
est ce qu il y a une propriété html ou css???????
Configuration: Windows XP
Firefox 3.0.16

5 réponses

  1.  Cuffson
    Dans ton fichier css, au lieu de mettre des px tu dois mettre des %.

    Voila j'espère que cela répond à ta question.
    2. Cuffson
      Non seulement la où tu as mis des px pour que ta page soit extensible.
      1. minoula2006
        désolé je suis débutante et j'ai mis bcp de px?? 
        body {
	background: #42afdc url(images/html-bg.gif) repeat-x;
	padding: 0px;
	margin: 0px;
	color: #333333; font-style:normal; font-variant:normal; font-weight:normal; line-height:170%; font-size:75%; font-family:Verdana
}


#en_tete
{
   width: 884px;
   height:153px;
   background: url('images/banniere-sousse.jpg') no-repeat center top;
   background-repeat: no-repeat;
   margin-bottom: 10px;
   margin: auto;
  
}
#lang{
position:absolute;
right:10px;
top:20px;
}

#menu {
 height:50px;
 }

#menu ul
{
   z-index: 2;
   padding:0px;
   width: 887px;
   margin: 0 auto ;
   list-style-type: none ; /*pour les points de chaque titre (.presentation...) il faut pas qu'elle s'affiche */
   text-align:center;
   }

#menu li
{ 
  
  margin:  auto ; 
  padding: 0 ;/* affichage horizontal */
  float: left ; /*pour ne pas qu'ils (li) s'empilent les uns sur les autres, on déclare les différents élément flottants à gauche ,ce qui va permettre aux li suivants d'aller se mettre... à droite*/
  border: 1px solid #006699 ; 
  Z-Index: 3;  
  }
  

#menu li a /*le grand menu*/
  {
  /* float: left ;*/
   font-size: 11px;
   background: #3399CC; /*bleu comme l'arriere plan*/
   display:block; /*va permettre de donner une largeur fixe et identique à chaque li*/
   width: 175px ;
   color: #FFFFFF ;
   padding: 2px 0 ;
   text-decoration: none ; /* non souligné*/
 
  }

#menu li a:hover /* les lien du grand menu*/
{  
   color: #030676 ;
   background: #E1C75B ; 
  }
  
 #menu li ul a /*le sous menu*/
 {
  
 background: #D7F5FF;
 color: #714F39;
 padding: 0px;
 padding-left: 0px;
 font-size: 11px;
 text-align: left;
	
 } 
   
 #menu li ul a:hover /*les lien des sous menu*/ 
  {
  background: #DEC58F ;
  color: #000000; 
 } 

#menu ul li ul 
{
 display:none;/*Pour faire disparaître les sous-items, on rajoute un display:none à la sous-liste (on lit en remontant : le ul inclus dans le li du ul du cadre id="menu") */
 width: 175px; 
 }

#menu ul li:hover ul {
 display:block;
 }
#menu li:hover ul li {
 float:none;
 }
 
#menu li ul {
 position:absolute;
 margin-left:0 ;
 background: #ffffff ; 
 }
 
 #menu li ul li  {
 color:#000000;
 }
 
/*#Ptmenu {

 width: 200px; }

#Ptmenu ul
{
 margin-left: 0;
 padding-left: 0;
 list-style-type: none;

 }

#Ptmenu a
{
 display: block;
 padding: 3px; /*largeur des items
 width: 140px;/*longeur des item
 background-color: #036;
 border-bottom: 1px solid #eee;
}

#Ptmenu a:link, #Ptmenu a:visited
{
color: #EEE; /*couleur du texte au premier vu blanc
text-decoration: none;
}

#Ptmenu a:hover/*au touche du souris
{

background-color: #369;/*bleu plu clair 
color: #fff;/*blanc
}

*/
#titre1{
position:absolute;
background: url(images/titre.png) no-repeat  center top;
width:210px;
height: 32px;
left:0px;
top:-32px;
letter-spacing: -1px;

}
#partie1{
 position:absolute;
 left:0px;;
 background : url(images/menu.png) no-repeat  center top;
 width:210px;
 height: 250px;
 margin-left:40px;
 top:220px;


		
}
#titre1 h3{
	position: absolute;
	left:5px;
	bottom: -3px;
	color:#0033FF;
	font-size: 11px;
	font-weight: bold;

}



#partie1 ul {
	position: absolute;
	top:10px;
	left:0px;
	white-space: normal;
	display: inline;
	list-style-image: url(images/121.gif);
	list-style-position: inside;
	font-weight: lighter;	
	
}


#partie1 li a {
	font-size: 11px;
	text-decoration: none;
	line-height: 30px;
	
 }
 
#partie1 li a:hover{
	color:#C29A3D;
	text-decoration: underline;
 }
 
#partie2{
 position:absolute;
 left:38px;
 background : url(images/arrondiTr.png) no-repeat  center top;
 width:210px;
 height:448px;
 top: 500px;
 left:40px;
}
#titre2{
position:absolute;
background: url(images/titre.png) no-repeat  center top;
width:210px;
height: 32px;
left:0px;
top:-5px;

}
#titre2 h3{
 position: absolute;
 left:5px;
 bottom: -3px;
 color:#0033FF;
 font-size: 11px;
 font-weight: bold;
 letter-spacing: -1px;
}

#animS{
position:absolute;
left:28px;
top:25px;
z-index: 2;
}

#img{
position:absolute;
left:32px;
top:80px;
z-index:1;
}

.p{
 position:absolute;
 top: 0px;
 left: -5px;
 font-weight: bold;
 text-align: center;
 right: -5px;
 bottom: 0px;
 color:#666666;
}

#animB{
 position:relative;
 left:30px;
 top:150px;
}

#corp{
    z-index: 1;
    position:absolute;
	background : url(images/arrondiCorp.png) no-repeat  center top;
	width: 780px;
	height: 667px;
	float: center;
	margin-top:0px;
	vertical-align: top;
	left: 445px;
	top: 200px;
		
}

#partie3{
 Position: Absolute;
 background : url(images/arrondiT.png) no-repeat center top;
 width:200px;
 height: 332px;
 top: 220px;
 left: 1240px;
 
 
 		
}
#partie3 h3 {
    position: absolute;
	left:70px;
	top: -5px;	
}



#partie3 ul {
	position:absolute;
	list-style-type: none;
	top:30px;
	left:2px;
	white-space: normal;
	display: inline;
 
}


#partie3 li {
 padding-left: 0.5%;
 margin: 0px;
 font-size: 11px;
 }