28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je me suis fait un cadre avec des images découpés c'est monté avec des div css.

Mon problème est que je ne trouve pas comment faire pour que le cadre s'ajuste en hauteur de 100% selon la quantité de texte contenu dans les cadres.

Pouvez-vous m'aider svp?

Merci!

Voir: http://www.bizhosting411.com/~auberged/cadre-2c/cadre-2c.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>

<style type="text/css">
<!--
.cadre-2-01_ {
	width: 321px;

}
.cadre-2-01_left {
	width: 21px;
	height: 66px;
	background-image: url(images/cadre-2_01.png);
	float: left;

}
.cadre-2-01_center {
	width: 280px;
	height: 66px;
	background-image: url(images/cadre-2_02.png);
	float: left;
}
.cadre-2-01_right {
	width: 20px;
	height: 66px;
	background-image: url(images/cadre-2_03.png);
	float: right;
}
.cadre-2-02_ {
	width: 321px;
	height: auto;
	float: left;
}
.cadre-2-02_left {
	width: 21px;
	height: 175px;
	background-image: url(images/cadre-2_04.png);
	float: left;
}
.cadre-2-02_center {
	width: 280px;
	height: 175px;
	background-image: url(images/cadre-2_05.png);
	float: left;
}
.cadre-2-02_right {
	width: 20px;
	height: 175px;
	background-image: url(images/cadre-2_06.png);
	float: right;
}
.cadre-2-03_ {
	width: 321px;
	height: auto;
	float: left;
}

.cadre-2-03_left {
	width: 21px;
	height: 27px;
	background-image: url(images/cadre-2_07.png);
	float: left;
}
.cadre-2-03_center {
	width: 280px;
	height: 27px;
	background-image: url(images/cadre-2_08.png);
	float: left;
}
.cadre-2-03_right {
	width: 20px;
	height: 27px;
	background-image: url(images/cadre-2_09.png);
	float: right;
}

-->
</style>
 </head>

 <body>
  

<div class="cadre-2-01_">
	

<div class="cadre-2-01_left"></div><div class="cadre-2-01_center"></div><div class="cadre-2-01_right"></div>

<div class="cadre-2-02_left"></div><div class="cadre-2-02_center">

<p>Même si un saut en parachute peut paraître effrayant, c’est avec un Saut en parachute culinaire que l’Auberge des Berges se voit remettre le prix de la catégorie « Hébergement – Moins de 40 unités ».Ce concept culinaire innovateur leur a permis de se démarquer des autres.</p>

<p>Le Saut en parachute est une aventure gourmande dans laquelle le client laisse au chef le choix de son repas. L’Auberge des Berges fait vivre à ses clients une expérience, qui varie selon leur audace. Les audacieux ont le choix de laisser leur repas ou seulement une partie de ce dernier entre les mains du chef. Celui-ci déterminera le contenu des différents plats tout en respectant, s’il y a lieu, les restrictions alimentaires du client.</p></div><div class="cadre-2-02_right"></div>

<div class="cadre-2-03_left"></div><div class="cadre-2-03_center"></div><div class="cadre-2-03_right"></div>

</div>



 </body>
</html>
Je crois que tu t'es compliqué la vie, moi ce que j'aurais fais :

Une div pour le top de l'image,
Une div pour le contenu + le background en fond qui se répète.
Une div pour le bottom de l'image.

HTML =
<div class="cahier">
  <div class="top"></div>
  <div class="content">
     <p>blablablabla</p>
  </div>
  <div class="bottom"></div>
</div>


En css pour le content tu met la bonne largeur avec du padding pour caller le texte et tu repète le background uniquement verticalement.
Je l'ai fais comme ça pour aussi pouvoir le faire élargir à 100% dépendamment de où je fais apparaitre le cadre dans le site Web
@artsx : oui mais t'as solution n'aidera pas mieux à aligner en hauteur les deux blocs ... le contenu va s'allonger et pas celui de ton cadre à gauche.

@stefane321 : regarde du côté des "dispaly : table" il me semble qu'en combinant une des propriétés et "height: 100%" tu devrais obtenir ce que tu souhaites
Modifié par mini-truc (22 Aug 2013 - 16:34)
bah si ?!
Si tu prend toutes la largeur de l'image à chaque fois, je ne vois pas le problème?!

Le seul bémol c'est qu'il ne pourra pas l'élargir a 100% comme il le demande
On doit pas se comprendre ^^
J'ai déjà utilisé la méthode que je lui ai décrite pour un de mes projets pros, j'ai pas eu de soucis particulier pour caller le contenu en hauteur/largeur.
artsx a écrit :
On doit pas se comprendre ^^
J'ai déjà utilisé la méthode que je lui ai décrite pour un de mes projets pros, j'ai pas eu de soucis particulier pour caller le contenu en hauteur/largeur.


T'es magicien Smiley rolleyes !

Faudra que tu m'expliques Smiley smile par ce que moi quand je colle deux div l'un à coté de l'autre leur hauteur varie selon leurs propres contenu et pas celui qui a le plus long Smiley smile

Tu nous caches ton astuce vilain petit canaillou ! ^^ et si tu nous montrais ton css ?
@mini-truc :

html :

<div class="top">on met l'image avec largeur+hauteur</div>
<div class="contenu"> on met le contenu + l'image en largeur uniquement avec le background qui se répète verticalement</div>
<div class="bottom">on met l'image de fin avec largeur + hauteur</div>

Je vois pas ce qui est dur à comprendre dans cette logique ?

Voici un exemple de la ou je l'ai intégré :
http://www.yakarouler.com/diagnostic/rechercher-panne/diagnostic-par-symptome/ressentir-je-ressens-hesitation-jeu-cale-vibration-etc/jeu-jeu-lateral-des-roues-avant.html
Modifié par artsx (22 Aug 2013 - 16:52)
Ah d'accord je voyais pas ces choses sous cet angle ; mais il reste le problème de la continuité non ? ou on s'en balance aussi ?
mais ça se fait tout seul sans signifier de hauteur fixe, ton bloc prendra la hauteur du contenu?!
@artsx

J'ai trouvé un problème dans ton code depuis qq heures j'essaie de trouver la solution par moi-même me considérant déjà chanceux d'avoir eux ton aide ce matin.

Voici le problème: Le cadre est maintenant trop long il laisse un espace vide d'environs 3 centimètre.

Une fois dans mon site ce 3 centimètres de trop s'affiche en dessous des des <div> en dessous.
Regarde le lien que tu m'as envoyé: http://jsfiddle.net/NHUqu/2/

Avec Firefox j'ai 3 cm de trop long.

Avec Google chrome et Internet Explorer se n'est pas trop long mais les colonnes de gauche et de droite n'apparaissent pas.
Modifié par stefane321 (22 Aug 2013 - 23:37)