Geckozone

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 ?

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.

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>

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

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

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.

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

Merci tout le monde

J'ai copié le code de Lemm sans le prologue XML du début et ca marche