Texte sort en bas de l'image sur IE

gauzhelm Messages postés 40 Statut Membre -  
Dalida Messages postés 7114 Statut Contributeur -
Bonjour à tous,

Ayant beaucoup cherché et essayé différents trucs = je n'ai pas trouvé :

( mon site est en xhtml 1.0 strict, utf-8 ) tout est OK sur FireFox : rendu et validation ) mais sur IE mon texte sort =dépasse en bas de l'image. En réduisant le " top " ou la police, cela laisse trop d'espace sur FireFox, donc ce n'est pas la solution. voila le code concerné , si vous voulez m'éclairer ? :
HTML : 
<div id="global_eclairante" />
<div id="image_eclairante"><p><img src="eclairante.jpg" alt="image eclairante" width="770" height="642" /></p>

<div class="texte3"><p><span class="c1"><strong>*******  CRITIQUE  ******</strong></span><br /><br />Chacune de ses œuvres est une porte ouverte sur un monde d'Amour. Ses créations sont pour lui un moyen de ne plus être assujetti au temps intervalle et d'entrer dans le Présent absolu. Le temps n'a plus prise dans ses œuvres, pourceux qui osent s'y oublier comme en méditation.  Sa voie a été influencée par celle de Nietzsche, Goethe, Steiner, Durkheim, Krisnamurti, Hermann Hess ... Chacune de ses oeuvres, reste une porte ouverte pour la révélation en soi de I'Amour Créateur pour ceux qui osent la franchir. En regardant ses toiles, je ressens dans mon cœur un appel de I'Amour Créateur........... JEAN DUPONT</p></div>


CSS : 
body
	{
	background:#000000;
	position:relative;
	left:0px;
	margin: 0 auto;
 	width:770px;
	height:auto; 	
	text-align: center;
	}
div #global_eclairante
	 {
	position:relative;
	margin-left: auto;
    margin-right: auto;
    width:770px;
	height:642px;
	text-align: left;
	}
div #image_eclairante
	{
	position:absolute;
	top:auto;
	left:0px;
	margin: 0 auto;
	width:770px;
	height:642px;
	display:block;
	border : solid 1px black;
	background-image:url( ../images/eclairante.jpg );
	background-repeat:no-repeat;
	background-position:center;
	}
.c1
	{
	font-size:17px;

	color:#000000;
	font-family:Verdana, Tahoma, Arial, Helvetica, Geneva, sans-serif;
	text-align:center;
	color: red;
        }
.texte3
	{
	position:absolute;
	top:145px;
	left:110px;	
	width:550px;
	height:auto;
	margin: 0 auto;
	font-size:0.6em;
	color:#000000;
	font-family:Verdana, Tahoma, Arial, Helvetica, Geneva, sans-serif;
	text-align:justify;
	background-color:transparent;
	}


Bien amicalement

21 réponses

  • 1
  • 2
Réponse 1 / 21
Utilisateur anonyme
 
div #image_eclairante
{
position:absolute;
top:auto;
left:0px;
margin: 0 auto;
width:770px;
height:642px;
display:block;
border : solid 1px black;
background-image:url( ../images/eclairante.jpg );
background-repeat:no-repeat;
background-position:center;
}

remplace plutôt par ça: 
margin: auto;
background-image:url(" ../images/eclairante.jpg");


Et ensuite, je voudrais bien l'url de ton site si possible, pour voir un peu mieux à quoi ça ressemble, si tu peux ...
0
Dalida Messages postés 7114 Statut Contributeur 923
 
salut, 

background-image:url(" ../images/eclairante.jpg");

les guillemets sont inutiles. 

