Accessibilité & mise en page

bonjour à tous
ceci est la premiére participation dans ce forum, pour ce moment je réalise une page web accessible et j'ai des petites questions:
1-suite des normes d'accessibilité ,j'ai fait les bloc avec %,mais la problème lorsque j'ai réduit la page tous les bloc va mélanger ,comment je peux structurer la page avec % sans mélangé la contenu ???
2- lorsque je choisis un background pour un bloc dans css ,le bloc n'affiche pas dans IE7 ???

Salut,

On peut voir ta page en ligne ? Au pire ton code (HTML+ CSS complets).

bnojour

/CSS

body
{
margin:auto;
margin-top: 2%;
margin-bottom: 2%;
}
#page
{
padding:1%;
margin-left:7%;
border:0.1em red solid;
height:auto;
width:80%;
}
#header
{
width:100%;

}
#banner
{
background-image: url("images/ban.jpg");
background-position:center;
background-repeat: no-repeat;
border:0.1em yellow solid;
height: 140px;
	
}
.images
{

padding-left:2%;
margin-left:2%;
display:inline;

}
#outil
{
	border:0.1em blue solid;
	background-color:#CC6600;
	margin-bottom:1%;
	
}
#barrebutton
{
	border:0.1em blue solid;
	background-color:#663399 ;
	width:54%;
}
#filar
{
	border:0.1em blue solid;
	background-color:yellow ;
	width:54%;
}
#search
{
border:0.1em blue solid;
background-color:#553322 ;
width:45%;
float:right;
}
.motrech a
{
color:red;
padding-left:2%;
margin-left:3%;
text-decoration:none;
}

#buttonpos
{
margin-left:8px;
margin-top:8px;

width:270px;
height:25px;
background-color:black;
}

#corps
{
float:left;
margin-top:0%;
margin-bottom:1%;
margin-right:17%;
border:0.1em green solid;
width:83%;
color: #B3B3B3;
background-color: #626262;

}
#corps h1
{
   color: #B3B3B3;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
   height: 30px;

   background-image: url("images/titre.png");
   background-repeat: no-repeat;
   
   padding-left: 30px;
   color: #B3B3B3;
   text-align: left;
}

#opération
{
margin-left:170px;
}


.element_menu
{
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   
   border: 2px solid black;
   
   margin-bottom: 20px;
}


/* Quelques effets sur les menus */


.element_menu h3
{    
   color: #B3B3B3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.element_menu ul
{
   list-style-image: url("images/puce.png");
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   padding-bottom:1%;
   margin-bottom:2%;
}

.element_menu a
{
   color: #B3B3B3;
}

.element_menu a:hover
{
   background-color: #B3B3B3;
   color: black;
}
#contenu {
float: left;
width: 83%;
border: 1px solid #000000;
margin-bottom:1%;

}
#menu {
margin-left: 85%;
border: 1px solid #000000;
background: #CCC;
}

.elementmenu
{
padding:1% 1% 1% 1%;
border: 1px solid #000000;
margin:7% 7% 20% 7%;
}
#barremenu
{
height:30px;
background-color:black;
margin-bottom:1%;

}
#menuinterne {
float:left;
width:12%;
margin-left:1%;
margin-right:1%;
margin-top:1%;
margin-bottom:1%;
border: 1px solid #000000;
background: #CCC;
}
#opération
{
padding:1% 1% 1% 1%;
margin-left:15%;
margin-right:1%;
border: 1px solid #000000;
margin-top:1%;
margin-bottom:1%
}
.menu1 { /* boite qui contient le menu (les onglets) */
  border-bottom:solid 2px black ; /* crée le trait noir en-dessous des onglets */
  padding-top:12px ; /* marge extérieur haute */
  padding-bottom:7px;
  } /* marge intérieure basse */
.onglet { /* style des onglets inactifs */
  border:solid 1px black ; /* encadrement */
  margin:0px 0px 5px 0px ; /* marge extérieure */
  padding:3px 3px 7px 3px;/* marge intérieure */
    }
a.onglet { /* style des liens se trouvant dans un onglet inactif */
  background-color:#E7E4E4 ; /* le fond de l'onglet est gris */
  text-decoration:none;/* les liens ne sont pas soulignés */	
  }
  .onglet-actif { /* style de l'onglet de la page active */
   border:solid 2px black ; /* l'encadrement est porté à 2 pixels */
   border-bottom:solid 3px white ; /* le trait inférieur est effacé */
   margin:0px 0px 0px 0px ; /* marges extérieures */ 
   padding:3px 3px 7px 3px ;  /* marges intérieures */
   background-color:white;
   } /* le fond de l'onglet actif est blanc*/
#footer
{
height:30px;
background-color:#332355;
margin-bottom:1%;
padding-left:45%;
clear:both;
}

