Différence entre la création et l'aperçu dans le navigateur

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateurs : chinon37, Kazé, Ymai, bobo

Drallag
Arias
Messages : 9
Inscription : 07 août 2013, 10:20
Localisation : Anjou

Différence entre la création et l'aperçu dans le navigateur

Message par Drallag » 07 août 2013, 10:51

Bonjour,

D'abord, je précise que je débute sur le logiciel et que je n'y connais rien en html...

Mon problème, c'est que j'ai construit ça :
Image

En aperçu, j'ai ça :
Image

Mes textes sont tous décalés...

Ci-dessous le code...

Code : Tout sélectionner

<html style="direction: ltr;" lang="fr-fr">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Accueil</title>
<meta content="JGa" name="author">
<meta content="Page d'accueil" name="description">
</head>
<body
style="margin-left: 0px; width: 950px; height: 568px; color: rgb(253, 253, 253); background-color: rgb(0, 0, 0); background-image: url(file:///C:/Users/JGALLARD.FA2012/Documents/Rando/Fond%20site.jpg); background-repeat: no-repeat; background-position: center top;"
alink="#c0c0c0" link="#c0c0c0" vlink="#990000">
<table
style="text-align: left; height: 742px; width: 949px; margin-left: 174px;"
border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="height: 75px; width: 256px;"><br>
</td>
<td
style="height: 75px; font-family: Showcard Gothic; color: rgb(255, 255, 255); width: 673px;"><big><big><big><big><big>au
Clair Du Layon</big></big></big></big></big></td>
</tr>
<tr>
<td style="height: 65px; width: 256px;"><br>
</td>
<td style="height: 65px; text-align: center; width: 673px;"><big
style="color: rgb(255, 255, 255);"><big><big><span
style="font-family: Showcard Gothic; font-weight: bold;">RANDONNEE
GOURMANDE ET ANIMEE</span></big></big></big></td>
</tr>
<tr>
<td style="height: 408px; width: 256px;"><br>
</td>
<td style="height: 408px; width: 673px;">
<table style="text-align: left; height: 401px; width: 671px;"
border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="height: 87px; width: 231px;"><br>
</td>
<td style="height: 87px; width: 63px;"><br>
</td>
<td style="height: 87px; width: 63px;"><big
style="color: rgb(255, 255, 255);"><span
style="font-family: Showcard Gothic;"><br>
</span></big></td>
<td style="width: 40px;"><br>
</td>
<td style="height: 87px; width: 38px;"><br>
</td>
<td style="height: 87px; width: 103px;"><br>
</td>
<td style="height: 87px; width: 79px;"><br>
</td>
</tr>
<tr>
<td style="height: 34px; width: 231px;"><br>
</td>
<td style="height: 34px; width: 63px;"><br>
</td>
<td style="height: 34px; width: 63px;" colspan="4"
rowspan="1"><big style="color: rgb(255, 255, 255);"><span
style="font-family: Showcard Gothic;">RANDONNEE 2013</span></big></td>
<td style="height: 34px; width: 79px;"><br>
</td>
</tr>
<tr>
<td style="height: 66px; width: 231px;"><br>
</td>
<td style="height: 66px; width: 63px;"><br>
</td>
<td style="height: 66px; width: 63px;"><big
style="color: rgb(255, 255, 255);"><span
style="font-family: Showcard Gothic;"></span></big><br>
</td>
<td style="width: 40px;"><br>
</td>
<td style="height: 66px; width: 38px;"><br>
</td>
<td style="height: 66px; width: 103px;"><br>
</td>
<td style="height: 66px; width: 79px;"><br>
</td>
</tr>
<tr>
<td style="height: 60px; width: 231px;"><br>
</td>
<td colspan="2" rowspan="1"
style="height: 60px; width: 63px;"><big
style="color: rgb(255, 255, 255);"><span
style="font-family: Showcard Gothic;">meDIATHEQUE</span></big></td>
<td style="width: 40px;"><br>
</td>
<td style="height: 60px; width: 38px;"><br>
</td>
<td style="height: 60px; width: 103px;"><br>
</td>
<td style="height: 60px; width: 79px;"><br>
</td>
</tr>
<tr>
<td style="height: 53px; width: 231px;"><br>
</td>
<td style="height: 53px; width: 63px;"><br>
</td>
<td style="height: 53px; width: 63px;"><br>
</td>
<td style="height: 53px; width: 40px;"><br>
</td>
<td style="height: 53px; width: 38px;"><br>
</td>
<td style="height: 53px; width: 103px;" colspan="2"
rowspan="1"><big style="color: rgb(255, 255, 255);"><span
style="font-family: Showcard Gothic;">rEMERCIEMENTS</span></big></td>
</tr>
<tr>
<td style="height: 27px; width: 231px;"><br>
</td>
<td style="height: 27px; width: 63px;"><br>
</td>
<td style="height: 27px; width: 63px;"><big
style="color: rgb(255, 255, 255);"><span
style="font-family: Showcard Gothic;"></span></big><br>
</td>
<td style="height: 27px; width: 40px;"><br>
</td>
<td style="height: 27px; width: 38px;"><br>
</td>
<td style="height: 27px; width: 103px;"><br>
</td>
<td style="height: 27px; width: 79px;"><big
style="color: rgb(255, 255, 255);"><span
style="font-family: Showcard Gothic;"><br>
</span></big></td>
</tr>
<tr>
<td style="height: 73px; width: 231px;"><br>
</td>
<td style="height: 73px; width: 63px;"><br>
</td>
<td style="height: 73px; width: 63px;"><big
style="color: rgb(255, 255, 255);"><span
style="font-family: Showcard Gothic;"><br>
</span></big></td>
<td colspan="3" rowspan="1" style="width: 40px;"><big
style="color: rgb(255, 255, 255);"><span
style="font-family: Showcard Gothic;">CONTACTS</span></big></td>
<td style="height: 73px; width: 79px;"><br>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="height: 94px; width: 256px;"><br>
</td>
<td style="height: 94px; width: 673px;"><br>
</td>
</tr>
<tr>
<td style="height: 28px; width: 256px;"><br>
</td>
<td style="height: 28px; width: 673px;"><br>
</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>
Merci pour votre aide !
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36
Drallag
En Mâchellie...

