Mes images et mon texte ne sont pas fixes

FranckDum · Message par **FranckDum** » 14 mai 2012, 09:16

Bonjour tout le monde,

Très heureux d'avoir trouvé ce forum.
En fonction de la résolution des écrans les images et le texte de mon site se baladent où ils veulent.
Je suis néophyte avec Kompozer mais je me suis quand même lancé. Ou se situe mon erreur ?
Si vous avez une réponse et encore mieux une solution, je suis preneur.
Merci d'avance

Voici mon site http://massagetarot.free.fr/

Et voici mon code source de la page d'accueil
<html>
<head>
<title></title>
<style type="text/css">
#menu {
border: 1px solid #666666;
background-color: #eeeebe;
float: right;
width: 150px;
color: #666666;
clear: both;
font-family: Deibi;
}
#texte {
text-align: center;
margin-left: 100px;
margin-right: 200px;
line-height: normal;
font-family: Corbel;
}
#pied {
clear: right;
font-family: Corbel;
line-height: normal;
text-align: center;
width: 250px;
visibility: visible;
margin-left: 400px;
background-color: #eeeebe;
}
h1 {
margin-top: 0;
margin-bottom: auto;
border-right-style: inset;
}
img {
float: left;
margin-right: 20px;
top: 0px;
}
#tableau {
background-color: #006600;
}

</style>
</head>
<body
style="background-image: url(Fond1%20copier.jpg); background-repeat: no-repeat; background-position: center top;">
<div
style="left: 822px; top: 181px; position: absolute; text-align: center;"
id="menu">
<h2 style="font-family: Corbel; color: rgb(102, 102, 102);"><big>M</big>ASSAGES</h2>
<h3 style="font-family: Corbel; color: rgb(153, 102, 51);"><a
href="shiatsu.html">SHIATSU</a></h3>
<h3 style="font-family: Corbel; color: rgb(153, 102, 51);"><a
href="CALIFORNIEN.html">MASSAGE CALIFORNIEN</a> 
</h3>
<h3 style="font-family: Corbel; color: rgb(153, 102, 51);"><a
href="masage%20assis.html">MASSAGE ASSIS</a></h3>
MASSAGE FLUIDIQUE 
 
