Reprise du message précédent :
g découvert 1stpage2k. je pourrais pas m'en passer maintenant  

 
emacs

context

Cf http://forum.hardware.fr/forum2.ph [...] h=&subcat=
 
(et il y en a d'autres des sujets comme ça)

dsl avait pas vu    
 
un lien pour faire une barre de menu avec des CSS
 
http://www.brainjar.com/dhtml/menubar/

Ajouté au sujet sur les menus

Redesignons Microsoft.com pour le rendre conforme aux standards :
http://www.evolt.org/article/A_Cor [...] index.html

Oui c'est un exercice classique pour les "évangélisateur" des normes du W3C.
 
Justement, Tristan Nitot avait une petite revue de ces nettoyages il y a quelques temps : http://www.nitot.com/standards/blo [...] p#88058407
 
 
Suite au topic assez mouvementé sur Graphisme il y a quelques jours, je m'étais dit qu'un tel redesign pouvait être intéressant pour cette FAQ.
J'ai commencé à travailler sur http://www.voila.fr/ mais je pense qu'on peut trouver pire comme site (celui là recourt massivement aux tableaux et aux gif transparents, mais il utilise assez les CSS pour la mise en forme ; pas beaucoup de tag FONT à ma grande déception). Donc si vous avez une idée, dites le moi vite avant que je n'avance trop sur le site de Voilà.

yahoo.com il me semble que ça a déjà été fait. Mais pourquoi pas.
wanadoo.com c'est un vrai challenge : frame + tableaux et tout le document est écrit à coups de document.write()...

Mais c'est affreux le site de wanadoo

remarquez, www.hardware.fr il est pas top non plus

Laurent Denis m'a indiqué quelques précisions concernant des questions posées ici dans cette FAQ.
 
 
Tout d'abord, kadreg se demandait pourquoi l'écriture de l'élément <script> de cette manière :
 

 
Ne marche pas avec IE et Opéra, alors que ça ne pose pas de problème pour Mozilla.
La réponse est dans la norme XHTML : http://www.w3.org/TR/xhtml1/#C_3
Bref, seuls les élements dont le contenu est toujours vide (IMG, LINK, BR...) peuvent prendre la forme réduite (<img ... />, <link ... />, <br />...). Tous les autres éléments doivent avoir leur balise ouvrante et fermante distincte.
 
Si Mozilla accepte le <script ... /> c'est parce qu'il offre une meilleure compatibilité avec le XML : http://www.w3.org/TR/REC-xml#sec-starttags où tout élément vide peut être écrit sous sa forme réduite.
 
 
En réponse à Schmiz, qui avait quelques soucis avec son site.
Le code de ton site ne comporte en effet que des DIV. C'est bien (enfin c'est mieux que les tableaux ) mais il faut savoir que le DIV est un élement neutre qui n'apporte aucun sens à ton document.
Le XHTML pousse en effet à utiliser le plus possible toutes les balises dispobibles afin de bien structurer le document.
 
Bref au lieu d'écrire : <div class="titre1"> ou <div class="sousTitre"> utilise, plutôt <h1> et <h2> quitte à les rédéfinir avec les CSS.

J'ai intégrer du cide CSS dans du HTML.
Lorsque je l'éxécute avec Internet Explorer 6, cela fonctionne parfaitement mais lorsque je le fais avec Internet Explorer 5, cela ne fonctionne pas du tout.
Est-ce que cela serait possible d'en connaitre les raisons ?
Est-ce que le CSS fonctionne bien avec Internet Explorer 5 ?
Merci.

Non, on ne peut pas deviner ton code. Crée un sujet pour ça.

Plus ou moins. Voir en première page, il y a plusieurs liens sur des tableaux de compatibilité des propriétés CSS selon les navigateurs.

un bon gros site à visiter sur css et le reste
 
http://webdesign.about.com/cs/css/
 
pas sur que cela ne fasse pas doublon avec tous ceux déjà sité mais bon à voir...

Je profite d'un lien posté dans un autre topic pour faire le point sur l'overflow.
 
L'overflow est lié à la propriété CSS 'overflow: visible | hidden | scroll | auto' http://www.yoyodesign.org/doc/w3c/ [...] f-overflow
 