Sous Windows7/Google Chrome

Avatar de l’utilisateur
GAUNCE
Iguane
Messages : 631
Inscription : 19 déc. 2004, 00:48
Localisation : Landes
Contact :

Re: Différence entre la création et l'aperçu dans le navigat

Message par GAUNCE » 07 août 2013, 12:42

Bonjour,
Ton site fait en tableau, à l'heure du HTML 5, est d'une autre époque! le code est de surcroît hyper lourd, pas de feuille de style, pas de Doc type ce qui suppose que la page n'a pas été créé avec Kompozer!
Alors un excellent conseil: Recommence tout! et encore un autre tout aussi excellent, sers toi des tutos qui sont mis à disposition pour bien appréhender la mise en chantier d'un site web.
http://josar.free.fr/ et l'incontournable de notre professeur préféré ( le matin à jeun seuleument!) :lol: http://info.sio2.be/kpz/
Allez du courage, beaucoup (dont moi) sont passés par là!
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; rv:22.0) Gecko/20100101 Firefox/22.0
Ma configuration
Si tu es dans l'obscurité, viens sur ce forum pour t'éclairer (proverbe Landais)
" La libertat qu'ei lo camin "

Drallag
Arias
Messages : 9
Inscription : 07 août 2013, 10:20
Localisation : Anjou

Re: Différence entre la création et l'aperçu dans le navigat

Message par Drallag » 07 août 2013, 14:13

OK j'ai compris qu'il s'est passé un peu de temps depuis mon dernier site créé...

Par contre: Je peux encore me passer du langage html pour faire un site ?

Le tuto que tu me mets en lien, je l'ai déjà suivi... Ok pour faire une site basique mais si j'essayais de faire quelque chose de plus évolué.

Bon, je "suppr" et je repars de zéro différemment.

