28172 sujets

CSS et mise en forme, CSS3

Block extensible

Bonjour à tous,

Bon voila ca fait un ptit moment que je planche la dessus, et je commence à sécher un peu ...
J'ai un type de block, que je voudrais extensible, verticalement, ainsi qu'horizontalement (Afin de l'utiliser de plusieurs manières)

Voila ce que j'obtiens pour le moment:

http://img163.imageshack.us/img163/1662/blockt.png

En bleu et en rouge, c'est supposé être une image que je mets en background et que je répète verticalement
En vert (au centre) c'est supposé être juste un background blanc (j'ai choisi ces couleurs pour plus de visibilité)

Maintenant mon code HTML

<div class="left_block">           
            <div class="left_block_header">
                <div class="left_block_header_left">&nbsp;
                </div>
                <div class="left_block_header_right">&nbsp;
                </div>
                 <div class="left_block_header_spacer"><h2>Inscription match des alouettes</h2>
                </div>
                
            </div>
            <br class="cleaner" />
			<div class="left_block_content">
            	<div class="left_block_content_left">&nbsp;</div>
                <div class="left_block_content_right">&nbsp;</div>
                <div class="left_block_content_spacer"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
            </div>
            <br class="cleaner" />
            <div class="left_block_footer">
            	<div class="left_block_footer_left">&nbsp;</div>
                <div class="left_block_footer_right">&nbsp;</div>
                <div class="left_block_footer_spacer">&nbsp;</div>
            </div>
            <br class="cleaner" />
        </div>


Et le CSS

/**********************  Block Header **********************/

.left_block_header_left
{
	width:87px;
	float:left;
	height:38px;
	background-image:url(content_header_left.png)
}

.left_block_header_spacer
{
	height:38px;
	background-image:url(content_header_spacer.png);
}

.left_block_header_spacer h2
{
	color:#FFF;
	font-family: "Arial Rounded MT Bold","Arial",Serif;
	font-size:11pt;
    margin-left: 20px;
    position: absolute;
}


.left_block_header_right
{
	float:right;
	width:19px;
	height:38px;
	background-image:url(content_header_right.png);
}


/********************** Block Content **********************/

.left_block_content_left
{
	float:left;
	background-color:blue;
	width:13px;
}

.left_block_content_right
{
	float:right;
	background-color:red;
	width:12px;
}

.left_block_content_spacer
{
	background-color:green;
}

/********************** Block Footer **********************/

.left_block_footer_left
{
	float:left;
	background-image:url(content_footer_left.png);
	height:17px;
	width:13px;
}

.left_block_footer_right
{
	float:right;
	width:12px;
	background-image:url(content_footer_right.png);
	height:17px;
	
}

.left_block_footer_spacer
{
	background-image:url(content_footer_spacer.png);
	height:17px;
}

/********************** Cleaner **********************/

.cleaner{
	clear:both;	
}

.left_block
{
	width:600px;	
}


Donc voila, la largeur est facilement changeable ... Maintenant je voudrais que le block s'adapte a la hauteur du contenu, et ça, ca me gave Smiley decu
Si je leur mets une proprieté height:100% ca me prend la taille de la fenètre ... J'ai essayé avec le overflow auto, appliqué sur le conteneur de ma partie centrale, comme lu sur ce forum, mais ca ne change rien

So ... J'suis a l'écoute de toutes propositions

En résumé, j'ai trois block alignés horizontalement avec des float, et je voudrais que les trois prennent la hauteur du plus grand des trois ... Pour simplifier ma question Smiley smile

Merci d'avance !

ps: Au fait ... Mes cleaners ne servent a rien non ? Est ce que je dois mettre des clear:both ? Si je les enlève y'a pas de problemes ...
Modifié par LaLoutre (13 Dec 2010 - 19:56)
je sais pas si j'ai bien compris, mais je crois qu'il faudrais que tu mettes tes block tout à 100%
Bon j'suis un peu ridicule, à croire que le fait de poster ici m'a fait mieux réfléchir au sujet ... et du coup j'ai trouvé cette solution sur un autre site:

			<div class="left_block_content">
            	 <div class="left_block_content_right">
                 	<div class="left_block_content_left">
                    	<div class="left_block_content_data">
							bla bla bla ...
                 		</div>
                    </div>
                 </div>
            </div>


Et pour le CSS

/********************** Block Content **********************/

.left_block_content_left
{
	background:url(content_left.png) repeat-y top left;
	margin-right:20px;
}

.left_block_content_right
{
	background:url(content_right.png) repeat-y top right;
}

.left_block_content_data
{
	margin-left:20px;	
}

.left_block_content
{
	background-color:white;
}


Et pis c'est tout, ca marche ^^

Voilou voilou si ca peut aider des gens ...

Pour la réponse de jtheo60 ci dessus, ca ne fonctionne pas
Si je "set" la hauteur a 100%, ca va prendre la hauteur de la page, et non du contenu
Sujet clos
Aller à