Texte sur image : rendu différent selon les navigateurs

Version imprimable

2 pièce(s) jointe(s)

Bonjour, je cherche à mettre du texte qui monte sur une tof. J'ai réussi mon rendu sur firefox mais sur chromium mon texte vient se placer dessous.....J'ai téléchargé tout un tas de navigateur pour me rendre compte.... Tout est dans le flux sur epiphany et sur midori et donc très pourri mais fonctionne parfaitement sur chrome...

Une idée?

PS : je me doute que j'encode comme un cochon alors soyez pas trop dur....

ici le bout de css concerné
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 /*mise en place de l'ardoise du plat du jour en page d'accueil*/ section#menu_du_jour { margin:0; padding : 0; min-width : 50%; } div#tof_ardoise { width:100%; z-index : 0; margin: 0; padding : 0; } img#tof_ardoise { width:100%; margin:0; padding:0;} #txt_ardoise { position : relative; top:-60%; z-index:1; color:white; font-family: AlexBrushRegular; font-weight: normal; font-style:normal ; font-size:x-large; }
Ici le code html....
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <div id='les_menus'> <section id='menu_du_jour'> <div id='tof_ardoise'> <img id='tof_ardoise' src="ardoise.png" alt="Une ardoise de restaurant sur laquelle est écrit le menu"> </div> <div id='txt_ardoise'> <?php include('plat_du_jour.php')?> </div> </section> <article><?php include('article.php')?></article> </div>
en bonus la tof firefox et chromium
Pièce jointe 222556Pièce jointe 222557

Grand merci

13/10/2016, 14h27
Invité
Bonjour,

1/

Citation:

Envoyé par jojolemerou66

...j'encode comme un cochon...

Ceci explique peut-être cela... :weird:

2/
Code:

1 2 <div id='tof_ardoise'> <img id='tof_ardoise' ...
2 éléments, un même id : Y'a comme un défaut...

3/

Citation:

Envoyé par jojolemerou66

Ici le code html....

Non. Ca, c'est ton script.
Ce qui nous intéresse ici, c'est le code HTML généré (SANS PHP dedans).

4/ Mon oeil gauche vient d'empêcher mon oeil droit de se suicider après avoit vu ton design...
J'espère que les couleurs de fonds ne sont pas définitives (?)...

1/ solution 1 :

Code:

1
2
3
4
5
6
<div id='tof_ardoise'>
  <img id='img_ardoise' src="http://karatedo-fudoshin-plescop.fr/pages/images/ardoise.png" alt="Une ardoise de restaurant sur laquelle est écrit le menu">
  <div id='txt_ardoise'>
    Plat du jour :<br /> Gloubiboulga
  </div>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#tof_ardoise {
  position: relative;
  width: 300px;
}
 
#img_ardoise {
  width: 100%;
}
 
#txt_ardoise {
  position: absolute;
  width: 100%;
  top: 50px;
  text-align: center;
  z-index: 1;
  color: white;
  font-family: AlexBrushRegular;
  font-size: x-large;
}

2/ Solution 2 : L'ardoise est typiquement ce qu'on appelle une "image illustrative" ; sa place est en background du <div>

Code:

1
2
3
4
5
    <div id='tof_ardoise'>
      <div id='txt_ardoise'>
        Plat du jour :<br /> Gloubiboulga
      </div>
    </div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#tof_ardoise {
  width: 300px;
  min-height: 200px;
  background: url('http://karatedo-fudoshin-plescop.fr/pages/images/ardoise.png') top center no-repeat;
  background-size: contain;
}
 
#txt_ardoise {
  padding-top: 50px;
  text-align: center;
  color: white;
  font-family: AlexBrushRegular;
  font-size: x-large;
}

13/10/2016, 19h05
jojolemerou66

1/merci:mrgreen:
2/ un même annoncé sur des balises différentes ce n'est pas possible? J'ai pas vu de bug mais merci j'éviterai.
4/ non....pour l'instant je ne m'occupe que de la structure générale....;)
13/10/2016, 19h08
Invité
Un identifiant (id) DOIT être unique.

Sinon, on utilise une classe (class).
- Les meilleurs cours et tutoriels pour apprendre le CSS
13/10/2016, 19h12
jojolemerou66

Citation:

Envoyé par jreaux62

1/ solution 1 :

Merci j'ai essayé de produire la solution un mais sans donner une taille fixe au div pour que la taille de l'ardoise s'adapte à l'écran...

La solution deux je n'ai jamais réussi à avoir mon ardoise entière pile poil à la taille du conteneur...

bon je ressaies tout cela et je vous dis merci..
13/10/2016, 20h03
jojolemerou66

Bon solution un........mon texte va se placer sur le violet:mrgreen:

Mon esprit étroit a du mal à comprendre pourquoi un objet placé dans une boite se promène dans la boite d'à côté.....:roll: et depuis que je fais du css c'est un peu le cas à chaque fois...

Bon je vais casser un mur à coup de tête et je reviens tenter la soluce 2:mur:

:D
14/10/2016, 09h18
jojolemerou66

résolu.....je crois que je viens de comprendre la notion d'héritage....un flex devait se balader....

merci...
14/10/2016, 09h34
Invité

Bonjour,

sans voir tes codes modifiés (HTML + CSS), on ne peut que te croire sur parole... :aie:
14/10/2016, 12h27
jojolemerou66

ok devant tant d'enthousiasme je les ajoute bientôt....:mrgreen:

reste que sur midori et epiphany ca ne fonctionne pas.........comme si les display: flex ne fonctionnaient pas...tout est en colonne!!
14/10/2016, 16h09
Invité
Citation:

Envoyé par jojolemerou66

....comme si les display: flex ne fonctionnaient pas...

Ca, c'est bien possible...

flex est relativement récent, et pas forcément (bien) implémenté partout.
Je ne connais ni Midori, ni Epiphany.
- Utilisation des flexbox en CSS

voilou le code...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id='les_menus'>
 
			<div  id='tof_ardoise'>
				<img id='img_ardoise' src="ardoise.png" alt="Une ardoise de restaurant sur laquelle est écrit le menu">
 
				<div id='txt_ardoise'>
 
					<h2>Gratin de blette au bleu d'auvergne</h2>
				</div> 
			</div>
		<article>truc du jour...blanchir des blettes du jardin est une hérésie passible de la cantine d'entreprise!!!</article>
 
 
	</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
37
38
39
40
41
42
43
44
45
div#les_menus {
		display : flex;
		justify-content : center;
		fex-wrap : nowrap;
		margin-left :auto;
		margin-right : auto;
		max-width : 80%;
 
}
 
article { padding : 0;
		margin : 0;
		width:100%;
 
		background-color : purple;
		}	
 
/*mise en place de l'ardoise du plat du jour en page d'accueil*/
 
 
div#tof_ardoise {
		position : relative;
		display : block;
		width : 550px;
 
		}
 
img#img_ardoise {
 
			width:100%;
			}
 
#txt_ardoise  {
		position : absolute;
		width : 100%;
		top:150px;
		z-index:1;
		color:white;
		font-family: AlexBrushRegular;
		font-weight: normal;
		font-style:normal ; 
		font-size:x-large;
 
 
		}

Donc dans les milliers de tentatives pour faire fonctionner le machin c'est le display: block; qui me manquait.....:D

17/10/2016, 12h56
jojolemerou66

midori et epiphany sont deux navigateurs présents peut être uniquement sur linux.... On retrouve midori sur pas mal de distributions légères comme élémentary os ou des distributions basées sur xfce...