Merci pour le "soutien" ! :D
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36
Drallag
En Mâchellie...

Sous Windows7/Google Chrome

Avatar de l’utilisateur
GAUNCE
Iguane
Messages : 631
Inscription : 19 déc. 2004, 00:48
Localisation : Landes
Contact :

Re: Différence entre la création et l'aperçu dans le navigat

Message par GAUNCE » 07 août 2013, 16:08

En PHP, mais si déjà tu connais rien au HTML ???
Apprends donc avec Kompozer a créer un site en HTML 4.1 et il sera bien "évolué", avec feuille de style etc ...
En clair commence à apprendre l'alphabet à la lettre A, c'est plus long mais au bout est le bonheur! ...
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; rv:22.0) Gecko/20100101 Firefox/22.0
Ma configuration
Si tu es dans l'obscurité, viens sur ce forum pour t'éclairer (proverbe Landais)
" La libertat qu'ei lo camin "

Avatar de l’utilisateur
chinon37
Animal mythique
Messages : 5317
Inscription : 21 mars 2005, 10:17
Localisation : Touraine, entre Loire et Vienne
Contact :

Re: Différence entre la création et l'aperçu dans le navigat

Message par chinon37 » 07 août 2013, 21:46

Bonjour,

J'abonde totalement dans le sens de Gaunce: Il faut tout reprendre de 0. Ensuite, tu peux faire un site très sympa rien qu'en html et css. Tout dépend après du design que tu choisiras de lui donner. le css permet des tas de choses en matière de design, ... sans techniques sophistiquées.
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/20100101 Firefox/23.0
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.

atheo
Lézard vert
Messages : 178
Inscription : 03 févr. 2010, 15:45
Localisation : ardennes france

Re: Différence entre la création et l'aperçu dans le navigat

Message par atheo » 08 août 2013, 08:18

Voir aussi ce site plein d'infos : http://www.alsacreations.com/

Et bon courage !
Votre Navigateur : Mozilla/5.0 (Windows NT 5.1; rv:22.0) Gecko/20100101 Firefox/22.0

Avatar de l’utilisateur
Ymai
Tyrannosaurus Rex
Messages : 4212
Inscription : 12 mars 2005, 11:36
Localisation : Brüsel - Les Cités Obscures
Contact :

Re: Différence entre la création et l'aperçu dans le navigat

Message par Ymai » 11 août 2013, 04:22

GAUNCE a écrit :Bonjour,
Ton site fait en tableau, à l'heure du HTML 5, est d'une autre époque! le code est de surcroît hyper lourd, pas de feuille de style, pas de Doc type ce qui suppose que la page n'a pas été créé avec Kompozer!
Je ne mettrais ps la bonne foi de notre invité(e) en doute sur ce point: un certain nombre de "signatures" de Kompozer sont bien présentes.
GAUNCE a écrit :] l'incontournable de notre professeur préféré ( le matin à jeun seuleument!)
et de plus en plus sentencieux avec les ans qui passent. Toutes ces liqueurs élaborées avec savoir se dégustent avec sagesse. La convivialité que j'appelle souvent de mes vœux, éventuellement autour d'une décoction maltée ou à base de quelques grappes, ne se rencontre jamais dans les excès dont on semble vouloir me charger.

Et de terminer cette intervention en abondant dans le sens de tout ce qui a été dit. KompoZer est comme une auto-école. On y apprend plein de choses (y compris moi-même), mais la vraie vie commence ensuite, quand on en abandonne petit à petit les clefs, muni de ce que l'on y a appris.
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:23.0) Gecko/20100101 Firefox/23.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.

Drallag
Arias
Messages : 9
Inscription : 07 août 2013, 10:20
Localisation : Anjou

Re: Différence entre la création et l'aperçu dans le navigat

Message par Drallag » 11 août 2013, 10:33

Bonjour à tous

Merci pour votre aide... Je vous sollicite encore...

Je suis donc reparti de 0 en m'essayant au xhtml et au css...

