[CSS]£@#µ^$µ de bordures

Version imprimable

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:

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

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:

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:

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.

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:

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>

14/06/2006, 16h50
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)
14/06/2006, 17h08
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
14/06/2006, 17h36
chillansky

:mrgreen:

Bon après moulte essais me revoila :( :cry: :aie:
Code:

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:

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

15/06/2006, 11h33
kahya

un exemple visuel?
15/06/2006, 11h43
chillansky

2 pièce(s) jointe(s)

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)
15/06/2006, 12h03
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 -_-
15/06/2006, 12h22
chillansky

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

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:

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:

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 :aie:
(dsl je m'énerve ..... :oops: )

J'ai fai

Code:

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:

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

15/06/2006, 14h24
kahya

doit y avoir une option pour supprimer ces bandes blanches sous ff ça doit pas etre bien compliqué quand meme
15/06/2006, 14h28
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..
15/06/2006, 14h30
MasterOfChakhaL

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

Code:

<div class="ParchTop"> </div>

parfois, les navigateurs ne réagissent pas pareil selon que l'élément est vide ou non. Avec   ton div n'est plus vide
15/06/2006, 14h33
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

1 pièce(s) jointe(s)

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:

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:

1 2 3 4 5 6 7 8 9 <div class="arbreTotem"></div> <div class="ParchTop"> </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"> </div>
Dans l'image ci-jointe. Les défauts que j'ai et que j'aimerais corriger.

16/06/2006, 04h31
chillansky

Pas d'solution ?