Lorsqu'un bloc a la propriété d'overflow à auto, des barres de défilement apparaissent lorsque que le contenu du bloc dépasse les dimensions de celui-ci. L'effet produit sera similaire aux IFRAMES.
 
Sans cette propriété, le contenu sortirait du cadre ou agrandirait celui-ci (selon que les dimensions ont été defines ou que l'on ait affaire à un tableau).
 
Ces 2 topics permettent d'illustrer l'utilisation de la propriété overflow :
- http://forum.hardware.fr/forum2.php3?post=22751&cat=10
- http://forum.hardware.fr/forum2.php3?post=25249&cat=10
 
 
La différence avec les iframes, c'est qu'on ne se lie pas à autre document. Tout est contenu dans la même page. En terme d'accessibilité c'est une bonne alternative.
 
 
Un article sur le sujet, et en particulier lorsqu'on cherche à avoir un fond fixe avec IE et Mozilla (qui ne positionnent pas l'image de fond de la même manière) : http://www.neokraft.net/docs/css.overflow

Merci, j'ajoute

http://developer.apple.com/interne [...] sbugs.html ?

Merci, mais j'ai déjà mis en lien http://developer.apple.com/ sur la première page. Alors pour pas être trop submergé de liens je me permets de ne pas l'ajouter

euh j'ai l'impression que je l'ai deja demandé mais
j'ai
 

 
bon, mon image etant plus haute que mon texte, elle bouffe les bordures du <p>.
Qu'est-ce que je peux faire?

Ajoute un <div class="spacer"></div>
 
avec :
 
.spacer {
  clear: both;
}
 
Après le texte.
 
On peut faire ça avec un <hr> aussi (sémantiquement plus correct).
 
L'astuce est donnée dans le commentaire sur le positionnement, dans la partie sur les flottants

euh mais ça marche pas

sinon le hr, dans ou hors du <p>?
et pour le style pour qu'il soit joli?

mais hotshot ça marche pas mieux non plus
le hr du bas se fait bouffer par l'image

je voulais dire pour le style du hr pour l'avoir d'1 px d'epaisseur

URL ?

si je met le <p> dans un <div>, et que je met mets border sur le div au lieu du p, ça marche, j'ai du louper un épisode

mairde, j'arrive pas a aligner l'image sur le bas du paragraphe au lieu du haut

Poste ton code ou l'URL ! On parle dans le vide là !

ben j'ai po d'url là c pour un template de mail
merci qd mm

...ou ton code...

j'arrive j'arrive...
viens de rentrer à la maison

http://pouetpouetpouet/test.html
 
voudrais aligner le bas de l'image avec "à ce logo:"
 
tiens faudrait que je change le doctype
 
 
tiens au fait, on parle toujours de la compliance des browsers, mais quid des clients mail?

Bon, pour ce que tu veux faire il vaut mieux utiliser le positionnement absolu.
 
Ajoute à .details :
 
position: relative;
padding-right: 120px;
 
 
Et donne à ton images les propriétés de style :
 
position: absolute;
right: 0;
bottom: 0;
 
 
Pour que ça marche avec IE 6 il faudra mettre un DOCTYPE Strict.
 
 
En général les clients mails sous Windows (sauf Moz et Opéra) utilisent le moteur de rendu du IE qui est installé.

 
 
euh je vais chipoter (d'autant que pas besoin dans mon cas), mais y'a pas moyen que le texte "wrappe" autour de l'image?

Non On ne peut le faire qu'avec la propriété float. Mais le problème de la propriété float c'est qu'elle aligne toujours un bloc à partir du haut de celui-ci. C'est pour ça que ce que tu veux faire n'est pas possible avec les flottants (vu que tu veux aligner le bas de ton image avec le bas du paragraphe).
 
Au pire tu peux déporter les propriétés que je t'ai fait rajouter à .details sur le dernier paragraphe (et donc placer l'image dans ce paragraphe). Comme ça les paragraphes du dessus iront "wrapper" l'image. C'est mieux que rien...

ok merci
de toutes façons pour le cas qui m'occupe ici, les § au dessus sont tres courts, 3 4 mots par ligne maxi

euh dans ie l'image apparait tout en bas

Avec quel Doctype ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  

 
(c tjs online si tu veux voir les modifs... je l'ai passé avec succès au validateur d'ailleurs)