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 ????

[kahya]

un exemple visuel?

[chillansky]

Voici ci joint 2 examples. Un avec Firefox, l'autre avec Intermerde Explorer.

Le but du "jeu" est d'avoir la même mise en page que qu'ici: www.outremondes.com

le tout sans les tableaux of course

Une fois ces problèmes finis je pourrais ENFIN migrer toutes les infos vers la nouvelle mise en page et rajouter plein de truc (en plus c'est le code est plus lisible avec css que avec tableauX)

[kahya]

est-ce que ça doit donner qque chose comme cela? http://informatik.rf.lv/test.html
(je ne me sers que de 3 images, une en haut une au milieu derriere le texte et une en bas)
edit : mince ça marche sous IE mais pas FF -_-

[chillansky]

Sinon oui c'était à peu près ça

[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 ..... )

[kahya]

J'ai fai

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
 
.parchemin{
	top:100px;
	width : 400px;
	background				:url("milieu.jpg")  ;
	background-repeat: repeat-y;
}
 
.centre {
	width : 400px;
 
}
 
.ParchTop
{
	width : 400px;
	height: 100px;
	background: url("test1.jpg") top  ;
}
 
 
.ParchBottom
{
	width : 400px;
	height: 100px;
	background: url("test2.jpg") bottom  ;
}

pour le css et pour les div

Code :

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

1
2
3
4
5
6
7
<div class="ParchTop"></div>
            <div class="parchemin">
	     <div class="centre">
	            <p> texte</p>
                 </div>  
	      </div>
<div class="parchBottom"></div>

sous IE ça marche, sous FF ça rajoute des bandes blanches entre les div je ne sais pk :/
http://informatik.rf.lv/test.html

[kahya]

doit y avoir une option pour supprimer ces bandes blanches sous ff ça doit pas etre bien compliqué quand meme

[kahya]

ay ça y est elle a trouvé, fallai enlever le <p> oO. C'est un peu bidouillé mais ça marche. Reste a savoir si ça s'adapte a ton cas..

[MasterOfChakhaL]

pour le haut et le bas... essaie de rajouter un espace insecable

Code :

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

<div class="ParchTop">&nbsp;</div>

parfois, les navigateurs ne réagissent pas pareil selon que l'élément est vide ou non. Avec &nbsp; ton div n'est plus vide

[kahya]

non ça ne change rien, le probleme vient du <p></p> dans la div centre (celle qui doit contenir le texte). Donc soit ne pas mettre de <p> soit mettre une option sur la balise <p> qui supprime cet espace

[chillansky]

reyop

bon on y arrive tout doucement mais bon mon ParchTop & parchBottom n'apparraissent pô.

l' arbreTotem n'apparait pas si je ne fixe pas sa height, et avec sa height il ne se repète pas vers le bas malgré un repeat-y

Code xhtml :

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
37
38
 
.arbreTotem{
background				:url("../img/arbretotem_final.png") ;
width : 36px;
height:250px;
background-repeat:repeat-y;
float:left;
}
 
.parchemin{
	background				:url("../img/parch_f.png")  ;
	background-repeat: repeat-y;
	width : 694px;
	margin-left:260px;
}
 
.centre {
 
	width : 600px;
	padding-top:30px;
	padding-left:60px;
	padding-bottom:30px;
}
 
.ParchTop
{
	width : 694px;
	background: url("../img/parch_h.png")   ;
	margin-left:260px;
}
 
 
.ParchBottom
{
	width : 694px;
	background: url("../img/parch_b.png")   ;
	margin-left:260px;
}

Code CSS :

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

1
2
3
4
5
6
7
8
9
 
<div class="arbreTotem"></div>
<div class="ParchTop">&nbsp;</div>
	<div class="parchemin">
		<div class="centre">
Après de longs developpements nous avons decidé d'ouvrir les portes de notre Beta. 
		</div>  
	</div>
<div class="parchBottom">&nbsp;</div>

Dans l'image ci-jointe. Les défauts que j'ai et que j'aimerais corriger.

[chillansky]

Pas d'solution ?