Texte sur image : rendu différent selon les navigateurs

**jojolemerou66** · 13/10/2016, 14h20

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 :

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
/*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 :

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

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
Nom : ardoise_firefox.png
Affichages : 304
Taille : 529,5 Ko

Nom : ardoise_chromium.png
Affichages : 277
Taille : 404,2 Ko

Grand merci

Invité · 13/10/2016, 14h27

Bonjour,

1/

Envoyé par jojolemerou66

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

Ceci explique peut-être cela...

2/

Code :

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

1
2
<div  id='tof_ardoise'>
      <img id='tof_ardoise' ...

2 éléments, un même id : Y'a comme un défaut...

3/

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 (?)...

Invité · 13/10/2016, 15h20

1/ solution 1 :

Code html :

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

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 css :

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
#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 html :

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

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

Code css :

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

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;
}

**jojolemerou66** · 13/10/2016, 19h05

1/merci

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

Invité · 13/10/2016, 19h08

Un identifiant (id) DOIT être unique.

Sinon, on utilise une classe (class).

Les meilleurs cours et tutoriels pour apprendre le CSS

**jojolemerou66** · 13/10/2016, 19h12

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

**jojolemerou66** · 13/10/2016, 20h03

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

Mon esprit étroit a du mal à comprendre pourquoi un objet placé dans une boite se promène dans la boite d'à côté.....

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

**jojolemerou66** · 14/10/2016, 09h18

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

merci...

Invité · 14/10/2016, 09h34

Bonjour,

sans voir tes codes modifiés (HTML + CSS), on ne peut que te croire sur parole...

**jojolemerou66** · 14/10/2016, 12h27

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

reste que sur midori et epiphany ca ne fonctionne pas.........comme si les display: flex ne fonctionnaient pas...tout est en colonne!!

Invité · 14/10/2016, 16h09

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

**jojolemerou66** · 17/10/2016, 12h50

voilou le code...

Code html :

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

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 css :

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

**jojolemerou66** · 17/10/2016, 12h56

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

Texte sur image : rendu différent selon les navigateurs

CSS

Discussions similaires

Partager

Partager