Comment adapter automatiquement la hauteur de containt au texte

Fermé
yyou Messages postés 11 Date d'inscription samedi 18 mai 2013 Statut Membre Dernière intervention 6 novembre 2014 - 18 mai 2013 à 12:49
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 - 20 mai 2013 à 13:44
Bonjour,

J'ai téléchargé un kit pour mon site d'éducateur canin. Jusqu'à présent je me suis débrouillée à l'adapter en couleur, taille de police etc (les bases quoi) mais j'avoue que je sèche pour la hauteur du content (fond blanc) que je voudrais adapter automatiquement à la hauteur du texte : http://adelaurie.com/img/screen.jpg

html {
	background: #CCCCCC;
}

body {

	margin: 0;

	padding:0;

	font-family: "Print Clearly";

	font-size: 16px;

	line-height: 1.5em;

	color: #CCCCCC;

	width: 100%;

	display: table;

}

#templatemo_container {
	width: 940px;
	min-height: 940px;
	margin: auto;
	background-color:#FFFFFF;
}

#templatemo_header_section {

	width: 940px;

	height: 372px;
	
	background:url(images/templatemo_header_blank.jpg) no-repeat;

}

.clear{

	clear:both;
	height: 1px;
}

/*------------- Top Menu ------------------*/
#templatemo_topmenu {
	float: right;
	width: 200px;
	height: 25px;
	margin-right:55px;
	

}


#templatemo_topmenu ul {
	float: left;
	width: 300px;
	margin: 0px;
	padding: 3px 0px 0px 0px;
	list-style: none;
}


#templatemo_topmenu ul li{
	display: inline;
}

#templatemo_topmenu ul li a{
	float: left;
	padding-left:25px;
	padding-bottom:5px;
	margin-left:10px;
	font-size: 18px;
	font-weight: normal;
	text-align: center;
	text-decoration: none;
	color: #000;
	background:url(images/templatemo_head_menu.gif) no-repeat;

}

#templatemo_topmenu li a:hover, #templatemotop_menu li .current{
	color: #058fdd;
}
/* end of menu */
/* Head Menu */
#templatemo_menu{
	background: #888;
	width:940px;
	height: 30px;
	float:left;
}

#templatemo_menu ul {
	float: left;
	margin: 0;
	padding: 0px 0px 0px 0px;
	list-style: none;
}

#templatemo_menu ul li{
	display: inline;
}

#templatemo_menu ul li a{
	float: left;
	padding: 6px 25px;
	font-size: 24px;
	font-weight: lighter;
	text-align: center;
	text-decoration: none;
	color: #FFFFFF;
	border-right: 1px solid #FFFFFF;
}

#templatemo_menu li a:hover, #templatemo_menu li .current{
	background: #66CCCC;
	text-align: center;


}
/* End of Head Menu */
#templatemo_content_section {
	width: 940px;
	min-height: 550px;
	height:auto
	background: #FFFFFF;
}

/* End of Content 1 */
.templatemo_content_1{ 
	float:left;
	background: url(images/templatemo_section_1_bg.jpg) no-repeat;
	width:438px;
	height:255px;
	margin : 20px 0px 0px 30px;

}

* html .templatemo_content_1{
	margin-left: 15px;
	width: 438px;
}
.templatemo_content_1 h1{ 
	color:#fc9109;
	font-size:18px;
	font-weight:normal;
	margin: 10px 0px 0px 70px;
}

.templatemo_content_1 .contents {
	margin: 25px 30px 20px 30px;
}


.templatemo_content_1 .news {
	margin: 3px 3px 3px 3px;
	width: 330px;
	height:70px;
}

.templatemo_content_1 .contents img{
	float:right;
	margin: 3px 3px 3px 3px;
	border: none;
}

.templatemo_content_1 .news img{
	float: left;
	border: solid 1px #000;
	margin: 3px 3px 3px 5px;
	
}

