Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

odSen

[HTML/CSS] Affichage incorrect sous IE

Messages recommandés

Bonjour à tous,

Je commence à créer un site pour le club volcan de mon lycée, avec mes quelques notions HTML et CSS.

J'ai donc élaboré un design. Je suis content du résultat, sous firefox ça donne quelque chose de pas trop mal.

Je me suis dis "testons sous IE", et j'ai bien fait car l'affichage n'y est pas du tout correct.

Voyez par vous même : http://perso.wanadoo.fr/2501/test/index.html

 

Savez-vous d'où cela peut-il venir ?

Avez-vous des suggestions ?

 

Je vous fournis mes deux codes :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<title>Bienvenue sur le site du Club Volcans Actifs</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="description" content="Le site du Club Volcans Actifs du Lycée Kastler La Roche sur Yon"/>
	<meta name="keywords" content="club,volcan,actif,kastler,fradin,vidéos,interview,photos,don" />
	<meta name="robots" content="index, follow" />
	<meta name="revisit-after" content="8" />
	<meta name="author" content="Auneau Benoît" />
	<meta name="publisher" content="Club Volcans Actifs" />
	<meta name="identifier-url" content=" <!-- à remplir --> " />
	<meta name="date" content="<!-- à remplir -->" />
	<link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />
<head>
<body>
	<div id="corps">
		<div class="logo">
			<a href="index.html"><img class="no_border" src="images/logo.png" alt="Logo du site" title="Le site du club Volcans Actifs"/></a>
		</div>

		<div class="liens">
			<img src="images/lien.jpg" alt="lien" title="Cliquez pour accéder à cette partie" /><img src="images/lien.jpg" alt="lien" title="Cliquez pour accéder à cette partie" /><img src="images/lien.jpg" alt="lien" title="Cliquez pour accéder à cette partie" /><img src="images/lien.jpg" alt="lien" title="Cliquez pour accéder à cette partie" /><img src="images/lien.jpg" alt="lien" title="Cliquez pour accéder à cette partie" />
		</div>

		<br />
		<br />
		<br />

		<center>
		<div class="bleu">
			<p>Accueil - Index du site</p>
		</div>
		</center>

		<br />

		<div class="texte">

			<div class="orange">
				<p>Titre</p>
			</div>

			<p>
			Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte 
			Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte
			</p>

			<p>
			Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte 
			Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte
			</p>

			<p>
			Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte 
			Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte
			</p>

			<p>
			Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte 
			Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte
			</p>


		<div class="orange">
			<p>Je suis un grand et lonnng titre</p>
		</div>
			<p>
			Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte 
			Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte
			</p>

			<p>
			Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte 
			Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte
			</p>

			<p>
			<a href="http://www.google.fr">Lien</a>
			</p>

			<p>
			<a href="http://www.google.fr">Lien</a>
			</p>

			<p>
			<a href="http://www.google.fr">Lien</a>
			</p>

			<br />
			<br />
			<br />
			<br />

			<div class="pied_de_page">
				<p>
				Club des Volcans Actifs<br />
				Lycée Alfred Kastler<br />
				29 Bd Guitton<br />
				85000 La Roche sur Yon<br /><br />
				Pour tout problème remarqué sur ce site, merci de contacter le
				webmaster à l'adresse suivante :<br /> auneau@wanadoo.frNOSPAM (enlevez le "nospam")
				</p>
			</div>


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

 

/* Design du site */

body
{
background-image: url("images/fond.jpg"); /* Le fond gris clair avec des traits */
}

#corps
{
border: 1px solid black; /* Bordure simple */
width: 800px;
background-color:#fafafa; /* Gris très clair */
margin: auto; /* Centrer le calque */
margin-top: 10px;	 /* Décoller le corps du haut */
margin-bottom: 10px;  /* Décoller le corps du bas */
}

.logo
{
border-bottom: 1px solid black; /* Bordure en bas */
width: 800px;
height: 150px;
}

.texte
{
padding: 30px; /* Décoller un peu le texte */
}

.texte p
{
font-family:"Time New Roman", serif; /* Comic Sans MS en priorité */
font-size:0.9em; /* Taille = 90% */
padding-left: 10px;
text-indent: 30px;
text-align: justify;
}

a,
a:visited
{
color: #1a78cf;
text-decoration: none;	
font-weight: bold;
}

a:hover
{
text-decoration: underline;
}

.orange
{
width: 500px;
height: 22px;
border: 1px solid black;
border-right: none;
background-image: url("images/orange.gif");
background-repeat: repeat-y;	
}

