Insertion txt + image

Cflo · Message par **Cflo** » 08 avr. 2009, 14:33

Pas à pas j'ai inséré image et texte associé sur un des pages de mon potentiel futur site.
J'enregistre, jusque là tout va bien.
Pbm - lors du passage sur le navigateur aïe : mon image apparaît là où je l'ai placée, mais le txt associé est complètement en bas de la page et non pas à gauche de l'image comme je l'avais prévu dans l'insertion.
Jafé 1 bétise??
Thx for help

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8

Message par **Ymai** » 08 avr. 2009, 14:50

Bonjour
Merci de nous donner une petite idée du code HTML. Un petit copier/coller suffirait.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.8) Gecko/2009032711 Ubuntu/8.04 (hardy) Firefox/3.0.8

Cflo · Message par **Cflo** » 08 avr. 2009, 15:06

Voici (!) la chose

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Chaise</title>
</head>
<body
 style="color: rgb(214, 214, 214); background-color: transparent; background-image: url(images/Fondecran%20pages.jpg); width: 1124px;"
 alink="#ffff33" link="#9999ff" vlink="#ff0000">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1
 style="font-style: italic; font-family: Kozuka Gothic Pro L; text-align: left;"><small><small><a
 href="index.html">Accueil</a> - <a
 href="file:///T:/www/Chaise%20intro.html">Chaises</a>
- <a href="Meubles%20intro.html">Meubles</a> - <a
 href="Tables%20intro.html">Tables</a> - <a
 href="Divers%20intro.html">Divers</a> - <a
 href="Contact.html">Contact</a></small></small></h1>
<big><span style="font-size: 10pt; color: silver;"></span></big><big><span
 style="font-size: 10pt; color: silver;"></span></big><big><span
 style="font-size: 10pt; color: silver;"></span></big>
<p
 style="margin-top: 0pt; margin-bottom: 0pt; text-align: left; direction: ltr; unicode-bidi: embed; vertical-align: baseline; font-family: Kozuka Gothic Pro L; font-style: italic; width: 1360px;"><big><span
 style="font-size: 10pt; color: silver;"></span></big><big><span
 style="font-size: 10pt; color: silver;"><img
 style="float: right; height: 360px; width: 265px;"
 alt="Vous le savez : " src="images/Chaises%20intro.jpg"
 hspace="40" vspace="40"></span></big></p>
<h1 style="margin-left: 127px; width: 997px;"><font
 size="+2"><span style="font-size: 10pt; color: silver;"><big><big><big><big><big><span
 style="font-family: Kozuka Gothic Pro L; font-style: italic;">Chaises</span></big></big></big></big></big></span></font></h1>
<div class=""
 style="margin-left: 120px; font-family: Kozuka Gothic Pro L;"><font
 size="+1"><span style="font-size: 10pt; color: silver;">Vous
le savez : <br>
La chaise est un mobilier destiné à ce qu'une personne s'assoie dessus.
Elle est constituée d'un dossier, parfois de bras et habituellement de
quatre pieds, pour soutenir le siège au-dessus du sol.<br>
A l'origine, la chaise était un privilège réservé aux personnes de haut
rang. Les gens du peuple utilisaient le coffre, le banc ou le tabouret.<br>
Aujourd'hui qu'elle se trouve dans la cuisine, la salle &nbsp;à
manger, la chambre ou toute autre pièce de la maison, la chaise nous
est&nbsp;familière.<br>
<br>
Prenez place !</span></font><br>
</div>
<big><span style="font-size: 10pt; color: silver;"></span></big>
</body>
</html>

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8

Message par **Ymai** » 08 avr. 2009, 15:55

J'ai beau faire tous mes efforts, l'image est bien à droite et le texte juste à sa gauche.
Le navigateur est-il bien Firefox? Ou un autre dont je ne dispose pas?
Quand bien même ce serait un autre, je ne vois pas clairement la raison pour laquelle la mise en page ne serait pas celle qui est décrite.
Mais certains navigateurs sont très taquins.

Deux ou trois choses qui me chipotent:
la largeur de 1124px pour l'élément <body>
C'est un peu beaucoup quand on sait que la majorité des utilisateurs utilisent encore des écrans 1024x768.
D'autant qu'un paragraphe, à l'intérieur de ce <body> est prévu en 1360px!!
Ceci pourrait être la cause du problème.
Je supprimerais cette valeur de largeur pour ne conserver que celle du conteneur <body>.

Autre chose, mais qui ne peut pas avoir de rapport: il faut mettre en liste noire la barre d'outils des styles de caractères. Elle est très nuisible au code.
A titre d'exercice de style, je me suis permis de simplifier le code de la manière suivante:

Code : Tout sélectionner

<h3 style="font-style: italic; text-align: left; margin-top: 150px;">
<a href="Chaise%20intro.html">Chaises</a>- 
<a href="Meubles%20intro.html">Meubles</a> - 
<a href="Tables%20intro.html">Tables</a> - 
<a href="Divers%20intro.html">Divers</a>- 
<a href="Contact.html">Contact</a></h3>

<img style="float: right; height: 360px; width: 265px;" alt="Vous le savez : ?" src="images/Chaises%20intro.jpg" vspace="40" hspace="40">

<h1 style="margin-left: 127px; font-style: italic; color: silver;">
Chaises
</h1>

<div style="margin-left: 120px;">
<span style="font-size: 10pt; color: silver;">Vous le savez : <br>
La chaise est un mobilier destiné à ce qu'une personne s'assoie dessus.
Elle est constituée d'un dossier, parfois de bras et habituellement de
quatre pieds, pour soutenir le siège au-dessus du sol.<br>
A l'origine, la chaise était un privilège réservé aux personnes de haut
rang. Les gens du peuple utilisaient le coffre, le banc ou le tabouret.<br>
Aujourd'hui qu'elle se trouve dans la cuisine, la salle &nbsp;à
manger, la chambre ou toute autre pièce de la maison, la chaise nous
est&nbsp;familière.<br>
<br>Prenez place !</span>
</div>

Ce n'est pas encore parfait, mais c'est déjà plus simple.

Attention aux polices de caractères exotiques. Si le visiteur n'a pas cette police, le texte n'apparaîtra pas correctement dans son navigateur.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.8) Gecko/2009032711 Ubuntu/8.04 (hardy) Firefox/3.0.8

Cflo · Message par **Cflo** » 08 avr. 2009, 16:30

Oui Firefox, ce renard me joue parfois des tours... Merci bcp en tous les cas pour votre manip - le copy/paste donne un résultat très bon.
Je vais changer ma police de caractère sur l'ens de mes pages et pour la taille de l'élément <body> et la mise en liste noire, je vais m'atteler à cette tâche. Merci encore

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8

Message par **Ymai** » 08 avr. 2009, 19:21

Cflo a écrit :Oui Firefox, ce renard me joue parfois des tours...

Le Goupil se comporterait-il différemment sous Windoze? Étrange.
Si quelqu'un pouvait confirmer...

PS: le travail "à façon" n'est pas la spécialité du forum

Pour une mise en page selon les règles, il faut vraiment travailler CSS.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.8) Gecko/2009032711 Ubuntu/8.04 (hardy) Firefox/3.0.8

Geckozone

Insertion txt + image

Insertion txt + image

Qui est en ligne ?