.templatemo_content_1 .news .textarea{
	float:right;
	margin: 0px 5px 0px 0px;
}

.templatemo_content_1 .news .textarea h2{
	margin : 2px 0px 3px 0px;
	color:#ff8c05;
	font-size:14px;

}

.templatemo_content_1 .news .textarea p{
	margin : 0px 3px 0px 3px;
	color:#471f01;
	font-size:16px;
	text-align:justify;
}

.templatemo_content_1 .news .textarea a{
	margin : 0px 3px 0px 3px;
	color:#f7006e;
	font-weight:normal;
	text-decoration: none;
}

/* End of Content 1 */
/* Content 2 */
.templatemo_content_2{ 
	float:right;
	background:url(images/templatemo_section_2_bg.jpg) no-repeat;
	width:439px;
	height:264px;
	margin : 10px 30px 0px 0px;

}

* html .templatemo_content_2{
		
		margin-right: 15px;
	
}

.templatemo_content_2 h1{ 
	color:#ee1073;
	font-size:18px;
	font-weight:normal;
	margin: 20px 0px 0px 70px;
}

.templatemo_content_2 .contents {
	margin: 25px 35px 20px 40px;
}

.templatemo_content_2 h2{
	color:#5e3300;
	margin : 2px 0px 3px 0px;
	font-size:14px;

}

.templatemo_content_2 p{
	margin : 0px 3px 0px 3px;
	color:#471f01;
	font-size:16px;
	text-align:justify;
}

.templatemo_content_2 a{
	margin : 0px 3px 0px 3px;
	color:#f7006e;
	font-weight:bold;
	text-decoration: none;
}

.templatemo_content_2 img{
	float:right;
	margin: 3px 3px 3px 3px;
	border:none;
}

/* End Of Content 2*/
/* Content 3*/
.templatemo_content_3{ 
	width:400px;
	margin : 10px 0px 0px 40px;
	float:left;
}

* html .templatemo_content_3{ 
	margin-left: 20px;
}

.templatemo_content_3 h1{ 
	color:#fc9109;
	font-size:18px;
	font-weight:normal;
	margin: 10px 0px 0px 0px;
}

.templatemo_content_3 .contents {
	margin: 25px 35px 20px 35px;
}

.templatemo_content_3 h2{
	color:#5e3300;
	margin : 2px 0px 3px 0px;
	font-size:16px;
}

.templatemo_content_3 p{
	margin : 0px 3px 0px 3px;
	color:#471f01;
	font-size:16px;
	text-align:justify;
}

.templatemo_content_3 a{
	margin : 0px 3px 0px 3px;
	color:#f7006e;
	font-weight:bold;
	text-decoration: none;
}
.templatemo_content_3 img{
	float:right;
	margin: 3px 3px 3px 3px;
	border:none;
}

.templatemo_content_3 .news {
	margin: 3px 3px 3px 3px;
}

.templatemo_content_3 .news img{
	float:left;
	border:none;
	margin: 3px 0px 3px 5px;
}

.templatemo_content_3 .news .textarea{
	float:left;
	margin: 0px 5px 0px 5px;
	width:220px;
}

.templatemo_content_3 .news .textarea h2{
	margin : 2px 0px 3px 0px;
	color:#ff8c05;
	font-size:16px;
}

.templatemo_content_3 .news .textarea p{
	margin : 0px 3px 0px 3px;
	color:#471f01;
	font-size:16px;
	text-align:justify;
}

.templatemo_content_3 .news .textarea a{
	margin : 0px 3px 0px 3px;
	color:#f7006e;
	font-weight:bold;
	text-decoration: none;
}

/* End Of Content 3*/

/* Content 4*/
.templatemo_content_4{ 
	width:400px;
	margin : 10px 40px 0px 0px;
	float:right;
}

* html .templatemo_content_4{ 

	margin-right: 20px;

}

