28172 sujets

CSS et mise en forme, CSS3

[RESOLU]Comment avoir 3 div côte à côte de même hauteur (variable)

EDIT : Ce design est prévu pour IE6/7 uniquement.

J'ai une liste d'éléments avec des div d'encadrement pour afficher des éléments graphiques (coins arrondis...).

Ma liste se découpe en fait en 3 colonnes.

Une pour la bordure gauche.
Une pour le contenu.
Une pour la bordure droite.

Le problème que j'ai c'est que mes div de bordure ne suivent pas la hauteur du div de contenu (variable en fonction du nombre de lignes dans ma liste).

<div class="TaskList">
            <div class="TaskListLeft">
                <div class="TaskListHeaderLeftBorder">&nbsp;</div>
                <div class="TaskListBorderLeft">&nbsp;</div>
                <div class="TaskListFooterleftBorder">&nbsp;</div>
            </div>
            <div class="TaskListCenter">
                <div class="TaskListHeaderCenter"><p class="TaskListHeaderLeft">Elaboration Budgétaire</p><p class="TaskListHeaderRight">15</p></div>
            
    
        <div class="TaskListItem">
            
            <a class="TaskListItemLabel" href="#">Coucou</a>
            
            <a class="TaskListItemcount" href="#">1</a>
            
        </div>
    
        <div class="TaskListSeparator">&nbsp;</div>
    
        <div class="TaskListItem">
            
            <a class="TaskListItemLabel" href="#">Coucou</a>
            
            <a class="TaskListItemcount" href="#">1</a>
            
        </div>
    
        <div class="TaskListSeparator">&nbsp;</div>
    
        <div class="TaskListItem">
            
            <a class="TaskListItemLabel" href="#">Coucou</a>
            
            <a class="TaskListItemcount" href="#">1</a>
            
        </div>
    
        <div class="TaskListSeparator">&nbsp;</div>
    
        <div class="TaskListItem">
            
            <a class="TaskListItemLabel" href="#">Coucou</a>
            
            <a class="TaskListItemcount" href="#">1</a>
            
        </div>
    
        <div class="TaskListSeparator">&nbsp;</div>
    
        <div class="TaskListItem">
            
            <a class="TaskListItemLabel" href="#">Coucou</a>
            
            <a class="TaskListItemcount" href="#">1</a>
            
        </div>
    
        <div class="TaskListSeparator">&nbsp;</div>
    
        <div class="TaskListItem">
            
            <a class="TaskListItemLabel" href="#">Coucou</a>
            
            <a class="TaskListItemcount" href="#">1</a>
            
        </div>
    
        <div class="TaskListSeparator">&nbsp;</div>
    
        <div class="TaskListItem">
            
            <a class="TaskListItemLabel" href="#">Pouet</a>
            
            <a class="TaskListItemcount" href="#">2</a>
            
        </div>
    
        <div class="TaskListSeparator">&nbsp;</div>
    
        <div class="TaskListItem">
            
            <a class="TaskListItemLabel" href="#">Yop</a>
            
            <a class="TaskListItemcount" href="#">12</a>
            
        </div>
    
                
            </div>
            <div class="TaskListRight">
                <div class="TaskListHeaderRightBorder">&nbsp;</div>
                <div class="TaskListBorderRight">&nbsp;</div>
                <div class="TaskListFooterRightBorder">&nbsp;</div>
            </div>
        </div>


Le CSS :
/*CSS WUCRepeater*/

.TaskList
{
	width:250px;
}

.TaskListLeft
{
	width:5px;
	float:left;
}

.TaskListCenter
{
	width:240px;
	float:left;
	background-image:url(../Images/degrade-c.png);
	background-repeat:repeat-x;
	background-position:bottom;

}

.TaskListRight
{
	width:5px;
	float:left;
}

.TaskListHeaderLeftBorder
{
	background-image:url(../Images/taches-ong-g.png);
	background-repeat:no-repeat;
	height:15px;
	width:5px;
	float:left;
}

.TaskListHeaderCenter
{
	background-image:url(../Images/taches-c.png);
	background-repeat:repeat-x;
	height:15px;
	width:240px;
	float:left;
}


.TaskListHeaderRightBorder
{
	background-image:url(../Images/taches-ong-d.png);
	background-repeat:no-repeat;
	height:15px;
	width:5px;
	float:left;
}


.TaskListItem
{
	clear:both;
}

.TaskListItemLabel
{
	float:left;
	font-family:Arial;
	font-size:10px;
	font-weight:bold;
	color:#666666;
}

.TaskListItemcount
{
	float:right;
	font-family:Arial;
	font-size:10px;
	font-weight:bold;
	color:#666666;
}