J'ai écrit le code suivant :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Au Clair du Layon - Randonnée nocturne</title>
<style type="text/css">
body {background-image: url(Images/Fond%20site.jpg);
      font-family: Showcard Gothic;
      color: white;
      background-color: black;
      background-position: center top;
      background-repeat: no-repeat;}
</style>
</head>
<body
<p
style ="font-weight: bold; text-align: right; font-size: 72px; margin-top: 0px; margin-left: 14px;">au
clair du layon</p>
<p 
style="font-weight: bold; font-family: Showcard Gothic; font-size: 26px; text-align: right;">randonnée
nocturne et gourmande</p>
</body>
</html>
qui donne ça : http://auclairdulayon.free.fr

Mon problème c'est que j'aimerai rapprocher le second titre du premier et l'aligner à droite également...
Je n'arrive pas à trouver la solution à mon problème...

Qu'est-ce que je n'ai pas fait ?
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36
Drallag
En Mâchellie...

Sous Windows7/Google Chrome

Avatar de l’utilisateur
Ymai
Tyrannosaurus Rex
Messages : 4212
Inscription : 12 mars 2005, 11:36
Localisation : Brüsel - Les Cités Obscures
Contact :

Re: Différence entre la création et l'aperçu dans le navigat

Message par Ymai » 11 août 2013, 11:21

Bonjour
Pour la question du rapprochement des deux paragraphes, il suffirait de définir *toutes* les marges du premier paragraphe à 0px. Donc, au lieu de margin-top:0px, écrire margin:0px.
Quant à la question de l'alignement à droite du deuxième paragraphe, il faut prendre conscience que celui-ci est bloqué à la largeur définie dans le style du <body>, soit 696px. Il ne peut pas se mettre plus à droite que cela puisqu'il se trouve dans une boîte de cette taille. Si l'on monte à 900px (par exemple), c'est déjà mieux.

Ceci dit, ces deux petites corrections ne vont pas résoudre le fond du problème et d'autres soucis risquent de se présenter lorsque du texte sera ajouté.
Je conseillerais volontiers d'étudier un peu plus avant la mise en forme à l'aide de CSS et des feuilles de styles plutôt que la mise en forme à l'intérieur des balises html.
D'autre part, les deux éléments qui figurent déjà sur la page sont-ils des "paragraphes" (balise <p>) ou des "titres" (balises <hx>)? Je parierais pour un titre de niveau 1 (<h1>) puis pour un titre de niveau 2 (<h2>).
Quand cette structure est définie (y compris pour les autres éléments de la page, avec sans doute d'autres titres et des paragraphes et... et...), voir la question de la mise en forme avec une feuille de styles.
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:23.0) Gecko/20100101 Firefox/23.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.

Avatar de l’utilisateur
GAUNCE
Iguane
Messages : 631
Inscription : 19 déc. 2004, 00:48
Localisation : Landes
Contact :

Re: Différence entre la création et l'aperçu dans le navigat

Message par GAUNCE » 11 août 2013, 12:52

Ymai a écrit : et de plus en plus sentencieux avec les ans qui passent. Toutes ces liqueurs élaborées avec savoir se dégustent avec sagesse. La convivialité que j'appelle souvent de mes vœux, éventuellement autour d'une décoction maltée ou à base de quelques grappes, ne se rencontre jamais dans les excès dont on semble vouloir me charger.

Et de terminer cette intervention en abondant dans le sens de tout ce qui a été dit. KompoZer est comme une auto-école. On y apprend plein de choses (y compris moi-même), mais la vraie vie commence ensuite, quand on en abandonne petit à petit les clefs, muni de ce que l'on y a appris.
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:23.0) Gecko/20100101 Firefox/23.0
Ainsi parla le sage, hugh j'ai dit !
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; rv:23.0) Gecko/20100101 Firefox/23.0
Ma configuration
Si tu es dans l'obscurité, viens sur ce forum pour t'éclairer (proverbe Landais)
" La libertat qu'ei lo camin "

Drallag
Arias
Messages : 9
Inscription : 07 août 2013, 10:20
Localisation : Anjou

Re: Différence entre la création et l'aperçu dans le navigat

