18081 sujets

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

Quelle DTD choisir ???

Bonjour,

suite à mes péripeties avec les css qui tournent pas comme je le souhaiterai sous IE, j'ai finalement utilisé une iframe comme cela m'a été conseillé...

Non content de ne rien comprendre à tout ce schimilimili bli blick ! Je suis allé faire un tour sur les tutoriels en lien... et.... eh ben vive l'harmonisation via le w3c, j'y comprend encore moins qu'avant Smiley sweatdrop Smiley sweatdrop

sur cette page

Seule cette DTD est conseillée:
a écrit :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Bon, il est brièvement question des DTD sous frame, mais quand on va sur le site open web, on s'aperçoit que y a 36 DTD différentes... comment alors savoir pour quelle DTD opter ?
Lassé de ne pas m'y retrouver j'ai pris celle du html 4 transitional mais sans conviction aucune...
J'ai appris html sur le tas, puis un jour j'ai appris que je devais écrire mes balises 
< /br>
au lieu de 
<br>
, bref, je patauge un peu... donc je suis preneur de toute explication me permettant d'aborder plus sereinement le monde des CSS.

Enfin, juste une remarque, toujours concernant la page citée en lien plus haut... en fait, dans les Astuce de conception, je me demande s'il n'y a pas une erreur dans l'exemple:

a écrit :
et je les remplis :

<p>Je vous préviens tout de suite, c'est <p>


ça devrait pas être un 
</p>
à la fin ?

Merci d'avance pour vos réponses Smiley cligne

aiglo qui attend de savoir quelle DTD il va devoir utiliser Smiley lol

PS: j'ai failli oublier, toujours dans le tuto, il est écrit:

a écrit :

ensuite, vous devez déclarer l'espace de noms XML (XMLNS) :

<html xmlns="http://www.w3.org/1999/xhtml">



Bon, alors moi, je veux bien, mais pourquoi faire ?
Modifié par aiglobulles (27 Jul 2005 - 21:06)
C'est <br /> et non pas < /br>.
...de même pour <img ... /> ou <hr /> par exemple.

w3schools.com : The <!DOCTYPE> tag
a écrit :
XHTML Frameset DTD
Use this DTD when you want to use frames!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
ben ouais mais alors autant se contenter de celle là 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


de manière à ce que le site soit aussi visible que possible sur le max de navigateurs possible...
C'est bizarre tout de marre, on parle d'harmonisation, mais y a 36 DTD différentes...
aiglobulles a écrit :
Bon, il est brièvement question des DTD sous frame, mais quand on va sur le site open web, on s'aperçoit que y a 36 DTD différentes... comment alors savoir pour quelle DTD opter ?


Pour un jeu de <frame> dans un <frameset> :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


Pour un simple <iframe> :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


aiglobulles a écrit :

puis un jour j'ai appris que je devais écrire mes balises 
< /br>
au lieu de 
<br>


Corrigé ci-dessus : <br />

aiglobulles a écrit :

Enfin, juste une remarque, toujours concernant la page citée en lien plus haut... en fait, dans les Astuce de conception, je me demande s'il n'y a pas une erreur dans l'exemple:

et je les remplis :

<p>Je vous préviens tout de suite, c'est <p>


ça devrait pas être un 
</p>
à la fin ?


Si. Mais c'est à l'auteur du tutoriel qu'il faut adresser cette typo, pour qu'il puisse la corriger.
Re bonsoir,

bon, ben je suis dsl de vous contredire, mais depuis deux heures je fais des tests sur la page suivante:

et sitôt que j'utilise un autre doctype que:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


Le site s'affiche complètement de travers. J'ai testé tous les DTD xhtml et html4 et chacun m'affiche un bug d'affichage à savoir l'iframe qui s'auto redimensionne à env 200px de haut au lieu de prendre les 99% de la hauteur du tableau dans laquelle elle se trouve...

Il en va de même pour la page html contenue dans l'iframe, si je n'utilise pas le DTD html 4.0 mon site ne s'affiche pas correctement...

Pour information, j'utilise SPIP et je travaille actuellement sur des squelettes de mise en page...

Si vous avez des explications à fournir pour expliquer ce problème, je suis preneur car sans vouloir être méchant, j'ai comme l'impression que les DTD ne sont pas très au point Smiley lol
Ce qui n'est pas au point, en l'occurence, c'est le code de cette page Smiley cligne , comme l'indique clairement le validateur destiné à cet usage : http://validator.w3.org/check?uri=http://www.solunat.com/

