18073 sujets

Questions générales et questions de débutants

Première page en CSS-P et déjà des difficultés

Bonjour,
J'aimerais apprendre le CSS-P. J'ai donc utilisé la "première" page que Raphaël propose d'éditer. J'ai essayer de reproduire une page à peu près identique à la page de mon site actuel. Tout c'est plutôt bien passé quand je l'ai affiché avec iE Smiley biggrin , mais Firefox m'a cassé le moral Smiley decu . Si Firefox affiche pas mal le positionnement des blocs, il semble qu'il y ai un problème avec les dimensions de ceux-ci. Ce n'est le seul problème que je rencontre, mais pour le reste je dois d'abord apprendre Smiley murf ..

Si vous voulez bien jetter un oeil sur la page que j'ai mis en ligne, et si vous voulez bien m'éclairer, voici l'adresse :

http://www.upop-montreuil.com/test/index.html

Merci à tous, et bonnes fêtes.

Micky
Bonsoir,
Pour reprendre au début la conception, essayes d'abord de définir un Doctype pour ta page qu'il soit html ou (x)html et ensuite il faut s'y conformer. C'est une base indispensable pour t'assurer que les différents navigateurs interprèteront ta page dans les même conditions, et tu verras à l'usage que c'est plus du côté de Firefox, Opera et autres navigateurs que du côté de IE que les résultats attendus sont conformes.
Voir aussi sur ce sujet:
http://www.w3.org/QA/2002/04/valid-dtd-list.html
http://openweb.eu.org/articles/toi_comprendre_moi/

Une fois digérer cette première partie, une nouvelle lecture édifiante s'impose (désolé on lit beaucoup avec les standards Smiley lol ):
Gérer les modèles de boîtes CSS standard et Microsoft

Ensuite tu devrais faire une petite lecture sur les id et les class, dans les tutoriels:
http://www.alsacreations.com/articles/id_class

Bon cela devrait être suffisant pour cette nuit Smiley cligne
L'URL de la page que tu nous donnes ( http://www.upop-montreuil.com/test/index.html ) affiche une page dont voici le code source :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<SCRIPT LANGUAGE="Javascript">
<!--
function hideStatusBar() {
window.status='';
window.setTimeout(hideStatusBar,10);
}
hideStatusBar();
//-->
</SCRIPT>
<TITLE>Université Populaire Anatole France de Montreuil-sous-bois</TITLE>
<meta name="title" content="Université Populaire Anatole France de Montreuil-sous-bois">
<meta name="description" content="Accès à la culture et aux savoirs pour tous, conférences universitaires.">
<meta name="keywords" content="université, populaire, montreuil, Félix Kreissler, Gilbert Badia, conférences">
<meta name="owner" content="">
<meta name="reply-to" content="sendtotryout@yahoo.fr">
<meta name="subject" content="">
<meta name="author" content="©m2004">
<meta name="copyright" content="">
<meta name="content_language" content="fr">

<meta name="robots" content="">
</HEAD>
<FRAMESET COLS='0,*' border=0>
<FRAME NAME='blank' border=0 marginwidth=0 marginheight=0 top=0 left=0 NORESIZE>
<FRAME NAME='redir' SRC="[b]http://perso.club-internet.fr/mcavallo/upop[#red]/[/#]/test/index.html[/b]" marginwidth=0 marginheight=0 top=0 left=0 NORESIZE>
<NOFRAMES>
<BODY>
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

Donc, cette page est construite à l'aide de cadres (frames), mais ceux ci sont obsolètes. Au final, il faudrait sortir ta page des frames (un lien direct vers celle-ci).
Lire : Pour en finir avec les cadres.

Donc l'addresse de ta page (en gras) est :
http://mcavallo.club.fr/upop/test/index.html

Noter qu'il y a un slash "/" de trop dans l'URL (en rouge).

Je reviendrai avec mes observations. Smiley cligne
Modifié le 24 Dec 2004 - 11:53
Donc, comme Igor le mentionnait, il te faut un DOCTYPE. Sans la présence de ce dernier, IE 6 passe en mode "quirk", délivrant le modèle de boîte erroné de Microsoft. Bonne nouvelle, car en ajoutant un DOCTYPE à ta page, ton problème part en fumée !

Puisque tu est en début de conception, je te suggère d'utiliser la syntaxe XHTML. Felipe t'as déjà dirigé vers XHTML en une heure. La seule correction à faire dans ta page se situe au niveau des "line-break" <br>. Avec la syntaxe XHTML, tu dois écrire <br /> (le slash fermant la balise).

Pour le DOCTYPE, je te suggère le "Transitional", en raison des "Pop-ups" insérées en bas de page (sources) par l'hébergeur - <script language="javascript"> n'existe pas en "Strict", on écrit plutôt <script type="text/javascript">.

Lire : Le DOCTYPE qu'il vous faut

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Félicitation ! Trés bien pour un premier jet ! Smiley cool
Modifié le 24 Dec 2004 - 04:32
Bonjour,
Merci pour vos conseils Smiley biggrin . Je vais donc ajouter le DOCTYPE proposé par Stephan. J'ai de la lecture, avec les PDFs de Raphaël plus les pages d'Igor Smiley ravi .
La page n'est pourtant pas insérée dans des frames ? Cela vient peut-être du double slash signalé par Stephan.
Je redonne l'adresse, sans la redirection :
http://mcavallo.club.fr/upop/test/index.html

Encore merci et bon Noël à tous Smiley biggrin .
Bonjour,
J’ai inséré le doctype comme il convient et tout va mieux (merci Stephan). Tout, enfin presque. Un bloc pose encore problème avec Firefox (le bloc « Help ! » en haut de la page). Son positionnement est correct, mais sa hauteur est doublée ?!? (avec Firefox).
Pourtant les autres blocs ne posent aucun problème (iE et FF = ok)…
J’ai lu les problèmes d’interprétation des « padding » avec iE. Le problème ne semble pourtant pas venir de là. Sans les « padding », le problème demeure.

PS : Au sujet des frames. Je n’ai pas créé de frames (ça au moins j’en suis sûr..). Je me demande si la confusion ne vient pas de la redirection. J’ai placé la page de test dans un répertoire de mon site dont l’adresse est une redirection d’AMEN vers Club-Internet. Je vais peut-être dire une grosse bourde, mais est-il possible qu’AMEN créer une page (un conteneur) qui affiche ma page (comme un bloc).

Mais le plus important, c’est que vous passiez tous un bon Noël.
Merci de votre gentillesse.

Micky
Bonjour et merci Micky, passe aussi un bon Noël Smiley biggrin

Tu dois avoir un hébergement gratuit et une frame est placée dans tes pages par l'hébergeur, cette frame semble ouvrir une fenêtre popup.

Ce n'est pas génial pour l'accessibilité ça. Tu peux facilement le constater en faisant un View source sous Firefox.

Pour ton autre problème, je n'ai pas encore regardé si je peux t'aider Smiley cligne
La prochaine étape va être d'optimiser ton code HTML et CSS, donc la boite "help" va y passer.

Au programme :

- utilisation des propriétés raccourcies (CSS)
- utiliser de vraies listes pour les liens (HTML)
- etc...

@+
Sujet clos
Aller à