Problèmes IE/taille écran

Question

maud01

29 Jan 2015 à 08:23

Bonjour à tous,
j’ai deux problèmes: premièrement j’ai beau mettre width : 100% pour le header et le footer, quand je passe sur un écran plus large, ils ne prennent pas toute la largeur. D’autre part je viens de finir ma page, qui fonctionne très bien sur Mozilla et quand je passe sur Explorer, je n'ai pas de problèmes avec les versions 11 et 10 mais ça commence à devenir n'importe quoi sous IE9 (à ce niveau c'est juste un problème de mise en page complètement déstructurée). C'est la première fois que je code et je dois avoir quelques erreurs. J'ai pas mal cherché et j'ai vu sur des forums qu'il fallait ajouter:


<!--[if IE]>
<script src= "http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Mais cela n'a apparemment aucun effet. Est-ce que quelqu'un aurait une solution? Merci énormément pour votre aide et bonne journée!


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<link rel= "stylesheet" href="style.css"/>
			
		<!--[if IE]>
		<script src= "http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->	

		<title> GINGKO CONSEILS </title>
	</head>
	
<body>
		<header>
				<img src= "Images/banniere.png" alt="bannière de présentation" id="banniere"/>			
	
				<img src= " Images/bannierelogo.png" alt="logo bannière" id="bannierelogo"/>
				
				<a href="#" id="entete"> MON GINKGO </br> Accès clients </a>
				
				<nav>
				<ul> 
					<li> <a href="#"> <img src="Images/accueil.png" alt="accueil"/><br/>Accueil</a> </li>
					
					<li> <a href="#"> <img src="Images/présentation.png" alt="présentation"/> <br/>Présentation</a> </li>	
						
					<li> <a href="#"> <img src="Images/métiers.png" alt="métiers"/><br/>Métiers </a> </li>	
										
					<li> <a href="#"> <img src="Images/équipe.png" alt="équipe"/><br/>équipe </a> </li>	
							 					
					<li> <a href="#"> <img src="Images/débats.png" alt="débats"/><br/>Débats</a> </li>
					
					<li> <a href="#"> <img src="Images/information.png" alt="information"/><br/>Informations </a> </li>
					
				</ul>
				</nav>
		</header>

		<section>
		
				<table>
				<tr>
				<td>
				<a href="#"><img src= "Images/conseilachats1.png" alt="photo conseil achats" id="achats">				
				<div id="legendeachats"> CONSEIL ACHATS </div></a>
				</td>
				
				<td>
				<a href="#"><img src= "Images/optimisation.png" alt="photo optimisation des coûts"/>				
				<div id="legendeoptimisation"> optimisation des coûts </div></a>
				</td>
				</tr>
				
				<tr>
				<td>
				<a href="#"><img src= "Images/expertise.png" alt="photo expertise santé"/>		
				<div id="legendeexpertise"> expertise santé </div></a>
				</td>
				
				<td>
				<a href="#"><img src= "Images/formation.png" alt="photo formation" id="formation"/>
				<div id="legendeformation"> formation sur mesure </div></a>
				</td>
				</tr>
				</table>
				
				<aside>
				<img src="Images/borduregauche.png" alt="coin de photo" id="borduregauche">
				<p> <span style="font-weight:bold;">Bienvenue chez Ginkgo Conseils</span> </p> 
				<p>Nous sommes un <span style="font-weight:bold;"> cabinet de conseil spécialisé en Achats.</span> 
				<p>Notre ambition est illustrée dans ce slogan: <span style="font-weight:bold;"> "améliorer votre efficacité durablement"</span>,
				ce qui résume notre volonté, au-delà des actions rapides que nous savons mener quand c'est nécessaire, de contribuer dans la durée en apportant des solutions pérennes.		
				</p>
				 <br> <a href="#"> >> En savoir plus </a>
				</aside>
		</section>

		
		<footer>
			 <a href="#">Plan du site - </a>
			 <a href="#">Mentions légales - </a>
			 <a href="#">Une réalisation Kiks initiative </a>
		</footer>
				
	</body>
	</html>



html, body {
height: 100%;
margin: 0;
padding: 0;
}

body {
min-height: 100%;
background-color: rgb(226,188,116);
width: 1325px;
height: 890px;
padding: 0 10px;
margin: 0 auto;
}

a img
{
border: none;
}

/* Header */
header
{
height:309px;
width: 1349px;
min-width:100%;
background-color: rgb(200,173,127);
box-shadow:  -1px 2px 10px 2px rgba(0, 0, 0, 0.3) inset;
margin-left: -13px;
margin-top: -13px;
border-radius:0px 0px 30px 30px;
}

header>a
{
color: white;
font-family: arial;
text-decoration: none;
position: absolute;
top: 10px;
right: 110px;
}

header>a:hover
{
color: grey;
}

#banniere
{
height:190px;
width: 100%;
}

#bannierelogo
{
margin-top: -5px;
border-radius:0px 0px 30px 30px;
}

nav
{
display:inline-block;
position: absolute;
top: 180px;
width:700px;
height: 120px;
text-transform:uppercase;
}

nav a
{
text-decoration: none;
color:white;
font-family: Arial;
}

nav a:hover
{
color: white;
text-decoration:none;
}

li 
 {
display: inline-block;
text-align: center;
padding: 13px;
background-color:rgb(128,64,0);
border-radius: 20px;
margin-left: -5px;
box-shadow: 2px 2px 1px black,
 -1px 2px 10px 3px rgba(0, 0, 0, 0.3) inset;
}
 
 /* Section */
section
{
width: 1230px;
height: 580px;
margin-left: 50px;
background-color: rgb(224,205,169);
box-shadow: 2px 2px 1px black,
 -1px 2px 10px 2px rgba(0, 0, 0, 0.3) inset;
}
	/*tableau*/
table
{
margin-left:50px;
display:inline-block;
height: 560px;
width: 750px;
}

td
{
margin-top: 50px;
padding-right: 80px;
padding-left: 50px;
}

section a
{
text-decoration: none;
}

#achats
{
margin-top:20px;
}

#legendeachats
{
margin-top:-7px;
margin-left:1px;
background-color: rgb(252,210,28);
width: 175px;
font-family: Arial;
font-size: 13px;
font-weight: bold;
text-align: center;
box-shadow: 2px 2px 1px black,
 -1px 2px 10px 2px rgba(0, 0, 0, 0.3) inset;
color: rgb(96,96,96);
border-radius:0px 0px 5px 5px;
padding:10px;
}

#legendeoptimisation
{
margin-top:-7px;
margin-left:1px;
background-color: rgb(58,157,35);
width: 175px;
font-family: Arial;
font-size: 13px;
font-weight: bold;
text-align: center;
box-shadow: 2px 2px 1px black,
 -1px 2px 10px 3px rgba(0, 0, 0, 0.3) inset;
color: white;
border-radius:0px 0px 5px 5px;
text-transform:uppercase;
padding:10px;
}

#legendeexpertise
{
margin-top: -7px;
margin-left:3px;
background-color: rgb(58,157,35);
width: 175px;
font-family: Arial;
font-size: 13px;
font-weight: bold;
text-align: center;
box-shadow: 2px 2px 1px black,
 -1px 2px 10px 3px rgba(0, 0, 0, 0.3) inset;
color: white;
border-radius:0px 0px 5px 5px;
text-transform:uppercase;
padding:10px;
}

#formation
{
margin-top: 10px;
}

#legendeformation
{
margin-top: -8px;
margin-left:4px;
background-color: rgb(252,210,28);
width: 175px;
font-family: Arial;
font-size: 13px;
font-weight: bold;
text-align: center;
box-shadow: 2px 2px 1px black,
 -1px 2px 10px 2px rgba(0, 0, 0, 0.3) inset;
color: rgb(96,96,96);
border-radius:0px 0px 5px 5px;
text-transform:uppercase;
padding:10px;
}
	/*article*/

#borduregauche
{
position: absolute;
left: -15px;
top: -10px;
}
#borduredroite
{
position: absolute;
right: -10px;
bottom: -10px;
border: 3px solid red;
}
aside
{
display: inline-block;
position:relative;
left:20px;
bottom:100px;
height: 400px;
width:350px;
text-align: justify;
line-height: 30px;
font-family: Arial;
padding: 15px;
background-image: url("Images/borduredroite.png");
background-repeat: no-repeat;
background-position: bottom right;
}

aside a
{
font-style:italic;
text-decoration:none;
font-size:15px;
margin-left: 220px;
padding: 5px;
color: black;
}

aside a:visited
{
color: black;
}

aside a:hover
{
background-color: rgb(253,238,0);
color: white;
text-decoration:none;
}

/* footer */

footer
{
position: absolute;
width: 1349px;
min-width:100%;
background-color:rgb(128,64,0);
font-family: Arial;
height: 50px;
text-align: center;
margin-left: -13px;
box-shadow: -1px 2px 10px 3px rgba(0, 0, 0, 0.3) inset;
}

footer a
{
display: inline-block;
color: rgb(253,238,0);
text-decoration:none;
position: relative;
top: 10px;
}

footer a:hover
{
color: white;
text-decoration:none;
}

Felipe

Administrateur

29 Jan 2015 à 10:15

Bonjour et bienvenue, Smiley smile

je n'ai pas regardé la page ni le code mais le script que tu essaies d'insérer ne devrait concerner qu'IE8 : html5shiv a pour but de faire comprendre ce que sont ces nouveaux éléments HTML5 qui n'existaient pas à l'époque d'IE8 et avant. IE9 comprend parfaitement ce que c'est. Et IE10 et plus ne prennent plus en compte les commentaires conditionnels donc le script ne s'y exécutera pas, OK pour eux.
Il te faudrait donc cibler IE8 et moins http://www.alsacreations.com/astuce/lire/48-commentaires-conditionnels.html (a priori ça ne changera rien à ton problème, mais déjà méfie-toi des autres infos là où tu as trouvé ce conseil)

maud01

31 Jan 2015 à 09:53

Bonjour,

merci beaucoup Smiley smile

je vais donc me renseigner dans cette direction. Quelqu'un aurait-il une solution pour le reste?

Sujet clos

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

Problèmes IE/taille écran