.TaskListSeparator
{
	background-image:url(../Images/separation-250.png);
	background-repeat:no-repeat;
	height:1px;
	width:240px;
	clear:both;
}


.TaskListBorderLeft
{
	clear:both;
	float:left;
	background-image:url(../Images/pixel-contour-separation.png);
	background-repeat:repeat-y;
	width:1px;
}

.TaskListHeaderLeft
{
	float:left;
	font-family:Arial;
	font-size:10px;
	font-weight:bold;
	color:White;

}

.TaskListHeaderRight
{
	float:right;
	font-family:Arial;
	font-size:10px;
	font-weight:bold;
	color:White;
}

.TaskListBorderRight
{
	float:right;
	background-image:url(../Images/pixel-contour-separation.png);
	background-repeat:repeat-y;
	height:auto;
	width:1px;
}

.TaskListfooterCenter
{
	background-image:url(../Images/degrade-c.png);
	background-repeat:repeat-x;
	height:35px;
	clear:left;
	width:240px;
	float:left;
}

.TaskListFooterleftBorder
{
	background-image:url(../Images/degrade-g.png);
	background-repeat:no-repeat;
	background-position:left;
	background-position:bottom;
	width:6px;
	clear:both;
	float:left;
}

.TaskListFooterRightBorder
{
	background-image:url(../Images/degrade-d.png);
	background-repeat:no-repeat;
	background-position:bottom;
	clear:both;
	width:5px;
	float:right;
}


Une capture d'écran (mes bordures en bas à droite et à gauche ne sont pas assez basses):
upload/16431-screen.png
Modifié par cnoureau (21 Aug 2008 - 18:46)
Bonjour,

chrisllers a écrit :
c' est excellent.

Non, c'est pas terrible.

Vu qu'il s'agit d'un bloc simple, de largeur fixe (250px si j'ai bien lu), extensible en hauteur, les approches suivantes sont erronées:
- faire un cadre extensible en largeur, avec plein de petites images découpées et de blocs imbriqués dans des blocs imbriqués dans des blocs (ou, autrement, avec un tableau à 9 cellules);
- voir trois «colonnes» dans le design de cette boite.

Une approche un peu plus simple et efficace de ce problème précis:
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html
La largeur est ici de 250px mais pourrait être amenée à changer dans le futur.

Donc la solution simple ne convient pas.
cnoureau a écrit :
La largeur est ici de 250px mais pourrait être amenée à changer dans le futur.

Si tu as deux ou trois largeurs bien identifiées, ça vaut le coup de faire deux ou trois styles spécifiques.

Sinon, il faut effectivement plonger dans les solutions plus compliquées, et là c'est à chaque fois du cas par cas, ce qui demande de maitriser un peu l'intégration web (html et css) pour s'en sortir convenablement. Smiley cligne
Un bon début: http://web.covertprestige.info/test/35-boites-fluides-bords-coins-en-images.html

Pour cette boite en hauteur et largeur fluide, je vois bien une solution relativement simple, avec:
- un titre Hn contenant un span en display: block, et la solution évoquée précédemment pour une boite de largeur fixe... mais à l'horizontale, pour faire une boite de hauteur fixe et largeur fluide (en fait dans ce cas précis on peut faire hauteur fixe et largeur fluide avec ces deux éléments en une images de fond unique...);
- un conteneur avec border de 1px (sauf en haut), positionné en relatif, et un dégradé gris en image de fond, en bas;
- deux éléments vides (I, SPAN, ou autre...) positionnés en absolu dans les coins du bas, pour dessiner l'arrondi.

Donc une structure HTML comme suit:
<div class="fluidbox">
	<i class="deco1"></i><i class="deco2"></i>
	<h2><span>Un titre quelconque</span></h2>
	<div class="content">
		Ici le contenu de ma boite.
	</div>
</div><!-- .fluidbox -->
J'ai utilisé ce qui est décrit dans le lien de chrisllers et ça marche nickel.

Bon j'ai adapté un peu car moi j'ai un dégradé pour le bas qui se situe sous mes éléments de liste donc j'ai pas de footer.
Florent V. a écrit :

Non, c'est pas terrible.

en tout moi ça me convient et c' est évolutif dans le sens où tu modifies tes boîtes comme tu le veux.
j' utilisais auparavant la technique de largeur fixe proposée sur ton lien, je la remplace au fur et à mesure par la méthode décrite sur mon lien.

a écrit :
Une approche un peu plus simple et efficace de ce problème

c' est peut-être plus simple mais plus efficace j' en doute vu le peu de mobilité que peu avoir le bloc. Smiley cligne
Modifié par chrisllers (21 Aug 2008 - 21:25)
Sujet clos
Aller à