28220 sujets

CSS et mise en forme, CSS3

bonjour à tous,

Je me suis engagé dans la rénovation (bénévole bien entendu Smiley biggrin ) d'un petit site pour un groupe vocal que j'avais réalisé à mes tout débuts (pas si vieux!!!), et je souhaite baser la nouvelle mouture sur du CSS...
Mais comme tout apprentissage, il y a des bugs, en voici un à ce lien:
http://groupe.vocal.syrinx.free.fr/nouveau%20site/index-zero.html

C'est un problème d'encapsulation de divs, j'ai d'ailleurs colorié les différents divs pour qu'on comprenne bien.

Le problème est le suivant: Je souhaiterais que la partie violette englobe les divs bleus et descende jusqu'en bas du jaune... Pour être plus clair, j'ai besoin de la partie violette pour avoir sa bordure à gauche, et j'ai besoin à terme qu'elle ne contienne plus que les trois divs bleus, et que ce soient eux qui la "tire" jusqu'en bas du jaune.
Mais, malgré l'utilisation d'un spacer, la partie violette ne prend pas en compte les divs bleus...

Pour conclure ce charabia, je bloque, et j'ai besoin de vos lumières !!!

Je croise les doigts, et continue de chercher !!!

Edité par dominique pour correction du lien Smiley cligne
Modifié par Pose (31 May 2005 - 12:08)
je comprends pas très bien ou tu veux en arriver.

La partie jaune ca sera ton menu ?
tes blocs bleus tu veux qu'ils se positionnent comment ?

et tu utilises des %, des cm, des pixels pour tes tailles.
Ca embrouille un peu plus le charabia Smiley sweatdrop
Bonsoir,

@gabnico: J'ai gardé un emplacement de taille fixe, pour pouvoir faire un menu un peu graphique, et le reste étirable, avec une largeur max, pour pouvoir occuper tout l'écran tout en gardant une certaine mesure. D'ou l'utilisation à la fois des cm et des %. Après, l'utilisation des pixels n'est qu'anecdotique Smiley cligne

Pour répondre à ta question, les blocs bleus sont à la bonne position, mais ne sont pas pris dans le bloc violet, qui est pourtant le bloc parent !!!

Dans l'exemple suivant: http://groupe.vocal.syrinx.free.fr/nouveau%20site/index-zero2.html, on voit que si on met du texte dans ce div, il le prend en compte, et si on met des boites flottantes, elles ne sont pas prises en compte, malgré le spacer (rappel: http://groupe.vocal.syrinx.free.fr/nouveau%20site/index-zero.html ) !!!

Si quelqu'un peut m'expliquer, parceque moi, çà me dépasse !!!

@dominique: Merci pour ce lien, je vais l'étudier au plus vite.

A bientot
Modifié par Pose (30 May 2005 - 21:29)
pardon, j'ai encore collé le [/url] à l'adresse !
Dites, il n'est pas possible de modifier un post précédemment posté ?.. Car dans ce cas, cela ferait moins de travail à dominique !!!
Merci encore pour votre travail !

Edit: Ok, correction effectuée (on s'identifie vachement mieux avec les cookies !!! Pardon pour avoir été un boulet !!!)
Modifié par Pose (30 May 2005 - 21:31)
Modifie "page" comme ceci :
#page{
	margin-left: 5cm;
	border-left: 3px solid black;
	background-color: blueviolet;
padding: 1%;
}


A noter : éviter les cotes fixes, en cm par exemple, car selon les résolutions d'écran et les panneaux latéraux du navigateur (signets, historique) les affichages seront très déformés.

Tout cela peut se coter en % et em, ce qui donne une mise en page fluide.
WAOUUUU !!!

Merci jcm !!! C'est vraiment formidable, mais comment as tu pensé à cela ?!!
Comment le fait de mettre un padding a-t-il permis de prendre en compte les divs ?!!!
J'en reste bouche bée !

Pour ce qui est des cotes fixes, je les ai utilisées pour la place dévolue au menu seulement.
D'abord parce qu'il me semble que le menu ne doit pas être tronqué, et ensuite, parceque pour faire un menu attrayant, il faudra peut-être mettre une image de fond pour les différents items du menu, et chaque "li" devra donc être de taille fixe. J'avais vu ce procédé sur quelques sites, cela me semblait être intéressant comme concept. Smiley smile

Mais à y réfléchir de plus près, c'est vrai que si on réduit la fenêtre et qu'on ne se retrouve plus qu'avec un gros menu et plus de texte (dans le cas extrême), cela peut s'avérer certes gênant !

En tous cas, merci infiniment pour cette finesse d'analyse, et à bientot sur alsa.

Posé.

P.S. On va pouvoir mettre un grand [Résolu (avec brio Smiley biggrin )] devant le titre du sujet !
Pardonnez mon enthousiasme, mais j'avais passé tellement de temps dessus, et je suis si soulagé, moi qui devenait fou par tant d'incohérence et d'incompréhension !
Pose a écrit :

P.S. On va pouvoir mettre un grand [Résolu (avec brio Smiley biggrin )] devant le titre du sujet !



Bonjour Pose Smiley smile

Alors ! ne te gêne pas, il suffit d'Editer" le premier message de ton sujet et d'ajouter [Résolu] devant le titre Smiley cligne ... Merci d'avance !