CSS + résolution ecran...

Grantome · 29 Avril 2004

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 · 29 Avril 2004

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

Grantome · 29 Avril 2004

...

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

Voici le code:
CSS

Code:

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

Code:

<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 · 29 Avril 2004

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

Grantome · 29 Avril 2004

...

Voilà

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

milkiway · 29 Avril 2004

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

Grantome · 29 Avril 2004

...

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 · 29 Avril 2004

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

Grantome · 29 Avril 2004

...

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

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

milkiway · 29 Avril 2004

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 · 29 Avril 2004

...

Les bordures gauche et droite du parchemin marche ???

Tu peut faire un screen ?

T'as quel nav ?