Reprise du message précédent :
Ca me fait rire, sur ce forum, on trouve des messages contradictoires inter-topic, c'est amusant.

C'est normal, il ne se dégage pas toujours de bonne pratique applicable sans discussion.
 
Le clic-droit : il n'y a pas à discuter.
 
Sur le point des images, je reste intransigeant, tant cela entre en conflit avec d'autres principes généraux. Mais la sale habitude est tellement ancrée dans les moeurs que même florentgé n'a pas été foncièrement choqué quand on en avait discuté la dernière fois, donc on en reste avec deux orientations.
 
Les deux se motivent, mais je choisis résolument l'approche hyper-orthodoxe, qui s'appose ici à l'approche anti-asceptisation.  Mais c'est un faux argument.
 
A côté de ça, on entend parfois de mauvaises réponses qui passent à travers les mailles de la pelle à clous.  

Ca n'existe pas. Il n'y a pas de balise alt (<alt> ). Il y a par contre un attribut alt, de l'élément img, composé d'une balise ouvrante <img>, et d'une fermante </img>. Notons qu'en HTML, y'a pas de fermante (<img> uniquement), et qu'en XHTML on peut réduire à <img />.

Oui, enfin bon, quand-même, quoi

En tout cas toi tu n'as toujours rien compris, mais rien compris du tout.
Retourne apprendre au lieu de donner des leçons sur ce forum.
 
Les images pour la mise en page ça ne se met plus avec le tag <img>
un entête de site c'est pas un <img> c'est un H1 qui est ensuite stylé via CSS
 
tiens un exemple concret :  
http://gatsu.ftp.free.fr/Modele/fe [...] /page.html
 
le HTML est propre, nickel, ya rien a dire dessus.  
La bannière c'est du H1, le texte est viré par un Text-indent, puis ensuite tu colles une image en fond et tu dimension l'élément H1
le menu c'est du UL LI A, avec ce qui est fait comme d'hab
les effet-RollOver sont fait en CSS et non pas en JS comme toi tu l'aurais fais (ben oui tu sais faire que ça)
Bon le texte c'est du comicsans, mais j'ai fais ça en 10 minutes pour un mec du forum (déjà que sa charte graphique était charcutée horriblement).
 
Bon j'en reviens aux CSS, quand est-ce que tu comprendras que tu n'as pas ta place dans la cat HTML/CSS/JS Pour l'instant. tu peux très bien parler sur PHP, mais venir nous donner des leçon ici, c'est trop. Je me souviens encore de notre débat puéril au sujet de ce menu :  
http://gatsu.ftp.free.fr/Modele/Menu/menu.html
Pour lequel tu conseillais au gars de faire ça en Javascript, alors qu'il voulait le faire en CSS. faut arrêter là.
Alors va faire mumuse avec tes tableaux, tes imgs et tes spacer.gif ou tu veux, mais pas ici. Ou plutôt reviens quand tu auras décidé d'apprendre les CSS

C'est exactement ce qu'il ne faut pas faire Si tu désactives les images, mais que tu laisses les CSS, bah y'a plus de titre de site Faut jamais remplacer du texte par une image en utilisant text-indent... Vaut mieux foutre un span vide dans le h1 qui servira de conteneur pour l'image, pour avoir une accessibilité à 100%

T'es gentil gamin, mais je fais ce que je veux comme je veux.
Et évite d'utiliser les mots des grandes personnes quand tu ne sais pas ce qu'ils veulent dire.

Lol, l'exemple concret :
Blocage des images et agrandissement du texte parce que j'ai du mal à voir :

 
lol, je me gausse devant un exemple si bidon venant d'un si grand expert.
 
Je te passe l'exemple de ton super menu ou en masquant les images on a tout simplement une page... ...blanche.        
 

Pourquoi mettre un span dans le H1 pour contenir l'image ?
puisque dans tous les cas on veut faire disparaître tout le texte contenu dans le H1, donc faut bien utiliser une technique plus ou moins sauvage.
 
