XHTML - code invalide
Forensic Membre non connecté
-
Booster Mortier
- Voir le profil du membre Forensic
- Inscrit le : 18/12/2006
Je viens de frapper un mur de validation avec le validateur w3c. Je n'arrive pas à trouver l'erreur dans mon code. Je demande donc votre aide pour tenter de la repérer.
Section de code fautive:
[code]<div id="colonne2">
<h1>Derniers Messages</h1>
<br />
<h1>Introduction</h1>
<blockquote>
blalijasdjiajsd
</blockquote>
</div>[/code]
Erreur obtenue:
Citation:
Line 40 column 5: character data is not allowed here.blalijasdjiajsd
You have used character data somewhere it is not permitted to appear. Mistakes that can cause this error include putting text directly in the body of the document without wrapping it in a container element (such as a <p>aragraph</p>
or forgetting to quote an attribute value (where characters such as "%" and "/" are common, but cannot appear without surrounding quotes).et
Citation:
Error Line 41 column 16: end tag for "blockquote" which is not finished.</blockquote>
Most likely, You nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>
Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, <head> generally requires a <title>, lists (ul, ol, dl) require list items (li, or dt, dd), and so on.
Doctype utilisé:
[code]<!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></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />[/code]
J'ai toujours utilisé cette façon de faire et je n'ai jamais rencontré de problème semblable avec le validateur. (Enfin, à ma connaissance) Alors quel est votre avis sur cette portion de code?
Forensic
Forensic Membre non connecté
-
Booster Mortier
- Voir le profil du membre Forensic
- Inscrit le : 18/12/2006
Bonne journée.
Forensic Membre non connecté
-
Booster Mortier
- Voir le profil du membre Forensic
- Inscrit le : 18/12/2006
Cette fois-ci, mon problème n'est pas une question de code invalide, mais une question de mise en page problématique. Voir par vous-même avec le screenshot suivant:
Code HTML:
Code :
// CET div englobe le cadre qui est en rouge
<div id="secondaire">
// CET div englobe le cadre qui est en blanc
<div id="contenu">
<div id="colonne1">
<h1>Introduction</h1>
<blockquote>
[p]
AhhASJiasjaijsaSJIASJiajsaISJ
ASJDIAJdiasdjASIJDISAJdiasjdiajsd
[/p]
</blockquote>
</div>
<div id="colonne2">
<h1>Derniers Messages</h1>
<blockquote>
[p]
AhhASJiasjaijsaSJIASJiajsaISJ
ASJDIAJdiasdjASIJDISAJdiasjdiajsd
[/p]
</blockquote>
<h1>Introduction</h1>
<blockquote>
[p]
AhhASJiasjaijsaSJIASJiajsaISJ
ASJDIAJdiasdjASIJDISAJdiasjdiajsd
[/p]
</blockquote>
</div>
</div>
// cet div englobe le cadre bleu
<div id="colonne-menu">
<div class="global-menu">
<div class="md-header">Prochain Match</div>
<div class="md-content" id="nextgame" onmouseover="show_mine(this);" onmouseout="hide_mine(this);">
<!-- affichage de la popup js des détails -->
<div class="nextgame dir-right">
<div>TEST</div>
</div>
</div>
<div class="md-footer" onclick="expandit('nextgame')"> </div>
</div>
<div class="global-menu">
<div class="md-header">Dernier Match</div>
<div class="md-content" id="lastgame" onmouseover="show_mine(this);" onmouseout="hide_mine(this);">
<!-- affichage de la popup js des détails -->
<div class="nextgame dir-right">
<div>CECI EST UN TEST</div>
</div>
</div>
<div class="md-footer" onclick="expandit('lastgame')"> </div>
</div>
<div class="md-header">Dernier Match2</div>
<div class="md-liens" id="lastgame2">
<ul>
<li>[url=liens1]Liens 1[/url]</li>
<li>[url=liens2]Liens 2[/url]</li>
<li>[url=liens3]Liens 3[/url]</li>
<li>[url=liens4]Liens 4[/url]</li>
<li>[url=liens5]Liens 5[/url]</li>
<li>[url=liens6]Liens 6[/url]</li>
<li>[url=liens7]Liens 7[/url]</li>
<li>[url=contacts.php]Votre site?[/url]</li>
</ul>
</div>
<div class="md-footer" onclick="expandit('lastgame2')"> </div>
</div>
</div>
J'ai évité de mettre le code complet puisque le problème ne semble pas en lien avec le reste du code. Le problème est donc que le cadre blanc doit être, en tout temps, égal au cadre bleu. J'ai fais plusieurs essais dans mon fichier css avec l'attribut height sans succès. Voici le fichier css:
Code :
/* CSS Global */
html {
height: 100%;
}
body {
background: #515151;
color: #ffffff;
font-family: Verdana;
font-size: 10px;
margin: 0px;
}
hr {
border: 1px dashed #ffffff;
}
ul {
margin: 8px 0px 0px 16px;
padding: 0px;
}
ul li {
list-style-type: square;
margin: 0px 0px 11px 0px;
padding: 0px;
}
blockquote {
margin: 10px 0px 20px 0px;
padding: 2px 20px 0px 20px;
border-left: 8px solid;
border-color: #ff0000;
text-align: justify;
}
p {
text-align: justify;
}
h1 {
color: #3333FF;
font-size: 14px;
font-weight: bold;
letter-spacing: 3px;
margin-top: 0px;
padding-bottom: 3px;
text-transform: uppercase;
border-bottom: 1px solid #FFFFFF;
}
h2 {
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
}
.champs_texte {
font-family: Verdana;
font-size: 12px;
font-weight: bold;
border: 1px solid #ff0000;
padding-left: 2px;
padding-top: 3px;
padding-bottom: 3px;
}
/* Tous les conteneurs */
/* Conteneur principal contenant les conteneurs à contenu */
#principal {
background: #404040;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
/* height: auto;*/
width: 975px;
margin-left: auto;
margin-right: auto;
}
/* Conteneurs menus et le footer (identique) */
#menu-identification, #footer {
background: #FFFFFF url(images/menu.png);
font-family: Arial;
font-size: 12px;
height: 26px;
padding: 10px 21px 0px 19px;
text-align: right;
text-transform: uppercase;
}
#menu-haut {
background: #FFFFFF url(images/menu.png);
font-family: Arial;
font-size: 12px;
height: 42px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
text-align: right;
text-transform: uppercase;
}
#menu-haut ul{margin: 0px auto;}
#menu-haut li {
float: left;
margin: 0px;
padding: 0px;
}
#menu-haut li a {
background: transparent;
display: block;
float: left;
height: 37px;
text-decoration: none;
padding: 3px 19px 2px 19px;
text-transform: uppercase;
}
#menu-haut li a:hover, #menu-haut li a#selected, #menu-haut li a#selected:hover {
background: #FFFFFF url(images/menu_hover.png);
color: #FFFFFF;
}
#menu-haut, #menu-haut li a {
background: #FFFFFF url(images/menu.png);
color: #FFFFFF;
border-color: #D7D7D7;
}
#logo {
background: #FFFFFF url(images/logo.jpg) no-repeat;
height: 205px;
margin-left: 0px;
margin-right: 0px;
text-align: left;
width: 975px;
}
/* Conteneurs de contenus et menu de droite */
#secondaire {
border: 1px solid #ff0000;
margin-left: 0px;
margin-right: 0px;
/* min-height: 1000px;*/
overflow: hidden;
padding: 0px;
width: 975px;
}
#contenu {
border: 1px solid #ffffff;
float: left;
height: 100%;
width: 760px;
/* border-right: 1px solid #000000;*/
}
#colonne1 {
float: left;
height: 100%;
margin-left: 10px;
margin-top: 10px;
padding-top: 0px;
padding-right: 25px;
width: 350px;
}
#colonne2 {
/* border-right: 1px solid #000000;*/
float: right;
height: 100%;
margin-right: 10px;
margin-top: 10px;
padding-right: 25px;
width: 325px;
}
#colonne1 h1, #colonne2 h1 {
color: #3333FF;
font-size: 14px;
font-weight: bold;
letter-spacing: 3px;
margin-top: 0px;
padding-bottom: 3px;
text-transform: uppercase;
border-bottom: 1px solid #FFFFFF;
}
/* tout ce qui a rapport aux menus de droite */
#colonne-menu {
border: 1px solid #0000ff;
float: right;
height: auto;
margin-bottom: 0px;
width: 210px;
}
.md-header {
background: #FFFFFF url(images/ianus_modulhead.gif);
font-weight: bold;
height: 25px;
margin-top: 15px;
padding-left: 25px;
padding-top: 8px;
text-transform: uppercase;
}
.md-content {
background: #FFFFFF url(images/ianus_modultile.gif) repeat-y;
color: #e4e4e4;
font-size: 11px;
letter-spacing: 1px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
.md-liens {
background: #FFFFFF url(images/ianus_modultile.gif) repeat-y;
overflow: hidden;
padding-left: 12px;
}
.md-liens ul{margin: 0px auto;}
.md-liens li { margin: 0px;
float: left;
list-style: none;
}
.md-liens li a , .md-liens li a:hover {
float: left;
height: 16px;
text-decoration: none;
padding: 5px 0px 4px 22px;
width: 200px;
border: 0px;
}
.md-liens li a {
background: #FFFFFF url(images/ianus_modulbutton.gif) no-repeat;
width: 164px;
color: #DBD7D1;
}
.md-liens li a:hover {
background: #404040 url(images/ianus_modulbutton.gif) no-repeat;
background-position: 0 -22px;
width: 164px;
color: #66ffff;
}
.md-footer {
background: #FFFFFF url(images/ianus_modulfooter.gif) repeat-y;
height: 40px;
}
/* affichage des fenêtres au survol de la souris */
div.global-menu {
position: relative;
}
div.nextgame {
color: #000000;
display: none;
position: absolute;
top: 40px;
left: 0;
z-index: 50;
width: 375px;
background: #404040;
border: 2px solid #cccccc;
min-height: 140px;
_height: 140px;
}
div.md-content:hover div.nextgame {
display: block;
}
div.dir-left {
left: 30px;
right: auto;
}
div.dir-right {
left: auto;
right: 30px;
}
div.dir-milieu {
left: auto;
right: 01px;
}
div.dir-milieu2 {
left: 01px;
right: auto;
}
div.dir-centre {
right: 50px;
}
#menu-identification a, #menu-identification a, #header a:hover, #footer a:hover {
background: transparent;
color: #DBD7D1;
}
.liens {
a:hover {
text-decoration: underline;
}
}
#menu-identification a, #footer a{text-decoration: none;}
#menu-identification a:hover, #footer a:hover{text-decoration: underline;}
Si quelqu'un pouvait prendre quelques minutes pour analyser, ça serait vraiment apprécié. Je bloque depuis plusieurs jours sur ce problème et je n'y arrive pas. Alors merci à l'avance.
Bonne fin de semaine,
Forensic
CrowkaiT Membre non connecté
-
Modérateur
- Voir le profil du membre CrowkaiT
- Inscrit le : 17/06/2005
- Site internet
- Groupes :
-
Equipe Historique
Je te met un exemple je suis pas du tout sur que ça marche, et pour la hauteur minimale (astuce) pour IE il comprend pas:
[code]
#taclassedegauche{
height:500px;
}
body->html #taclassedegauche{
height: auto;
min-height: 500px;
}
#taclassededroite{
height: 100%;
}
[/code]
Ces deux classes contenues toutes les deux dans ton conteneur rouge.
Bonne chance, je sais à quel point c'est chiant...
Forensic Membre non connecté
-
Booster Mortier
- Voir le profil du membre Forensic
- Inscrit le : 18/12/2006
Une div ayant un height défini en css de 500px par 700px contenant une autre div avec un height de 100%... cette seconde div n'a pas à la finale le fameux height de 100%... c'est la seule chose que je ne conçois pas avec les CSS... il faut jongler avec les configurations à n'en plus finir. Ça me donne mal au coeur. Le reste, je maîtrise bien les CSS, mais ÇA... aucun commentaire supplémentaire.
Ta solution, je n'y avais pas pensé, sans succès. J'y retourne. Ça m'a fait du bien de vous témoigner mon embarras
Forensic
Édité par Forensic Le 14/04/2007 à 01h12
CrowkaiT Membre non connecté
-
Modérateur
- Voir le profil du membre CrowkaiT
- Inscrit le : 17/06/2005
- Site internet
- Groupes :
-
Equipe Historique
Pour le height:100% c'est normal que ça marche pas, j'étais vraiment pas sur mais je vois pas comment faire. Si tu trouves la solution ça m'intéresse
.
Forensic Membre non connecté
-
Booster Mortier
- Voir le profil du membre Forensic
- Inscrit le : 18/12/2006
À ce moment, toujours pas de solution. Toutefois, je vais tenter d'expliquer ma perception du problème.
Si on regarde sur l'image que j'ai posté un peu plus haut, vous voyez certainement en haut et en bas du cadre rouge une bande grise. Ces deux bandes grises ont 42px de height et sont définies en dehors du cadre rouge (évidemment). Maintenant, laissons de côté la bande grise du haut et attardons nous à celle du bas ainsi qu'au cadre rouge.
Nous nommerons le cadre bleu: menu droit et le cadre blanc: contenu.
Actuellement, le cadre rouge a un height défini à 800px. Si j'enlève cette portion de code, la fameuse bande grise remonte à la bande grise du haut. Autrement dit, la mise en page foire si vous me permettez le mot.
Ma perception est donc la suivante, on dirait que la marge du bas est (à la hauteur du border rouge du bas) n'est pas présente ou invisible.
J'ai tenté de rajouté au cadre blanc : margin-bottom: 10px; sans succès.
Est-ce logique ou suis-je perdu loin loin sur Mars?
Forensic découragé.
PS. Et là, on ne parle pas de MSIE qui, légèrement, la mise en page est différente. Comme elle n'est pas trop amochée, je ne retoucherai pas.
Forensic Membre non connecté
-
Booster Mortier
- Voir le profil du membre Forensic
- Inscrit le : 18/12/2006
Pour continuer dans ma perception, concernant les fameuses bandes grises... celle du bas... si je rajoute margin-top: 2000px; j'ai constaté qu'elle se fie à la bande grise du haut... ça te donne une idée? À minuit, je suis un peu fatigué, je ne vois pas les idées claires, alors voyons voir quand tu te lèveras
Forensic
CrowkaiT Membre non connecté
-
Modérateur
- Voir le profil du membre CrowkaiT
- Inscrit le : 17/06/2005
- Site internet
- Groupes :
-
Equipe Historique
[code]position: relative;
top: 0px;[/code]
Comme ça si ton bloc rouge s'étire elle sera toujours en dessous
Forensic Membre non connecté
-
Booster Mortier
- Voir le profil du membre Forensic
- Inscrit le : 18/12/2006
Cela prend effectivement effet. Toutefois, lorsque rajoute beaucoup de contenu dans le cadre blanc ou que le menu est très grand dans le cadre bleu... les deux cadres débordent en dehors du cadre rouge. Alors comme je suis dépassé par les évènements, ce qu'il risque d,arriver c'est que je recommence à zéro avec un fichier vide. Enfin, je vais certainement tenter quelques trucs encore et ensuite je vais recommencer!
Merci pour ton aide encore!
Forensic
CrowkaiT Membre non connecté
-
Modérateur
- Voir le profil du membre CrowkaiT
- Inscrit le : 17/06/2005
- Site internet
- Groupes :
-
Equipe Historique
Je pense que ça réglera ton problème, à la différence que mon menu est à gauche (suffit de changer deux trois trucs).
http://www.phpboost.com/download/divers/simple_auto.rar
Bon chance
Forensic Membre non connecté
-
Booster Mortier
- Voir le profil du membre Forensic
- Inscrit le : 18/12/2006
Je vais adapter mon CSS avec l'aide des fichiers que tu m'as donné. Merci encore pour ton aide.
Je te tiens au courant.
Bonne journée!
Forensic
CrowkaiT Membre non connecté
-
Modérateur
- Voir le profil du membre CrowkaiT
- Inscrit le : 17/06/2005
- Site internet
- Groupes :
-
Equipe Historique
). En tout cas ton design a l'air bien sympa tu nous montrera ça une fois fini 
Forensic Membre non connecté
-
Booster Mortier
- Voir le profil du membre Forensic
- Inscrit le : 18/12/2006
En tout cas, merci!
Anruyn Membre non connecté
-
Booster Fuzil
- Voir le profil du membre Anruyn
- Inscrit le : 22/12/2006
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie