28173 sujets

CSS et mise en forme, CSS3

B'jour tout l'monde Smiley smile

je me posais une petite question... Voici une page.

L'est belle, hein ? (euh... en fait, même pas...)

Bon, l'idée c'est qu'elle s'adapte à la résolution du visiteur... C'est à dire que si il est en 800x600, ça reste tel quel... Mais que si il est en 1024x768 et plus, le "bloc" (entre guillemets vu qu'il n'y a pas encore de bloc à proprement parler) correspondant à "Par courrier électronique" vienne se placer à la droite du bloc correspondant à "Par téléphone".

Si je fais (par exemple) contenir le bloc "Par téléphone" dans une div flottante à gauche, délimitée par sa largeur, avec une marge sur cette même gauche pour le menu, et ensuite une autre div flottante sur la gauche, elle aussi délimitée par sa largeur mais cette fois sans marges, elle viendra se coller à la droite de la première div, sauf si l'espace entre les deux colonnes latérales n'est pas suffisant, non ?

J'aimerais l'avis de personnes plus qualifiées que moi (rhoo allez, c'pas dur ça !) avant de me lancer dans un gros n'importe quoi qui ne m'amènera finalement à rien de valable...

Ca peut laisser penser que ça ne sert à rien, mais disons qu'au vu de la largeur de chacun des deux blocs, à partir de 1024x768 ça fait un peu vide sur les côtés...


Merci d'avance Smiley smile
<edit>
Après test sur "un certain navigateur carrément bouzeux", j'ai vu qu'il y avait beaucoup de problèmes... Ca ne m'étonne pas, c'était trop simple... En chipotant, j'suis arrivé à ça et c'est plutôt stable :


<div style="float: left; margin: 0 20px 0 0; width: 350px;">
	<h2>Courrier électronique</h2>
		...
		...
		...
</div>

<h2>Téléphone</h2>
	...


Donc, en plaçant le bloc le plus long en premier, flottant à gauche, avec une légère marge à droite et une largeur d'un peu moins de 400px ('faudra jouer selon son contenu), et en laissant l'autre bloc tel qu'il était :

O En 800x600 le premier bloc se place en premier (logique) et puisque "le reste" ne trouve pas assez de place sur la droite, il se place en dessous du premier bloc ;
O En résolution supérieure, le premier bloc se placera toujours en premier (il ne bougera pas, en fait), et "le reste" trouvera assez de place sur la droite de ce bloc, et s'y placera donc. Entre en jeu à ce moment-là la marge de droite sur le div pour pas que "le reste" s'y colle de trop près...

Ca tourne sous FF2, Opera, IE 5, IE 5.5, IE 6 et IE 7. Je suppose que sous Galeon, Epiphany et Konqueror, ça passe comme une lettre à la poste aussi...

Par contre, pour Safari j'en ai aucune idée, si un possesseur de Mac passe par-là, 'pourriez dire quoi s'il vous plait ? Smiley lol
Ceci dit, si il existe une version ou un clone de Safari pour Linux (Ubuntu de préférence Smiley langue ), je suis prenneur ! Smiley smile
Modifié par SolykZ (19 Jan 2007 - 13:25)