Aller au contenu

Problème d'un novice en XHTML

Athmos

Par Athmos
dans (X)HTML et CSS

 Partager

Sujets conseillés

Athmos

Athmos

Posté
Posté (modifié)

Bonjour à tous.

Conscient que la norme XHTML est plus que nécessaire j'ai décidé de refaire un petit site (10 pages) en XHTML strict afin de me mettre au goût du jour !

Si je maîtrise le HTML et que je me suis toujours bien débrouillé avec les CSS (1 & 2) je me retrouve perdu face au XHTML "strict".

Après avoir consulté divers sites (openweb, pompage, alsacréation...) j'ai bien compris qu'il faut fermer les balises, taper les balises en minuscules (...) bref, à part <br /> et <img />, rien de ce que je faisait déjà !

Reste l'entête à définir, je pense qu'elle est correcte (je ne connais pas bien les DTD/DOM et autres) :

<!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>...</title>
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="....css" media="screen" title="..." />
</head>
<body>
Mon contenu
</body>
</html>

Confiant, je me lance en faisant ma CSS puis ma page d'index.htm.

Et là, pour la première fois depuis mes tous débuts en HTML, rien n'apparaît à sa place !

Pas moyen de center la #div principale, les class passent bien mais comme je ne peux plus utiliser les "table" ou les "height", je me retrouve coincé dans une mise en page que je ferais en 5mn en CSS/HTML (mais qui n'apparaîtrait pas bien dans tous les navigateur ;) )...

Je suis quelque peu désespéré devant cette nouvelle norme.

Comme écrit ci-dessus, j'ai pourtant consulté de très bons sites mais aucun ne montre clairment ce problème de positionnement.

Ou trouver un site qui montre clairement le positionnement en XHTML ?

Merci d'avance et bon courage aux autres novices :!:

Modifié par Athmos
Lien vers le commentaire
Partager sur d’autres sites
PsyKoTiK

PsyKoTiK

Posté
Posté (modifié)

tu devrais tout ce qu'il te faut pour le DTD , là : -http://toozeweb.cliranet.com/?r=xhtml_4_1

pour le centrage : -http://toozeweb.cliranet.com/?r=xhtml_3_5#alignement

pour le positionnement en CSS fait un tour : -http://toozeweb.cliranet.com/?r=trucs_web#2 ou http://openweb.eu.org et http://alsacreations.com et tape positionnement , ca devrait y etre sinon atteint les prochains cours de toozeweb ...

en espréant avoir répondu à tes attentes , ++

EDIT : fautes de frappes !

Modifié par Dan
Lien vers le commentaire
Partager sur d’autres sites
Perrine

Perrine

Posté
Posté

Bonjour Athmos :)

Un extrait du code et de la CSS pourrait nous aider

Ton header est ok.

Tu peux cependant encore l'optimiser en déclarant le charset, cette ligne là :

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />

avant le <title> de manière à ce que le navigateur sache quel jeu de caractères est utilisé pour afficher le titre.

Pour le problème de positionnement, il nous faudrait plus qu'un <body>Mon contenu</body> ;)

En général, on utilise un div #contenu pour placer tout le contenu à l'intérieur. Dans ta CSS, le #contenu doit avoir les propriétés suivantes :

margin-left:auto;
margin-right:auto;

ce qui permet de centrer le div tout simplement.

Je ne connaissais pas non plus le site de PsyKoTiK. Pas encore pris le temps de tout lire mais il m'a l'air assez complet ! :wub:

Lien vers le commentaire
Partager sur d’autres sites
Athmos

Athmos

Posté
  • Auteur
Posté

Avant de poser d'autres questions je vais consulter le site :::TO ZE WEB::: à fond car j'apprends de petites choses tous les 4 pages, donc à force, je devrais y arriver !

(reste à voir comment le positionnement dera traîté !).

A très vite.

:rolleyes:

Lien vers le commentaire
Partager sur d’autres sites
Athmos

Athmos

Posté
  • Auteur
Posté

INCROYABLE, pour le moment, je praviens à faire ce que je veux :!: :thumbup:

Je suis trop content !!! ^_^

OUAIS :P

Bon, plus sérieusement merci à vous :up:

Le site est TRES complet (juste un pb au niveau des exemples sur fond noir qui empêche de voir la plupart des exemples ! => j'ai envoyé un mail au webmaster).

Les cours sont clairs et avec le "margin auto" c'est parti. :clap:

Juste une petite question aux modérateurs / administrateur du forum, j'ai bien vu vos article mais (sauf erreur de ma part) je n'ai pas vu un post-it avec les liens utiles (comme ce site).

Ca éviterais pas mal de doublon dans les questions s'il y avait un post-it avec tous les sites à consulter avant de bloquer comme un novice ! ;)

MERCI A VOUS ! Et vive la communauté du net.

=> je retourne à mes div et mes css !

:lol:

Lien vers le commentaire
Partager sur d’autres sites
Athmos

Athmos

Posté
  • Auteur
Posté

Grâce à vos conseils, je me suis mis à 100% au XHTML.

Je suis arrivé à refaire mon site en XHTML stricte.

La première version en HTML + CSS passait très bien sous IE et pas FIREFOX.

Avec la nouvelle version en XHMTL tou va bien sous firefox et boum, cette fois-ci c'est IE qui ne va plus !

Avec IE allez voir :

http://buellpassionfrance.free.fr/buell.htm (version HTML + CSS)

Avec FIREFOX allez-voir :

http://buellpassionfrance.free.fr/site2/buell.htm (version XHTML stricte)

C'est identique !

Mais si vous inversez les navigateurs, le problème avec les vignettes de mises à jour (en bas) sont assez semblable...

Comment faire pour que la nouvelle version passe sous IE ?

Merci d'avance et merci pour les coups de mains précédent, je commence à y voir clair en XHTML !

;)

Lien vers le commentaire
Partager sur d’autres sites
Athmos

Athmos

Posté
  • Auteur
Posté

J'ai oulbié de vous dire que sur la deuxième version AUCUN lien ne fonctione !

:blush:

=> c'est juste en ligne pour vous montrer mon problème de mise en page + vous fournir le code.

Lien vers le commentaire
Partager sur d’autres sites
Perrine

Perrine

Posté
Posté

Salut Athmos :)

Fais attention, certains de tes <br> ne sont pas fermés avec le /

Pour ton problème, cela vient du fait que tu appliques une marge gauche sur tes div .mjg et .mj1.

Pour résoudre cela et avoir un affichage identique sur IE, il te faut supprimer les margin-left:16px de .mjg et .mj1 et ajouter un padding-left:16px sur ton .majgauche.

J'ai testé et ça fonctionne sous IE ;)

De manière générale, quand tu veux positionner des boites dans une autre boite, notamment quand il y a des marges intérieures au bloc parent, il vaut mieux jouer avec le padding du bloc parent plutôt qu'avec le margin de toutes les boites qui sont contenues dans le bloc parent.

Lien vers le commentaire
Partager sur d’autres sites
Athmos

Athmos

Posté
  • Auteur
Posté

Merci pour ta réponse, l'idée est très bonne mais ça ne fonctionne pas.

Les 2 cases de mises à jour de droite sont collées (donc il faut que je créé 2 classes de plus... ça devient lourd) et le menu de droite "tombe" et ne veux plus tenir sur la ligne (même sans margin ou padding dans sa classe).

Je vais essayer de trouver une solution :wacko: :!:

Dur dur de "re"-débuter...

^_^

Lien vers le commentaire
Partager sur d’autres sites
Athmos

Athmos

Posté
  • Auteur
Posté

Opps, 1 mn plus tard j'ai la solution !

Padding comme tu l'as dit + un padding supplémentaire dans les deux classes concernées pour espacer les 4 cases de mises à jours.

Merci pour la "leçon" de marge, il faut que je bosse dessus + les positionnement absolute/relative...

Je vais aller voir les bons sites pour cela !

MERCI :!:

:lol:

Lien vers le commentaire
Partager sur d’autres sites
Athmos

Athmos

Posté
  • Auteur
Posté

Nouveau problème.

Cette fois-ci à cette page : http://buellpassionfrance.free.fr/site2/conseil.htm

Ce qui ne va pas : dans le contenu, la partie droite (là ou il y à l'image CONSEILS) ne descend pas jusqu'en bas (au même niveau que la partie gauche où il y a le texte).

J'ai lu l'astuce avec le <hr /> invisible pour faire que le conteneur englobe les deux parties dont la plus petite.

Malgrès cela, je ne parvient pas à allonger cette partie droite.

Que faire messieurs & mesdames les experts ?

:huh:

Lien vers le commentaire
Partager sur d’autres sites
MissMonde

MissMonde

Posté
Posté

Bonjour Athmos,

eh bien, comme les 2 parties ont la même couleur de fond, tu peux essayer d'enlever les bords oranges de la partie droite et de mettre un border-right orange au contenu central, ça fera la séparation et ça ira jusqu'en bas.

Martine

Lien vers le commentaire
Partager sur d’autres sites
MissMonde

MissMonde

Posté
Posté

Dans ce cas, tu mets en background global (regroupant partie centrale et partie droite) la couleur de ta partie droite et tu appliques à la partie centrale sa couleur.

je ne sais pas si c'est clair.

tu as aussi la possibilité de faire une image de fond de la largeur de la page et de qqs pixels de hauteur; répétée sur toute la hauteur, elle sert à simuler les colonnes.

Martine

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...