XHTML

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Snap
Lézard à collerette
Messages : 362
Inscription : 04 juil. 2003, 17:15

XHTML

Message par Snap »

Bonjour !
Mon site est une vraie calamité (techniquement parlant) pour celui qui regarde la source ou qui charge le site en bas-débit.
J'ai donc décidé de le recoder en respectant les standarts.. mais avant, de faire un index du genre:

"Ce site passe aux normes.. patientez !"

A la fin de la page, j'ai voulu placer à droite les logos ''Valide XHTML" et "Valide CSS2" du site http://www.sovavsiti.cz/css/w3c_buttons.html
J'ai donc encadré les 2boutons d'un div avec comme propriété CSS

Code : Tout sélectionner

text-align : right;
Sous IE ca marche, pas sous Mozilla :( !
Voici le code complet de mon index (en construction)

Code : Tout sélectionner

<?xml version="1.0" encoding="ISO-8859-1"?>
<!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>
<title>Mise aux normes...</title>
<style type="text/css">
body {
  margin : 1em;
  background-color : #000000;
  font-family : Verdana;
  color : #808080;
  font-weight : bold;
}
div.closed {
  font-size : 3em;
  text-align : right;
}
div.man {
  font-size : 1.5em;
  font-family : Tahoma;
  width : 100%;
  position : absolute;
  top : 225px;
  text-align : center;
}
div.about {
  font-size : 0.7em;
  color : #C0C0C0;
  position : absolute;
  top : 400px;
  border : 1px dashed #C0C0C0;
}
div.valide {
  text-align : right;
  width : 100%;
  position : absolute;
  top : 400px;
}
a {
  color : #808080;
  text-decoration : none;
}
a:visited {
  color : #808080;
  text-decoration : none;
}
a:hover {
  color : #C0C0C0;
  text-decoration : underline;
}

    .w3cbutton3 {
      margin: 1em 0;
      width: 9em;
      border: 1px solid #ccc;
      font-family: helvetica,arial,sans-serif;
      font-size: 70%;
      font-weight: bold;
    }
    .w3cbutton3 a {
      display: block;
      width: 100%;
    }
    .w3cbutton3 a:link, .w3cbutton3 a:visited, .w3cbutton3 a:hover {
      background-color: #fc6;
      color: #000;
      text-decoration: none;
    }
    .w3cbutton3 span.w3c {
      padding: 0 0.4em;
      background-color: #fff;
      color: #0c479d;
    }
</style>
</head>
<body>
<div class="closed"></v3></div>
<div class="man">Ce site est en train de passer aux normes.</div>
<div class="about">» <a href="http://openweb.eu.org/articles/pourquoi_standards/">C'est quoi, les normes ?</a><br />
» <a href="http://openweb.eu.org/humeurs/standardiser_diversite/">Pourquoi respecter les normes ?</a><br />
» <a href="http://openweb.eu.org/articles/html_au_xhtml/">Comment passer aux normes ?</a></div>

<div style="text-align : right;">
  <div class="w3cbutton3">
    <a href="http://validator.w3.org/check/referer"><span class="w3c">W3C</span> <span class="spec">XHTML 1.0</span></a>
  </div>
  <div class="w3cbutton3">
    <a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fdestroyedv2.free.fr&=warning=1&=profile=css2">
<span class="w3c">W3C</span> <span class="spec">CSS 2.0</span></a>
  </div>
</div>

</body>
</html>
Tout commentaire (et aide) sont la bienvenue !

L'autre problème c'est que ca place tous les textes à droite.. je voudrais seulement aligner à droite les boutons et non le texte de leur contenu.. sans utiliser de positionnement au pixel près.

Tiens, encore autre chose:

Pour centrer la phrase Ce site est en train de passer aux normes., j'ai dû donner au div la longueur 100%.. mais avec la marge de la page d'1 em, ca dépasse sous Mozilla :(

Ah oui... j'ai l'impression qu'il n'y a plus moyen d'ouvrir un lien dans une nouvelle fenetre (anciennement target="_blank") sous XHTML ! Ca n'est plus possible maintenant ?
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Snap
Avatar de l’utilisateur
pascal
Administrateur
Messages : 1410
Inscription : 28 juil. 2003, 15:13

Message par pascal »

text-align ça sert à aligner du texte, hors tes boutons sont composés de blocs. IE te l'affiche bien car il est en mode de compatibilité IE5 à cause du prologue xml (c'est un bug d'IE), si tu l'enlèves il se comporte comme mozilla. Il faut mettre un margin-left:auto sur tes boutons.
Lemm
Arias
Messages : 18
Inscription : 28 juil. 2003, 16:05

Message par Lemm »

Voilà:

Code : Tout sélectionner

<?xml version="1.0" encoding="ISO-8859-1"?>
<!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>
<title>Mise aux normes...</title>
<style type="text/css">
body {
  margin : 1em;
  background-color : #000000;
  font-family : Verdana;
  color : #808080;
  font-weight : bold;
}
div.closed {
  font-size : 3em;
  text-align : right;
}
div.man {
  font-size : 1.5em;
  font-family : Tahoma;
  width : 100%;
  position : absolute;
  top : 225px;
  text-align : center;
}
div.about {
  font-size : 0.7em;
  color : #C0C0C0;
  position : absolute;
  top : 400px;
  border : 1px dashed #C0C0C0;
}
div.valide {
  text-align : right;
  width : 100%;
  position : absolute;
  top : 400px;
}
a {
  color : #808080;
  text-decoration : none;
}
a:visited {
  color : #808080;
  text-decoration : none;
}
a:hover {
  color : #C0C0C0;
  text-decoration : underline;
}

.droite {
	position: absolute;
	right: 1em;
}

.w3cbutton3 {
  margin: 1em 0;
  width: 9em;
  border: 1px solid #ccc;
  font-family: helvetica,arial,sans-serif;
  font-size: 70%;
  font-weight: bold;
}
.w3cbutton3 a {
  display: block;
  width: 100%;
}
.w3cbutton3 a:link, .w3cbutton3 a:visited, .w3cbutton3 a:hover {
  background-color: #fc6;
  color: #000;
  text-decoration: none;
}
.w3cbutton3 span.w3c {
  padding: 0 0.4em;
  background-color: #fff;
  color: #0c479d;
}
</style>
</head>
<body>
<div class="closed"></v3></div>
<div class="man">Ce site est en train de passer aux normes.</div>
<div class="about">» <a href="http://openweb.eu.org/articles/pourquoi_standards/">C'est quoi, les normes ?</a><br />
» <a href="http://openweb.eu.org/humeurs/standardiser_diversite/">Pourquoi respecter les normes ?</a><br />
» <a href="http://openweb.eu.org/articles/html_au_xhtml/">Comment passer aux normes ?</a></div>

<div class="droite">
  <div class="w3cbutton3">
    <a href="http://validator.w3.org/check/referer"><span class="w3c">W3C</span> <span class="spec">XHTML 1.0</span></a>
  </div>
  
  <div class="w3cbutton3">
    <a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fdestroyedv2.free.fr&=warning=1&=profile=css2">
<span class="w3c">W3C</span> <span class="spec">CSS 2.0</span></a>
  </div>
</div>


</body>
</html>
olab
Varan
Messages : 1254
Inscription : 30 juil. 2003, 20:20

Message par olab »

Je regarderai ce soir en rentrant, mais on doit pouvoir faire quelque chose.
En attendant, même si là ça sert à rien, je mettrais un div qui contient tout le reste de la page :
<body><div>...</div></body>
Et le mieux serait aussi de mettre des attributs id aussi

O
Benoit
Administrateur
Messages : 4894
Inscription : 19 juil. 2003, 10:59

Message par Benoit »

pascal a écrit :IE te l'affiche bien car il est en mode de compatibilité IE5 à cause du prologue xml (c'est un bug d'IE)
Le prologue XML était par ailleurs facultatif en XHTML 1.0, il vaut mieux l'enlever tout à fait.
http://tantek.com/CSS/Examples/boxmodel ... l#addendum

P.S. Je comprends que ce soit plus facile au moment du développement, mais j'espère que tu passeras à une feuille de style externe :)
fredchat
Lézard à collerette
Messages : 286
Inscription : 15 juil. 2003, 18:04

Message par fredchat »

A quoi ça te sert de mettte la feuille de style dans ton fichier html ?

L'utilisateur télécharge à chaque fois des informations qui pourrait être mis en cache un fois pour toute.
Benoit
Administrateur
Messages : 4894
Inscription : 19 juil. 2003, 10:59

Message par Benoit »

Freed Castles a écrit :A quoi ça te sert de mettte la feuille de style dans ton fichier html ?

L'utilisateur télécharge à chaque fois des informations qui pourrait être mis en cache un fois pour toute.
Heu bah si j'ai bien compris pour l'instant il n'a qu'une page qui dit "revenez quand ce sera prêt" donc ça fait une requête au lieu de deux :)
Snap
Lézard à collerette
Messages : 362
Inscription : 04 juil. 2003, 17:15

Message par Snap »

Merci tout le monde :)
J'ai copié le code de Lemm sans le prologue XML du début et ca marche :)
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Snap
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 12 invités