En effet, ce code mêle des syntaxes XHTML et HTML, d'une manière qui ne peut correspondre à aucune DTD. (Une DTD étant l'ensemble des règles d'un code, pour faire bref).

Il s'agit donc de ce que l'on appelle communément une "soupe de tags". Les navigateurs modernes ne peuvent en effet la traiter correctement s'ils adoptent le mode de rendu correspondant à un code valide. Ils n'y parviennent qu'en adoptant un autre mode de rendu (qu'on appelle Quirks), destiné à cet usage.

Comment décident-ils de passer d'un mode à l'autre ? Tout simplement en regardant la DTD : une DTD incomplète (comme celle qui va bien pour ce site) les fait basculer en mode Quirks.

Autrement-dit :
- si ce code n'est pas corrigé : utiliser la DTD HTML 4.0 Transitional sous la forme où tu l'as citée ci-dessus. Ou plus simplement : ne pas mettre de DTD, ce qui reviendra exactement au même.
- ou alors, corriger ce code, le réécrire selon la DTD XHTML1.0 Strict, ou XHTML1.0 Transitional, etc. et mettre la DTD correspondante.
Modifié par Laurent Denis (27 Jul 2005 - 23:57)
Re bonsoir,

bon, j'ai essayé de nettoyer mon code au possible, y a pas mal d'erreurs qui n'apparaissent plus... au passage ma page ne s'affiche plus correctement..
Dans les erreurs qu'il trouve, à présent il m'indique que la balise BODY n'est pas placée au bon endroit, il butte aussi sur les fermeture de lignes ou de colonnes des tableaux...

voici mon code source:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Date de création: 26/07/2005 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-script-type" content="text/javascript" />
<meta http-equiv="Content-style-type" content="text/css" />
<title>OMEGA KRILL: Les Solutions Naturelles pour votre bien être</title>
<meta name="description" content="OMEGA KRILL: Conseil et vente de produits naturels pour votre bien être" />
<meta name="keywords" content="nutrakrill, nutramammo, nutragenesis, santé, naturel, produits, produit, nutraKrill, krill, omega, complément alimentaire, stress, compléments alimentaires, anti-oxydant, protéines, huile de krill, polaire40, protéines de krill, huiles de krill, ensembles nutraKrill, complément nutritionnel, omega 3, omega 3 6 9, NSI, Neptune, système cardiovasculaire, système immunitaire, cholesterol,depression, syndrôme prémenstruel, bien être" />
<meta name="author" content="aiglobulles" />
<meta name="generator" content="WebExpert 5" />
<link rel="stylesheet" type="text/css" href="Squelettes/Css/Ns.css" />
<!--[if IE]> 
<LINK rel="stylesheet" type="text/css" href="Squelettes/Css/Iex.css">
<![endif]-->
</head>
<body>
<!-- positionnement des graphs -->
<div class="header_left">
</div>
<div class="header_center">
</div>
<div class="header_right">
</div>
<div class="menu">
</div>
<!-- fin des graphs -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>

<td width="100%" height="130" valign="top">
</td>

</tr>
</table>

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="130" height="100%">
<INCLURE(menu.php3)>
</td>
<td width="*" height="100%" align="right">
<iframe src="accueil.php3?id_rubrique=1" name="frame" width="100%" height="100%" frameborder="0">
</td>
</tr>
</table>

</body>
</html>


les balise "INCLURE" sont du code SPIP permettant d'inclure d'autres parties de pages html
Même si j'ai tendant à râler, j'aimerai tt de même que le site réponde aux standards et soient à peu près corrects donc toutes vos explications sont bonnes à prendre, merci d'avance

aiglobulles
Modifié par aiglobulles (28 Jul 2005 - 00:48)
Comme indiqué précédemment, pour un simple <iframe>, la DTD frameset n'est pas utile.

Donc, deux petites dernières corrections :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


et 

<iframe src="accueil.php3?id_rubrique=1" name="frame" width="100%" height="100%" 
frameborder="0">[b]</iframe>[/b]


