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 !

Modérateur : Asumbaa

Répondre
Snap
Lézard à collerette
Messages : 362
Enregistré le : 04 juil. 2003, 17:15
Contact :

XHTML

Message par Snap » 21 août 2003, 15:42

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

pascal
Administrateur
Messages : 1195
Enregistré le : 28 juil. 2003, 15:13
Localisation : Paris
Contact :

Message par pascal » 21 août 2003, 16:25

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
Enregistré le : 28 juil. 2003, 16:05

Message par Lemm » 21 août 2003, 16:26

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
Enregistré le : 30 juil. 2003, 20:20
Localisation : Niort
Contact :

Message par olab » 21 août 2003, 16:34

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
Enregistré le : 19 juil. 2003, 10:59
Localisation : Bruxelles, Belgique
Contact :

Message par Benoit » 21 août 2003, 17:41

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
Enregistré le : 15 juil. 2003, 18:04
Localisation : Paris, France
Contact :

Message par fredchat » 21 août 2003, 18:55

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
Enregistré le : 19 juil. 2003, 10:59
Localisation : Bruxelles, Belgique
Contact :

Message par Benoit » 21 août 2003, 19:37

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
Enregistré le : 04 juil. 2003, 17:15
Contact :

Message par Snap » 21 août 2003, 19:54

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 enregistré et 2 invités