background d'un div flottant

Version imprimable

18/06/2008, 14h21
monstor

background d'un div flottant

Re- bonjour!!

Alors, je m'explique, j'ai un div qui en contient 2 autres, l'un étant floatant à droite, l'autre à gauche.
J'aimerai mettre un background sur celui de droite mais le problème est que lorsque celui de gauche est plus haut que celui de droite, j'ai du blanc en dessous!
En gros, comment faire en sorte que ces 2 éléments aient la même hauteur?
18/06/2008, 14h28
romain_ci

lol j'ai eu le mm probleme tout a l'heure... J'ai reussi a le resoudre ! donc fait voir ton code Xhtml et CSS ;)

Oki ;)

Code de mon template :

Code:

1
2
3
4
5
6
7
8
9
<s:div styleClass="elemDoc">
	<s:div styleClass="elemDocContenu">
		<ui:insert name="elemDocContenu" />
	</s:div>
	<s:div styleClass="elemDocInfo">
		<ui:insert name="elemDocInfo" />
	</s:div>
	<s:div style="clear:both" />		
</s:div>

CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*Cadre d'un element*/
.elemDoc {
	border: 2px solid;
	margin: 8px
}
 
/*Titre et contenue d'un element*/
.elemDocContenu{
	float: left;
	margin-left: 4px;
	max-width: 65%;
}
 
/*infss sur un element*/
.elemDocInfo{
	width: 310px;
	height: 100%;
	background: #EDF1F0;
	float: right;
	border-left: 1px solid;
	border-left-color: gray;
}

Merci de ton aide!

Citation:

Envoyé par monstor

Oki ;)

Code de mon template :

Code:

1
2
3
4
5
6
7
8
9
<s:div styleClass="elemDoc">
	<s:div styleClass="elemDocContenu">
		<ui:insert name="elemDocContenu" />
	</s:div>
	<s:div styleClass="elemDocInfo">
		<ui:insert name="elemDocInfo" />
	</s:div>
	<s:div style="clear:both" />		
</s:div>

CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*Cadre d'un element*/
.elemDoc {
	border: 2px solid;
	margin: 8px
}
 
/*Titre et contenue d'un element*/
.elemDocContenu{
	float: left;
	margin-left: 4px;
	max-width: 65%;
}
 
/*infss sur un element*/
.elemDocInfo{
	width: 310px;
	height: 100%;
	background: #EDF1F0;
	float: right;
	border-left: 1px solid;
	border-left-color: gray;
}

Merci de ton aide!

Alors commencons par le premier code ! c'est la seule solution ke j'ai trouver ! en plus moi c'est special car j'ai un degrader :s !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<s:div styleClass="elemDoc">
<table> <tr><td>
	<s:div styleClass="elemDocContenu">
		<ui:insert name="elemDocContenu" />
	</s:div>
</td><td>
	<s:div styleClass="elemDocInfo">
		<ui:insert name="elemDocInfo" />
	</s:div>
</td></tr></table>
	<s:div style="clear:both" />		
</s:div>

Je t'ai mis du Html car ton code je c'est pas ce que c'est lol !
tu adaptera jte donne le principe quoi !

Ensuite dans le CSS tu fait des classes avec un background color de la du mm code !
Et tu les apliques sur les td correspondant !

PS :

Code:

1
2
3
4
5
6
7
8
9
elemDocInfo{
	width: 310px;
	height: 100%;
             min-height:100%
	background: #EDF1F0;
	float: right;
	border-left: 1px solid;
	border-left-color: gray;
}

NON ?

18/06/2008, 15h54
monstor

Non :(:?

Avec u tableau, ça ne peut pas le faire.
En effet, ce div est répété n fois et du coups d'une fois sur l'autre en fonction du texte que j'ai dans une colonne, la séparation du milieu ne ce fait pas au même endroit ce qui rend la page très laide!
18/06/2008, 17h08
[ced]

Un peu plus d'explication ? car je ne comprend pas le problème
18/06/2008, 17h13
monstor

Des explications sur mon soucis ou sur le fait que la solution de romain_ci ne convienne pas à mon soucis?
18/06/2008, 17h17
[ced]

sur ton souci ......

Est ce que ton problème vient du faite qu'après redimensionnement (en plus petit) de la fenêtre de ton navigateur, l' élement elemDocInfo passe en dessous de l'élément elemDocContenu?

Si c'est le cas, une solution est de fixé la taille de ton div conteneur, à savoir elemDoc.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 /*Cadre d'un element*/ .elemDoc { border: 2px solid; margin: 8px height:30px; width:800px; } /*Titre et contenue d'un element*/ .elemDocContenu{ float: left; margin-left: 4px; } /*infss sur un element*/ .elemDocInfo{ width: 310px; background: #EDF1F0; float: right; border-left: 1px solid; border-left-color: gray; }

18/06/2008, 17h26
monstor

Bon alors je vais essayé d'être plus clair!!!

J'ai un div qui est divisé en 2 div : un floatant à gauche et l'autre floatant à gauche.
Ces 2 div ont donc du contenu et je veux que celui de droite ai une couleur de fond.
Seulement lorsque le div de gauche est plus grand que celui de droite, la couleur de fond du div de droite ne prend pas toute la hauteur du cadre parent.

Pour être encore plus clair voila un screenshot : http://img374.imageshack.us/img374/9...nstitrexg0.jpg
18/06/2008, 17h38
[ced]

A part renseigner une hauteur en pixel, je ne vois pas d'autres solutions.

Mais je vois bien que ta taille n'est pas fixe.....
18/06/2008, 18h54
monstor

Non, elle n'est pas fixe et je ne peut donc pas renseigner la hauteur....
19/06/2008, 13h51
monstor

Donc pas de solution... :(
19/06/2008, 14h20
Candygirl

Du moment que ta "colonne" de droite est de taille fixe, tu peux jouer avec la technique des "fausses colonnes". Le principe est de faire une image incluant ta couleur de fond et ta bordure et de l'appliquer à l'élément qui contient les 2 colonnes en repeat-y et positionnée à droite.

Merci beaucoup, ca marche impec!!!!

Pour info voila ce que j'ai fait :

CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.elemDoc {
	background-image : url(../img/Nico/fondInfoElement.png);
	background-position: right;
	background-repeat: repeat-y;
	border: 2px solid;
	margin: 8px
}
 
/*Titre et contenue d'un element*/
.elemDocContenu{
	float: left;
	margin-left: 4px;
	max-width: 65%;
}
 
/*infss sur un element*/
.elemDocInfo{
	width: 310px;
	height: 100%;
	float: right;
}

Mon image faisant exactement la largeur souhaitée.

Mon template :

Code:

1
2
3
4
5
6
7
8
9
10
<s:div styleClass="elemDoc">
		<s:div styleClass="elemDocContenu">
			<ui:insert name="elemDocContenu" />
		</s:div>
		<s:div styleClass="elemDocInfo">
			<ui:insert name="elemDocInfo" />
		</s:div>
	<s:div style="clear:both" />	
 
</s:div>

Encore merci ;)