Aller au contenu

Doctype problématique

Timeuh

Par Timeuh
dans Programmation et Lignes de code

Messages recommandés

Timeuh Nouveau

Timeuh

Posté(e)
Posté(e)

Kooki, j'espère poster au bon endroit bien comme il faut.

Je suis en train de bricoler un site et j'aurais besoin de votre aide pour résoudre un petit problème :

Voici l'ébauche du site telle qu'elle devrait s'afficher :

ecdb5071681bc4b66e827125642e3t.jpg

Mais j'ai voulu rajouter un doctype xhtml strict et du coup, sous IE6 ça marche mais sous firefox la mise en page est déformée. Image :

be2c2b6d907c1d0a2608647ac3d74t.jpg

Je ne vois vraiment pas d'où ça peut venir et ça me frrrustre.

Voici le code html :

<?xml version="1.0" encoding="utf-8"?>
<!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>Ultrasons et Mesures de Distances - Accueil </title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>

<body>

<div id="frame">

<div id="top">
<div class="TITLE">Ultrasons et Mesures de Distances</div>
</div>

<div id="left">
<a href="lien">I. Sons, ultrasons et effet Doppler</a><br/>
	<div class="menu">
	A. Definition d'un son<br/>
	B. Definition d'un ultrason<br/>
	C. Definition de l'effet Doppler<br/>
	</div>
<a href="lien">II. Mesures de distances</a><br/>
	<div class="menu">
	A. Echolocation<br/>
		<div class="menu">
		1. Principe<br/>
		2. Exemples<br/>
		</div>
	B. Applications humaines<br/>
		<div class="menu">
		1. Sonar<br/>
		2. Echographie<br/>
		</div>
	</div>
<a href="lien">Conclusion</a>
</div>

<div id="right">
Contenu
</div>

</div>

</body>

</html>

Et le css :

<!--
BODY {
background-color:#003A3A;
font-family:"palatino linotype","Times New Roman"; 
color:#90CCCC;
font-size:100%;
}

#FRAME {
width:1024px;
}

#TOP {
background-image:url("scanlines.jpg");
height:100px;
border:3px solid #005050;
text-align:center;
}

#LEFT {
float:left;
border-right:3px solid #005050;
padding:10px;
width:180px !important;
width:200px;
font-size:0.8em;
}

#RIGHT {
border:1px solid black;
padding:10px;
text-align:justify;
}

.TITLE {
font-size:1.5em;
}

.MENU {
margin-left:1em;
}

.TEXT {
font-size:0.8em;
}



a:link{Text-Decoration:None; color:#FFFFFF; font-weight:bold;}
a:visited{Text-Decoration:None; color:#FFFFFF; font-weight:bold;}
a:hover{Text-Decoration:None; color:#90CCCC;font-weight:bold;}
-->

D'ailleurs, est-ce normal que le bloc de droite empiète sur celui de gauche ? Son contenu est où il faut, mais la marge à gauche n'est pas visible à moins de mettre un padding-left de plus de 200px.

Merci d'avance.

EDIT : je galère avec les images, du coup j'ai juste mis les liens ^^

Lien vers le commentaire
Partager sur d’autres sites
Yangzebul Collaborateur

Yangzebul

Posté(e)
Posté(e)

Enlève ton xml prolog, car il fait passer IE en mode quirks.

De toute façon le xml prolog n'est obligatoire que si ton document est envoyé en xml : mimetype "application/xhtml+xml"

De plus pour info ce mimetype n'est pas supporté non plus par firefox (Mais ne le répetez pas trop fort, les fanboy firefox n'aiment pas trop qu'on ose dire que leur logiciel n'est pas parfait. Ils risquent de fondre sur vous avec tous les sarcasmes qu'ils pourraient trouver).

Sinon petit pinaillage lang="fr" fait double emploi avec xml:lang="fr" qui est la nouvelle syntaxe recommandée. Mais la double déclaration est toujours tolérée.

<!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">

@nemesis93_75

Sinon pour les noms de classes et d'ID CSS est case sensitive. Donc la plupart des gens préfèrent travailler uniquement en bas de casse pour éviter la confusion et rester cohérent avec la syntaxe xHTML. Mais si tu as ta nomenclature propre tu peux parfaitement travailler en haut de casse ou en camel case. Ca ne pose aucun problème.

PS : ton balisage n'est pas sémantique, pense à utiliser des <hx> et des <ol> et pour ta page tu n'aurai pas un lien plutôt ? Car comme ça rien ne me choque au premier abord.

Lien vers le commentaire
Partager sur d’autres sites
nemesis93_75

nemesis93_75

Posté(e)
Posté(e)
Enlève ton xml prolog, car il fait passer IE en mode quirks.

De toute façon le xml prolog n'est obligatoire que si ton document est envoyé en xml : mimetype "application/xhtml+xml"

De plus pour info ce mimetype n'est pas supporté non plus par firefox (Mais ne le répetez pas trop fort, les fanboy firefox n'aiment pas trop qu'on ose dire que leur logiciel n'est pas parfait. Ils risquent de fondre sur vous avec tous les sarcasmes qu'ils pourraient trouver).

Sinon petit pinaillage lang="fr" fait double emploi avec xml:lang="fr" qui est la nouvelle syntaxe recommandée. Mais la double déclaration est toujours tolérée.

<!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">

@nemesis93_75

Sinon pour les noms de classes et d'ID CSS est case sensitive. Donc la plupart des gens préfèrent travailler uniquement en bas de casse pour éviter la confusion et rester cohérent avec la syntaxe xHTML. Mais si tu as ta nomenclature propre tu peux parfaitement travailler en haut de casse ou en camel case. Ca ne pose aucun problème.

PS : ton balisage n'est pas sémantique, pense à utiliser des <hx> et des <ol> et pour ta page tu n'aurai pas un lien plutôt ? Car comme ça rien ne me choque au premier abord.

je suis un noob :/

pour le moment :reflechis:

j'espere m'améliorer merci de ton explication Yangzebul

Lien vers le commentaire
Partager sur d’autres sites

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

Aller sur la liste des sujets
×
×
  • Créer...