.orange p
{
font-weight: bold;
margin: auto;	
font-size: 0.95em;
	font-family: "Comic Sans MS", "Time New Roman", serif; /* Comic Sans MS en priorité */
}

.texte .orange p
{
text-indent: 0px;
}

.liens
{
border-bottom: 1px solid black; /* Bordure en bas */
width: 800px;
height: 40px;
}

a .no_border
{
border: none;
}

.bleu
{
width: 600px;
height: 22px;
border: 1px solid black;
border-right: none;
background-image: url("images/bleu.gif");
background-repeat: repeat-y;		
}

.bleu p
{
font-weight: bold;
margin: auto;	
font-size: 0.95em;
font-family: "Comic Sans MS", "Time New Roman", serif; /* Comic Sans MS en priorité */
}

.texte .pied_de_page p
{
font-family: serif;
text-align: center;
font-size: 0.8em;
text-indent: 0px;
}

 

Je vous remercie d'avance :P

Modifié par odSen

Partager ce message


Lien à poster
Partager sur d’autres sites

Invité tesgaz

Salut,

 

dans ton css, tu ajoutes ceci en fonction dans .corps :

 

max-width: 800px; /* ajuste l'image en largeur pour IE*/
position:absolute; /* modifier pour IE*/
background-repeat: no-repeat;/* interdit l'image de se repeter en largeur pour IE*/

 

 

IE, c'est le bazar avec les css

Partager ce message


Lien à poster
Partager sur d’autres sites

Salut tesgaz !

Je l'ai rajouté comme ceci mais ça ne fait rien, à part de me coller mon corps sur la gauche :

 

#corps
{
border: 1px solid black; /* Bordure simple */
width: 800px;
background-color:#fafafa; /* Gris très clair */
margin: auto; /* Centrer le calque */
margin-top: 10px;	 /* Décoller le corps du haut */
margin-bottom: 10px;  /* Décoller le corps du bas */
max-width: 800px; /* ajuste l'image en largeur pour IE*/
position:absolute; /* modifier pour IE*/
background-repeat: no-repeat;/* interdit l'image de se repeter en largeur pour IE*/
}

 

C'est bien comme ça ?

 

Peut-être n'avons-nous pas les même problèmes d'affichages (même si c'est improbable), voilà ce que ça donne chez moi :

 

http://perso.wanadoo.fr/2501/prob.JPG

 

Merci

Modifié par odSen

Partager ce message


Lien à poster
Partager sur d’autres sites

je vais peut-être chipoté mais ta page n'est pas entièrement compatible X-Html mais presque 11 pitites erreures.

 

>>Les deux premières erreurs sont dans tes commanteires quand tu utilises les "<" .

 

>> Ton <head> tu ne l'as pas fermé corectement ^^ pittie erreur de frappe tu as oublié le /

 

là déjà ca ne te fait plus qu'une erreur (presque droit au tit logo en bas) :P

 

>> La dernière erreur et l'utilisation de <center> qui n'existe plus en xhtml. A la place tu doit faire ca dans le css.

Dans ton CSS dans .bleu

rajoute

text-align:center;

et tu vires dans ton html les balise <center></center>

et là normalement il devrait être xhtml compatible.

Partager ce message


Lien à poster
Partager sur d’autres sites

Salut lordtoniok !

 

C'est vrai que fermer le <head> c'est pas une si mauvaise idée que ça (foutu clavier !) :P

 

Pour centrer le div class="bleu" j'ai bien essayé par le CSS mais bizarement ça ne fonctionnait pas, j'arrive pas à comprendre pourquoi. Alors j'ai mis des <center> dans le HTML en pensant bien qu'il devait y avoir une autre solution CSS.

EDIT : trouvé, un coup de margin: auto

 

Sinon, toujours ces fichus problèmes d'affichage sous IE.

Modifié par odSen

Partager ce message


Lien à poster
Partager sur d’autres sites

Un grand merci tangui !

margin: 0 dans .orange p et .bleu p résoud le problème des bandeaux-titres.

Reste les problèmes des blancs dans les logo et liens en haut.

Partager ce message


Lien à poster
Partager sur d’autres sites

J'ai trouvé le reste du problème !

Ce grand c*n de IE à pris en compte un alinéa dans le code et à cru que c'était du texte à afficher, d'où le blanc.

 

Je vous remercie tous pour vos conseils : Tesgaz, Lordtoniok et Tangui.

Bonne journée :P

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

  • En ligne récemment   0 membre est en ligne

    Aucun utilisateur enregistré regarde cette page.

×