Et puis si le gars navigue sans images, autant qu'il navigue sans CSS laule

bah t'a qu'à retourner faire tes menus non accessibles en Javascript avec des img et spacer.gif, mais tu n'avanceras pas à grand chose.

Ha, le haineux dégouté, ptdr  
Allez va, soit pas deg, ça arrive à tout le monde de foirer ses exemples.      

L'accessibilité, c'est concerner 100% des cas différents... Y compris les scénarios images off/css on... Faut faire les choses à fond

J'insiste.  
 
Non mais des fois, faudrait se défaire de cette habitude, que seul un soucis d'esthétique fort contestable motive.

Salut,  
Tout d'abord Gatsu35 ce que tu as fais en 10minutes moi je trouve ça pas mal du tout (j'ai pleuré en retournant sur mon site).
Bon bon bon  ça fait pas mal de jours que je bouffe du HTML, ok ça y est je pense avoir bien pigé le truc   , donc c'est tout naturellement que je voudrais me lancer vers le css comme on me l'a conseiller plus haut................ Bon je suis allé sur pas mal de tutos et dans l'ensemble c'est assez galère  , j'ai bien pigé le coup du h1, h2, etc, mais voila le genre d'exemple de chose que je trouve :
 
 html,body {
background-color : white;  
}
 
p,ul,li,td {
font-size : 100%;  
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;  
color : black;  
background-color : white;  
}
 
h1 {
font-size : 200%;  
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
color : navy;  
text-align: center;
}
 
h2 {
font-size : 150%;  
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;  
color : red;
padding-left:15px;
}
 
a:link {color: green; text-decoration:underline;}
a:visited {color: gray; text-decoration:underline;}
a:hover {color:red; text-decoration:none;}
 
blablablablabla......... bon moi bêtement je prends ça! je le colle dans mon éditeur pour tout décortiquer et ça me donne un grand n'importe quoi  
 
Je précise que c'est un site pour débutant ........................  
 
deux choses :
 
1- quelqu'un pourait m'expliquer simplement à quoi sert le css vu qu'a chaque exemple ils donnent généralement sa correspondance en HTML ?
 
2- pouriez-vous m'indiquer un site style : "le css pour les nuls" avec des vrais exemples pas à pas (hors alsacréation)
 
 
 
d'avance merci

http://siteduzero.com/tuto-3-6-0-a [...] tml#part_8
 
Tiens, ma femme s'y est mis dernièrement, elle s'en sort bien avec ce site et ça a l'air correcte.

Mieux, tu mets ton image derriére par css et tu laisses simplement le texte de base stylé par le css.
Je vois pas de raison de le virer si c'est pour le remplacer par le même texte sous forme d'image. Au pire, la personne véra le texte affiché dans la seconde ou troisiéme police de la liste.

Si même entre extrémiste du W3C vous arrivez pas à vous mettre d'accord, comment voulez vous réussir à faire passer le message de ce qu'il faut et ne pas faire.
 