.templatemo_content_4 h1{ 
	color:#ee1073;
	font-size:18px;
	font-weight:normal;
	margin: 10px 0px 0px 0px;
}

.templatemo_content_4 .contents {
	margin: 25px 35px 20px 35px;
}

.templatemo_content_4 h2{
	color:#5e3300;
	margin : 2px 0px 3px 0px;
	font-size:16px;
}

.templatemo_content_4 p{
	margin : 0px 3px 0px 3px;
	color:#471f01;
	font-size:16px;
	text-align:justify;
}

.templatemo_content_4 a{
	margin : 0px 3px 0px 3px;
	color:#f7006e;
	font-weight:bold;
	text-decoration: none;
}
.templatemo_content_4 img{
	float:right;
	margin: 3px 3px 3px 3px;
	border:none;
}

.templatemo_content_4 .news {
	margin: 3px 3px 3px 3px;
}

.templatemo_content_4 .news img{
	float:left;
	border:none;
	margin: 3px 0px 3px 5px;
}

.templatemo_content_4 .news .textarea{
	float:left;
	margin: 0px 5px 0px 5px;
	width:220px;
}

.templatemo_content_4 .news .textarea h2{
	margin : 2px 0px 3px 0px;
	color:#ff8c05;
	font-size:12px;
}

.templatemo_content_4 .news .textarea p{
	margin : 0px 3px 0px 3px;
	color:#471f01;
	font-size:12px;
	text-align:justify;
}

.templatemo_content_4 .news .textarea a{
	margin : 0px 3px 0px 3px;
	color:#f7006e;
	font-weight:bold;
	text-decoration: none;
}

/* End Of Content 4*/
/* ------------- Templatemo Gallery ------------- */
.templatemo_gallery {
	float: left;
	clear:both;
	width:900px;
	height:220px;
	margin-left: 20px;
}

* html .templatemo_gallery {
	margin: 5px 0px 20px 15px;	
}
.templatemo_gallery .title{
	height:30px;
	background:url(images/templatemo_gallery_head.jpg) no-repeat;
	margin: 5px 5px 5px 5px;
	padding:25px 0px 0px 65px;
}

.templatemo_gallery .title h1{

	font-size:18px;
	font-weight:normal;
	color:#ff0140;
	margin:0px;
}

.templatemo_gallery .prev{

	width:40px;
	height:130px;
	text-align:center;
	float:left;
	
}

.templatemo_gallery .prev img{

	margin: 40px 0px 0px 0px;
	
}

.templatemo_gallery .next{

	width:40px;
	height:130px;
	text-align:center;
	float:right;

}

.templatemo_gallery .next img{

	margin: 40px 0px 0px 0px;
	
}

.templatemo_gallery .images{

	width:800px;
	height:130px;
	text-align:center;
	float:left;
	
}

.templatemo_gallery .img{

	margin : 10px 5px 10px 5px;
	
}
/* ------------- End Of Templatemo Gallery ------------- */
#templatemo_footer_section {
	background: #666;
	float: left;
	width: 940px;
	clear: both;
	font-size: 14px;
	
}

.templatemo_copyright {

	float: right;
	
	color: #fff;
	
	padding: 6px;

}

.templatemo_copyright a{

	color: #fff;
}



18 réponses

ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
18 mai 2013 à 13:56
bonjour
les blocs ont des hauteurs en px, si tu veux rajouter du texte cà va peut-être pas le faire.
0
yyou Messages postés 11 Date d'inscription samedi 18 mai 2013 Statut Membre Dernière intervention 6 novembre 2014
18 mai 2013 à 14:14
Et on peut pas modifier comme un tableau qu'on adapte au contenu ?
0
Profil bloqué
18 mai 2013 à 14:16
Si, tu supprimes les height. (au pire, tu mets min-height à la place)