Message par Drallag » 11 août 2013, 13:00

Merci pour l'aide...

En ce qui concerne la feuille de style, j'ai bien compris c'est le mieux à faire...
Par contre, je n'ai pas d'idée bien précise des styles qui vont être communs à mon site pour le moment.

Du coup, je pars sur la page d'accueil en formatant le style par balise et je repasserai dessus en créant la fameuse feuille de style.

Pour les titres, il faut que je change ça et surtout que je passe un peu de temps à paramétrer la taille de mes différents niveaux.
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36
Drallag
En Mâchellie...

Sous Windows7/Google Chrome

Drallag
Arias
Messages : 9
Inscription : 07 août 2013, 10:20
Localisation : Anjou

Re: Différence entre la création et l'aperçu dans le navigat

Message par Drallag » 11 août 2013, 13:06

Ymai a écrit : Quant à la question de l'alignement à droite du deuxième paragraphe, il faut prendre conscience que celui-ci est bloqué à la largeur définie dans le style du <body>, soit 696px. Il ne peut pas se mettre plus à droite que cela puisqu'il se trouve dans une boîte de cette taille. Si l'on monte à 900px (par exemple), c'est déjà mieux.
Comment vois-tu que la largeur est à 696 ? Ce paramêtre n'apparaît pas clairement dans mon code...
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36
Drallag
En Mâchellie...

Sous Windows7/Google Chrome

Avatar de l’utilisateur
Ymai
Tyrannosaurus Rex
Messages : 4212
Inscription : 12 mars 2005, 11:36
Localisation : Brüsel - Les Cités Obscures
Contact :

Re: Différence entre la création et l'aperçu dans le navigat

Message par Ymai » 11 août 2013, 14:26

Si, si... Sur la version en ligne, on voit que

Code : Tout sélectionner

background-image: url(Images/Fond%20site.jpg); color: white; background-color: black; font-family: Showcard Gothic; background-position: center top; background-repeat: no-repeat; height: 67px; margin-left: 450px; width: 696px;
voir la dernière directive du code.
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:23.0) Gecko/20100101 Firefox/23.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.

Drallag
Arias
Messages : 9
Inscription : 07 août 2013, 10:20
Localisation : Anjou

Re: Différence entre la création et l'aperçu dans le navigat

Message par Drallag » 11 août 2013, 16:29

OK.
Je l'avais déjà enlevé...
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36
Drallag
En Mâchellie...

Sous Windows7/Google Chrome

Drallag
Arias
Messages : 9
Inscription : 07 août 2013, 10:20
Localisation : Anjou

Re: Différence entre la création et l'aperçu dans le navigat

Message par Drallag » 11 août 2013, 20:11

Bon, J'ai passé l'après-midi à ... ne pas vraiment évoluer. (on ne se moque pas !!!!)
Mon site a toujours le même aspect mais le code est plus simple /

J'ai créé ma feuille de style !
J'ai modifié la page d'accueil pour la prendre en compte.

Ca fait maintenant 2 heures que j'essaie de mettre "Edition 2013" au milieu de l'arbre.
Après avoir lu une bonne demie-douzaine de page web sur le sujet, je n'arrive pas à comprendre le positionnement...

Est-ce si compliqué ou ai-je le cerveau en marmelade après mes 5 heures de xhtml et de css ?

Le site actuel : http://auclairdulayon.free.fr

La page de code :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Au Clair du Layon - Randonnée nocturne</title>
<style type="text/css">
body {background-image: url(Images/Fond%20site.jpg);
      background-position: center top;
      background-repeat: no-repeat;}
</style>
<link href="style.css" rel="stylesheet" media="all" type="text/css">
</head>
<body>
<h1
style ="text-align: right; margin: 0px;">au clair du layon</h1>
<h2 
style="text-align: right;">randonnée nocturne et gourmande</h2>
<h3 
{position: absolute;
 top: 50em;
 left: 50em;}
>Edition 2013</h3>
</body>
</html>
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36
Drallag
En Mâchellie...

Sous Windows7/Google Chrome

Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités