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:

[HTML/CSS] Affichage incorrect sous IE

odSen

Par odSen
dans Programmation

 Partager

Messages recommandés

odSen Full Patch Member

odSen

Posté(e)
Posté(e) (modifié)

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 /> [email protected] (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
Lien vers le commentaire
Partager sur d’autres sites

Invité tesgaz

Invité tesgaz

Posté(e)
Posté(e)

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

Lien vers le commentaire
Partager sur d’autres sites
odSen Full Patch Member

odSen

Posté(e)
  • Auteur
Posté(e) (modifié)

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
Lien vers le commentaire
Partager sur d’autres sites
lordtoniok Godlike Member

lordtoniok

Posté(e)
Posté(e)

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.

Lien vers le commentaire
Partager sur d’autres sites
odSen Full Patch Member

odSen

Posté(e)
  • Auteur
Posté(e) (modifié)

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
Lien vers le commentaire
Partager sur d’autres sites
odSen Full Patch Member

odSen

Posté(e)
  • Auteur
Posté(e)

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.

Lien vers le commentaire
Partager sur d’autres sites
odSen Full Patch Member

odSen

Posté(e)
  • Auteur
Posté(e)

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

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...