Discussion :

[chillansky]

bon le but est de représenter un parchemin et positioner le texte dessus.

J'ai donc mon image de fond, la bordure haut et la bordure bas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="centre">
blablablablablablablablablablablabla
</div>

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#centre {
	background				:url("../img/parch_f.png")  ;
	background-repeat	:repeat-y;
	margin-left				:55px;
	padding-right			:60px;
	padding-left			:60px;
}

Mais que dois-je faire pour positioner ces 2 bordures haut et bas correctement ?

J'ai essayé ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#CentreBordureHaut
{
	float:top;
	background: url("../img/parch_h.png") top  ;
	background-repeat: no-repeat;
}
 
 
#CentreBordureBas
{
	float:bottom;
	background: url("../img/parch_b.png") bottom  ;
	background-repeat: no-repeat;
}

avec ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="CentreBordureHaut">
   <div id="CentreBordureBas">
      <div id="centre">balbalbalba</div>
   </div>
</div

Mais les bordures du début passent sur le fond du parchemin. Et de plus ne sont pas alignée par rapport à ce derniers.

[MasterOfChakhaL]

La propriété float n'accepte que les valeurs: left, right et none
je te propose de partir sur cette base pour l'html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div id="parchemin">
  <div class="top"></div>
  <div class="content">
    bmozfnp ofozej pozejgp ozjepg ozmg
  </div>
  <div class="bottom"></div>
</div>

[chillansky]

Et le CSS ressemblerait alors à quoi ?
Les images devront être de la même taille alors (Aussi bien pour haut, bas, fond du parchemin) (c'est le cas chez moi of course)

[MasterOfChakhaL]

ben vu ton premier post, t'as quand même l'air de savoir un minimum comment on utilise css...

ce sera plus rentable pour toi de te laisser chercher je pense.
après, tu peux attendre que quelqun de moins flemmard que nous passe par là...

bonne chance

[chillansky]

[chillansky]

Bon après moulte essais me revoila

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
...
<div id="arbreTotem">
   <div class="parchemin">
      <div class="ParchTop"></div>
         <div id="centre">
blablablablablblablablablablblablablablablblablablablablblablablablabl
         </div>
      <div class="ParchBottom"></div>
   </div>
</div>
...

CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
#arbreTotem {
	margin-left: 225px;
	/*float:left;*/
	background: url("../img/arbretotem_final.png");
	background-repeat: repeat-y;
}
 
.parchemin{
	background				:url("../img/parch_f.png")  ;
	background-repeat	:repeat-y;
	margin-left				:55px;
}
 
#centre {
 
}
 
.ParchTop
{
	background: url("../img/parch_h.png") top  ;
}
 
 
.ParchBottom
{
	background: url("../img/parch_b.png") bottom  ;
}

Alors sous firefox: c'est +/- bon sauf qye le top et le bottom du parchemin ne s'affichent pas.
Avec IE là le arbreTotem ne s'affiche pas du tout et en plus le texte sort/déborde complétement du parchemin.

De toute manière dans les 2 cas, le top et le bottom du parchemin ne s'affichent pas (le path est correct)

Idea ????

[chillansky]

Je sens que je vais finir par penser que le CSS c'est de la vaste me*de.

J'ai employé un système similaire au menu gauche de mon site pour avoir le parchemin correctement.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="arbreTotem">
	<div id="centre">				<div id="CentreBordurehaut">
					<div id="CentreBordurebas">
		<div id="CentreBorduregauche">
			<div id="CentreBorduredroite">
 
						<div id="CentreContenu">
		Après de longs developpements balbalbalba
						 </div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
#centre {
	float:left;
	background-image: url("../img/centre/parch_f.png")  ;
	background-repeat: repeat;
 
}
#CentreBorduregauche
{
	float:left;
	background: url("../img/centre/parch_g.png") left top;
	background-repeat: repeat-y;
}
#CentreBorduredroite
{
	float:left;
	background: url("../img/centre/parch_d.png") right  top;
	background-repeat: repeat-y;
}
#CentreBordurehaut
{
	float:left;
	background: url("../img/centre/parch_h.png") top  ;
	background-repeat: no-repeat;	
}
#CentreBordurebas
{
	float:left;
	background: url("../img/centre/parch_b.png") bottom  ;
	background-repeat: no-repeat;
}
 
#CentreContenu
{
	padding:40px;
}

Mais est-ce que c'est possible de faire avec des css ce truc des menus (avec alignement correct). Sans avoir des truc trop compliqué ou chipoter pendant 3 jours non-stop ?
Quelqu'un a t'il déjà réussi à faire des menu correct. Utilisant des images et dont la taille se répète suivant la longueur du truc ?


Parce que là maintenant mon top et mon bottom se réduisent en fonction des coté (et donc ne se collent pas correctement).
Si au moins le truc de kahya fonctionnait aussi bien sous FF que IE
(dsl je m'énerve ..... )