Pourriez-vous m'aider pour le nouveau CSS de mon site ?

Bonjour à tous !

Voila, en fait, j'aimerais changer le design de mon site de façon à ce qu'il soit extensible !

Dans l'ensemble, ça va à peu près seulement il y a un hic (un énorme si je puis me permettre !). Le 'hic', c'est que les images des cadres ne veulent pas toutes s'afficher ! Je suis pourtant sûre d'avoir choisi les bonnes images !
Là où je suis moins sûre, c'est sur comment dire au CSS "tu mets ça là et ça ici" .

Voilà mon site avec son design actuel :
http://www.mythologicalage.net/

La page de test où je tente de tout agencer avant d'envoyer le tout :
http://www.mythologicalage.net/test/

La page du CSS :
http://www.mythologicalage.net/test/style/mythologicalage2.css

En fait, j'aimerais arriver à un résultat similaire à ce que j'ai fait sous photoshop :
http://www.mythologicalage.net/images/Sans%20titre-1%20copie.jpg

Voilà, je pense que vous avez tout en main pour pouvoir tenter de m'aider :o !
Si vous avez des questions ou des suggestions, n'hésitez pas, je suis ouverte à toute proposition !

Merci d'avance, Norore.

Effectivement, non seulement la version actuelle n'est pas extensible, mais elle part en live dès que l'on dépasse les 1024×768px de résolution d'écran

Au fait, sur ta maquette, pourquoi tu as deux menus comme ça ?

Pour le reste, faire du fluide avec de telles images de bordures risque d'être un peu compliqué.

mpop a écrit :
Effectivement, non seulement la version actuelle n'est pas extensible, mais elle part en live dès que l'on dépasse les 1024×768px de résolution d'écran

Au fait, sur ta maquette, pourquoi tu as deux menus comme ça ?

Pour le reste, faire du fluide avec de telles images de bordures risque d'être un peu compliqué.

Sur ma maquette, mes deux menus sont voulus ! Le menu du haut permet au visiteur de choisir la catégorie qu'il souhaite explorer et le menu sur le côté gauche n'apparait que pour les catégories d'articles (Créatures, Dieux, Lieux et Objets) afin que le visiteur puisse choisir l'article qui l'intéresse.

Pour la seconde remarque, qu'entends-tu par "un peu compliqué" :o ? Celà veut-il dire que c'est impossible ou qu'il va falloir se lever tôt pour réussir à finir ce CSS :o ?

En tout cas, merci d'avoir prété attention à ma question !
Modifié par Norore (18 Apr 2006 - 17:54)

Norore a écrit :
Pour la seconde remarque, qu'entends-tu par "un peu compliqué" :o ? Celà veut-il dire que c'est impossible ou qu'il va falloir se lever tôt pour réussir à finir ce CSS :o ?

Plutôt la deuxième solution.
Des boîtes de largeur fluide avec des bordures faites à partir d'images d'arrière-plan c'est possible, mais pas super évident.
Cf un exemple ici :
http://web.covertprestige.info/test/06-page-fluide-avec-bordures-en-html-et-css.html
(qui est en fait une version un peu complexifiée de ce tutoriel, prévu pour des largeurs fixes).

Avec les images que tu utilises, être raccord entre les bordures et les coins risque d'être un peu compliqué si tu ne sais pas à l'avance quelle largeur auront les blocs.

Norore a écrit :
Le 'hic', c'est que les images des cadres ne veulent pas toutes s'afficher ! Je suis pourtant sûre d'avoir choisi les bonnes images !

Si si, ça marche... sauf que sur la page d'accueil, il n'y a pas d'élément ayant pour identifiant "menulat", par exemple.
Sauf que ton "mainmenu" a une instruction background-position, mais pas d'instruction background-image (donc, forcément, pas d'image de fond.
Etc.

Je n'ai pas très bien compris ton dernier post mpop, c'est normal :o ?

Si non, pourrais-tu être plus clair s'il te plait ? Je suis encore dans le flou pour le CSS, je suis plus html et php ...

Norore a écrit :
Je n'ai pas très bien compris ton dernier post mpop, c'est normal :o ?

Non.

Norore a écrit :
Si non, pourrais-tu être plus clair s'il te plait ? Je suis encore dans le flou pour le CSS, je suis plus html et php ...

Alors voilà, je signale juste le fait que dans ta feuille de style, tu as des sélecteurs de la forme

#menulat p {bla bla bla}

Hors, sur la page d'accueil de ta version de test, il n'y a aucun élément ayant pour identifiant "menulat". Mais c'est sans doute normal. J'ai l'impression que "menulat" désigne ton menu secondaire, et on peut effectivement imaginer qu'il n'y en ait pas sur la page d'accueil.

Ensuite, toujours dans ta feuille de style CSS, tu as une série d'instructions qui visent ton menu principal, qui est un élément ayant pour identifiant "mainmenu". Au passage, dans ton code HTML tu as deux éléments ayant cet identifiant, alors qu'un identifiant est supposé désigner un élément unique. Si on veut pouvoir l'utiliser plusieurs fois, il faut utiliser une classe plutôt qu'un identifiant.
Bref, dans les instructions pour ton élément ayant pour identifiant "mainmenu", tu donnes une instruction pour l'alignement de l'image de fond. Maintenant, ça m'a peut-être échappé, mais j'ai l'impression que tu ne déclares pas d'image de fond du tout pour cet élément. Donc l'histoire de l'alignement d'une image de fond qui n'existe pas, ben ça fait du code qui sert à rien, voilà.

Bonjour !

Suite à ton post, j'ai modifié 2/3 trucs dans ma feuille de style (j'en ai profité pour mettre quelques commentaires !) et j'ai fait passer l'id mainmenu en class ! J'ai aussi enlevé le background-position: center; qui n'avait rien à faire là ...

Par contre, je ne vois toujours pas trop pourquoi les images n'apparaissent pas !

Norore a écrit :
Par contre, je ne vois toujours pas trop pourquoi les images n'apparaissent pas !

Sur certaines pages, j'en vois qui passent.
Si ça ne passe pas, c'est :
– soit parce que l'url donné ne pointe pas sur une image existante ;
– soit parce que le sélecteur CSS utilisé ne correspond pas à un élément présent sur la page ;
– soit parce que l'élément qui est censé avoir une image de fond a une hauteur de 0px ou de quelques pixels seulement.

mpop a écrit :


Sur certaines pages, j'en vois qui passent.
Si ça ne passe pas, c'est :
– soit parce que l'url donné ne pointe pas sur une image existante ;
– soit parce que le sélecteur CSS utilisé ne correspond pas à un élément présent sur la page ;
– soit parce que l'élément qui est censé avoir une image de fond a une hauteur de 0px ou de quelques pixels seulement.

!

Je n'ai pas tout compris ! (une fois de plus !)

Sinon, je pense ne m'être trompé nulle part en mettant mes div, ou alors, je les ai placé n'importe comment !

