Actualité informatique
Test comparatif matériel informatique
Jeux vidéo
Astuces informatique
Vidéo
Télécharger
Services en ligne
Forum informatique
01Business

|-  INTERNET


|||-  

Page Web et Norme W3C

 

LOGICIELS : micropat, 1 utilisateur anonyme et 77 utilisateurs inconnus
Ajouter une réponse
 

 
Page photos
 
     
Vider la liste des messages à citer
 
 Page :
1
Auteur
 Sujet :

Page Web et Norme W3C

Prévenir les modérateurs en cas d'abus 
wilhem
Voili Voilou
  1. homepage
wilhem
Débutant confirmé (de 1 000 à 4 999 messages postés)
  1. Posté le 20/06/2005 à 15:59:12  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
:hello: Bonjour,

étant en train de faire une remise à niveau d'un site qui n'était pas au norme W3C actuelle, j'ai retravaillé les base, le positionnement, mais je me suis confronté tres vite à plusieurs problèmes.

 Tout d'abord, voici en gros (c'est juste la base ça  :o ) ce à quoi je veux que ça ressemble :

 http://img13.echo.cx/img13/149​0/16zs.jpg

 Voici la source HTML :

 



 

 <html xml:lang="fr">
 <head>

<title></title>

<script type=javascript/text SRC="Helmut.js"></script>

<link href="Helmut.css" rel="stylesheet" type="text/css">

 </head>
 <body>

<div id="corps_secondaire">

<div id="corps_central">

</div>

<div id="menu_gauche">

</div>

<div id="menu_droit">

</div>

<div id="tete">

</div>

</div>
 </body>
 </html>
 <textarea style="display :none">  

 




 et le CSS

 



 
 /********************STRUCTURE​_GENERALE********************/


 /****Relatif_Body****/
 body
 {
 background-color:black;
 margin:0;
 text-align:center;
 }
 #corps_secondaire
 {
 background-color:yellow;
 width:560px;
 height:100%;
 margin-left:auto;
 margin-right:auto;
 }
 /****Relatif_au_corps_central*​***/
 #corps_central
 {
 background-color:blue;
 width:20px;
 height:10px;
 margin-left:auto;
 margin-right:auto;
 }
 /****Relatif_au_menu_droit****​/
 #menu_droit
 {
 background-color:blue;
 margin-right:5px;
 width:100px;
 height:300px;
 float:right;
 }
 /****Relatif_au_menu_gauche***​*/
 #menu_gauche
 {
 background-color:blue;
 margin-left:5px;
 width:100px;
 height:300px;
 float:left;
 }
 /****Relatif_à_la_tête****/
 #tete
 {
 }
 




 Le block jaune est toujours de la même taille, au centre, il est le même sous toute résolution.
 Je voudrais integrer la balise <DOCTYPE> mais apparament, étirer la longueur du block jaune à 100% n'est pas aux normes. Existe-il une alternative ?

 Le second problème concerne la mise en place des 3 block bleux, en effet, lorsque par exemple je veux descendre le block central de 50px (margin-top:50px;), TOUS les block bleux bouge au lieu d'un  :ouch: .
 Comment puis-je faire ?

 Avez vous des conseilles ?
 Merci  :D

andevros
Tu cartonnes ! (de 500 à 999 messages postés)
  1. Posté le 20/06/2005 à 16:17:37  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
:hello:

 



étirer la longueur du block jaune à 100% n'est pas aux normes. Existe-il une alternative ?



 Height: 100%; est parfaitement légal.
 Astuce définit d'abord ton body avec :
 Height: 100%;
 Width: 100%;
 Si tu as des problèmes de pourcentage, passe une valeur très élevée en pixels.
 Height: 10000px;
 Width: 10000px;

 



Le second problème concerne la mise en place des 3 block bleux,



 Pourquoi ne pas définir tes cadres bleus comme des conteneurs indépendants ? (DIV)

 Auprés un ou plusieurs "float" pense a "clear both"
 J'ai beaucoup de problèmes de ce type pour obtenir le même comportement entre IE, Firefox et Opéra.

 Bonne remise à niveau.
 Pour le positionnement : http://css.alsacreations.com/
 Pour clear both : http://openweb.eu.org/

 :salut:





 

(Publicité)
Voili Voilou
  1. homepage
wilhem
Débutant confirmé (de 1 000 à 4 999 messages postés)
  1. Posté le 20/06/2005 à 17:22:14  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
:jap:  Merci,

 Si cette astuce marche pour IE, elle est inutile sous Firefox  :/  

 Reprenons, ici, la source uniquement pour le block jaune :

 



 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/D​TD/xhtml1-transitional.dtd">
 <html xml:lang="fr">
 <head>

<title></title>

<script type=javascript/text SRC="Helmut.js"></script>

<link href="essai.css" rel="stylesheet" type="text/css" />

 </head>
 <body>

<div id="corps_secondaire">444</div​>


 </body>
 </html>
 <textarea style="display :none" />  

 




 et le CSS...

 



 
 /********************STRUCTURE​_GENERALE********************/


 /****Relatif_Body****/
 body
 {
 Height:100%;
 Width:100%;
 background-color:black;
 margin:0;
 text-align:center;
 }
 #corps_secondaire
 {
 background-color:yellow;
 width:560px;
 height:100%;
 margin-left:auto;
 margin-right:auto;
 }

 




 Firefox affiche n'affiche rien du block jaune si rien n'est écrit dedans, IE, lui, prend 100% de la hauteur.

 Puis-je y parvenir avec firefox ?  :/  

andevros
Tu cartonnes ! (de 500 à 999 messages postés)
  1. Posté le 20/06/2005 à 21:39:28  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
:hello:

 Bon j'ai testé ca avec :
 Le moteur Geko 1.7.8.20... - Firefox 1.0.4 - Opéra 7.54
 et ca marche.

 



 
 /****Relatif_Body****/
 body
 {
 Height:100%;
 Width:100%;
 background-color:black;
 margin:0;
 text-align:center;
 }
 #corps_secondaire
 {
 background-color:yellow;
 width:560px;
 height:10000px;
 margin-left:auto;
 margin-right:auto;
 }
 



 Puis
 



 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/D​TD/xhtml1-transitional.dtd">
 <html xml:lang="fr">
 <head>
 <title></title>
 <link href="tempo.css" rel="stylesheet" type="text/css" />
 </head>

 <body>
 <div id="corps_secondaire"></div>
 <!-- Ca marche !  Même vide -->
 </body>
 </html>
 




 Test réalisé avec HTML-Kit 2.92
 Bonne continuation.
 :salut:


Voili Voilou
  1. homepage
wilhem
Débutant confirmé (de 1 000 à 4 999 messages postés)
  1. Posté le 20/06/2005 à 22:30:12  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
:jap:  Merci beaucoup, ça marche

 N'y as-t'il pas un moyen d'adapter la hauteur en fonction de ce qu'on met dedans,
 car le site la (oui on peut toujours modifier mais bon) fait 10000px de hauteur  :D

 Certes, ça marche, mais ça me tracasse  :biensur:

 Je vais me pencher dessus, si tu as un avis...  :jap:

(Publicité)
andevros
Tu cartonnes ! (de 500 à 999 messages postés)
  1. Posté le 21/06/2005 à 08:49:04  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 



... adapter la hauteur en fonction de ce qu'on met dedans ...



 C'est ce que faisait Firefox avant la modif.
 Je vais regarder dans les CSS il doit y avoir moyen de fixer un "min" à height.
 Donc une hauteur minimale à avoir.
 Pour l'instant une hauteur de +/- 1200px permet de passer sur tous les écrans sans  problème.

 Si tu touves avant, envoies la solution.
 (Toujours trés intéressant à savoir)

 :salut:

andevros
Tu cartonnes ! (de 500 à 999 messages postés)
  1. Posté le 21/06/2005 à 09:29:46  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
:hello:

 min-height, je ne l'ai pas rêvé.
 Ta solution est là au milieu de la page avec un tas d'autre choses intéressantes... Merci Google.
 http://www.fastclemmy.com/inde [...] t-Explorer
 :jap:

Voili Voilou
  1. homepage
wilhem
Débutant confirmé (de 1 000 à 4 999 messages postés)
  1. Posté le 21/06/2005 à 10:27:14  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 

