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)
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)
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
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
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...
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).
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
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
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 ?
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 ?
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.
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)
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.