En se mettant d'accord sur les principaux trucs à faire et ne pas faire.
Il y a juste quelques pratiques d'extrémistes pour lesquels on est pas tous d'accord.
Certains sont des pro "text-indent" (pratique que je désaprouve, mieux vaut rendre le texte invisible) d'autres des pro "texte toujours + images en fond". Certains sont des "pro-css Vs Js" (si le css sait le faire pourquoi pondre du js) et d'autres des "pro Js Vs css" (pourquoi tenter le diable avec des css alors que le js équivalent passera sur au moins autant de navigateurs si ce n'est plus)
 
Mais bon, c'est bénéfique comme discution sinon on évoluerait jamais, et il vaut mieux ce genre de discution qu'un forum de mouton.
 
PS : Par contre, quand on voit des <center> inutile, des div partout par ce que "table" de présentation c'est le mal ou des images de séparation d'1 pixels, là, on est tous d'accord.
 
EDIT : Et puis sur ce forum, il y a pas que des pro du W3C : par exemple toi qu'est trop dirigé JS à tout va et pas assez css et moi qui suis loin de tout conaitre en css et en xhtml.

sil20 > http://www.yoyodesign.org/doc/w3c/css2/cover.html Pour une traduction de la documentation officielle (la traduction n'est pas officielle elle) de la norme css2.
T'y apprendras plus de chôse qu'avec une simple explication à la va vite de chaque terme que t'as saisie.

Ouai, avec toi ou FlorentG, avec certain, comme l'exemple plus haut, c'est "j'ai raison, ta gueule et casse toi t'as rien à faire ici", super.    
 

Moi j'avoue, je fais tout ça (non, sauf le spacer.gif d'un pixel, faut pas déconner quand même). Par facilité.
 

Je ne suis pas dirigé JS à tout va, dans l'exemple du menu plus haut donné par Gatsu, ma solution en JS était malgré tout plus accessible puisque sans affichage d'image, on n'avait au moins le texte alternatif alors que là, on a un beau morceau blanc. M'enfin peu importe que j'ai raison ou que j'ai tort, je persiste, je ne dis pas que c'est grace à moi, mais depuis que je poste sous ce pseudo, j'ai vu certaine personne se modérer un peu sur certains points (Dreamweaver par ex.), ça prouve que le dialogue est possible avec certain, tant pis pour les autres qui vivent dans leur bulles élitistes.

Si c'était la discution que je pense sur un menu tout css, alors la solution que j'avais indiqué moi marchait tout aussi bien (sauf sous IE où le menu ne se déroulait pas mais où il restait quand même affiché tout le temps) sans perte de texte.

bon ça avance pas mal suite à vos conseils
j'ai un petit prob avec le CSS
Voilà je voudrais mettre une image de fond à l'intérieur d'un block
l'image s'appelle "intro" dans le dossier "index"
Voici la partie du script concerné :
 
CSS:
#intro
{background-image: index/intro.jpg;
font-family: Arial;
color: black;
font-size: 17px;
text-align: center;
font-weight: bold;
width:400px;
height:400px;
padding: 20px;
margin: 0px;
border: solid 5px
}
 
HTML:
<body>
<div id= "intro"><p>blablabla</p></div>
 
Le truc c'est que ça marche impecable dans "création" et "fractionné"   mais dans apperçu ..... pas d'image de fond et quand je le transfère sur mon site idem  
J'ai essayé plusieurs truc mais là je sèche !!!!
J'oubliais j'utilise toujours frontpage mais je tape moi même mes codes

Ta partie css, elle est dans un fichier css ou dans les pages html?
Si c'est dans le fichier css, t'es sur que le dossier index est dans le dossier où ce trouve le fichier css?
Dans l'autre cas, tes trois pages sont dans le même dossier?

La partie CSS se trouve dans la page html
Et fait j'ai créer un dossier "index" pour stocker tous les images/.gif/etc se trouvant dans la page index
Mais la page index.htm ne se trouve pas dans ce dossier

ton dossier index est où par rapport à tes pages?

dossier "mon site web"
                       index.htm
                             sous dossier "index"

à part "index.htm" toute les autres pages se trouvent dans leurs dossiers respectifs

Si toutes les pages sont dans des dossiers différents avec dans chaque page "background-image: index/intro.jpg;", alors il faut rajouter un / devant "index" pour préciser que le dossier se retrouve à la racine du site.
 
Au fait en passant, vérifie les majuscules et minuscules. Les serveurs web font souvent la différence entre les deux. Une partie du probléme pourait venir de là.