Une valeur d'adresse URI est formée par les caractères 'url(' suivis par un caractère blanc facultatif, suivi par un guillemet facultatif simple (') ou double ("), suivis par l'adresse URI elle-même, suivie par un guillemet fermant simple ou double, s'il y a lieu, suivi par un caractère blanc facultatif et enfin par une parenthèse fermante ')'. Les guillemets doivent être de la même sorte.

spécification CSS 2
0
Réponse 2 / 21
Hicks59 Messages postés 51 Statut Membre 9
 
Euh le body en position relative ??? jamais vu ca et tu sur que ca pose pas problème
Je dirais qu'il te manque aussi 2 fermetures de div une pour la globale et une autre pour celle de l'image
0
Réponse 3 / 21
gauzhelm Messages postés 40 Statut Membre 2
 
Bonjour Eiewn et Hicks59,

OK ! merci beaucoup.

Cher Hicks59, le body tu le mettrai comment ? en absolute ou rien ?

je change cela pour voir si cela annule le problème sur IE

le site : http://www.fluo-peinture.eu

( l'embêtant aussi, c'est que je suis obligé d'aller au Cyber - café pour vérifier sur IE car http://browsershots.org/ ne montre pas toute la page).

Bien amicalement
0
Réponse 4 / 21
gauzhelm Messages postés 40 Statut Membre 2
 
MINCE ! je me suis trompé d'adresse de site le concerné c'est celui-là : http://www.daniel-jegou.com

Bonjour Eiewn et Hicks59,

OK ! merci beaucoup.

Cher Hicks59, le body tu le mettrai comment ? en absolute ou rien ?

je change cela pour voir si cela annule le problème sur IE

le site : http://www.

( l'embêtant aussi, c'est que je suis obligé d'aller au Cyber - café pour vérifier sur IE car http://browsershots.org/ ne montre pas toute la page).

Bien amicalement
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 21
Hicks59 Messages postés 51 Statut Membre 9
 
Bonsoir,
donc pour le body je ne mettrai rien^^
Pour ton problème sous ie 7 je n'ai pas de souci d'affichage.
0
Réponse 6 / 21
gauzhelm Messages postés 40 Statut Membre 2
 
Bonjour Hicks,

Pourtant, lorsque j'enlève le " position:relative; " du body , sur FireFox tout mon contenu se met à gauche de la fenêtre( à part le titre h1 et le menu du haut). Je ne peux donc pas l'enlever.

Et si au lieu de cela :
<div id="global_eclairante" />
<div id="image_eclairante"><p><img src="eclairante.jpg" alt="image eclairante" width="770" height="642" /></p>
<div class="texte3"><p><span class="c1"><strong>titre</strong></span><br />texte bla bla .....;</p></div>

Je remplace par cela :
<div id="global_eclairante" />
<p id="image_eclairante"><img src="eclairante.jpg" alt="image eclairante" width="770" height="642" </p>
<p class="texte3"><span class="c1"><strong>titre</strong></span><br />texte bla bla .....;</p></div>

Est-ce mieux ou bien tout faut ?

amicalement
0
Réponse 7 / 21
Hicks59 Messages postés 51 Statut Membre 9
 
je vais voir si je peux te faire vite fait le code
donc toi tu veux un cadre centrer horizontalement avec la critique dedans et l'image en dessous de la critique mais toujours dans le cadre c'est ca?
ou l'inverse l'image puis en dessous la critique(comme ta page d'acceuil?)
changer l'ordre, il faut juste jouer sur la div del'image soit au dessus du cadre critique soit au dessous du texte ^^ voila.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
body{
background:#000000;
left:0px;
margin: auto;
width:770px;
text-align: center;
}
#global_eclairante{
margin-left: auto;
margin-right: auto;
width:770px;
}
#image_eclairante{
top:auto;
left:0px;
margin: 0 auto;
width:770px;
height:642px;
background-image:url( ../images/eclairante.jpg );
background-repeat:no-repeat;
background-position:center;
}
#c1{
font-size:17px;
font-weight:bold;
color:#000000;
font-family:Verdana, Tahoma, Arial, Helvetica, Geneva, sans-serif;
text-align:center;
color: red;
}
#texte3{
width:770px;
font-size:0.6em;
color:#FFFFFF;
font-family:Verdana, Tahoma, Arial, Helvetica, Geneva, sans-serif;
text-align:justify;
}
</style>
</head>

<body>
<div id="global_eclairante" />
<div id="image_eclairante"><img src="eclairante.jpg" alt="image eclairante"></div>
<div id="c1">******* CRITIQUE ******</div>
<div id="texte3">Chacune de ses œuvres est une porte ouverte sur un monde d'Amour. Ses créations sont pour lui un moyen de ne plus être assujetti au temps intervalle et d'entrer dans le Présent absolu. Le temps n'a plus prise dans ses œuvres, pourceux qui osent s'y oublier comme en méditation. Sa voie a été influencée par celle de Nietzsche, Goethe, Steiner, Durkheim, Krisnamurti, Hermann Hess ... Chacune de ses oeuvres, reste une porte ouverte pour la révélation en soi de I'Amour Créateur pour ceux qui osent la franchir. En regardant ses toiles, je ressens dans mon cœur un appel de I'Amour Créateur........... JEAN DUPONT</div>

</div>
</body>
</html>
0
Réponse 8 / 21
gauzhelm Messages postés 40 Statut Membre 2
 
