CSS + résolution ecran...

[Grantome]

Salut,

Voilà mon pb.

Je souhaite faire un cadre avec au centre un contenu.
Le tout doit pouvoir se redimensionner selon la résolution d'écran du visiteur.

La feuille est divisé en 9.

1 2 3
4 5 6
7 8 9

les parties 1 3 7 et 9 sont des images fixe, se sont les angle du cadre.
les parties 2 4 6 et 8 sont des images qui doivent se répéter en fonstion de la largeur et de la hauteur de la page, se sont les bords du cadre.
la partie 5 et mon contenu.

Mon pb, et que soit j'arrive à coder pour faire varier les partie 2 et 8 (en largeur), soit j'arrive à coder pour faire varier les partie 4 et 6 (en hauteur).

Evidement, j'ai déjà parcouru le web en long et en travers, fait les site alsacecreations, openweb, etc... Mais rien trouvé pour mon soucis.

Sibelus, au secour...

 

[milkiway]

je veux bien t'aider mais il me faut un dessin ou une URL

 

[Grantome]

...

Ahhhh, pas d'URL, c'est du local...

Voici le code:
CSS

html,body
{
background-image:url(./images/fond.jpg);
margin-top:0; margin-left:0; margin-right:0; margin-bottom:0;
}

#hautgauche {
position: absolute;
left:0;
width:189;
height:44;
background-image:url(./images/parchemin1.gif);
}

#hautcentre {
margin-left: 189px;
margin-right: 203px;
height:44;
background-image:url(./images/parchemin2.gif);
}

#hautdroite {
position: absolute;
right:0;
background-image:url(./images/parchemin3.gif);
width:203;
height:44;
}

#gauche {
position: absolute;
left:0;
background-image:url(./images/parchemin4.gif);
width:51;
height:81;
}

#centre {
background-color:#efe7d6;
margin-left: 51px;
margin-right: 42px;
}

#droite {
position: absolute;
right:0;
background-image:url(./images/parchemin5.gif);
width:42;
height:81;
}

#basgauche {
position: absolute;
left:0;
background-image:url(./images/parchemin6.gif);
width:189;
height:40;
}

#bascentre {
margin-left: 189px;
margin-right: 203px;
height:40px;
background-image:url(./images/parchemin7.gif);
}

#basdroite {
position: absolute;
right:0;
background-image:url(./images/parchemin8.gif);
width:203;
height:40;
}

Et le HTML

<head>
		<link href="./aaa.css" rel="stylesheet" type="text/css"> 
</head>

<body>
	<div>
	  <div id="hautgauche"></div>
	  
	  <div id="hautdroite"></div>
	  
  	<div id="hautcentre"></div>
	</div>
	<div>
	  <div id="gauche"></div>
	  
	  <div id="droite"></div>
	  
  	<div id="centre">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
		ccccccccccccccccccccccccccccccccccccccccccccccccc
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
		ccccccccccccccccccccccccccccccccccccccccccccccccc
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
		ccccccccccccccccccccccccccccccccccccccccccccccccc
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
		ccccccccccccccccccccccccccccccccccccccccccccccccc
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
		ccccccccccccccccccccccccccccccccccccccccccccccccc
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
		ccccccccccccccccccccccccccccccccccccccccccccccccc
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
		ccccccccccccccccccccccccccccccccccccccccccccccccc
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
		ccccccccccccccccccccccccccccccccccccccccccccccccc
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
		ccccccccccccccccccccccccccccccccccccccccccccccccc
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
		ccccccccccccccccccccccccccccccccccccccccccccccccc
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
		ccccccccccccccccccccccccccccccccccccccccccccccccc
		dddddddddddddddddddddddddddddddddddddddddddddd</div>
	</div>
	<div>
	  <div id="basgauche"></div>
	  
	  <div id="basdroite"></div>
	  
  	<div id="bascentre"></div>
	</div>
</body>
</html>

Je te mets un screen se soir si tu veux.

 

[milkiway]

oui je veux bien un screen qui explique ce que tu veux ^^

 

[Grantome]

...

Voilà

h**p://60gp.ovh.net/~raikkone/screen.jpg

 

[milkiway]

merci
et pour l'explication ? par ce que je n'ai rien compris au post

 

[Grantome]

...

Héhhé

Le pb se situe sur les ID gauche et droit

Bon, l'image entre les 2 coin du parchemin varie bien en largeur, mais pas en hauteur.

Tu va me dire, normal, il y a un height de mis, mais en le retirant, en le mettant en auto, ou en plaçant un background-repeat, ça ne change rien.

 

[milkiway]

et pourquoi ne pas uploader le site pour qu'on le voit "tourner" ? :S
par ce que là c'est très dur !

 

[Grantome]

...

Pffffff, suis un peu truffe parfois............ mais bon...

h**p://60gp.ovh.net/~raikkone/aaa.html

 

[milkiway]

chez moi en largeur ça marche
en hauteur ça marche
mais bien sur avec moins de texte ça se redimensionne plus
alors il faut quoi ?

 

[Grantome]

...

Les bordures gauche et droite du parchemin marche ???

Tu peut faire un screen ?

T'as quel nav ?