Comment adapter automatiquement la hauteur de containt au texte

yyou Messages postés 11 Date d'inscription Statut Membre Dernière intervention -
ideal23 Messages postés 456 Date d'inscription Statut Membre Dernière intervention - 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;
}

Afficher la suite

A voir également:

Comment adapter automatiquement la hauteur de containt au texte
Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
Transcription audio en texte word gratuit - Guide
Excel cellule couleur si condition texte - Guide
Excel adapter taille cellule au texte - Forum Excel
Automatiquement - Guide

18 réponses

Réponse 1 / 18

ideal23 Messages postés 456 Date d'inscription Statut Membre Dernière intervention 28

bonjour
les blocs ont des hauteurs en px, si tu veux rajouter du texte cà va peut-être pas le faire.

Réponse 2 / 18

yyou Messages postés 11 Date d'inscription Statut Membre Dernière intervention

Et on peut pas modifier comme un tableau qu'on adapte au contenu ?

Réponse 3 / 18

Profil bloqué

Si, tu supprimes les height. (au pire, tu mets min-height à la place)

Réponse 4 / 18

ideal23 Messages postés 456 Date d'inscription Statut Membre Dernière intervention 28

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.

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

Posez votre question

Réponse 5 / 18

yyou Messages postés 11 Date d'inscription Statut Membre Dernière intervention

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;}

Réponse 6 / 18

ideal23 Messages postés 456 Date d'inscription Statut Membre Dernière intervention 28

tu as supprimé la hauteur des templatemo_content, il y en 4 je crois ? dans le premier code envoyé.

Réponse 7 / 18

yyou Messages postés 11 Date d'inscription Statut Membre Dernière intervention

ben je les avais tous enlevés oui, mais du coup j'avais plus le fond blanc. J'avais que le background gris :/

Réponse 8 / 18

ideal23 Messages postés 456 Date d'inscription Statut Membre Dernière intervention 28

mets background-color:#FFFFFF; dans les content
les content se sont les différents blocs représentés par des images de chiens ?

Réponse 9 / 18

yyou Messages postés 11 Date d'inscription Statut Membre Dernière intervention

ce sont 2 colonnes : jaune et bleu = 1 containt, orange et vert = 1 containt

Réponse 10 / 18

ideal23 Messages postés 456 Date d'inscription Statut Membre Dernière intervention 28

envoi le code html, je regarderais

Réponse 11 / 18

yyou Messages postés 11 Date d'inscription Statut Membre Dernière intervention

<!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>

Réponse 12 / 18

ideal23 Messages postés 456 Date d'inscription Statut Membre Dernière intervention 28

merci
je regarde le match de rugby , j'ai tout pour travailler sur mon pc.

Réponse 13 / 18

yyou Messages postés 11 Date d'inscription Statut Membre Dernière intervention

suis pas pressée, mon jules aussi est devant le rugby huhu

Réponse 14 / 18

ideal23 Messages postés 456 Date d'inscription Statut Membre Dernière intervention 28

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é.

Réponse 15 / 18

ideal23 Messages postés 456 Date d'inscription Statut Membre Dernière intervention 28

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.

Réponse 16 / 18

yyou Messages postés 11 Date d'inscription Statut Membre Dernière intervention

Hier je n'étais pas à l'ordi, mais je teste de suite avec le fond blanc ;)

Réponse 17 / 18

yyou Messages postés 11 Date d'inscription Statut Membre Dernière intervention

Maintenant ça donne ça : http://adelaurie.com/kev/screen2.jpg

Réponse 18 / 18

ideal23 Messages postés 456 Date d'inscription Statut Membre Dernière intervention 28

je t'ai envoyé un mail

Discussions similaires

Dimensions L x l x H : comment lire ces infos ?

Excel ajustement auto taille de la cellule

ajuster hauteur des cellules excel au texte ?

Excel : ajuster taille du texte à la cellule

Adapter la taille d'une cellule excel

Votre réponse

Discussions similaires