bonsoir,

je te remercie de vouloir m'aider ( je désire que le texte soit sur l'image = ce n'est pas ce que ça donne avec ton code)

Je suis étonné de ton code : aucune position ni relative ni absolute ?, pas de <p> encadrant les textes ni les images ? ...
comme tu l'écris : "je vais te faire vite fait le code !" sans doute as - tu été trop vite mais je te remercie quand - même, je vais me débrouiller en révisant mes cours.

bien amicalement
0
Réponse 9 / 21
Hicks59 Messages postés 51 Statut Membre 9
 
non t'inquite pas mon code c'est bien ca, j evite au maximum les positions relative et absolue car ca pose des problèmes de compatibilités entre les navigateurs ^^
pareil pour les balises <p> j'utilise pas je préfère tout encadrer avec des div comme ca je leur met le style que je veux^^
après c'est ma manière de coder à chacun la sienne ^^.
pour qu'il soit sur l'image il faut mettre l'image en background dans la div du texte.
Enfin plus précisément tu créer une div qui qui encadre le texte le titre(ici critique) et tu lui mets un id="conteneur"
auquel tu donnes background: le chemin de ton image;
0
Réponse 10 / 21
Hicks59 Messages postés 51 Statut Membre 9
 
non t'inquite pas mon code c'est bien ca, j evite au maximum les positions relative et absolue car ca pose des problèmes de compatibilités entre les navigateurs ^^
pareil pour les balises <p> j'utilise pas je préfère tout encadrer avec des div comme ca je leur met le style que je veux^^
après c'est ma manière de coder à chacun la sienne ^^.
pour qu'il soit sur l'image il faut mettre l'image en background dans la div du texte.
Enfin plus précisément tu créer une div qui qui encadre le texte le titre(ici critique) et tu lui mets un id="conteneur"
auquel tu donnes background: le chemin de ton image;
voila ce que ca donne
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
body{
background:#000000;
left:0px;
margin: auto;
width:770px;
text-align: center;
}

#global_eclairante{
margin-left: auto;
margin-right: auto;
width:770px;
height:642px;
background: url(IMAG0173.JPG);
background-repeat:no-repeat;
background-position:center;
width:770px;
}

#c1{
width:770px;
font-size:17px;
font-weight:bold;
color:#000000;
font-family:Verdana, Tahoma, Arial, Helvetica, Geneva, sans-serif;
text-align:center;
color: red;
}
#texte3{
width:770px;
font-size:0.6em;
color:#FFFFFF;
font-family:Verdana, Tahoma, Arial, Helvetica, Geneva, sans-serif;
text-align:justify;
}
</style>
</head>

<body>
<div id="global_eclairante" />
<div id="c1">******* CRITIQUE ******</div>
<div id="texte3">Chacune de ses œuvres est une porte ouverte sur un monde d'Amour. Ses créations sont pour lui un moyen de ne plus être assujetti au temps intervalle et d'entrer dans le Présent absolu. Le temps n'a plus prise dans ses œuvres, pourceux qui osent s'y oublier comme en méditation. Sa voie a été influencée par celle de Nietzsche, Goethe, Steiner, Durkheim, Krisnamurti, Hermann Hess ... Chacune de ses oeuvres, reste une porte ouverte pour la révélation en soi de I'Amour Créateur pour ceux qui osent la franchir. En regardant ses toiles, je ressens dans mon cœur un appel de I'Amour Créateur........... JEAN DUPONT</div>
</div>
</body>
</html>
0
Réponse 11 / 21
gauzhelm Messages postés 40 Statut Membre 2
 
Bonsoir Hicks59,

Vive les gars du Nord ! tu es Super !!!

reste à voir si ta propre façon de coder est validable.

très Grand merci

Je suis débutant et me pose c'est questions : (réponses courtes par oui ou par non ):
Je vois ce code sur certains sites, est-ce possible pour le même texte de mettre à la fois :
text-align : justify ;
text-align : center ;
la deuxième ligne ne contrarie - t - elle pas la première ? =

