28220 sujets

CSS et mise en forme, CSS3

[Resolu] cellules "PAS-étirables" (CSS)

Bonjour,

J'ai un soucis de cellules etirables, biensur j'ai regardé le tutorial Des Cellules "étirables" (CSS) qui ne marche apparement qu'avec du texte. En effet j'essaye de faire une chose similaire avec quelques cadres a l'intérieur (rose et violet) de ma cellule (jaune) et celle-ci ne s'étire pas ou mal.

voici mon code :

<!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" xml:lang="fr" lang="fr">
<head>
<title>Cellules étirables en CSS</title>
<style type="text/css">
.block {
	width: 500px;
	height: auto;
	background-color: #FFFCCC;
	border: 1px solid #000000;
	padding: 0px 10px 10px 20px;
}

.sousblock1 {
	float:left;
	margin-right:10px;
	margin-top: 10px;
	width: 230px;
	height: 80px;
	background-color: #FFCCCC;
}

.sousblock2 {
	float:left;
	margin-right:10px;
	margin-top: 10px;
	width: 230px;
	height: 80px;
	background-color: #CCCCFF;
}
</style></head>

<body>
   <div class="block">
	<div class="sousblock1"></div>
	<div class="sousblock2"></div>
	<div class="sousblock1"></div>
	<div class="sousblock2"></div>
	<div class="sousblock2"></div>
   </div>
</bod
y>
</html>


Pourquoi ma cellule principale (jaune) peine a s'étirer ?
merci de votre aide

++
Modifié par P75 (26 Mar 2005 - 18:45)
bonjour,

essaie avec cette modif

.block {
width: 250px; [#red]<= 250 a la place de 500[#black]
height: auto;
background-color: #FFFCCC;
border: 1px solid #000000;
padding: 0px 10px 10px 20px;
}


Modifié par ganou66 (26 Mar 2005 - 17:13)
Tu dois utiliser un "spacer", déclare un div à la fin de tes div sous-block:
<div style="clear:both;"></div>
Ce div va pousser le font de ton calque conteneur.
Modifié par ocb2b (26 Mar 2005 - 17:25)
Effectivement merci oct2b la ligne :
<div style="clear:both;"></div>


marche tres bien, ca pousse bien mon calque conteneur.
MAIS le probleme c'est que maintenant je pers ma mise en page (mes sous block reste sur une colonne) alors que moi je voudrais garder ma mise en page d'origine ...

comment garder cette mise en page originale ?
Désolé pour mon dernier post en fait la solution de oct2b marche très bien il faut bien rajouter cette ligne a la fin de TOUS les sousblock (pas chaque sousblock) Smiley cligne

merci encore

++
Modifié par P75 (26 Mar 2005 - 18:52)
Sujet clos
Aller à