<a href="MASSAGECENTRE.html">MASSAGE CENTRE</a> 
 

 
</div>
<div style="text-align: left;" id="texte"><img src="bibi1.jpg"
alt="BIBI" style="border: 1px solid ; width: 207px; height: 402px;"
align="left" hspace="30" vspace="170">
 

 

 

 

 
<big style="font-weight: bold; color: rgb(51, 51, 51);">Qui suis-je ?</big><o:p
style="font-family: Corbel;"></o:p>
Je suis praticien en différentes
techniques de massage telles que le Shiatsu, massage traditionnel
japonais, le
massage Californien, le massage anti-cellulite ou bien pour les
entreprises le
massage assis.<o:p></o:p>
En plus de toutes ces techniques,
riche de mes douze années d'expériences dans le massage bien-être, j'ai
mis au
point une technique personnelle adaptée à chacun d'entre nous appelée
Massage Centré.<o:p></o:p>
Le corps détient des informations
susceptibles
d'être formulées par des paroles.<o:p></o:p>
Aussi en parallèle aux massages,
vous avez la possibilité que je vous accompagne dans votre chemin de
vie.<o:p></o:p>
Le corps, le mental et l'âme étant
étroitement liés je vous apporterai une réponse adéquate à votre
cheminement.<o:p></o:p>
J'ai également monté un groupe de
massage aquatique dans un bassin ou l'eau est à 35° avec des autistes
Asperger de
l'association Asperger Amitiés.<o:p></o:p>
Aimant m'enrichir à travers diverses
expériences j'anime une émission de radio sur IDFM98
(http://www.idfm98.fr) un
vendredi sur deux de minuit à six heures du matin.<o:p
style="font-family: Corbel;"></o:p>
Cette émission s'appelle Tarot dans
la nuit. 

<table style="width: 500px; height: 35px; margin-left: 200px;"
cellpadding="2" cellspacing="2">
<tbody style="border-style: groove;">
<tr>
<td style="vertical-align: middle; text-align: center;"><a
href="contact.html">Contact</a> 
</td>
<td style="vertical-align: middle; text-align: center;"><a
href="TARIF.html">Tarif</a> 
</td>
<td style="vertical-align: middle; text-align: center;">Massage et autisme 
</td>
<td style="vertical-align: middle; text-align: center;"><a
href="index.html">Accueil</a> 
</td>
</tr>
</tbody>
</table>
 
</div>
</body>
</html>

Message par **chinon37** » 15 mai 2012, 11:43

Bonjour,

La mise en page du site se déplace car elle s'adapte à la largeur de l'écran, ce qui, évidemment, amène des affichages bizarres.

Une solution consiste à donner une largeur fixe au contenu, si possible centré sur l'écran et à combler les côtés avec une couleur de fond ou une image de fond.
Une autre solution consiste à mettre des blocs côte à côte, avec un bloc central contenant le texte qui s'adapte à la largeur, et des blocs latéraux à largeur fixe.

De plus, le menu est positionnées en absolu (en fixe sur l'écran), c'est à dire qu'il ne se place pas en fonction du reste du site, il n'est pas dans le flux, ce qui est un problème. Il faut le replacer à droite en le sélectionnant et en cliquant sur l’icône en forme de punaise en haut à droite de l'écran.

FranckDum · Message par **FranckDum** » 15 mai 2012, 18:08

Bonjour,

Merci de m'avoir répondu

"Une solution consiste à donner une largeur fixe au contenu, si possible centré sur l'écran et à combler les côtés avec une couleur de fond ou une image de fond."

Comment je fais ? Je sélectionne tout et ensuite je vais Style interne>boite>et je met en position fixe ?

Et comment ne plus avoir le menu en absolu ?

Merci

Message par **chinon37** » 16 mai 2012, 09:19

Pour ne plus avoir le menu en absolu, tu as l'explication dans mon message.

Pour avoir une largeur fixe, il suffit par exemple de donner une largeur en pixel à la balise <body> et pour centrer cette page à l'écran, de définir les marges droite et gauche en "auto"

Je vais donner une méthode simple, mais qui méritera d'être affinée par la suite:
pour la page fixe et centrée:
- Dans la barre de tâches (en bas de l'écran de KompoZer), faire un clic droit sur <body>, puis "styles internes"
- onglet boite > largeur: 1000px > marges droite: auto et gauche auto
Pour le menu:
- dans la barre des tâches clic droit sur <div#menu>, puis styles internes
- onglet boite > position: choisir "non définie" et marges > haut > 160 px

NB:
- Bien sûr les valeurs de largeur ou de marges sont arbitraires et peuvent être modifiées en fonction de ce que l'on souhaite.
- Plutôt qu'utiliser des styles internes, il serait souhaitable de faire une feuille de style css indépendante.
- il est toujours déconseillé d'importer du texte directement de word, car cela importe des balises de styles inutiles et qui pevent perturber la mise en forme ou les modifications futures. Il faut apporter du texte brut et le mettre en forme avec KompoZer. la trace de word est détectable par la présence des "Mso normal" dans le code...

FranckDum · Message par **FranckDum** » 16 mai 2012, 16:40

Merci pour tes ces réponses.

Il me reste à vérifier sur un autre écran que le mien.

Franck

infomamy · Message par **infomamy** » 16 mai 2012, 22:15

- Il faut apporter du texte brut et le mettre en forme avec KompoZer. .

Bonjour Chinon
Je me permets d'ajouter que le texte brut peut être copié de n'importe quelle source si l'on utilise la commande "Coller sans mise en forme". Dans Word, dans ce cas, les balises "Mso normal" ne sont pas incluses dans le code.
Bonne soirée

FranckDum · Message par **FranckDum** » 18 mai 2012, 14:53

Merci Infomamy j'ai pu rectifier également.

Geckozone

Mes images et mon texte ne sont pas fixes

Mes images et mon texte ne sont pas fixes

Re: Mes images et mon texte ne sont pas fixes

Re: Mes images et mon texte ne sont pas fixes

Re: Mes images et mon texte ne sont pas fixes

Re: Mes images et mon texte ne sont pas fixes

Re: Mes images et mon texte ne sont pas fixes

Re: Mes images et mon texte ne sont pas fixes

Qui est en ligne ?