Page 1 sur 2

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

Publié : 07 août 2013, 10:51
par Drallag
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

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

Publié : 07 août 2013, 12:42
par GAUNCE
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

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

Publié : 07 août 2013, 14:13
par Drallag
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

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

Publié : 07 août 2013, 16:08
par GAUNCE
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

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

Publié : 07 août 2013, 21:46
par chinon37
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

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

Publié : 08 août 2013, 08:18
par atheo
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

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

Publié : 11 août 2013, 04:22
par Ymai
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

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

Publié : 11 août 2013, 10:33
par Drallag
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

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

Publié : 11 août 2013, 11:21
par Ymai
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

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

Publié : 11 août 2013, 12:52
par GAUNCE
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

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

Publié : 11 août 2013, 13:00
par Drallag
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

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

Publié : 11 août 2013, 13:06
par Drallag
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

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

Publié : 11 août 2013, 14:26
par Ymai
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

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

Publié : 11 août 2013, 16:29
par Drallag
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

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

Publié : 11 août 2013, 20:11
par Drallag
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