Andevros a écrit :

 

 C'est ce que faisait Firefox avant la modif.
 Je vais regarder dans les CSS il doit y avoir moyen de fixer un "min" à height.
 Donc une hauteur minimale à avoir.
 Pour l'instant une hauteur de +/- 1200px permet de passer sur tous les écrans sans  problème.

 Si tu touves avant, envoies la solution.
 (Toujours trés intéressant à savoir)

 :salut:




 :jap:

 Merci pour le lien je vais regarder ça attentivement,
 Quand a firefox, il s'adaptai seulement en fonction d'une seul DIV, or il en contenait trois.

 Pour la fixation à 1200 px environ c'est justement ça qui m'embetais, ça fesait pas propre.  :D

 :salut:   encore merci je ne connaissais pas encore cette propriété .
 (étant en constant aprentissage)






(Publicité)
Voili Voilou
  1. homepage
wilhem
Débutant confirmé (de 1 000 à 4 999 messages postés)
  1. Posté le 21/06/2005 à 18:09:07  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
:hello:


 Cette fois ci je suis confronté à un nouveau problème, jusque là tout allait bien, mon block jaune s'affichait correctement sous IE et firefox.

 Mais lorsque je veut configurer mes 3 blocks bleu (menu_droit, gauche et corps_central), tout bascule.

 J'ai tout de même réussi en bouillant à placer les 2 menus bleu, mais pour le corps, je suis dans l'incapacité  :'( .

 Je ne saurai m'exprimer mieux que par une image :

 Voici ce que ça donne sous IE:
 Tout est normal, c'est ce que je veux,

 http://img17.echo.cx/img17/498​5/16sc1.jpg

 Et maintenant Firefox :

 tout ce décalle vers le bas si je descend le corps central  :/  

 http://img17.echo.cx/img17/348​6/25ht.jpg


 Voici mes source...
 ici HTML

 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/D​TD/xhtml1-transitional.dtd" >
 <html xmlns="http://www.w3.org/1999/​xhtml" xml:lang="fr">
 <head>

<title>Bienvenue !</title>

<script type=javascript/text SRC="Helmut.js"></script>

<link href="Helmut.css" rel="stylesheet" type="text/css" media="screen" />

 </head>
 <body>

<div id="corps_secondaire">

<div id="menu_gauche">

</div>

<div id="menu_droit">

</div>

<div id="corps_central">

</div>

</div>


 </body>
 </html>
 <textarea style="display :none" />  
 




 Et CSS...

 



 
 /********************STRUCTURE​_GENERALE********************/


 /****Relatif_Body****/

 body
 {
 Height:100%;
 Width:100%;
 background-color:black;
 margin:0;
 text-align:center;
 }

 /*****Relatif_au_corps_seconda​ire*****/

 #corps_secondaire
 {
 background-color:yellow;
 width:585px;
 height:700px;
 margin-left:auto;
 margin-right:auto;
 min-height:700px;
 }

 /****Relatif_au_corps_central*​***/

 #corps_central
 {
 background-color:blue;
 width:100px;
 height:100px;
 margin-left:auto;
 margin-right:auto;
 margin-top:200px;
 }

 /****Relatif_au_menu_droit****​/

 #menu_droit
 {
 background-color:blue;
 margin-right:2px;
 width:120px;
 height:450px;
 float:right;
 margin-top:200px;
 }

 /****Relatif_au_menu_gauche***​*/

 #menu_gauche
 {
 background-color:blue;
 margin-left:2px;
 width:120px;
 height:450px;
 float:left;
 margin-top:200px;
 }
 




 Avez vous la solution ?  :chepa:

 Je vous tiens au courant en cas de résolution du problème  ;)
 Merci

 :salut:

andevros
Tu cartonnes ! (de 500 à 999 messages postés)
  1. Posté le 22/06/2005 à 20:53:42  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
:hello:

 



 
 <body>

 <div id="corps_secondaire">&nbsp;
  <div id="menu_gauche"></div>
  <div id="menu_droit"></div>
  <div id="corps_central"></div>
 </div>

 </body>
 



 Donne un contenu ne fusse que fictif.
 Et oui encore une ficelle...
 Mais faire cohabiter IE + Firefox + Opéra entraîne des "compromissions" :D

 :jap:

Voili Voilou
  1. homepage
wilhem
Débutant confirmé (de 1 000 à 4 999 messages postés)
  1. Posté le 22/06/2005 à 21:57:07  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 


Merci d'avoir trouver une solution aussi simple, j'etais parti dans un reposisionnement complet en position absolue...  :jap:

 Oui, faire une page compatible à toutes les résolutions, navigateurs demande du courage... Et si une astuce donne une compatibilité, elle sera j'en suis sur pénalisante plus tard  :D

 Enfin, c'est le prix à payer.

 Merci encore  ;)

 @+