img { border-width : 0 ;
ou bien
img { border: none;
n'est-ce pas la même chose ? =

Je vois aussi cela sur certains sites :
<div class="center">Les cours de ........... sur les points<br />
<div class="center">
<h3>COURS POSITIFS</h3>
</div>
N'y a-t-il pas un manque de <p> ? =

Bien amicalement, si tu passe par Lyon tu sera le bien venu.
0
Réponse 12 / 21
Hicks59 Messages postés 51 Statut Membre 9
 
Bonsoir ,

Mon code est parfaitement conforme au norme W3C^^ en transitional en strict je ne sais pas j'ai pas testé.

alors voila en théorie pour:
text-align : justify ;
text-align : center ;
ca devrait être la derniere ligne qui prends effet mais ce n'est pas toujours le cas. Ceci est du au moteur d'interprétation des navigateurs. Bien sur que cela n'est pas logique dans le cas ou c'est 2 lignes sont dans la même css. Cependant ca ne bloque pas l'interprétation.

pour
img { border-width : 0 ;
ou bien
img { border: none;
n'est-ce pas la même chose.
Mais c'est 2 lignes sont équivalentes.
Perso j'aurai mis border:0px; ceci est utile pour ie lorsqu'une image contient un lien.
Il faut savoir qu'il a plusieurs niveaus de css ca va jusque 3. Or les navigateurs actuelles ne comprennent les css que jusqu'au 2.1 .
un exemple le width dans la css 3 cette notation existe width-max:100px; ainsi que height-max:10px; ils sont applicables lorsque tu donnes width:auto; mais elle n est compréhensible que sur opéra il me semble qui les plus évolué au niveau des css.

La balise <p> est pour moi une équivalence à la div cependant la div est bocoup plus pratique.
La balise <p> permet de déclarer le début d'un paragraphe, tu peux lui donner tous les effets que tu veux au niveau du texte. Apres au niveau de la manipulation rien ne vaut une div peu etre le span est encore.
Une div peut de dissimuler s'afficher c'est un véritable conteneur. Alors que le paragraphe non.

Voila j'espère à voir répondu à tes questions ^^
Si tu en as d'autre hésite pas à demander.
Oublie pas de mettre résolu.

Bien amicalement Hicks
0
Réponse 13 / 21
gauzhelm Messages postés 40 Statut Membre 2
 
je te remercie encore
non , je n'ai plus de questions pour le moment MAIS, ayant mis ton code, je me retrouve bloqué car je ne vois pas comment ajuster le texte sur l'image ; avec un " top " ça ne fonctionne pas ( j'avais l'habitude d'utiliser le top et le left précédemment).

je cherche, je cherche, je cherche haaa !!! je les admire les bons Webmasters comme toi
0
Réponse 14 / 21
Hicks59 Messages postés 51 Statut Membre 9
 
c 'est a dire ajuster le texte?
0
Réponse 15 / 21
gauzhelm Messages postés 40 Statut Membre 2
 
oui ! le texte avec son titre, qui sont superposés à l'image, se trouvent collé au Menu et je n'arrive pas à les descendre avec un " top: " car l'image descend avec.
0
Réponse 16 / 21
Hicks59 Messages postés 51 Statut Membre 9
 
fais un simple <br />
0
Réponse 17 / 21
gauzhelm Messages postés 40 Statut Membre 2
 
bonsoir Hicks,
<div id="global_eclairante" /><br /><br /><br /><br />
<div id="c1">****** CRITIQUE D'UN MAITRE PAR UN AUTRE ******</div><br />
<div id="texte3">Daniel Jègoû utilise ses talents


J'ai mis des br et ça marche mais tu as vraiment une façon de coder très étonnante, reste à voir ce que dit le Validateur et si ça colle sur iE.
Très Grand merci

( résolu )
0
Dalida Messages postés 7114 Statut Contributeur 923
 
salut,

le texte dans des <p> et des <hn> ce serait un peu plus propre, non ?
0
Réponse 18 / 21
Hicks59 Messages postés 51 Statut Membre 9
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
body{
background:#000000;
left:0px;
margin: auto;
width:770px;
text-align: center;
}

#global_eclairante{
margin-left: auto;
margin-right: auto;
width:770px;
height:642px;
background: url(IMAG0173.JPG);
background-repeat:no-repeat;
background-position:center;
width:770px;
margin-top:20px;
}

#c1{
width:770px;
font-size:17px;
font-weight:bold;
color:#000000;
font-family:Verdana, Tahoma, Arial, Helvetica, Geneva, sans-serif;
text-align:center;
color: red;
}
#texte3{
width:770px;
font-size:0.6em;
color:#FFFFFF;
font-family:Verdana, Tahoma, Arial, Helvetica, Geneva, sans-serif;
text-align:justify;
}
</style>
</head>

<body>
<div id="global_eclairante" />
<div id="c1">******* CRITIQUE ******</div>
<div id="texte3">Chacune de ses œuvres est une porte ouverte sur un monde d'Amour. Ses créations sont pour lui un moyen de ne plus être assujetti au temps intervalle et d'entrer dans le Présent absolu. Le temps n'a plus prise dans ses œuvres, pourceux qui osent s'y oublier comme en méditation. Sa voie a été influencée par celle de Nietzsche, Goethe, Steiner, Durkheim, Krisnamurti, Hermann Hess ... Chacune de ses oeuvres, reste une porte ouverte pour la révélation en soi de I'Amour Créateur pour ceux qui osent la franchir. En regardant ses toiles, je ressens dans mon cœur un appel de I'Amour Créateur........... JEAN DUPONT</div>
</div>
</body>
</html>

Avec ça, ca donne quoi?
0
Réponse 19 / 21
Hicks59 Messages postés 51 Statut Membre 9
 
je dirais juste chacun son point de vue au niveau propreté du code ^^
si dire que un code propre c'est mettre des balises <p> à la place des div suis pas trop d'accord
comme je l'ai dit plus haut une div est manipulable à vonlonté.
0
Dalida Messages postés 7114 Statut Contributeur 923
 
salut,

question de sémantique.
une balise à une signification propre, sinon tu peux aussi des <div> pour afficher des images au lieu de <img />…

et les titres permettent de définir l'architecture de la page.plus facilement, on ne navigue pas sur Internet qu'avec des navigateurs graphiques.

et toutes les balises sont manipulables exactement de la même façon !
0
Réponse 20 / 21
Hicks59 Messages postés 51 Statut Membre 9
 
si tu le dis je vais pas te contrarier, je suis pas la pour ca faire un débat sur quel type de codage est le plus beau.
Ma manière de coder est totalement valide w3c donc apres on fait ce qu'on veut.

et toutes les balises sont manipulables exactement de la même façon !
FAUX
Et puis bon trouve moi une balise avec des positions relative ou autre....
Ou même un table avec du z-index....

une balise à une signification propre, sinon tu peux aussi des <div> pour afficher des images au lieu de <img />…
Ce que tu dis la n'a aucun sens et n'est en aucun cas comparable.
Il suffit pas de savoir ce que veux dire une balise, il faut savoir s'en servir selon le besoin

Et pour finir je dirais au lieu de critiquer comme beaucoup de personnes propose lui une solution.
Il verra par lui même ce qui s'adapte le mieux à ces besoins.

0
Dalida Messages postés 7114 Statut Contributeur 923
 
salut,

et si tu commençais par utiliser le forum correctement ?
quant tu réponds à quelqu'un ne reste pas dans le flux principal de la conversation mais répond au post en question pour que ta réponse soit indentée. tu peux aussi te servir de la mise en forme (gras, italique…)

je suis pas la pour ca faire un débat sur quel type de codage est le plus beau
je ne te parle pas de beauté du code mais de sa meilleure utilisation, comme la discution est pour une fois orientée sur de la technique pure, autant pousser le bouchon.

Ma manière de coder est totalement valide w3c donc apres on fait ce qu'on veut
tu n'est pas sans ignorer que la validation ne fait que vérifier la conformité du code vis à vis de la DTD, en gros la "grammaire" du code.
mais HTML ne s'arrête pas là.
je te parlais de sémantique, il est important de la respecter.
mais c'est sûr, tu fais ce que tu veux.

et puisque tu parles de W3C, autant aller à la source et regarder les spécifications du langage.
• <p>
• <div>

les <div> sont là pour être ajoutées, elles ne constituent pas l'architecture du document mais la complètent.

ces deux balises peuvent être mises en forme exactement de la même façon, je ne vois pas pourquoi utiliser <div> plutôt que <p>. si tu peux m'éclairer…

idem pour {position} et si tu ne l'as jamais vu appliqué à <body> c'est que c'est son comportement par défaut, c'est le bloc conteneur initial…
<edit>
ou plutôt et avant de me faire reprendre, c'est comme si c'était son comportement par défaut puisque c'est la référence pour les éléments en {position:absolute;} si aucun descendant n'est à {position:absolute;}.
</edit>

pour {z-index}, tu peux l'appliquer à <table> ou à n'importe quelle autre boite, je ne vois pas pourquoi tu nous sors ça.

et pour les propositions, je crois que j'en ai fait une : commencer par un document HTML bien formé, après on parlera de mise en page.
0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse
Retrouver l'image originale après avoir fait des modifications ?
Raven -
Asta972155 -

10 réponses
tiret du bas
na -
Kahlan2016 -

14 réponses
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse