28173 sujets

CSS et mise en forme, CSS3

Simuler une frame gauche et droite

Bonjour,

j'ai pondu un design il y a quelques jours assez simple avec 3 frames en colonnes.
une à gauche avec une image en fond, au milieu le contenu du site et une à droite avec une image en fond egalement.

seulement je souhaite tout faire en CSS maintenant. J'ai reussi à obtenir quelquechose qui se trouve ici.

Mais je n'arrive pas à simuler la frame de gauche.

En fait pour simuler la frame de droite j'ai placé l'image de fond à droite
body
{
	margin: 0;
	padding:0;
	position: absolute;
	width: 100%;
	height: 100%;
	background: #a32546 url(images/framedroite.jpg) repeat-y fixed right; /*on repete le bg sur les y et on le place à droite*/
	
}


Pour simuler la frame de gauche, j'ai crée un bloc sur la gauche 

.gauche {
position: absolute;
margin: 0 0 0 0;
width: 155px;
height: 855px;
background-image: url(images/framegauche.jpg) repeat-y left;
}

mais rien ne s'affiche.

Alors du coup pour contourner le problème, j'ai laissé le système de frame à 2 colonnes avec à gauche le page contenant mon image de fond et à droite contenant le contenu et ma simulation frame droite.

Quelqu'un saurait-il comment je dois m'y prendre pour simuler la frame de gauche?

Merci

holyvier

ps: vous trouverez mon code css ici et un example de page xhtml ici .
Modifié par holyvier (28 Oct 2006 - 15:27)
Bonjour,

Un petit truc dans ce genre ou je suis à côté?

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
			
<!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>test</title>

<style>

#conteneur{
    width: 100%;
    background: #c8e3fa;

}

#droite{
	float: right;
	width: 200px;
	height: 500px;
}

#gauche{
	position: absolute;
	width: 200px;
	height: 500px;
}

#header{

    background: #b8adbb;
    height: 80px;
}

#centre{

    margin-left: 200px;
    margin-right: 200px;
    background: #fff;
    height: 500px;
}



</style>
</head>



<body> 

		<div id="conteneur">

				<div id="gauche">
				 fond gauche
                </div>

				<div id="droite">
				fond droit
                </div>

				<div id="centre">
					<div id="header"><p> header</p>
					</div>
				</div> 
		</div>


		</div>
</body>

</html>


ps: attention le div centre occupe la place qu'il lui reste si on fait varier la résolution !!
Modifié par ghost (28 Oct 2006 - 16:30)
Sujet clos
Aller à