28172 sujets

CSS et mise en forme, CSS3

Adapter la hauteur de 2 div en fonction d'une autre

Bonjour ^^

Me voilà confronté à un petit problème dans la conception de mon site ^^
J'aimerais que 2 colonnes chacune de part et d'autre du contenu central aient la même hauteur que le contenu.
Le contenu fait 80% de la page et les 2 colonnes 10% chacune (de largeur)
Un petit schéma pour mieux expliquer :

http://www.ouplo.com/img/exemple.png

Évidement le contenu pourrais grossir (augmenter en hauteur) à tous moment en cas d'ajout de news etc ...
Je ne dois donc pas mettre de hauteur dans le css
Les deux petites colonnes, elles, n'auraient pas de contenu, juste un dégradé en background Smiley smile


Merci d'avance de votre aide ^^

PS: Je suis confronté à ce problème depuis hier, j'ai chercher partout sans réponses
Salut,

Et pourtant, en tapant "colonne même longueur" dans la recherche dans la partie apprendre du site, tu aurais trouvé Un design fluide avec trois «colonnes», grâce au positionnement flottant

En parcourant cette même rubrique Apprendre, tu aurais pu aussi trouver e forts beaux (nouveaux) gabarits, avec l'un d'entre eux au moins qui correspond à ce que tu souhaite faire.

Bref, Alsacréations offre suffisamment de ressources pour prendre la peine de s'y intéresser un mimimum. Smiley cligne
Salut Smiley smile

Les méthode que tu m'as donner je les ai tester Smiley smile
Le problème est que dans le 1er exemple, les colonnes ne sont pas de même hauteur (donc pas ce que je veux Smiley smile )

Le 2ème exemple ne permet pas d'utilisé une width en %tage (pour les 2 colonnes) vu que je dois utilisé des images en arrière plan "factice" Smiley cligne

Merci cependant d'avoir penser que je n'ai pas chercher
Je peux te mettre ici tous les liens que j'ai chercher
Ils me renvoient tous à peux prêt la même solution
Cryde a écrit :
Les méthode que tu m'as donner je les ai tester Smiley smile
Le problème est que dans le 1er exemple, les colonnes ne sont pas de même hauteur (donc pas ce que je veux Smiley smile )

En bas de page je vois pourtant un titre "Comment faire des colonnes de même hauteur ?".

Cryde a écrit :
Le 2ème exemple ne permet pas d'utilisé une width en %tage (pour les 2 colonnes) vu que je dois utilisé des images en arrière plan "factice" Smiley cligne

En allant sur le lien "la galerie des gabarits" et en cliquant sur le lien "tous les gabarits", autrement dit cette page,
je vois pourtant un gabarit 11 qui correspond parfaitement à ce que tu veux faire