/////////code html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Ceremh</title>

    <link rel="stylesheet" type="text/css" media="screen" href="last.css" />
</head>
<body>
   <div id="page">
		<div id="header">
			<div id="banner"></div>
				<div id="outil"> 
				<div id="search" >Recherche : <input name="" type="text" /> <img src="images/butrech.gif" alt="" /><br>
				<span class="motrech"><a href="auto">cercle volant</a> <a href="acc.html">r&egrave;glementation</a>  <a href="projet.html">adaptation conduite</a> <a href="projet.html">romps</a></span>
				</div>
			   <div id="barrebutton" >
				
						
						<a class="images" href="liste.html"><img src="images/moin.jpg" alt="" /></a>
						<a class="images" href="utiliser.html"><img src="images/plus.jpg" alt="" /></a>
						<a class="images" href="licence.html"><img src="images/lum.jpg" alt="" /></a>
						<a class="images" href="credits.html"><img src="images/noir.jpg" alt="" /></a>
				
					
				</div>
				<div id="filar" >
				<a href="last.html">Accueil</a>
				</div>
				
			</div>
		</div>	
		
		<div id="contenu">
				
				<div id="menuinterne">
					<div class="elementmenu">
						<ul>
						<li>lien 1</li>
						<li>lien 2</li>
						<li>lien 3</li>
						</ul>
					</div>
					<div class="elementmenu">
						<ul>
						<li>lien 1</li>
						<li>lien 2</li>
						<li>lien 3</li>
						</ul>
					</div>
					<div class="elementmenu">
						<ul>
						<li>lien 1</li>
						<li>lien 2</li>
						<li>lien 3</li>
						</ul>
					</div>
				</div>

				<div id="opération">
			
						<div class="menu1"> <!-- d?but de la boite contenant les onglets -->
						<span class="onglet-actif" >ACCEUIL</span> <!-- onglet inactif -->
						<a class="onglet" href="">Th&eacute;matique</a> <!-- onglet ACTIF -->
						<a class="onglet" href="">Projet</a> <!-- onglet inactif -->
						<a class="onglet" href="">Onglets 3</a> <!-- onglet inactif -->
						</div>
						<div id="barremenu"></div>
							<h1>Mon super site</h1>
			 
									<p>
										Bienvenue sur mon super site !<br />
										Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site  [lol]
									</p>
			 
									<h2>A qui s'adresse ce site ?</h2>    
									<p>
										A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
										Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
									</p>
			   
									<h2>L'auteur</h2>    
									<p>
										L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
										Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
										Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
									</p>
									<h2>L'auteur</h2>    
									<p>
										L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
										Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
										Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
									</p>
				</div>
		</div>
			<div id="menu">
				<div class="elementmenu">
					<ul>
						<li>lien 1</li>
						<li>lien 2</li>
						<li>lien 3</li>
					</ul>
				</div>
				<div class="elementmenu">
					<ul>
						<li>lien 1</li>
						<li>lien 2</li>
						<li>lien 3</li>
						</ul>
				</div>
				<div class="elementmenu">
					<ul>
						<li>lien 1</li>
						<li>lien 2</li>
						<li>lien 3</li>
					</ul>
				</div>
			</div>
			<div id="footer">
			plan | contact
			</div>
		
		</div>

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

******************************************************************
merci
Modifié par eagle83 (22 Jun 2009 - 09:41)

a écrit :
lorsque j'ai réduit la page tous les bloc va mélanger

Je pense que tu fais référence aux ul de tes sidebars dont le texte sort du cadre. Tu as plusieurs solutions :
- déjà spécifier aussi le padding/margin de tes ul/li en pourcents de manière à ce qu'ils se réduisent en même temps que le conteneur. Ça te fera gagner quelques pixels.
- ensuite tu pourrais soit utiliser min-width pour spécifier des largeurs minimales (en dessous desquelles tu ne veux pas descendre, donc)
- soit laisser tes blocs se compresser comme actuellement mais les mettre en overflow:hidden pour que tout ce qui dépasse soit masqué (mais pour un site que tu veux accessible, c'est pas vraiment idéal)

a écrit :
lorsque je choisis un background pour un bloc dans css ,le bloc n'affiche pas dans IE7

- parles-tu d'un background-color ou d'un background-image ?
- ce problème n'apparaît-il que dans IE7 ? As-tu testé d'autres navigateurs ?

En passant, tu pourrais éditer ton message ci-dessus et placer tes codes entre des balises "[code]...[/code]", ce sera plus lisible pour ceux qui veulent t'aider.

Hello eagle83 et bienvenue ,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace après le crochet ouvrant).



Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.

Bonne continuation

bonjour
je te remercie marcv pour votre réponse
pour le background c'est background image et n'apparait pas au IE7 et netscape par contre il apparait à mozilla et opéra