28220 sujets

CSS et mise en forme, CSS3

Poblème de création d'interface

Bonjour à tous,

j'ai un souci avec mon interface ... j'ai regardé dans les tutoriels mais j'ai rien trouvé qui me permette de faire ce que je voudrais.

Si une âme charitable pouvait me mettre sur une piste ...

upload/4844-interface.jpg

contraintes:
- La zone A doit être flexible (s'agrandir en hauteur et en largeur en fonction de son contenu).
- la zone B2 possède une largeur variable déffini en pourcentage mais ne peut pas être plus petite que la zone A.
- la largeur de la zone B1 s'adapte à celle de la zone B2.
- la zone C est de la même largeur que la somme des largeurs des zones B1 et B2.


voilà ... merci d'avance

François
Bonjour Francois et bienvenue Smiley cligne ,

En prenant le problème autrement:

Qu'as tu déjà essayé de faire par toi même et qui ne fonctionne pas.
(et nous montrer ta feuille de style et ton code html par exemple ce qui pourrais nous aussi nous servir à trouver une piste) Smiley cligne
Modifié par knarf (19 Jan 2006 - 13:04)
voilà mon css:

.separateur
{
	position: static;
	clear: both;
	height: 0;
}

div#espace_travail
{
 	text-align: justify;
	color: #000000;
	margin: 0;
	padding: 0 0 0 13.4em;
}

.cible
{
	margin: 0.4em 0.4em 0.4em 0.4em;
	padding: 0.2em 0.2em 0.2em 0.2em;
	background: #ffffff;
}

.margecible
{
	background: #f0904a;
	border: 1px solid #999999;
}

.zoneA
{
	float: left;
	position: relative;
	top: -20px;
	left: -20px;
	border: 1px solid #999999;
	background: green;
	margin: 0;
	padding: 0;
}

.zoneB
{
	padding: 0;
	margin: 20px 0 0 20px;
	background: red;
	border: 1px solid #999999;
}

.zoneB1
{
	padding: 0;
	margin: 0;
	background: brown;
}

.zoneC
{
	margin: 0 0 0 20px;
	padding: 0;
	background: yellow;
}



et voilà mon html (xhtml pardon ...) Smiley sweatdrop :


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>TEST</title>

<link rel="stylesheet" type="text/css" href="mxp_sources/mxp_modules/salarie/salarie_defaut.css" media="screen" />
</head>
<body>
	
<div id="espace_travail">
<div class="margecible">
	<div class="cible">

		<div class="zoneB">

			<div class="zoneA">
				<p>Ceci est un test dans la <strong>zone A</strong>. blablabla ... blablabla ... <br>blablablablablablablablablablablablablablabla</p>
			</div>

			<div class="zoneB1">
				<p>Ceci est un test dans la <strong>zone B</strong>. blablabla ... blablabla ... blablablablablablablablablablablablablablabla</p>
				<p>encore du texte ... encore du texte ... encore du texte ... encore du texte... encore du texte ... encore du texte ... encore du texte ... </p>
				<p>blablabla... blablabla ... blablablablablablablablablablablablablablablablablablablablabla ... blablabla ... blablablablablablablablablablablablablablabla ... blablabla ... blablablablablablablablablablablablablablabla</p>
			</div>

			<div class="separateur"> </div>
		</div>

		<div class="zoneC">
			<p>Ceci est un test dans la <strong>zone C</strong>. blablabla ... blablabla ... blablablablablablablablablablablablablablabla</p>
		</div>

	</div>
</div>
</div>
</body>
</html>
J'y suis presque ... mais je n'arrive pas à couper la zone B en 2 zones (B1 et B2) ...

François
Modifié par Francois (19 Jan 2006 - 13:51)
JE vois pas trop ou tu galère, vu que ton code m'a l'air pas mal ma foi Smiley lol

Il te suffit de couper ta zoneB en 2 donc :

<div class="zoneB">

<div class="zoneA">

 </div>

<div class="zoneB1">
</div>

<div class="zoneB2">
</div>

</div>


Avec en CSS :

.zoneB  {
padding: 0;
margin: 20px 0 0 20px;
background: red;
border: 1px solid #999999;
}

.zoneB1  {
padding: 0;
margin: 0;
Width:100px
background: brown;
}

.zoneB2  {
padding-left: 100px; /* la taille de zoneB1 */
background: yellow;
float:right;
}


A moins que tu veuille que B1 et B2 soient étirables, dans ce cas, des pourcentages seraient peut être mieux
Le problème avec ta solution, c'est (à moins d'une erreur de ma part ...) que la zone B est découpé horizontalement ... Or, il faudrait qu'elle soit coupé verticalement.