Merci cependant d'avoir pensé que mes liens étaient inutile mais prend au moins le temps de les regarder jusqu'au bout si ton but est vraiment de trouver réponse à ta demande... Smiley rolleyes
Si tu veux que tes deux colonnes aient la même hauteur, quelle que soit la longueur de leur contenu, tu as plusieurs solutions :
- utiliser la technique des colonnes factices (une image d'arrière-plan au niveau du conteneur englobant tes deux colonnes et ton contenu) ;
- mettre tes 2 colonnes et ton contenu en display: table-cell (inconvénient : les versions d'IE antérieures à la 8 ne comprennent pas table-cell) ;
- mettre tes 2 colonnes et ton contenu en positionnement flottant, leur ajouter un padding-bottom de valeur élevée (2000px, par exemple) et une marge inférieure négative de même valeur absolue (margin-bottom: -2000px, si l'on a défini padding-bottom à 2000px).
Victor BRITO a écrit :

- mettre tes 2 colonnes et ton contenu en positionnement flottant, leur ajouter un padding-bottom de valeur élevée (2000px, par exemple) et une marge inférieure négative de même valeur absolue (margin-bottom: -2000px, si l'on a défini padding-bottom à 2000px).


Cette solution ne marche apparement pas sur les version antérieur à IE8 Smiley ohwell
bonjour,Mon analyse du probleme posé ne me mêment pas a une architectures 3 colonnes (sauf si l'on fait usage d'un tableau).

Il s'agit d'un conteneur globale en 80% de large bordé de 2 bordures latérales de 10% de largeur chacunes.

En partant de 2 images de fond , on peut obtenir cet effet a l'aide d'un seul conteneur global , en prenant soin d'imposé une largeur minimale adapté au graphisme des bordures et de dégagé l'espace utiles a leur affichages.

(limites du gabarit : le conteneur global ne pourra pas transmettre un height:100%; , body et html doivent avoir les mêmes regles pour le background , ne passe pas en "mode quirks". )

je depose ici un gabarit de demonstartion:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>bordure fluides</title>
<style type='text/css' media="screen">
html , body {background:url(http://img263.imageshack.us/img263/652/bordgauche.png) repeat-y 0 0 #DDDDDD;
margin:0;padding:0;height:100%;min-width:730px;
}
body {margin-left:10%;width:90%}
 #page {
min-height:100%;
height:auto!important;
height:100%;
background:url(http://img690.imageshack.us/img690/3832/borddroit.png)  right repeat-y #DDDDDD;
padding-right:12.5%;/*(12.5% de 90% = 10% de 100%;)*/
}
#contenu {border:1px solid;}
</style>
<script type='text/javascript'>
testh ='auto';
  function hauteur ()  {
  if (testh  =='auto' ) {
 testh='1600px'} 
  else 
  {testh = 'auto' }
return testh;
  }
</script>
</head>
<body>

		<div id="page">
				<div id="contenu" onclick =" this.style.height=hauteur();">
Cliquez moi donc pour passer ma hauteur de 1600px a auto et vice versa .
			</div>
		</div>
</body>
</html>

copiable/collable ou testable en ligne ici : http://gcyrillus.free.fr/essai/bordure-pleine-page-fluide-conteneur-marges-auto.html

GC
Je vais peut-être dire une bêtise, mais si ces deux colonnes ne doivent rien contenir d'autre qu'une image en background, alors elles n'ont pas d'existence en elles-même (d'un point de vue sémantique... c'est quoi, deux div vides ??).

Ce ne serait pas plus simple et correct de faire un conteneur principal avec cette fameuse image en background, et le contenu centré dedans, avec les marges gauche et droite qui vont bien ?
mistike a écrit :
Je vais peut-être dire une bêtise, mais si ces deux colonnes ne doivent rien contenir d'autre qu'une image en background, alors elles n'ont pas d'existence en elles-même (d'un point de vue sémantique... c'est quoi, deux div vides ??).

Ce ne serait pas plus simple et correct de faire un conteneur principal avec cette fameuse image en background, et le contenu centré dedans, avec les marges gauche et droite qui vont bien ?


tout a fait: ce n'est pas une bétise Smiley smile , c'est le pourquoi ma proposition Smiley smile , la donnée qui semble difficile a gerer , c'est cette largeur en pourcentage , qui ne permet pas d'utiliser une seule image.
gc-nomade a écrit :


tout a fait: ce n'est pas une bétise Smiley smile , c'est le pourquoi ma proposition Smiley smile , la donnée qui semble difficile a gerer , c'est cette largeur en pourcentage , qui ne permet pas d'utiliser une seule image.


Je n'avais pas lu ta proposition en entier Smiley cligne

En fait tout va dépendre de la nature de l'image... pourquoi ça ne permettrait pas d'utiliser une seule image ?
mistike a écrit :
pourquoi ça ne permettrait pas d'utiliser une seule image ?

Parce que la largeur n'est pas fixe , 10% pour les bordures et 80% pour le contenu . valeurs calculée en fonctions de la largeurs de la fenêtre du navigateurs chez l'internaute Smiley smile ... inconnues de fait .
gc-nomade a écrit :

Parce que la largeur n'est pas fixe , 10% pour les bordures et 80% pour le contenu . valeurs calculée en fonctions de la largeurs de la fenêtre du navigateurs chez l'internaute Smiley smile ... inconnues de fait .


Comme je le disais ça dépend de l'image... il parle d'un fond en dégradé. Par exemple :
test vite fait ici (je vous accorde que les couleurs sont moches Smiley cligne )

Par contre ça ne permet pas forcément l'utilisation d'une image différente pour chaque côté !
Modifié par mistike (06 Dec 2009 - 20:19)
en effet si il s'agit d'un simple fond classique en degradé .
Dans les deux cas , l'architecture html de bases est la même (un conteneur global) et la notion de "colonnes" vrais ou factices est inadapté.

++
Deux petites questions :

* sur la première image je ne crois pas voir les deux backgrounds de colonne, juste celui du body ?

* tes deux "colonnes" sur l'image 3 n'ont pas la même taille, ou c'est un effet d'optique ?
Cryde a écrit :

Le contenu fait 80% de la page et les 2 colonnes 10% chacune (de largeur)


Je ne comprend pas ce que tu veut faire avec ces 3 images ?

Si les bordures et le contenu font 100% de largeur (et 100% de hauteur de l'ecran) , a quoi sert l'image de fond foncé pour body si on ne la voit pas ? Je n'arrive pas a suivre ta logique
Bonjour Je suis nouveau sur le forum.
J'espère que je ne post pas trop tard mais depuis le temps que moi aussi je cherche la solution hier soir je suis arriver sur ce topic et en bidouillant avec vos proposition je viens enfin de trouvé grâce à gc-nomade perso pour moi sa marche nickel et sa devrait marcher avec IE aussi

Voila ce que j'ai fait :

<html>
<head></head>
<body>
/*ici ton header*/
<div id="centerleft"><div id="centerright"><div id="centermid">/*ton contenu*/</div></div></div>
/*ton footer*/
</body>
</html>


Et en css

#centerleft
{
background: url("../img/fondleft.png") left repeat-y;
}
#centermid
{
margin-left: 68px;/*taille du bloc de gauche*/
margin-right: 68px;/*taille du bloc de droite*/
background: url("../img/fond.png") repeat;
}
#centerright
{
background: url("../img/fondright.png") right repeat-y;
}


Pour "centermid' tu peut aussi faire :

#centermid
{
width:90%;
margin:auto;
background: url("../img/fond.png") repeat;
}


J'ai pas vraiment tester cette solution mais normalement sa devrait te permettre d'avoir des bord de largeur variable.

Voila une solution toute bête mais qui marche Smiley biggrin comme vous l'avez compris "centerleft" et "centerright" récupéré leur hauteur grâce à "centetmid".

J'ai pas tester mais normalement C'est valide W3C (enfin je vois pas pourquoi sa ne le serait pas)

Ps : Attention à ne pas oublié "right" dans "background" du bloc de droite car c'est lui qui fait que l'image soit totalement à droite (donc "float" ne sert a rien ici) dans le bloc de gauche "left" est optionnel mais je le mes au cas ou
Sujet clos
Aller à