(Publicité)
andevros
Tu cartonnes ! (de 500 à 999 messages postés)
  1. Posté le 23/06/2005 à 09:40:07  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
:hello:

 Oui, je te comprends.
 Mais je t'invite à lire lire suivant :
 
 Gérer les modèles de boîtes CSS standard et Microsoft
 

 A cette adresse : http://openweb.eu.org/articles [...] oites_css/
 Ou il est démontré aves des arguments indiscutables, qu'il n'est pas possible actuellement d'avoir exactement la même mise en page.
 Car Microsoft à décidé que le calcul des éléments : margin, border, padding se fait selon leur méthode.

 De plus
 IE pour PC et IE pour Mac ne sont pas issus des mêmes dévelpppement, donc le bug de l'un n'est pas toujours vria pour l'autre.
 IE, min-XXX (height, width) n'est pas géré, Le positionnement relatif après plusieurs de conteneurs ne fonctionne plus, ...
 Opéra, il ne gére pas exactement les noms de police que IE ou FIrefox.
 Le kit Mozilla du moteur Gecko 1.7... (Kit pour développeurs) ne gére pas les balises title...
 Firefox ne prend que les X (70/80 ?) premiers caractères de ces mêmes balises.

 C'est beau le respect des directives du W3C.

 Donc, fait comme tout le monde, tente d'avoir des feuilles les plus ressemblantes possible.
 
 :salut:

Voili Voilou
  1. homepage
wilhem
Débutant confirmé (de 1 000 à 4 999 messages postés)
  1. Posté le 27/06/2005 à 10:10:41  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
:jap:  Merci pour le lien


 Je viens d'arretter toutes tentatives de rendre un affichage correcte sous Internet Explorer... :|
 J'en ai plus qu'assez de devoir "Boucher les trous de IE", en concidérant aussi que ces "bidouilles" poseront peut-etre des problèmes plus tard sur d'autre navigateurs.

 Les compromissions sont de trop !  :o

 Je me suis aperçu moi même des bugs reper"s sur IE, à savoir qu'il calcule selon sa manière les marges (ce qui rend impossible quelque chose de cadré sous 2 navigateurs différents), il n'affiche pas la propriété "blink", ne prend pas en compte "min-****", il n'est pas foutu d'affficher plus de 4 block dans un conteneurs, ....etc

 Je n'irais pas jusqu'au bout car la liste est trop longue  :hurle:

 Bref :http://img294.echo.cx/img294/8​377/images3fi.jpg

 IE est un véritable frein au dévelloppement Web !

 J'invite toute les personnes qui lisent ceci que même si elle ne se sont pas engagées dans la creation de site web, à ne plus utiliser IE !

 Des navigateurs parfais, et gratuit sont à dispotition et Régulièrement mis à jour !.
 Pour info, cela fait 6 ans que IE n'est plus à jour.

 De plus, si c'est un frein (certaine personne s'en fouttent), IE est une veritable Passoire, et oui 6 ans de traîne ça ne peut pas etre bon pour la sécurité...

 En récapitulant, il est aujourd'hui INDISPENSABLE D'ADOPTER UN AUTRE NAVIGATEUR AUTRE QU'INTERNET EXPLORER

 *Pour votre sécurité

 *Pour le dévelloppement Web


 Malheuresement on ne peut pas completement le fouttre dehors, certains site n'accepte QUE Internet Explorer...

 Je fini en vous invitant à visiter ce lien...  http://www.01net.com/telecharg [...] 25711.html

 @ +  :salut:

 Page :
1

Aller à :
 

Sujets relatifs
norme wifi b ou g Validation xhtml impossible par "w3c.org"
comment diminuer taille page écran internet ? du web vers ma machine en http
Quelle page d'acceuil avez-vous ? pas de page web affiché
pb page web Comment suprimer une page perso avec Cegetel ?
Plus de sujets relatifs à : Page Web et Norme W3C

Les 5 sujets de discussion précédents Nombre de réponses Dernier message
Publier mes pages web "publisher" sur "pages perso Free" 1
Pub Baroland à la place de pub Google Adsense ! 0
mon design ! 29
firefox et mp3 1
Lien pour ajouter site aux favoris 8