[résolu] questions diverses

Bonsoir,

En vacances pour quelques jours, j'essaie de mettre en forme convenablement l'interface d'un blog photo (pixelpost pour être précis.)

Note : pour l'instant je construis la structure sans me préoccuper de l'insertion des tags du blog.

Voici l'interface que j'essaie de réaliser : http://ylp.free.fr/css/interface.jpg

Ayant commencé cette aprém, j'en suis là : http://ylp.free.fr/css/

Ça commence à ressembler à quelque chose, mais c'est encore loin d'être terminé.

Plusieurs questions donc :

1. l'affichage de la liste en haut à droite n'est pas du tout conforme. Dans un premier temps, j'ai enlevé le terme "li" de ma feuille de style > le "display:inline" ne fonctionnait pas à ce moment là ; dans un second temps j'ai ajouté le "li" (sans bien comprendre ce que je faisais...) > le "display:inline" fonctionne, mais je perds l'affichage de mes puces. Qu'est ce qui ne va pas docteur ?
Je note également que si le "margin-right" fonctionne convenablement, ce n'est pas le cas du "margin-top" (enlevé depuis) : le nombre de pixel que j'entrais n'était pas celui affiché au final (bien supérieur.)

2. Une question plus générale, malheureusement : je ne sais absolument pas comment réaliser le fond blanc aux coins arrondis de ma photo. Avec des tableaux ça me prendrait quelques secondes, mais là je suis un peu perdu. J'imagine qu'il faut créer un bloc de fond qui ferait 20px de plus en hauteur et en largeur, le centrer sur l'image et y insérer mes 4 arrondis aux 4 coins, mais je suis encore loin de bien maîtriser la réalisation de tout ce binz.

3. Mon ombre_bas est censé faire 1px de haut, or il fait beaucoup plus que ce soir sous IE ou sur FF. J'ai eu le même soucis avec l'ombre_menu_top de mémoire, mais le problème a disparu depuis.

4. Un problème plus intéressant. À terme, la partie basse de la page (comprendre : sous l'ombre_bas) contiendra des commentaires. On peut donc considérer qu'elle est amenée à s'agrandir. Si je reprends le tout, ça donne ceci :
* entête : taille fixe ;
* centre : taille variable en fonction de la photo ;
* bas : taille variable en fonction du nombre de commentaire.
Dès lors, comment spécifier la hauteur de cette partie ? Actuellement j'ai mis "30%", mais il est bien évident que c'est une erreur !

5. le margin-bottom du liste_texte_bas ne s'applique pas : je n'ai pas encore eu bien le temps d'y jeter un oeil mais je tombe de sommeil, là...
Voilà, c'est tout pour ce soir. J'espère que mon code ne vous filera pas trop de boutons, si c'est le cas je m'en excuse d'avance.

Merci à tout ceux qui auront le temps de jeter un oeil à tout ça !
Modifié par parappa (04 Jan 2007 - 19:31)

parappa a écrit :

"display:inline" fonctionne, mais je perds l'affichage de mes puces. Qu'est ce qui ne va pas docteur ?

Vérifier qu'il y a bien "list-style-type" de défini pour la balise <ul>
Pour ce qui est des bords, il n'y a pas de solution propre, pour le faire sans image.
Pour t'aider à faire ton choix :
http://articles.e-t172.net/round/

Pour ce qui est des marges IE et FF ne font pas les calculs pareils.
Les margin et padding ne sont pas initilisés aux memes valeurs.
Mais aussi, IE fusionne le margin et padding (ça j'en suis plus sûr à 100% mais c'est une histoire dans le genre...Si quelqu'un a plus de précisions...)
Modifié par Cybergifle (28 Dec 2006 - 00:52)

Merci de ta réponse.

J'ai réglé 2 problèmes, le 1 (je n'avais effectivement pas bien déclaré le <ul>) et le 5 (fallait juste faire un peu attention.)

Au sujet du point 2 (les bords arrondis), je me heurte (quelle que soit la méthode de ton lien) à un problème basique : je ne dispose ni de la largeur, ni de la hauteur du bloc <image + contour>. Y a-t-il un moyen de récupérer ces propriétés ?

Je n'arrive pas à comprendre le problème du point 3 ; au sujet du point 4 j'ai finalement ôté toute largeur & hauteur, mais du coup la couleur de background ne suit pas.

J'en suis là : http://ylp.free.fr/css/2/

D'autres idées ?

parappa a écrit :
Merci de ta réponse.

J'ai réglé 2 problèmes, le 1 (je n'avais effectivement pas bien déclaré le <ul>) et le 5 (fallait juste faire un peu attention.)

Au sujet du point 2 (les bords arrondis), je me heurte (quelle que soit la méthode de ton lien) à un problème basique : je ne dispose ni de la largeur, ni de la hauteur du bloc <image + contour>. Y a-t-il un moyen de récupérer ces propriétés ?

Je n'arrive pas à comprendre le problème du point 3 ; au sujet du point 4 j'ai finalement ôté toute largeur & hauteur, mais du coup la couleur de background ne suit pas.

J'en suis là : http://ylp.free.fr/css/2/

D'autres idées ?

Pour le point 2, sous windows clic-droit sur ta photo puis propriétés/avancées...
Ou, avec un naviguateur tu affiches ta photo et tu fais clic-droit propriétés et tu auras les dimensions
Ca me parait tellement évident que j'ai un doute sur ta question...

Pour le point 3 j'ai bien 1px sur mon Firefox.
C'est le #bas qui fait la continuité. On en arrive donc au point 4.
Le problème du background qui ne suit pas vient sans doute du padding...

http://ylp.free.fr/css/3/

J'ai tout résolu sauf le point 2. (Je vais faire un autre topic.)
Quand je disais que je n'avais pas la taille de l'image, c'est parce que le site sera à terme une galerie photos, et que je ne connais pas la taille de la photo que j'y mettrais.

Pour le point 3 j'ai supprimé ma div et mis une simple bordure ; pour le point 4 j'ai inversé la couleur de fond du background et la couleur de la dernière div.

Allez, il me reste une question subsidiaire : je voudrais avoir une marge de 20 px tout en bas de ma page (là j'ai mis 200, pour tester.) Quand j'ajoute "margin-bottom" au bas, ça marche sous FF... mais pas sous IE, forcément. Une idée ?
Modifié par parappa (30 Dec 2006 - 12:02)