18041 sujets

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

Mon portfolio et le rétrécissement de fenêtre

Bonsoir,

étant étudiant en informatique de gestion je souhaite pouvoir mettre sur pied un site personnel.

Après pas mal de temps à lire le site du zéro et les dossiers de ce site j'arrive à pondre un design et un menu qui me convient tout à fait, et je pensais avoir fait le plus dur... et bien non ! J'ai vraiment du mal avec le CSS du site.

Voici mon portfolio tel qu'il est en ce moment :

http://www.sylvaincharroy.fr/v2/menu_test.html

Sous firefox, en plein écran, chez moi... c'est pas trop trop moche, mais il existe encore un gros défaut : en cas de rétrécissement de la fenêtre, chaque élément du design part dans tous les sens... ce qui rend d'un seul coup le résultat beaucoup plus moche !

Sous internet explorer 7, le texte n'est même pas centré...

Le problème vient surement de la façon dont j'ai divisé tout ceci, et des dimensions de ces divisions... mais après pas mal d'essais, j'arrive vraiment pas à obtenir le résultat souhaité.

La feuille de style est disponible à cette adresse : http://www.sylvaincharroy.fr/v2/style_menu.css

En espérant que quelqu'un aura le temps et l'envie de m'aider : merci d'avance !
Modifié par SylvainVV (10 Feb 2008 - 20:31)
Bonsoir,

Virer div#fleurs du code HTML. Cette image décorative n'a pas de raison particulière d'être dans le code HTML, surtout pas pour donner l'information «Bienvenue sur mon portfolio» en texte alternatif alors que visuellement c'est une élément purement décoratif. Donc supprimer div#fleurs du code HTML, et placer l'image en image de fond de l'élément body.

Ensuite, il est inutile de faire flotter le titre (div#titre) et le menu (ul#menu) si ce dernier doit être positionné en absolu. Soit on fait flotter celui qui est placé en premier dans le code HTML (logiquement, ce serait plutôt div#titre, qui d'ailleurs pourrait être un h1, du moins sur la page d'accueil), soit on positionne un de ces deux blocs en absolu, mais on évite de combiner les solutions inutilement.

En parlant du menu: dommage que les liens soient vides (cf. le code HTML).

Enfin, pour le problème rencontré dans IE7: div#contenu vient se placer à la droite de div#titre qui est flottant. Et c'est tout le bloc (div#contenu) qui est repoussé par le flottant, et pas uniquement son contenu comme c'est normalement le cas. On retrouve ce comportement dans trois cas:
- lorsque le deuxième bloc (div#contenu ici) est lui-même flottant (les flottants ne se survolent pas);
- lorsque le deuxième bloc forme un contexte de formatage (via la déclaration overflow: auto ou la déclaration overflow: hidden, par exemple);
- lorsque le deuxième bloc est doté du layout.

Il me semble que c'est ce dernier point qui est en jeu. Cela concerne la notion de HasLayout, qui est propre à Internet Explorer (c'est un mécanisme interne de ce navigateur). Les blocs dotés du layout ne peuvent pas être survolés par les flottants.
Ici, c'est la propriété max-width qui confère le layout à div#contenu. Comme ce max-width: 100% qui traine dans ton code est remarquablement inutile, je pense que tu pourras t'en passer sans problème. Smiley cligne
Mais par mesure de sécurité, un clear: left sur div#contenu peut être pas mal.
merci beaucoup pour cette réponse !

Je suis encore très loin d'être un champion de la du HTML, du CSS, de la sémantique et de la bidouille inter-navigateur donc merci de cette réponse claire.

Je vais essayer de régler les différents points cités dans ta réponse, et je repasserais soit en cas de problème, soit pour crier victoire.

Et sinon, oui, les liens du menu sont vides... je vais pas remplir un site qui n'est pas encore 100% opérationnel ^^
Et bien c'est un cris de victoire : le site commence à avoir un comportement normal !

http://www.sylvaincharroy.fr/v2/menu_test.html

Je découvre que le CSS fait ce qu'on lui dit, pas ce que l'on veut... c'est pas facile facile au début Smiley smile

Cela dit, lorsque la fenêtre rétrécie, mon menu passe derrière le logo... ce qui est assez gênant... si quelqu'un peut m'expliquer l'erreur que j'ai faite ce serait super (et si vous voyez d'autres erreurs n'hésitez pas à les souligner ! je suis là pour apprendre Smiley smile )
SylvainVV a écrit :
Je découvre que le CSS fait ce qu'on lui dit, pas ce que l'on veut...

Tout à fait. Et ensuite, les navigateurs font ce qu'ils peuvent (certains pouvant plus que d'autres, et se «trompant» moins que d'autres). Smiley cligne

SylvainVV a écrit :
Cela dit, lorsque la fenêtre rétrécie, mon menu passe derrière le logo... ce qui est assez gênant...

C'est une conséquence du positionnement absolu.
Parmi les solutions:
- imposer une largeur minimale avec la propriété min-width (par exemple: body {min-width: 820px;});
- ne pas positionner div#titre en absolu, ne pas figer sa hauteur à 150px, et supprimer le padding-top de div#contenu (ou le réduire sensiblement)... par contre, bien garder la largeur fixe de div#titre.
Je ne connaissais la propriété min-width... pratique cette propriété !

Je pense pouvoir me débrouiller pour la suite ! Merci beaucoup pour l'aide... pour mes débuts, j'ai essayé plusieurs forums avant de venir ici en pensant que je passerais pour un boulet... je regrette de ne pas être venu ici directement !

En plus d'avoir des tutoriaux en or, le forum à l'air d'être peuplé de gens prêt à aider et qui ont l'air de savoir ce quoi ils parlent (ce qui n'est pas le cas d'autres forums)

Merci encore pour l'aide ! Je suis désormais heureux Smiley ravi
bonjour, j'up mon sujet car j'ai encore quelques soucis avec mon portfolio

la page de test n'a pas changé : http://www.sylvaincharroy.fr/v2/menu_test.html

Après quelques aides très pratiques, je pensais que tout allait enfin bien dans le meilleur des mondes, or il existe encore un bug que je n'ai découvert que ce matin Smiley decu : avec internet explorer 6, en cas de rétrécissement de la fenêtre le menu passe derrière le logo (au lieu de s'arrêter devant, comme c'est le cas avec IE7 et FF).

quelqu'un aurait-il une solution à me suggérer ? merci d'avance ! Smiley smile
Sujet clos
Aller à