28220 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un petit souci concernant le calage d'une image d'arrière plan dans un div (hors flux) position absolute.
Ce que je souhaite réaliser et de mettre sur un texte composé d'un titre une image en arrière plan de parchemin composée de 2 parties la tête ou chapeau et le corps (cette image de parchemin est composée de courbe verticale rendant sont étirabilitée impossible donc elle possède une hauteur fixe).
Comme indiqué dans un bon livre (CSS 2 Pratique du design web), j'ai repris l'exemple d'une image en arrière plan composée de 2 parties.
L'auteur nous donne comme solution de créer 2 div, le second étant dans le premier, caque div contient une partie de l'image d'arrière plan, le 1er div qui contient le second à la partie tête ou chapeau de l'image, le second div, lui posséde la seconde partie soit le corps de l'image.
J'ai appliqué cette méthode mais j'ai des problème de calage entre les nav IE, FF, Opéra.
Mon div du corps de ma page à la feuille de style suivante :
html {
	height: 99%; /* heigt à 99% supprime la scroll bare sous FF */
}

body {
	background: #FFF;
	margin: 0;
	padding: 0;
	height: 100%;
	font: 100% Verdana, Geneva, Arial, Helvetica, "Bitstream Vera Sans", sans-serif;
	text-align: center;
	background-color: #ECECEC;
	background-image: url(../images/bg.gif);
	background-repeat: repeat-x;
}

#site {
	width: 760px;
	position: relative; /* position pour le pied de page */
	height: auto !important;  /* permet d'obtenir la hauteur complèt du bloc */
    height: 97%; /* pour obtenir la hauteur du bloc à 100% */
    min-height: 97%; /* pour obtenir un bloc de hauteur à 100% */
	voice-family: "\"}\""; /* calage du pied de page */
	voice-family: inherit; /* calage du pied de page */
	margin: 8px auto;
	padding-top: 10px;
	text-align: left;
	font-size: 70%;
	line-height: 150%;
	background: #FFF;
	border: 2px solid #00CCFF; /* bordure du site */
}

img {border: 0;} /*suppréssion bordure image */

Mon div qui contient l'image composée d'arrière plan à la feuille de style suivante :

#colDroite {
	position: absolute;
	right: 20px;
	top: 130px;
	width: 280px;
	margin-top: 70px;
}

#colCadre {
	padding-bottom: 0;
	background:url(../images/parchemin_01.png) right top no-repeat;
}

#colBasCadre {
	width: 280px;
	padding-top: 150px;
	background: url(../images/parchemin_02.png) right bottom no-repeat;
} 

#colDroite p {
	font: bold 1em Georgia, Arial, Geneva, sans-serif;
	word-spacing: 0.4em;
	font-variant: small-caps;
	margin: 0;
}

#colTitre {
	font: bold 1.4em italic "Times New Roman", Times, serif;
	color: #0033CC;
	text-align: center;
	padding: 15px;
	padding-top: 40px;	
}

Merci de vos lumière Smiley cligne
Modifié par Gobelin (24 Aug 2006 - 16:27)