(fermer l'élément <iframe>)
DTD modifiée + iframe fermée = page qui ne fonctionne plus:

Y a plus d'iframe qui se charge sous IE et elle n'est plus aux bonnes dimensions sous firefox et pourtant, je viens de re-vérifier, la page est conforme au w3c...
Modifié par aiglobulles (28 Jul 2005 - 17:00)
Donne une hauteur en pixels et non en % à ton iframe.

(L'étape suivante étant en fait de remplacer le tableau de présentation par un positionnement CSS. Mais là, je sens que tu ne vas pas être content Smiley cligne )
Modifié par Laurent Denis (28 Jul 2005 - 18:11)
Attention ! Tu utilises quelle version de spip ?

La dernière, 1.8 génère du xhtml, ci-dessous mon doctype :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


La version précédente génère du html, le bon doctype dans ce cas est le suivant :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


Les "includes" ne sont pas générés par spip, c'est toi qui décide de les utiliser dans tes squelettes...

Je relis l'échange pour voir si je peux complèter Smiley cligne
Modifié par dominique (28 Jul 2005 - 18:42)
Laurent,

si j'indique une valeur en pixel à mon iframe, alors la taille de celle ci seraabsolu, hors moi, je veux que sa hauteur varie en fonction de la résolution de l'écran de mes visiteurs, qu'ils soient en 800x600 ou +.
Donc est-il vraiment utile de s'imposer les normes du w3c alors que dans mon cas elles rendent mon site moins accessible ?
L'utilisation des CSS permettrait-elle d'obtenir le résultat que je veux tt en étant en accord avec w3c ? Sinon existe t-il un moyen de le faire ? Car s'il n'en existe pas, alors c'est pas la peine que je bloque la dessus inutilement... Smiley sweatdrop


Domi,

j'utilise la dernière version de SPIP, mais j'ai totalement modifié la page d'accueil.
Enfin, quand je parlais des includes, je disais qu'ils sont générés pas SPIP car j'écris <INCLURE(squelette.php3)> hors si j'me trompe pas, ça c'est du langage spip qui va ensuite être traduit en php....

Bon, je sais que k'utilise pas forcément les bons termes donc m'en veuillez pas Smiley cligne

En tous cas, merci d'essayer de m'aider Smiley cligne
aiglobulles a écrit :
si j'indique une valeur en pixel à mon iframe, alors la taille de celle ci seraabsolu, hors moi, je veux que sa hauteur varie en fonction de la résolution de l'écran de mes visiteurs, qu'ils soient en 800x600 ou +.


A quoi sert cet iframe, exactement ? S'il ne s'agit pas de définir une zone scrollable de hauteur fixe, j'avoue que son utilité m'échappe Smiley cligne


aiglobulles a écrit :

Donc est-il vraiment utile de s'imposer les normes du w3c alors que dans mon cas elles rendent mon site moins accessible ?


Les normes du W3C ne rendent pas ton site moins accessible. C'est la dificulté à définir et à choisir une structure qui convient à ce que tu veux faire, qui te pose un problème, ainsi que le fait d'utiliser, de manière "standard" ou non, des techniques plus ou moins bien maîtrisées... Mais avec Dominique en renfort, nous allons bien y arriver, je pense Smiley cligne
Alors ! Si on essayait de cibler ce que tu veux faire avec exactitude, ce serait peut être plus facile.

En fait, tu veux que le site occupe, tout l'espace de la fenêtre du navigateur, aussi bien en hauteur qu'en largeur, c'est ça ?
En fait, j'ai un problème réccurent pour mes mises en page.
Je pars d'un exemple simple:

Une bannière de hauteur fixe, par exemple 120px, centrée en haut de page.
Un footer de hauteur fixe, par exemple 70px, centrée, mais en bas de page.

Ces deux élements doivent toujours être visibles à l'écran. Ils doivent être posés de manière fixe.
Un troisième élément, "frame", celui qui contiendra les articles, voit sa hauteur remmplir l'espace entre la bannière et le footer... quand le contenu du frame dépasse la hauteur de son conteneur, alors celui ci affiche une scroll.

L'exemple en lien fonctionne très bien sous firefox, mais pas sous IE. Il en est de même pour ce site ou encore celui ci.

En fait, sans DTD et en utilisant une iframe, ça fonctionne bien, mais j'aurai aimé me passer d'iframe et ne faire mes pages qu'en css. Sous firefox, tout est ok car il interprète correctement les valeus verticales, mais sous IE, je n'y arrive pas.

Voilà, je pense avoir assez bien résumer la chose... j'ai plusieurs fois essayé de trouver une solution, plusieurs fois je me suis fait taper sur les doigts car mes sites n'étaient pas conformes au w3c, mais n'ayant jamais eu de solution pour mon pb... j'ai fait avec les moyens du bord Smiley biggol

Pis si vous vous demandez pkoi je veux faire cela ? Eh bien c'est simplement pour changer des sites que l'on voit d'habitude... et aussi patceque ça me plait Smiley cligne ni plus ni moins

@u plaisir de lire vos réponses

aiglobulles
Alors les cracks ? On bulle ? Smiley lol Smiley lol Smiley lol
J'avais juste envie d'jouer à l'insolent avant d'aller prendre l'air Smiley cligne
Bon, j'offre un verre à qui me résoud mon problème Smiley cligne pendant c'temps là, moi, j'vais jouer au billard

@++..................... aiglobulles Smiley lol
Salut

Je suis pas un crack, je sais pas si ca correspond vraiment a tes attentes, mais en partant de ce modèle la :
http://css.alsacreations.com/modeles/modele12.htm
(HS : d'ailleur j'ai vu quelque petite chose dans le code que je n'ai pas vraiment saisi je repasserai a l'occase poser 2 ou 3 questions Smiley smile )

Tu peux faire ca (je mets tout ca risque de faire long):
CSS :

HTML {
	WIDTH: 100%; HEIGHT: 100%
}
BODY {
	WIDTH: 100%; HEIGHT: 100%
}
BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 0.8em; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; 
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #fff
}
.conteneur {
	WIDTH: 100%; POSITION: absolute; HEIGHT: 100%; BACKGROUND-COLOR: #99cc99
}
.header {
	HEIGHT: 10%; BACKGROUND-COLOR: #99cccc
}
.menu {
	LEFT: 0px; WIDTH: 150px; POSITION: absolute; HEIGHT: 80%; BACKGROUND-COLOR: #ccccff
}
.frame {
	MARGIN-LEFT: 150px; OVERFLOW: auto; WIDTH: auto; HEIGHT: 80%; BACKGROUND-COLOR: #9999cc
}
.footer {
	HEIGHT: 10%; BACKGROUND-COLOR: #99cccc
}
P {
	MARGIN: 0px 0px 10px
}
.menugauche {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.menugauche LI {
	MARGIN-BOTTOM: 5px
}
.menugauche A {
	MARGIN: 0px 2px; COLOR: #000000; TEXT-DECORATION: underline
}
.menugauche A:hover {
	TEXT-DECORATION: none
}

HTML :

<BODY>
<DIV class=conteneur>
<DIV class=header>contenu du header <A 
href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous 
les modèles)</A> </DIV>
<DIV class=menu>
<P>menu gauche de largeur fixe : 150px</P>
<UL class=menugauche>
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 1</A> 
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 2</A> 
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 3</A> 
  <LI><A href="http://css.alsacreations.com/modeles/">Menu 4</A> 
  <LI><A href="http://css.alsacreations.com/modeles/">ect, ect, ... </A>
  </LI></UL></DIV>
<DIV class=frame>
<P>partie "frame" scrollable </P>
<P>partie "frame" scrollable </P>
<P>partie "frame" scrollable </P>
<p>ect ect .....................</p>
DIV>
<DIV class=footer>contenu du footer </DIV></DIV></BODY></HTML>


Par contre tout est exprimé en pourcentage.
Voila si ca peut t'aider.
Modifié par Mickael.D (30 Jul 2005 - 01:08)
Hello Mickael,

j'ai repris ton code pour le tester en local, il fonctionne très bien en pourcentage mais bat de l'aile dès qu'on passe à des valeurs fixes, enfin, bat de l'aile avec IE car avec FF, pas de soucis...

Bon, ceci dit, ce n'est pas grave, je vais laisser le site tel qu'il est, à savoir qu'il s'affiche comme je veux sous FF et que, sous IE, il prend le comportement du gabarit modèle 1 présent sur Alsacréations.
C'est pas exactement ce que je voulais, mais bon, ça a l'avantage d'être tt de même bien présenté, ce qui me semble être le plus important.

Je vais à présent corriger les erreurs dues au js en passant sous CSS, et une fois le code optimisé, je verrai éventuellement pour passer en version 1.8.2 de SPIP car à priori, la gestion du XHTML transitional est mieux organisée.

Merci pour votre aide et votre patience malgré mon comportement euh... ben de merde, faut bien l'dire, mais rassurez vous, je suis pire en vrai Smiley lol Smiley lol

Bon week end à tous...
Sujet clos
Aller à