Je me permets de venir vers vous afin de résoudre un souci de mise en
forme css.
Merci d'avance pour votre aide.
Je souhaite reproduire un comportement très facile à réaliser à l'aide
d'un tableau en CSS.
J'ai un conteneur global de largeur fixe.
Un sous bloc à gauche avec une image de largeur ET de hauteur variable.
Un bloc sur la droite de hauteur variable (qui peut être plus haut que
mon bloc de gauche avec l'image). La largeur s'adapte à la largeur de la
colonne gauche.
Le souci : lorsque le contenu du corps du bloc de droite passe sous mon
bloc de gauche dès lors que le contenu de droite est plus "haut" que mon
contenu du bloc de gauche (hauteur de l'image)
Allez, un lien sera plus parlant. Merci d'avance. En espérant qu'une
solution full-css soit possible.
http://www.64matchschrono.com/test.html
Le souci : lorsque le contenu du corps du bloc de droite passe sous mon bloc de gauche dès lors que le contenu de droite est plus "haut" que mon contenu du bloc de gauche (hauteur de l'image)
Allez, un lien sera plus parlant. Merci d'avance. En espérant qu'une solution full-css soit possible. http://www.64matchschrono.com/test.html
Les colonnes posent prb... Il y a des solutions cependant. Je crois me rappeler que chez AlsaCréations ils ont plusieurs exemples plutôt sympathiques des différentes techniques ? Trouvé ce tutoriel : http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur
Bon courage...
J. Trotoux wrote:
Le souci : lorsque le contenu du corps du bloc de droite passe sous mon
bloc de gauche dès lors que le contenu de droite est plus "haut" que mon
contenu du bloc de gauche (hauteur de l'image)
Allez, un lien sera plus parlant. Merci d'avance. En espérant qu'une
solution full-css soit possible.
http://www.64matchschrono.com/test.html
Les colonnes posent prb... Il y a des solutions cependant.
Je crois me rappeler que chez AlsaCréations ils ont plusieurs exemples
plutôt sympathiques des différentes techniques ? Trouvé ce tutoriel :
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur
Le souci : lorsque le contenu du corps du bloc de droite passe sous mon bloc de gauche dès lors que le contenu de droite est plus "haut" que mon contenu du bloc de gauche (hauteur de l'image)
Allez, un lien sera plus parlant. Merci d'avance. En espérant qu'une solution full-css soit possible. http://www.64matchschrono.com/test.html
Les colonnes posent prb... Il y a des solutions cependant. Je crois me rappeler que chez AlsaCréations ils ont plusieurs exemples plutôt sympathiques des différentes techniques ? Trouvé ce tutoriel : http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur
Bon courage...
J. Trotoux
Les colonnes posent prb... Il y a des solutions cependant. Je crois me rappeler que chez AlsaCréations ils ont plusieurs exemples plutôt sympathiques des différentes techniques ? Trouvé ce tutoriel : http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur
Bon courage...
Salut Pierre ! Il en faut, du courage. Le problème en fait vient du fait qu'aucune taille (hauteur ou largeur) ne soit précisée dans mon cas. Cela diffère donc de l'exemple d'alsacréations. Merci quand même :p Julien
Les colonnes posent prb... Il y a des solutions cependant.
Je crois me rappeler que chez AlsaCréations ils ont plusieurs exemples
plutôt sympathiques des différentes techniques ? Trouvé ce tutoriel :
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur
Bon courage...
Salut Pierre !
Il en faut, du courage.
Le problème en fait vient du fait qu'aucune taille (hauteur ou largeur)
ne soit précisée dans mon cas.
Cela diffère donc de l'exemple d'alsacréations.
Merci quand même :p
Julien
Les colonnes posent prb... Il y a des solutions cependant. Je crois me rappeler que chez AlsaCréations ils ont plusieurs exemples plutôt sympathiques des différentes techniques ? Trouvé ce tutoriel : http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur
Bon courage...
Salut Pierre ! Il en faut, du courage. Le problème en fait vient du fait qu'aucune taille (hauteur ou largeur) ne soit précisée dans mon cas. Cela diffère donc de l'exemple d'alsacréations. Merci quand même :p Julien
Pierre Goiffon
J. Trotoux wrote:
Les colonnes posent prb... Il y a des solutions cependant. Je crois me rappeler que chez AlsaCréations ils ont plusieurs exemples plutôt sympathiques des différentes techniques ? Trouvé ce tutoriel : http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur
Salut Pierre ! Il en faut, du courage.
:)
Le problème en fait vient du fait qu'aucune taille (hauteur ou largeur) ne soit précisée dans mon cas. Cela diffère donc de l'exemple d'alsacréations.
Vous devriez trouver d'autres choses en fouillant le site... j'avais en tête une liste de gabarits, mais je n'ai pas su la retrouver rapidement.
Au pire, peut être un simple positionnement avec une marge ? Vu qu'à gauche vous avez une image dont la taille est connue...
J. Trotoux wrote:
Les colonnes posent prb... Il y a des solutions cependant.
Je crois me rappeler que chez AlsaCréations ils ont plusieurs exemples
plutôt sympathiques des différentes techniques ? Trouvé ce tutoriel :
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur
Salut Pierre !
Il en faut, du courage.
:)
Le problème en fait vient du fait qu'aucune taille (hauteur ou largeur)
ne soit précisée dans mon cas.
Cela diffère donc de l'exemple d'alsacréations.
Vous devriez trouver d'autres choses en fouillant le site... j'avais en
tête une liste de gabarits, mais je n'ai pas su la retrouver rapidement.
Au pire, peut être un simple positionnement avec une marge ? Vu qu'à
gauche vous avez une image dont la taille est connue...
Les colonnes posent prb... Il y a des solutions cependant. Je crois me rappeler que chez AlsaCréations ils ont plusieurs exemples plutôt sympathiques des différentes techniques ? Trouvé ce tutoriel : http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur
Salut Pierre ! Il en faut, du courage.
:)
Le problème en fait vient du fait qu'aucune taille (hauteur ou largeur) ne soit précisée dans mon cas. Cela diffère donc de l'exemple d'alsacréations.
Vous devriez trouver d'autres choses en fouillant le site... j'avais en tête une liste de gabarits, mais je n'ai pas su la retrouver rapidement.
Au pire, peut être un simple positionnement avec une marge ? Vu qu'à gauche vous avez une image dont la taille est connue...
J. Trotoux
Au pire, peut être un simple positionnement avec une marge ? Vu qu'à gauche vous avez une image dont la taille est connue...
non, je ne connais pas la taille de mon image. elle est variable. c'est bien là le problème.
Au pire, peut être un simple positionnement avec une marge ? Vu qu'à
gauche vous avez une image dont la taille est connue...
non, je ne connais pas la taille de mon image. elle est variable. c'est
bien là le problème.
Au pire, peut être un simple positionnement avec une marge ? Vu qu'à gauche vous avez une image dont la taille est connue...
Ben non, à ce qu'il parait elle peut être variable (en largeur, puisque fixée sur la hauteur).
Je dois avouer ne pas bien comprendre la motivation du dimensionnement de la hauteur d'image ?
Je le comprendrais pour un design horizontal : http://csszengarden.com/?cssfile=/019/019.css http://csszengarden.com/?cssfile=/048/048.css http://csszengarden.com/?cssfile=/058/058.css http://csszengarden.com/?cssfile=/101/101.css http://csszengarden.com/?cssfile=/111/111.css http://howdeepistheocean.com/csszengarden/csszengarden.html
Sinon, je pense effectivement que c'est la largeur qu'il vaut mieux contrôler (et limiter).
Le 05/12/2008 11:49, SAM a écrit :
Au pire, peut être un simple positionnement avec une marge ? Vu qu'à
gauche vous avez une image dont la taille est connue...
Ben non, à ce qu'il parait elle peut être variable (en largeur, puisque
fixée sur la hauteur).
Je dois avouer ne pas bien comprendre la motivation du dimensionnement
de la hauteur d'image ?
Je le comprendrais pour un design horizontal :
http://csszengarden.com/?cssfile=/019/019.css
http://csszengarden.com/?cssfile=/048/048.css
http://csszengarden.com/?cssfile=/058/058.css
http://csszengarden.com/?cssfile=/101/101.css
http://csszengarden.com/?cssfile=/111/111.css
http://howdeepistheocean.com/csszengarden/csszengarden.html
Sinon, je pense effectivement que c'est la largeur qu'il vaut mieux
contrôler (et limiter).
Au pire, peut être un simple positionnement avec une marge ? Vu qu'à gauche vous avez une image dont la taille est connue...
Ben non, à ce qu'il parait elle peut être variable (en largeur, puisque fixée sur la hauteur).
Je dois avouer ne pas bien comprendre la motivation du dimensionnement de la hauteur d'image ?
Je le comprendrais pour un design horizontal : http://csszengarden.com/?cssfile=/019/019.css http://csszengarden.com/?cssfile=/048/048.css http://csszengarden.com/?cssfile=/058/058.css http://csszengarden.com/?cssfile=/101/101.css http://csszengarden.com/?cssfile=/111/111.css http://howdeepistheocean.com/csszengarden/csszengarden.html
Sinon, je pense effectivement que c'est la largeur qu'il vaut mieux contrôler (et limiter).
J. Trotoux
Olivier Miakinen a écrit :
Le 05/12/2008 11:49, SAM a écrit :
Au pire, peut être un simple positionnement avec une marge ? Vu qu'à gauche vous avez une image dont la taille est connue...
Ben non, à ce qu'il parait elle peut être variable (en largeur, puisque fixée sur la hauteur).
Je dois avouer ne pas bien comprendre la motivation du dimensionnement de la hauteur d'image ?
Je le comprendrais pour un design horizontal : http://csszengarden.com/?cssfile=/019/019.css http://csszengarden.com/?cssfile=/048/048.css http://csszengarden.com/?cssfile=/058/058.css http://csszengarden.com/?cssfile=/101/101.css http://csszengarden.com/?cssfile=/111/111.css http://howdeepistheocean.com/csszengarden/csszengarden.html
Sinon, je pense effectivement que c'est la largeur qu'il vaut mieux contrôler (et limiter).
Bonjour, Je récupère maintenant la largeur de l'image en php et j'ai un style inline qui indique un margin-left sur mon bloc de droite. Ainsi, ça passe. C'est mieux que rien... Julien
Olivier Miakinen a écrit :
Le 05/12/2008 11:49, SAM a écrit :
Au pire, peut être un simple positionnement avec une marge ? Vu qu'à
gauche vous avez une image dont la taille est connue...
Ben non, à ce qu'il parait elle peut être variable (en largeur, puisque
fixée sur la hauteur).
Je dois avouer ne pas bien comprendre la motivation du dimensionnement
de la hauteur d'image ?
Je le comprendrais pour un design horizontal :
http://csszengarden.com/?cssfile=/019/019.css
http://csszengarden.com/?cssfile=/048/048.css
http://csszengarden.com/?cssfile=/058/058.css
http://csszengarden.com/?cssfile=/101/101.css
http://csszengarden.com/?cssfile=/111/111.css
http://howdeepistheocean.com/csszengarden/csszengarden.html
Sinon, je pense effectivement que c'est la largeur qu'il vaut mieux
contrôler (et limiter).
Bonjour,
Je récupère maintenant la largeur de l'image en php et j'ai un style
inline qui indique un margin-left sur mon bloc de droite. Ainsi, ça
passe. C'est mieux que rien...
Julien
Au pire, peut être un simple positionnement avec une marge ? Vu qu'à gauche vous avez une image dont la taille est connue...
Ben non, à ce qu'il parait elle peut être variable (en largeur, puisque fixée sur la hauteur).
Je dois avouer ne pas bien comprendre la motivation du dimensionnement de la hauteur d'image ?
Je le comprendrais pour un design horizontal : http://csszengarden.com/?cssfile=/019/019.css http://csszengarden.com/?cssfile=/048/048.css http://csszengarden.com/?cssfile=/058/058.css http://csszengarden.com/?cssfile=/101/101.css http://csszengarden.com/?cssfile=/111/111.css http://howdeepistheocean.com/csszengarden/csszengarden.html
Sinon, je pense effectivement que c'est la largeur qu'il vaut mieux contrôler (et limiter).
Bonjour, Je récupère maintenant la largeur de l'image en php et j'ai un style inline qui indique un margin-left sur mon bloc de droite. Ainsi, ça passe. C'est mieux que rien... Julien
Michael DENIS
Pierre Goiffon a écrit :
Les colonnes posent prb... Il y a des solutions cependant. Je crois me rappeler que chez AlsaCréations ils ont plusieurs exemples plutôt sympathiques des différentes techniques ? Trouvé ce tutoriel : http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur
Le problème de la solution présentée est que les deux colonnes ont une largeur déterminée. Or la question était posée avec des colonnes de largeur variable. Et là, je n'ai pas encore vu de solution. Dans ce cas, franchement, la solution la plus raisonnable n'est-elle pas d'utiliser... un tableau ?
-- Michaël DENIS
Pierre Goiffon a écrit :
Les colonnes posent prb... Il y a des solutions cependant.
Je crois me rappeler que chez AlsaCréations ils ont plusieurs exemples
plutôt sympathiques des différentes techniques ? Trouvé ce tutoriel :
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur
Le problème de la solution présentée est que les deux colonnes ont une
largeur déterminée. Or la question était posée avec des colonnes de
largeur variable. Et là, je n'ai pas encore vu de solution. Dans ce cas,
franchement, la solution la plus raisonnable n'est-elle pas
d'utiliser... un tableau ?
Les colonnes posent prb... Il y a des solutions cependant. Je crois me rappeler que chez AlsaCréations ils ont plusieurs exemples plutôt sympathiques des différentes techniques ? Trouvé ce tutoriel : http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur
Le problème de la solution présentée est que les deux colonnes ont une largeur déterminée. Or la question était posée avec des colonnes de largeur variable. Et là, je n'ai pas encore vu de solution. Dans ce cas, franchement, la solution la plus raisonnable n'est-elle pas d'utiliser... un tableau ?
-- Michaël DENIS
SAM
Le 12/8/08 7:00 AM, Michael DENIS a écrit :
Pierre Goiffon a écrit :
Les colonnes posent prb... Il y a des solutions cependant. Je crois me rappeler que chez AlsaCréations ils ont plusieurs exemples plutôt sympathiques des différentes techniques ? Trouvé ce tutoriel : http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur
Le problème de la solution présentée est que les deux colonnes ont une largeur déterminée. Or la question était posée avec des colonnes de largeur variable. Et là, je n'ai pas encore vu de solution. Dans ce cas, franchement, la solution la plus raisonnable n'est-elle pas d'utiliser... un tableau ?
Je ne comprends pas l'intéret d'avoir la colonne de gauche élastique, ça va être du plus vilain effet quand on va aller de page en page.
A partir du moment où : - colonne gauche fixée en largeur - colonne de droite remplissant le reste de largeur le problème est résolu.
Fait ton truc en tables et vois si c'est pas trop moche, quand on va de pages en pages.
Je suppose que tu sais rendre une image s'adaptant à largeur de colonne même si cette dernière est de largeur proportionnelle ? <http://stephane.moriaux.pagesperso-orange.fr/truc/3cols_images_adapt_strict.htm> (jouer avec la taille de la fenêtre)
-- sm
Le 12/8/08 7:00 AM, Michael DENIS a écrit :
Pierre Goiffon a écrit :
Les colonnes posent prb... Il y a des solutions cependant.
Je crois me rappeler que chez AlsaCréations ils ont plusieurs exemples
plutôt sympathiques des différentes techniques ? Trouvé ce tutoriel :
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur
Le problème de la solution présentée est que les deux colonnes ont une
largeur déterminée. Or la question était posée avec des colonnes de
largeur variable. Et là, je n'ai pas encore vu de solution. Dans ce cas,
franchement, la solution la plus raisonnable n'est-elle pas
d'utiliser... un tableau ?
Je ne comprends pas l'intéret d'avoir la colonne de gauche élastique,
ça va être du plus vilain effet quand on va aller de page en page.
A partir du moment où :
- colonne gauche fixée en largeur
- colonne de droite remplissant le reste de largeur
le problème est résolu.
Fait ton truc en tables et vois si c'est pas trop moche, quand on va de
pages en pages.
Je suppose que tu sais rendre une image s'adaptant à largeur de colonne
même si cette dernière est de largeur proportionnelle ?
<http://stephane.moriaux.pagesperso-orange.fr/truc/3cols_images_adapt_strict.htm>
(jouer avec la taille de la fenêtre)
Les colonnes posent prb... Il y a des solutions cependant. Je crois me rappeler que chez AlsaCréations ils ont plusieurs exemples plutôt sympathiques des différentes techniques ? Trouvé ce tutoriel : http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur
Le problème de la solution présentée est que les deux colonnes ont une largeur déterminée. Or la question était posée avec des colonnes de largeur variable. Et là, je n'ai pas encore vu de solution. Dans ce cas, franchement, la solution la plus raisonnable n'est-elle pas d'utiliser... un tableau ?
Je ne comprends pas l'intéret d'avoir la colonne de gauche élastique, ça va être du plus vilain effet quand on va aller de page en page.
A partir du moment où : - colonne gauche fixée en largeur - colonne de droite remplissant le reste de largeur le problème est résolu.
Fait ton truc en tables et vois si c'est pas trop moche, quand on va de pages en pages.
Je suppose que tu sais rendre une image s'adaptant à largeur de colonne même si cette dernière est de largeur proportionnelle ? <http://stephane.moriaux.pagesperso-orange.fr/truc/3cols_images_adapt_strict.htm> (jouer avec la taille de la fenêtre)
-- sm
J. Trotoux
Je ne comprends pas l'intéret d'avoir la colonne de gauche élastique, ça va être du plus vilain effet quand on va aller de page en page.
Non ce ne sera pas vilain. Et la taille de l'image est laissée au libre choix de l'internaute. il s'agit d'une fiche membres. Julien
Je ne comprends pas l'intéret d'avoir la colonne de gauche élastique,
ça va être du plus vilain effet quand on va aller de page en page.
Non ce ne sera pas vilain.
Et la taille de l'image est laissée au libre choix de l'internaute. il
s'agit d'une fiche membres.
Julien