[Résolu]

Question

23 Feb 2012 à 17:41

Bonjour,
Il y a bien longtemps, j'étais tombé sur un tuto qui expliquait comment créer des boutons extensibles en css, ça ne m'intéressais guère et j'ai vite passé, seulement sur la fin de ce tuto était également expliqué comment faire pour obtenir ce que je cherche à avoir aujourd'hui (tout est dans le titre). Je me souviens qu'ils indiquaient à moment donné un shéma de ce genre:

upload/43453-Shema.png

Et ils expliquaient que la partie principale restait fixe, et les autres parties (les coins et les bords) coulissaient dessus, tout ça automatiquement par rapport au contenu.

Voilà, j'espère que vous saurez m'expliquer ou peut être que vous connaissez ce tutoriel, merci...

(Je précise que le shéma que j'ai fait n'a rien à voir graphiquement à la div que je veux: le dégradé ne collerais pas de toutes manières)
Modifié par xXjujo002Xx (23 Feb 2012 - 17:44)

juliendargelos

26 Feb 2012 à 13:29

Je crois avoir trouvé quelque chose qui ressemble un peu: http://css.4design.tl/design-css-liquide-ou-fluide-encadre-d-images-repetees-sans-table

juliendargelos

26 Feb 2012 à 19:07

#Block {
    position: relative;
    width: 60%;
    margin: 0 auto;
}
#Block_TopRight,
#Block_BottomRight {
    float: right;
}
#Block_TopRight {
    background: transparent url(TopRight.tiff) no-repeat;
}
#Block_BottomRight {
    background: transparent url(BottomRight.tiff) no-repeat;
}
#Block_TopLeft,
#Block_TopRight,
#Block_BottomLeft,
#Block_BottomRight {
    width: 7px;
    height: 7px;
}
#Block_TopLeft {
    background: transparent url(TopLeft.tiff) no-repeat;
}
#Block_BottomLeft {
    background: transparent url(BottomLeft.tiff) no-repeat;
}
#Block_Left {
    background: transparent url(Left.tiff) top left repeat-y;
}
#Block_Right {
    background: transparent url(Right.tiff) top right repeat-y;
}
.Block_Top,
.Block_Bottom {
    width: auto;
    height: 7px;
}
#Block_Top {
    background: transparent url(Top.tiff) repeat-x;
}
#Block_Bottom {
    background: transparent url(Bottom.tiff) repeat-x;
}

#Block_Text {
	margin-left: 10px;
	margin-right: 10px;
}

/* layout content */
.content {
    padding: 1em 3em;
}

Html:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="Style.css"/>
	</head>
	<body>
		<div id="Block_content">
    		<div id="Block_Top">
   		     <div id="Block_TopRight"></div><div id="Block_TopLeft"></div>
  		  </div>
  		  <div id="Block_Right">
  		      <div id="Block_Left" class="Block_Content">
   		         <div id="Block_Text">Definitiones ac de dicitur rerum nudus distinguantur modo qua philosophiae efficiatur captiosa veri altera ambigua sublatum inermis dividendo inermis logikh tradit quibus iste ponit ut iste concludaturque concludaturque inermis videtur altera falsi iste ac omne non sit ac omne vero probatum iudicium mihi quibus quaerendi via solvantur qua philosophiae dividendo quidem quae ostendit iudicium sit si non videtur rerum tollit nihil altera docet iste sit inermis nudus quae iudicium distinguantur quae non altera plane sit videtur ac tradit quo ambigua ostendit si ac modo ostendit quo non iste non ponit quibus tradit est dicitur ponit veri partiendo vero captiosa vester.</div>
   		     </div>
   		 </div>
   		 <div id="Block_Bottom">
   		     <div id="Block_BottomRight"></div><div id="Block_BottomLeft"></div>
  		  </div>
		</div>
	</body>
</html>

Et voilà, à personnaliser à souhait !!
Modifié par xXjujo002Xx (28 Feb 2012 - 19:03)

Sujet clos

CSS et mise en forme, CSS3

[Résolu]