J'ai trouvé en déplaçant le dossier frontpage a modifié tout seul le script et m'a donné la solution:
{background-image: url('Index/intro.jpg');
et ça marche  

Tiens fait en 5min:
 
http://southriders.free.fr/vrachtml/silb/silb.html
 
css:
http://southriders.free.fr/vrachtml/silb/style.css
 
Voilà là c'est mieux...Bon im not the pro, donc maybe 2-3 erreurs, mais en cherchant bien alors..

merci xtof_83
mais une petite question :  
dans ta ligne "font:20px/40px Arial, Helvetica, sans-serif;"
admetons que ces 3 polices soient installé sur mon pc, quel est le critère de choix de l'explorateur ?   de même que pour la taille ?

Pour:
20px/40px
 
signifie:
20px pour taille des caractéres...
40px hauteur de la ligne...
 
Ensuite comme dis précédement dans ce sujet...
 
Arial, Helvetica, sans-serif
permet au navigateur de choisir la premiére police qu il a de dispo...

Bon me revoilou
Je pense avoir pas trop mal avancé dans la compréhension de l'HTML et du CSS  
Voici l'url : http://champ.dhonneur.free.fr/
Ya pas grand chose dedan pour l'instant, juste l'index (et encore ........), mais bon j'ai fais ça en tapant moi-même le code source, et pour moi c'est une grande victoire
Mais je sèche depuis pas mal de temps sur quelques points
J'ai mis tout à l'intérieur d'une "table" pour que ça ne se déstructure pas en fonction de l'explorateur utilisé (vu que align: auto ne fonctionne pas chez moi), je sais pas si c'est top comme procédure mais c'est la seule que j'ai trouvé
Je tiens à préciser que je laisse ce post après avoir tout essayé (dans les limites de mes pauvres connaissance, encore merci au site "du zéro".
Pour faciliter la compréhension je vais encadrer toute mes <div>
Bon c'est partie !!!!!  
 
1 - Les 4 drapeaux en .gif je les voudrais en left/bottom et right/bottom
2 - Les div id "intro et "koufra" je les voudrais centré
3 - Je ne comprens pas pourquoi la div id "corps" ne se cale pas correctement  
4 - Je ne comprends pas non plus pourquoi la div id "appel18juin" ne se cale pas d'autant plus que le total des width fait toujours 800px
 
Je sais que ça doit sûrement être hyper simple, mais là je ne vois pas du tout
Une dernière chose, ça a peut-être son importance : les codes CSS sont dans la page htm
 
<html>
<head>
<title>Champ d'honneur</title>
<style type="text/css">
body
{
width: 800px;
background-color:#cfd209;  
}
 
#en_tete
{background: url('Index/titrebandeau.JPG') no-repeat;
width: 800px;
height: 100px;
border: 2px solid black;;
}
 
#bandeau
{background: #12401a;
width: 800px;
height: 100px;
border: 2px solid black;
}
 
 
#menu
{
float: left;
width: 221px;
height: 800px;
background: #12401a;
margin: 00px;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;
border: 2px solid black;
}
 
.element_menu  
{
font-family: DirtyBakersDozen, arial;
}
.element_menu a:hover /* modification de l'aspect du lien lors du survol du curser */
{background-color: #b3b3b3
}
 
a img /* supprime le cadre bleu autour des photo-liens */
{
border: none
}
 
h1, h2, h3
{
font-family: DirtyBakersDozen, arial;
text-align: center;
}
 
#corps
{
width: 576px;
height: 800px;
background: #12401a;
margin: 00px;
padding: 5px;
border: 2px solid black;
}
 
#Koufra
{background: url('Index/koufra_font.JPG') no-repeat;
font-family: Comic sans ms, Arial;
color: #12401a;
font-size: 20px;
font-weight: bold;
width:300px;
height:100px;
padding-left: 0px;
padding-right: 0px;
margin: 0px;
border: 2px solid black;
background-attachment: fixed;
}
 
#intro
{background: url('Index/intro.jpg') no-repeat;
font-family: Arial;
color: black;
font-size: 17px;
text-align: center;
font-weight: bold;
width:400px;
height:400px;
padding: 30px;
margin: 0px;
border: 2px solid;
background-attachment: fixed
}
 
#appel18juin
{background: url('Index/appel18juin.JPG') no-repeat;
font-family: Comic sans ms, Arial;
color: #12401a;
font-size: 30px;
font-weight: bold;
width:800px;
height:100px;
padding-top: 25px;
padding-bottom: 10px
margin: 10px;
border: 2px solid black;
background-attachment: fixed;
}
</style>
</head>
<body>
<table width=800 align=center>
<div id="en_tete"></div>
<div id="bandeau">
 <img src="/Index/drapeau13.gif" width="68" height="50" align=left>
 <img src="/Index/drapeau13.gif" width="68" height="50" align=right>
</div>
<div id="menu">
 <div class="element_menu">
 <h2>Sites</h2>
 <p align=left><a href="14/18" >14-18</a></p>
 <p align=left><a href="39/45">39-45</a></p>
 <p align=left><a href="Autres périodes">Autres périodes</a></p>
 </div>
<br>  
 <div class="element_menu">
 <h2>Divers</h2>
 <p align=left><a href="Mon musée">Mon musée</a></p>
 <p align=left><a href="Ma médiathèque">Ma médiathèques</a></p>
 <p align=left><a href="Contact">Contact</a></p>
 </div>
<br>
 <div class="element_menu">
 <h2>Bla bla</h2>
 <p align=center><a href="GEB.htm"><img src="Index/GEB.JPG" width=100></a></p>
 <p align=center><a href="JB.JPG"><img src="Index/JB.JPG" width=100></a></p><br><br>
 <p align=center><img src="http://perso0.free.fr/cgi-bin/wwwcount.cgi?df=champ.dhonneur.dat&dd=katt101"></p>
 </div>
</div>
<div id="corps">
 <h1>Bla bla bla</h1>
 <div id= "Koufra">
 <marquee direction=up scrollamount= 2 width=300 height=100>
 <p align=center>"Jurez de ne déposer les armes que lorsque nos couleurs, nos belles couleurs flotteront sur la cathédrale de Strasbourg"  
 <br><br>Serment de Koufra
 <br><br>1er mars 1941
 <br><br>Colonel Philippe « Leclerc »
 <br>de Hautecloque  
 <br><br>(2ème DB).</p></marquee>
 </div>
<h2>Bla bla bla</h2>
 <div id= "intro"><p><br>J’ai créé ce site bla bla bla.</p>
 </div>
</div>
<div id="appel18juin" width=800><marquee direction=left  scrollamount= 10 width=800 height=41>
"Les chefs qui, bla bla bla<p></div>
 
<div id="bandeau">
 <img src="/Index/drapeau13.gif" width="68" height="50" align=left>
 <img src="/Index/drapeau13.gif" width="68" height="50" align=right>
</div>
</table>
</body>
</html>
 
Si quelqu'un pouvais me dire (ras le bol des insomnies)

 
 
heu tu veux me faire plaisir...Télécharge un vrai navigateur...style Firefox....Et matte ton site avec ..
 
Si comme moi tu as envie de te trucider..c'est normal...
 
Aller bonne chance...Mais tu as encore du boulot...beaucoup...
 
Heu autre chose..Pour linstant le css dnas la page c'est pas grave..Mais dés que tu as fini tu le met dans un fichier CSS
 
Et puis non mais le direct..ça change rien en fin de compte....
 
Aller dodo pour moi...Mais svp...dl un vrai navigateur...
 
Tiens je suis gentil un screen jsute pour toi (garantie sans montage)
 

 
tiens javais pas vu, mais certain élément doivent etre en fixe..ça fait un super caca boudin sous FF..
Mais c'est classe  

LA VACHE !!!!!!!!!!!!!!!!!
Avec EI ça marche bien pourtant, y compris dans les apperçus de Frontpage
(à part les 4 points)
Chui deg !!!!!!! Ca donne envie de tout plaquer   !!!!! Des heures de boulot et .......  
bon bah je vais vomir et je m'y remets  
Mais chui vraiment deg
J'ai pourtant suivit à la lettre toutes les indications, je ne comprends pas  
Ton screen m'a ruiné le moral

 
Ben, c'est tout l'intérêt du web. Un fois que tu as compris comment faire "en théorie", il y a tout ce qui concerne la pratique avec son cortège d'exceptions et de particularismes.
 
A ce stade tu devrais juste un peu modifier ta méthode : dès que tu fais une manip', tu vérifies ce que ça donne sous Firefox en plus de de IE. Si une différence apparaît, tu cherches ce qui se passe. Plutôt que de te retrouver avec une page truffée de différences qui doit être une chouille démoralisante.
 
Ca avancera moins vite, mais mieux. Et qui dit Firefox OK, dit Mozilla et Safari ok, à peu de chose près.
Pour IE Mac par contre ce ne sera pas si facilement gagné... remarque pour IE 4-PC non plus    

Bon après m'être couché à 3h00 avec 4kg de Prosac , j'ai un peu plus les idées claires ce matin.
J'ai installé ce matin Firefox .......... et j'ai pleuré  
 
En fait je cherchais désespérément des codes middle/bottom/ ... alors qu'il me suffisait de jouger avec la taille des marges  
Par contre c'est quand même très déstabilisant cette différence IE/Firefox.
IE facilite quand même grandement les choses, mais j'ai comme l'impression qu'il ne tient pas compte de toutes les marges .............
 
Deux questions:  
1 - Si mon site en Nickel sous Firefox le sera-t-il forcément sous IE ?  
2 - Pourquoi 800px sous IE n'est pas = à 800px Firefox ?  

sil20 > nickel sous firefox <> nickel sous IE 6
IE 6 prend des libertés par rapport à certaines erreurs ce qui fait que ca peut être nickel sous IE 6 mais pas sous les autres et firefox dispose d'un moteur de rendus qui gére des régles css inconus ou méconus d'IE6.
Pour tes 800px<>800px, ca vient du fait que par défaut, IE ne gére pas les "boites" de la même maniére que la norme css. Si tu veux éliminer cette différence, il faut donner un "doctype" à ta page html. Ca réduira également le nombre de différence de rendus entre les navigateurs et c'est censé limité les risques de "mon site est tout cassé avec le IE7". (dont la béta2 vient d'ailleur de sortir et il y a déjà des cas de personnes dégouté de l'affichage de leur site sous cette version là)

Ok j'ai pigé à quoi servent les doctypes  
Sur: http://pompage.net/pompe/doctype/ ils expliquent bien le fonctionement
Par contre
1 - Comment savoir quelle doctype dois-je choisir ?  
2 - Où la placer exactement ?

Au tout début de lma page html, avant tout autre caractére y compris les espaces ou les retour à la ligne.
 
Pour le doctype, ca dépend de ta page, on ne peut pas répondre. Si t'as une frame, il faut obligatoirement un doctype "frameset". Sinon, c'est un "transitional" ou un "strict" en fonction du code de la page. Quand à "html4" ou "xhtml1", ca dépend de la norme que tu accepte de suivre.
Evidement, si tu veux faire les chôses bien, une fois choisit une norme, il faut corriger les erreur à l'aide (par exemple) du validateur du w3c : http://validator.w3.org

Je n'ai pas de frame dans ma page
Le truc c'est qu' à chaque fois que mets un doctype ça me flingue ma mise en page !
C'est quoi encore cette histoire de norme ????
Comment puis-je définir la norme que j'uitilise (que j'étais même pas au courant d'utiliser)
Chui un peu paumé sur ce coup là