Hello,

J'ai deux deux styles au sein de mon CSS que j'aimerais faire "communiquer" entre eux.

Est-il possible de régler la hauteur du div #globalprofile en fonction de la hauteur finale de #imageprofile (vu qu'elle sera réglée automatiquement en fonction de sa largeur). Genre height = imageprofile.heigh ...

Il me semble qu'il possible de passer ce paramètre directement dans la balise, au sein du code HTML mais je ne trouve pas comment !

Merci beaucoup !

#imageprofile
{
	width: 20%;
	height: auto;
	border: 0px;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	float:left;
	display: table-cell;
}

#globalprofile
{
	border:1px solid #7b7b7b;
	border-radius:5px;
	float:right;
	width: 75%;
	display:table;
}

Salut,

il serait plus facile de te donner une réponse en connaissant la structure de ton code HTML.

Sinon, commence par virer les float de ton CSS, regarde ensuite en retirant les display, ....

Ce que tu souhaites ( #globalprofile.height = #imageprofile.height ) n'est possible qu'en JavaScript (et ce n'est pas compliqué) mais en CSS, tu peux déjà faire beaucoup de chose sous réserve que tu es une bonne Structure HTML et que tu emplois tes attributs CSS correctement

@+&BonCode;)

Hello,

Pour te donner une idée de mon code :

Ainsi, j'aimerais que la hauteur de l'image id1.jpg (donc de imageprofile)soit identique à celle du div globalprofile.
C'est possible ?

<div id="mainprofile">
<img src="img/profile/id1.jpg" id="imageprofile">
<div id="globalprofile">
<div id="profiletitre">
<b>INFORMATIONS UTILISATEURS</b>
</div>
<div id="contenuprofile">
<tr>
<div id="contenuprofileright">";
NOM UTILISATEUR
</div>
<div id="contenuprofileleft">Nom : </div>
</tr>
</div>
</div>

Salut ::

Bon,
un <tr> n'est pas correctement utilisé dans un cas comme ça,
Il manquait une balise </div>
et j'ai viré le "; qui se trouvait, au milieu ....


regarde ce que donne ce code là (sans ton css nldr) :

<div id="mainprofile" style="margin: 20px auto; width: 500px; display: table-row;">
	<img style="display: table-cell; width: 100%;" src="http://images.doctissimo.fr/1/divers/architecture-design/photo/hd/5347115534/4699020481/architecture-design-dubai_burjdubai-big.jpg" id="imageprofile">
	<div id="globalprofile" style="width: 80%; display: table-cell; vertical-align: top; padding: 0px 10px; background-color: yellow;">
		<div id="profiletitre">
			<b>INFORMATIONS UTILISATEURS</b>
		</div>
		<div id="contenuprofile">
			<div>
				<div id="contenuprofileright">NOM UTILISATEUR </div>
				<div id="contenuprofileleft">Nom : </div>
			</div>
		</div>
	</div>
</div>

regarde l'utilisation des display, ... et dis moi, en partant de cet exemple ce qui ne va pas

@++

Mise à part "Nom d'utilisateur" et "Nom" qui ne sont plus des colonnes, tout a l'air de coller !
... ou je passe à côté de quelque chose ?

t'aimes vraiment pas les floats ahah

t'aimes vraiment pas les floats ahah

non, car ils dénaturent le comportement des éléments auxquels ils se rapportent !...
En plus leurs comportement n'a jamais été mis en place de la même façon sur tous les navigateurs !

Mise à part "Nom d'utilisateur" et "Nom" qui ne sont plus des colonnes, tout a l'air de coller !

je t'ai donné une base pour le reste, tu devrais arriver à reproduire ce comportement et/ou décliner pour ce contexte

par contre
Les display table-cell et table-row ne sont pas pris en charge par les vieux navigateurs il te faudra voir et agir en fonction de tes besoins (ie < 9 ? FF<3 ? ...)
Si c'est le cas, mis à part en utilisant des table (et j'aime pas ça non plus) la structure HTML telle que tu l'as définie ne peux faire ce que tu souhaite juste avec des css ...

@+&BonCode;)