Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

CSS / Souci de mise en page

12 réponses
Avatar
J. Trotoux
Bonjour,

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

Julien

10 réponses

1 2
Avatar
Pierre Goiffon
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

Bon courage...
Avatar
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
Avatar
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...
Avatar
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.
Avatar
SAM
Le 12/5/08 11:17 AM, Pierre Goiffon a écrit :
J. Trotoux wrote:

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




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 ?

Il eût été tellement simple d'avoir :

#conteneur { width: 488px; border:1px solid; }
#gauche { float: left; width: 170px; tex-align: center }
#gauche img { width: 90%; }
#droite { margin-left: 185px; border-left:1px solid }


<div id="conteneur">
<div id="gauche">
<img src="1.jpg" alt=""><br>titre
</div>
<div id="droite">
<p>remplissage long ...
</div>
<hr style="clear:left">
</div>


--
sm
Avatar
Olivier Miakinen
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).
Avatar
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
Avatar
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
Avatar
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&gt;
(jouer avec la taille de la fenêtre)

--
sm
Avatar
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
1 2