0
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
Modifié par ideal23 le 18/05/2013 à 14:22
un kit , c'est un kit, tu peux le modifier si tu as des connaissances en programmation.
le tableau aura la même dimension en hauteur que le bloc, les tableaux c'est pas l'idéal en html pour la structure du site.
commence à supprimer la hauteur du container et du content pour voir.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
yyou Messages postés 11 Date d'inscription samedi 18 mai 2013 Statut Membre Dernière intervention 6 novembre 2014
18 mai 2013 à 16:13
merci pour vos réponses. J'ai enlevé le height du container, mais toujours pareil.
Mon autre site (lien dans mon premier message, adresse racine), la hauteur s'adapte parfaitement. Je vous mets le code si cela peut vous aider à trouver la solution pour l'autre :

/* standard elements */

html {min-height: 100%;}



* {

	margin: 0;

	padding: 0;

}



a {color: #963;}

a:hover {

	color: #C60;

	cursor: crosshair;

	}



body {

	background: #CCD8E0 url(img/bg.jpg) repeat-x left bottom;

	color: #444;

	font: normal 62.5% Tahoma,sans-serif;



}



p,code,ul {padding-bottom: 1.2em;}



li {list-style: none;}



h1 {

	font: normal 1.8em Tahoma,sans-serif;

	margin-bottom: 4px;

}



code {

	background: #FFF;

	border: 1px solid #EEE;

	border-left: 6px solid #C1CAD3;

	color: #666;

	display: block;

	font: normal 1em Tahoma,sans-serif;

	line-height: 1.6em;

	margin-bottom: 12px;

	padding: 8px 10px;

	white-space: pre;

}



blockquote {

	background: url(img/quote.gif) no-repeat;

	display: block;

	font-weight: bold;

	padding-left: 28px;

}



h1,h2,h3 {padding-top: 6px;}



/* misc */

.clearer {clear: both;}



.left {float: left;}



.right {float: right;}



/* structure */

.container {

	background: #FFF;

	font-size: 1.2em;

	margin: 0 auto;

	padding: 0 10px 10px;

	width: 780px;

}



/* header */

.top {

	background: url(img/clouds.gif) repeat-x;

	padding: 50px 10px 0;

}



/* title */

.header {

	background: #FFF;

	font-size: 1.2em;

	height: 150px;

	margin: 0 auto;

	padding: 10px 10px 5px;

	width: 780px;

}

.header .left, .header .right {

	background: #A4A4A0;

	color: #FFF;

	height: 150px;	

}

.header .left {

	background: #B3C2C7 url(img/header.jpg) no-repeat;

	font: normal 2.8em "Trebuchet MS",sans-serif;

	line-height: 150px;

	text-align: center;	

	width: 564px;

}

.header .right {

	overflow: auto;

	width: 212px;

}

.header .right p,.header .right h2 {padding: 0 16px;}

.header .right h2 {padding-top: 16px; font: normal 1.6em "Trebuchet MS",sans-serif;}



/* navigation */

.navigation {	

	background: #D9E1E5 url(img/nav.gif);

	border: 1px solid #DFEEF7;

	border-color: #DFEEF7 #CFDEE7;

	height: 41px;

}

.navigation a {

	background: #D9E1E5 url(img/nav.gif);

	border-right: 1px solid #AFBEC7;

	color: #456;

	display: block;

	float: left;

	font: bold 1.1em sans-serif;

	line-height: 41px;

	padding: 0 23px;
	
	text-decoration: none;

}

.navigation a:hover {background-position: left bottom; color: #234;}



/* main */

.main {

	border-top: 4px solid #FFF;

	background: url(img/bgmain.gif) repeat-y;

}



/* sub navigation */

.sidenav {

	float: right;

	width: 210px;

}

.sidenav h2 {

	color: #5A5A43;

	font-size: 1em;

	line-height: 30px;

	margin: 0;

	padding-left: 12px;

}

.sidenav ul {

	padding: 0;

	border-top: 1px solid #EAEADA;

}

.sidenav li {border-bottom: 1px solid #EAEADA;}

.sidenav li a {

	font-size: 1.1em;

	color: #554;

	display: block;

	padding: 8px 0 8px 5%;

	text-decoration: none;

	width: 95%;

}

.sidenav li a:hover {

	background: #F0F0EB;

	color: #654;	

}



/* content */

.content {

	float: left;

	margin: 10px 0;

	padding: 0 16px;

	width: 531px;

}

.content .descr {

	color: #664;

	font-size: 0.9em;

	margin-bottom: 6px;

}

.content li {

	list-style: url(img/li.gif);

	margin-left: 18px;

}

.content p {font-family: "Lucida Sans Unicode",sans-serif;}



/* footer */

.footer {

	background: url(img/bgfooter.gif) repeat-x;

	color: #FFF;

	font: bold 1em sans-serif;

	line-height: 39px;

	text-align: center;

}

.footer a,.footer a:hover {color: #FFF;}
0
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
18 mai 2013 à 16:59
tu as supprimé la hauteur des templatemo_content, il y en 4 je crois ? dans le premier code envoyé.
0
yyou Messages postés 11 Date d'inscription samedi 18 mai 2013 Statut Membre Dernière intervention 6 novembre 2014
18 mai 2013 à 17:05
ben je les avais tous enlevés oui, mais du coup j'avais plus le fond blanc. J'avais que le background gris :/
0
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
18 mai 2013 à 17:15
mets background-color:#FFFFFF; dans les content
les content se sont les différents blocs représentés par des images de chiens ?
0
yyou Messages postés 11 Date d'inscription samedi 18 mai 2013 Statut Membre Dernière intervention 6 novembre 2014
18 mai 2013 à 17:20
ce sont 2 colonnes : jaune et bleu = 1 containt, orange et vert = 1 containt
0
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
18 mai 2013 à 17:26
envoi le code html, je regarderais
0
yyou Messages postés 11 Date d'inscription samedi 18 mai 2013 Statut Membre Dernière intervention 6 novembre 2014
18 mai 2013 à 17:35
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>About Dog Website - free CSS template</title>
<meta name="keywords" content="free website template, CSS layout, 2 columns, Pets, Dogs, Dog Website, HTML CSS" />
<meta name="description" content="Dog Website Subpage - free CSS website template, Free HTML CSS Layout" />
<script type="text/javascript" src="stscode.js"></script>
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="templatemo_container">
    	<div id="templatemo_header_section">
        		<div id="templatemo_topmenu">
	    		<ul>
    		    	<li><a href="#">Support</a></li>
	        	    <li><a href="#">Sitemap</a></li>
            		<li><a href="#">FAQs</a></li>
	        	</ul>
    		</div>
        </div>
        <div id="templatemo_content_section">
        	<div id="templatemo_menu">
            	<ul>
                	<li><a href="index.html">Accueil</a></li>
                    <li><a href="services.html" class="current">Nos services et tarifs</a></li>
                    <li><a href="https://adelaurie.com/" target="_blank">Elevage de korats</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </div>
        	<div class="templatemo_content_3">
            <h1>About Us</h1>
            <div class="news">
            <img alt="Gallery Image" src="images/templatemo_gallery_photo_1.jpg" />
            <h2>Free Website Template</h2>
                <p>This is a <a href="https://templatemo.com" target="_parent">Free CSS Template</a> for you. You may apply this layout for your websites.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
                <p>&nbsp;</p>
                <p>Nunc quis sem nec tellus blandit tincidunt. Ut vitae felis eu lectus ultrices varius. Aliquam lacus turpis, dapibus eget, tincidunt eu, lobortis et, magna. Integer pellentesque dignissim diam. Quisque ornare pulvinar lorem.</p>
        <img alt="Gallery Image" src="images/templatemo_gallery_photo_4.jpg" />
		            <h2>Free Website Template</h2>
            	<p>       	        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ante sit amet erat laoreet fermentum. Quisque nec nisl. </p>
            	<p>&nbsp;</p>
            	<p>Nam scelerisque cursus dolor. Integer vel sapien quis risus egestas suscipit. Nam lorem tortor, viverra gravida, egestas id, pellentesque in, mi. Maecenas sodales pede eu massa. Fusce lacinia orci at nisi. Suspendisse at nisi nec diam pretium tincidunt. </p>
            </div>
            </div>
            <div class="templatemo_content_4">
            <h1>Company Background</h1>
            <div class="news">
            <img alt="Gallery Image" src="images/templatemo_gallery_photo_2.jpg" />
            <h2>Lorem ipsum dolor sit amet</h2>
                    <p> consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt.Duis vitae velit sed dui malesuada dignissim. Donec mollis alquetligula. </p>
                    <p>&nbsp;</p>
                    <p>Maecenas adipiscing elementum ipsum. Pellentesque vitae magna. Sed nec est. Suspendisse a  volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
                    <p>&nbsp;</p>
                    <img alt="Gallery Image" src="images/templatemo_gallery_photo_5.jpg" />
			            <h2>Free Website Template</h2>
            		<p>           		    Quisque at ante sit amet erat laoreet fermentum. Quisque nec nisl. Nam scelerisque cursus dolor. </p>
            		<p>&nbsp;</p>
            		<p>Integer vel sapien quis risus egestas suscipit. Nam lorem tortor, viverra gravida, egestas id, pellentesque in, mi. </p>
            		<p>&nbsp;</p>
            		<p>Maecenas sodales pede eu massa. Fusce lacinia orci at nisi. Suspendisse at nisi nec diam pretium tincidunt. Ut vitae felis eu lectus ultrices varius.</p>
       		  </div>
            </div>
        </div>
            <div id="templatemo_footer_section">
            	<div class="templatemo_copyright">            	
				<a href="https://www.facebook.com/groups/*******************/" target="_blank"><img src="images/facebooklogof.png" width="28" height="29" border="0" align="absbottom" /></a>  *************** | RCS ************* | Autorisation de transport type 1 n°****** | Certificat de capacité n°</a>
            </div>
            </div>
      </div>
</body>
</html>
0
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
18 mai 2013 à 17:51
merci
je regarde le match de rugby , j'ai tout pour travailler sur mon pc.
0
yyou Messages postés 11 Date d'inscription samedi 18 mai 2013 Statut Membre Dernière intervention 6 novembre 2014
18 mai 2013 à 17:55
suis pas pressée, mon jules aussi est devant le rugby huhu
0
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
18 mai 2013 à 21:47
pas facile les kits, il faut tout reprendre à zéro, en mettant un background-color: #FFFFFF; dans les blocs content 1 2 3 4 et news , on arrive à garder le fond blanc, mais la moindre modif bouscule un peu l'ensemble. le mieux serait de reprendre la structure plus proprement et plus simplement , car vous aurez surement des modifications plus tard à faire et pour intervenir dans le code ce sera plus aisé.
0
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
19 mai 2013 à 14:34
vous en êtes oû ? J'ai préparé une structure du site plus simple en html5 et css3, si çà vous intéresse , envoyer moi un mail.
0
yyou Messages postés 11 Date d'inscription samedi 18 mai 2013 Statut Membre Dernière intervention 6 novembre 2014
20 mai 2013 à 12:26
Hier je n'étais pas à l'ordi, mais je teste de suite avec le fond blanc ;)
0
yyou Messages postés 11 Date d'inscription samedi 18 mai 2013 Statut Membre Dernière intervention 6 novembre 2014
20 mai 2013 à 12:36
Maintenant ça donne ça : http://adelaurie.com/kev/screen2.jpg
0
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
20 mai 2013 à 13:44
je t'ai envoyé un mail
0