merci quand même de ton aide

François
Voici une version quasi fini ... ça bug sur internet explorer Smiley fache

CSS:

.separateur
{
	position: static;
	clear: both;
	height: 0;
}

div#espace_travail
{
 	text-align: justify;
	color: #000000;
	margin: 0;
	padding: 0 0 0 13.4em;
}

.cible
{
	margin: 0.4em 0.4em 0.4em 0.4em;
	padding: 0.2em 0.2em 0.2em 0.2em;
	background: #ffffff;
}

.margecible
{
	background: #f0904a;
	border: 1px solid #999999;
}

.zoneA
{
	float: left;
	position: relative;
	top: -20px;
	left: -20px;
	border: 1px solid #999999;
	background: green;
	margin: 0;
	padding: 0;
}

.zoneB
{
	padding: 0;
	margin: 20px 0 0 20px;
	background: red;
	border: 1px solid #999999;
}

.zoneB1
{
	padding: 0 0 0 50%;
	margin: 0;
	background: brown;
}

.zoneB2 
{
	background: yellow;
}

.zoneB3
{
	float: left;
	background: #f4f455;
	width: 50%;
}

.zoneC
{
	margin: 0 0 0 20px;
	padding: 0;
	background: yellow;
}



HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>TEST</title>

<link rel="stylesheet" type="text/css" href="mxp_sources/mxp_modules/salarie/salarie_defaut.css" media="screen" />
</head>
<body>
	
<div id="espace_travail">
<div class="margecible">
	<div class="cible">

		<div class="zoneB">

			<div  class="zoneB3">
			<div class="zoneA">
				<p>Ceci est un test dans la <strong>zone A</strong>. blablabla ... blablabla ... <br>blablablablablablablablablablablablablablabla</p>
			</div>

			<div class="zoneB2">
				<p>Ceci est un test dans la <strong>zone B2</strong>. blablabla ... blablabla ... blablablablablablablablablablablablablablabla</p>
				<p>encore du texte ... encore du texte ... encore du texte ... encore du texte... encore du texte ... encore du texte ... encore du texte ... </p>
				<p>blablabla... blablabla ... blablablablablablablablablablablablablablablablablablablablabla ... blablabla ... blablablablablablablablablablablablablablabla ... blablabla ... blablablablablablablablablablablablablablabla</p>
			</div>
			<div class="separateur">&nbsp;</div>
			</div>

			<div class="zoneB1">
				<p>Ceci est un test dans la <strong>zone B1</strong>. blablabla ... blablabla ... blablablablablablablablablablablablablablabla</p>
				<p>encore du texte ... encore du texte ... encore du texte ... encore du texte... encore du texte ... encore du texte ... encore du texte ... </p>
				<p>blablabla... blablabla ... blablablablablablablablablablablablablablablablablablablablabla ... blablabla ... blablablablablablablablablablablablablablabla ... blablabla ... blablablablablablablablablablablablablablabla</p>
			</div>

           <div class="separateur">&nbsp;</div>
		</div>

		<div class="zoneC">
			<p>Ceci est un test dans la <strong>zone C</strong>. blablabla ... blablabla ... blablablablablablablablablablablablablablabla</p>
		</div>

	</div>
</div>
</div>
</body>
</html>


si quelqu'un pouvait me dire pourquoi ça bug sur IE (à part parceque c'est microsoft et qu'il s'en foute des normes ...)

François
Sujet clos
Aller à