Edit : je vois toujours mes deux coins du bas sous firefox, ainsi que ma bordure du milieu pour les articles (et encore, elle fait ce qu'elle veut celle là !)
Modifié par Norore (19 Apr 2006 - 18:07)

Alors bon, on reprend toute la page à zéro.

Premièrement,
On vire le prologue XML au tout début du code, qui fait passer Internet Explorer en mode de rendu Quirks, ce dont on ne veut pour rien au monde. Le prologue XML n'est nécessaire que pour les pages XHTML servies en mode "application/xhtml+xml", mode que IE (qui ne gère pas le XML) ne comprend pas.

Deuxièmement,
On n'utilise pas du XHTML 1.1, mais du XHTML 1.0
Au passage, on a ici du XHTML 1.1 servi en mode "text/html", ce qui est impossible. On utilisera donc du XHTML 1.0 servi en mode "text/html", pour commencer.

Troisièmement,
La div "container" est fermée juste à la fin du menu principal (après les deux tableaux). C'est voulu, ou c'est une erreur ?
Pour éviter ce genre d'erreurs, je propose de marquer grâce à un commentaire HTML quel bloc est censé fermer une balise de fin de div. Sinon, on en a toujours une en trop ou une en moins...

<div id="container">...</div><!-- fin de div#container -->

Quatrièmement,
On a le code suivant :

<div class="cgh">
	<div class="cdh">
		<div class="haut">
		</div>
	</div>
</div>

Comme aucun de ces trois blocs n'a de contenu, ni de hauteur indiquée, on est alors dans le cas suivant (troisième cas) : « l'élément qui est censé avoir une image de fond a une hauteur de 0px ».
Paf, trois images de fond qui ne s'afficheront pas... vu que l'élément ne s'affiche pas.

Cinquièmement,

</div></div></div></div></div></div>

On ferme six blocs alors qu'il n'y en a que quatre d'ouverts. Cas typique ou le marquable des fins de blocs à l'aide d'un commentaire HTML aurait été plus qu'utile.
Au passage, un validateur HTML aurait détecté ces erreurs. Et il me semble que les règles du forum précisent que corriger d'abord les erreurs signalées par un navigateur est une chose à faire avant de poster sur le forum...

Bon, je ne relève pas tout, mais il y a du boulot sur la syntaxe HTML à faire, avant de même penser aux CSS

Désolé si je ne suis pas plus clair. Mais je pense que s'il y a des choses qui ne passent pas, c'est qu'il manque quelques notions... Un petit retour à la case OpenWeb et tutoriels d'Alsacréations pourrait être une bonne idée, par exemple.

Bonjour mpop !

Bon alros, j'ai fait comme tu m'as dit mais là, je séche ! La page suivante : http://www.mythologicalage.net/test/index.php?page=creatures me pose un véritable problème ! J'ai beau faire et refaire les balises et les commentaires, ça fait ce que ça veut ! Je pense pourtant avoir tout fait comme il faut !

Au passage, je ne me suis jamais servi des tutos du site alsacréations, jusqu'à présent, je me suis toujours dépatouillée toute seule, tu aurais un lien à me conseiller ?

Norore a écrit :
Au passage, je ne me suis jamais servi des tutos du site alsacréations, jusqu'à présent, je me suis toujours dépatouillée toute seule, tu aurais un lien à me conseiller ?

C'est peut-être là la faille ! Avant de se lancer dans du complexe (car mine de rien, ce que tu veux faire est complexe…), il faut peut-être commencer par les bases, non ?

http://css.alsacreations.com/Comment-debuter-et-trouver-l-information

http://openweb.eu.org/xhtml/
http://openweb.eu.org/css/

Et les tutoriels d'alsacréations :
http://css.alsacreations.com/Plan-du-site
dont :
http://css.alsacreations.com/Bases-et-indispensables/La-structure-des-balises-bloc-et-en-ligne
http://css.alsacreations.com/Bases-et-indispensables/Quelle-est-la-difference-entre-une-classe-et-un-id
http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS

Comme on dit, Rome ne s'est pas construite en un jour…

La "propagande" (bien intentionnée) sur les CSS dit que c'est facile. C'est faux. C'est difficile à prendre en main dès que l'on veut faire quelque chose de poussé (positionnement des blocs ou design complexe). C'est très puissant, mais ce n'est pas facile pour autant.

Merci pour les liens !

Pour info, je viens de comprendre ce qui se passait sur la page, comme j'avais supprimer le div du pied de page (footer), tout était décalé au niveau du menu !

Euh, les bases apprises sur le Site du Zéro, ça compte ?
Modifié par Norore (20 Apr 2006 - 14:17)

Norore a écrit :
Euh, les bases apprises sur le Site du Zéro, ça compte ?

Je ne connais pas vraiment leurs tutoriels, donc je ne saurais pas trop dire. Mais au moins ça a l'air de partir sur du XHTML + CSS et avec un peu de rigueur, donc ça devrait être bon.

a écrit :
Euh, les bases apprises sur le Site du Zéro, ça compte ?

Oui, le contenu du site du zéro est juste ; la pédagogie et le ton utilisé (façon "xxxx pour les nuls" ) sont aussi bons. C'est une bonne référence pour s'initier quand on débute totalement, avant de passer sur d'autres sites plus pointus ou spécifiques ensuite.

(grr la fôte pas belle!)
Modifié par (20 Apr 2006 - 16:02)