Interface KompoZer

Breat · Message par **Breat** » 18 oct. 2008, 16:28

salut, j'aimerai savoir s'il était possible de modifier la façon dont nous montre le contenu de l'onglet sources dans KompoZer?

Je m'explique une fois que l'on a tapé son code et que l'on va dans aperçu il met tout le code d'un bloc et ça deviens très vite illisible, donc j'aimerai savoir si on pouvait le forcer à garder le code tel qu'il est?

merci d'avance?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 18 oct. 2008, 20:35

Non,... mais il y a tidy pour avoir toujours la même présentation

Lis cette conversation:
http://www.geckozone.org/forum/viewtopi ... 756#479756

Breat · Message par **Breat** » 18 oct. 2008, 20:59

oui je l'ai installé mais ça reviens toujours en bloc

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 18 oct. 2008, 22:04

L'installer n'est pas suffisant, il faut s'en servir !

Cherche sur le forum pour règler Kompozer et tidy. Cela doit être aussi dans le tuto à la bière belge, ou dans les post-it du forum!

Breat · Message par **Breat** » 18 oct. 2008, 22:21

ok merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Mongo Bob · Message par **Mongo Bob** » 18 oct. 2008, 23:23

Tidy n'influe pas sur l'indentation du code tel que vu dans l'onglet Source, ça reste toujours un gros pâté illisible, c'est dans l'éditeur texte éventuellement installé avec Handcoder et dans l'aperçu Source du navigateur que le code se retrouve bien propre. La page web envoyée en ligne est nettoyée, et c'est bien le principal!
Je ne comprends pas comment fonctionne l'onglet Source de Kpz, ni à quoi il sert étant donné la soupe de code qu'il offre à mes yeux fatigués.

Breat · Message par **Breat** » 18 oct. 2008, 23:35

disons que moi je débute en html et css alors quand j'ai un gros pavé de charabia et qu'en plus il n'arrive pas à prendre mes images pour les mettre en fond de page ou même qu'il n'arrive pas à associé mon css pendant que je bosse sur l'html, ça me motive pas tellement et je trouve cela dommage car sinon c'est un très bon soft

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Mongo Bob · Message par **Mongo Bob** » 18 oct. 2008, 23:43

mais ne te sers pas de l'onglet Source de Kpz! Il sert à rien! Je crois que même le développeur de Kpz, Kaze, voulait le supprimer, ou au moins interdire toute modification là-dedans, source de problème.
Il te suffit de voir ton code nettoyé dans ton éditeur-texte! C'est pas le cas?
f6+f7 pour passer dans l'éditeur-texte (Tidy+Editeur).

Mongo Bob · Message par **Mongo Bob** » 18 oct. 2008, 23:47

Breat a écrit :il n'arrive pas à prendre mes images pour les mettre en fond de page

les raisons pour lesquelles tu n'arrives pas à le faire se trouvent dans ta fameuse soupe de code!

As-tu essayé de mettre une image de fond du <body> dans un nouveau document tout vierge? Ca marcherait pas? M'étonnerait!

Breat · Message par **Breat** » 18 oct. 2008, 23:52

oui oui on a tout essayé avec d'autres du forum, je suis même passé à la version installé au cas ou mais rien il à fallut que je passe par Notepad++ et même après il ne l'affiche pas, alors que si j'insère une image comme ça (pas une de fond) là ça marche du 1er coup

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Mongo Bob · Message par **Mongo Bob** » 19 oct. 2008, 00:00

Tu peux la mettre en ligne ton image de fond? A côté de ta page index, telle quelle?

Breat · Message par **Breat** » 19 oct. 2008, 00:16

Mon image de fond:

URL de test: http://breat.free.fr

Ma page index:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
       <title>Accueil</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <meta name="verify-v1" content="cV0zyhptsCdu+jLCH14gvElC2CMlDHy5TGES0G3U2WM=" />
	   <link rel name="Shortcut Icon" href="http://breatsite.fr/images/favicon.ico" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Bleu" href="bleu.css" />
	   <link rel="alternate stylesheet" media="screen" type="text/css" title="Rouge" href="rouge.css" />
	   <link rel="alternate stylesheet" media="screen" type="text/css" title="Bleu Animé" href="bleue_anime.css" />
	   <link rel="alternate stylesheet" media="screen" type="text/css" title="Rouge Animé" href="rouge_anime.css" />
</head>

<body>

		<div id="en_tete">
		</div>
 
	<div id="menu"><!-- Cadre englobant tous les sous-menus (en bleu marine sur le schéma) -->
 
		<div class="menu_g"> <!-- Cadre correspondant au sous-menu  1 -->
			<h3>Jeux par Navigateur</h3> <!-- Titre du sous-menu -->
			<ul>
				<li><a href="actualités.html">Actualités</a></li> <!-- Liste des liens du sous-menu -->
				<li><a href="jeux.html">Jeux</a></li>
				<li><a href="améliorations.html">Améliorations en ligne</a></li>
				<li><a href="skins.html">Skins des Jeux</a></li>
				<li><a href="utilitaires.html">Utilitaires</a></li>		   
			</ul>
		</div>

		<div class="menu_g"> <!-- Cadre correspondant au sous-menu  2 -->
			<h3>Informations</h3> <!-- Titre du sous-menu -->
			<ul>
				<li><a href="cv.html">Mon CV</a></li> <!-- Liste des liens du sous-menu -->
				<li><a href="offres.html">Offres Commerciales</a></li>
				<li><a href="partenariat.html">Partenariat</a></li>
				<li><a href="sites.html">Sites Propriétaires</a></li>
				<li><a href="generateurs.html">Générateurs</a></li>		   
			</ul>
		</div>

		<div class="menu_g"> <!-- Cadre correspondant au sous-menu  3 -->
			<h3>Téléchargements</h3> <!-- Titre du sous-menu -->
			<ul>
				<li><a href="logiciels.html">Logiciels Gratuits</a></li> <!-- Liste des liens du sous-menu -->
				<li><a href="extensions.html">Mozilla Firefox Extensions</a></li>
			</ul>
		</div>

		<div class="menu_g"> <!-- Cadre correspondant au sous-menu  4 -->
			<h3>Contact</h3> <!-- Titre du sous-menu -->
			<ul>
				<li><a href="chat.html">Chat</a></li> <!-- Liste des liens du sous-menu -->
				<li><a href="forum/index.php">Forum</a></li>
				<li><a href="countus.html">Statistiques CountUs</a></li>
				<li><a href="contact.html">Contact</a></li>		   
			</ul>
		</div>
	</div>
	
	<div id="pub">
		<div class="menu_d"> <!-- Cadre correspondant au sous-menu  1 -->
		<!-- Mes pubs -->
		</div>
	</div>
   
 
	<div id="corps">
   <h1>Accueil</h1>
 
   <p>
       <h2>Bienvenue sur Breat's Site!</h2><br />
       Je suis Breat étudiant en Informatique et membre de divers Jeux par Navigateur.<br />
	   J'ai fait ce site pour faire connaitre au plus nombreux les merveilles d'internet et des jeux qui s'y situent.
   </p>
    
   <p>
       J'ai également créé jusqu'à maintenant 3 skins: 2 pour OGame et 1 pour  SpeedSim (un utilitaire qui permet de faire de la Simulation de combat pour OGame). Pour avoir un aperçu de mon skin pour OGame "Celestis" veuillez cliquez ici et pour un aperçu de mon second skin "Samourai" c'est ici.<br />
	   Aimant les jeux vidéo j'ai également mis en place une page dédiée à l'actualité des jeux vidéo et des patchs dans la section Actualités.
   </p>
      
   <p>
       J'aime particuliairement bien les chanteuses de J-Pop (diminutif de "Pop Japonaise"), donc si vous désirer découvrir ce style de musique en image, rendez-vous sur mon profil  MEGAVIDEO (similaire à YouTube), ici même ou sur le forum, n'hésitez pas à donner votre avis.<br />
	   Breat's Site à fait l'acquisition d'un forum, vous permettant ainsi par exemple de me demander de l'aide en informatique et de parler du site en lui même, de donner vos avis et suggestions ou de parler de ce que vous voulez et bien entendu de visionner et télécharger les vidéos directement depuis celui-ci.
   </p>
    
	<p>
	   Afin de vous permettre de visualiser toutes les vidéos et animations de mon site et de mon forum vous aurez besoin des plugins Adobe Flash Player et DivX Web Player.<br />
       N'oubliez pas de noter mon site dans le CountUs ci-dessous.
	</p>   
   
		</div>
 
		<div id="pied_de_page">
   <p>© 2008 Breat’s Site - www.breatsite.fr - Design : Breat</p>
		</div>

   </body>
</html>

Mon CSS:

Code : Tout sélectionner

/*
Design Bleu de  Breat's Site
Réalisé par Breat
<lien url="http://breatsite.fr">http://breatsite.fr</lien>
*/


/*-------------*/
/* Le fond */
/*----------*/

body
{
   width: 760px;
   margin: auto; /* Pour centrer notre page */
   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
   background-image: url("images/fond.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
}

/*---------------*/
/* L'en-tête */
/*-----------*/

#en_tete
{
   width: 755px;
   height: 91px;
   background-image: url("images/bann_bleue.png");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}


/*-----------------------*/
/* Le menu  gauche*/
/*--------------------*/

#menu
{
   float: left; /* Le menu flottera à gauche */
   width: 120px; /* Très important : donner une taille au menu */
}

.menu_g
{
   border: 0px;
   
   margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}


/*-----------------------------------------------------*/
/* Quelques effets sur les menus gauches */
/*--------------------------------------------------*/

.menu_g h3 /* Tous les titres de menus */
{    
   background-image: url("images/menu.png");
   margin-left: -30px;
   font-family: Arial, "Arial Black", Helvetica, "Times New Roman", Times, Verdana, serif, sans-serif;
   text-align: center;
   font-style: bold;
   font-size: small;
   color: #FF0000;
}

.menu_g ul /* Toutes les listes à puces se trouvant dans un menu */
{
   list-style-image: url("images/puce.png"); /* On change l'apparence des puces */
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-left: 5px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
   font-size: small;
}

.menu_g a /* Tous les liens se trouvant dans un menu */
{
   color: #B3B3B3;
}

.menu_g a:hover /* Quand on pointe sur un lien du menu */
{
   background-color: #B3B3B3;
   color: #000000;
}


/*---------------------------*/
/*-- Le menu  droite --*/
/*-----------------------*/

#pub
{
   float: right; /* Le menu flottera à droite */
   width: 120px; /* Très important : donner une taille au menu */
}

.menu_d
{
   border: 0px;
   
   margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

/*--------------------------------------------------*/
/* Quelques effets sur les menus droits */
/*-----------------------------------------------*/

.menu_d h3 /* Tous les titres de menus */
{    
   background-image: url("images/menu.png");
   font-family: Arial, "Arial Black", Helvetica, "Times New Roman", Times, Verdana, serif, sans-serif;
   text-align: center;
}

.menu_d ul /* Toutes les listes à puces se trouvant dans un menu */
{
   list-style-image: url("images/puce.png"); /* On change l'apparence des puces */
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-right: 5px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

.menu_d a /* Tous les liens se trouvant dans un menu */
{
   color: #B3B3B3;
}

.menu_d a:hover /* Quand on pointe sur un lien du menu */
{
   background-color: #B3B3B3;
   color: #000000;
}

/*----------------------------*/
/* Le corps de la page */
/*------------------------*/

#corps
{
   margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   
   color: #000000;
   background-image: url("images/fond.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
   background-repeat: repeat;   /* Pour que l'image se répète à l'infini */
   
   border: 0px; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}

#corps h1 /* Tous les titres h1 du corps */
{
   color: #FF0000;
   text-align: right;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   font-size: large; 
   text-decoration: underline;
}

#corps h2 /* Tous les titres h2 du corps */
{
   height: 30px;

   background-image: url("images/titre.png"); /* Une petite image de fond sur les titres h2 */
   background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
   
   padding-left: 30px;
   color: #FF0000;
   text-align: center;
   }


/*-----------------------*/
/* Le pied de page */
/*--------------------*/

#pied_de_page
{
   padding: 5px;

   text-align: center;

   color: #B3B3B3;
   
   border: 0px;
}

va à l'adresse indiqué ci-dessus et tu verras le résultat tout est en ligne.

d'ailleurs j'ai un soucis avec le fond. par contre dans KompoZer j'ai aucune images

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Mongo Bob · Message par **Mongo Bob** » 19 oct. 2008, 00:28

Autrement dit, quand je t'accusais de faire de la soupe de code, c'était parce que je regardais ton vieux site! Tu pouvais pas me détromper?
Le code que tu me files là est nettement plus humain! C'est toi qui l'as fait tout seul?
Bon. Je t'avais pas dit de pas mettre de guillemets :

Code : Tout sélectionner

background-image: url("images/fond.png");

tu peux essayer sans :

Code : Tout sélectionner

background-image: url(images/fond.png);

(on recommence tout, quoi)
il manque les propriétés pour la position de l'image et si elle doit défiler ou pas et je sais plus quoi d'autre...

Breat · Message par **Breat** » 19 oct. 2008, 00:44

relie plus haut je te l'ai dit que tu regardait mon ancien site

j'essaie sans les guillemets mais dans le tuto sur le siteduzero ils y sont

edit: avec ou sans ça change rien, sinon en plus de ça tu sais quoi faire pour mon menu à gauche pour que les images rouges soient bien à leurs placent contrairement à maintenant et aussi pour le globe je voudrait qu'il soit proche du Bienvenue...

c'est du repeat que tu me parle, car ça change rien j'ai déjà essayé:

Code : Tout sélectionner

/*-------------*/
/* Le fond */
/*----------*/

body
{
   width: 760px;
   margin: auto; /* Pour centrer notre page */
   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
   background-image: url(images/fond.png); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
   background-repeat: repeat-y;
}

tu vois les barres grises de mon fonds en fait il y en a 2 et normalement chacune d'elles colle le site en lui même de chaque côté en faisant en sorte que le gris se propage sur le reste des marges de gauches et droite, mais je ne sais pas comment faire, tu peux- m'aidez à taper cette partie?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Mongo Bob · Message par **Mongo Bob** » 19 oct. 2008, 12:46

Breat a écrit :relie plus haut je te l'ai dit que tu regardait mon ancien site

plus haut où? le mystère de l'ancien site restera secondaire...

Breat a écrit :j'essaie sans les guillemets mais dans le tuto sur le siteduzero ils y sont

en effet, les guillemets, que ce soit pour une adresse absolue ou relative sont indifférents, je savais pas. Ca doit marcher avec ou sans. Ben, tu vois, tu m'as appris quelquechose, c'est pour ça que je viens ici!

Breat a écrit :sinon en plus de ça tu sais quoi faire pour mon menu à gauche pour que les images rouges soient bien à leurs placent contrairement à maintenant et aussi pour le globe je voudrait qu'il soit proche du Bienvenue...

une chose à la fois if you please? Déjà que t'aurais dû créé un topic séparé, y'a des modos, tu sais, parfois ils sont pointilleux. T'aurais même dû crééer un topic "image de fond"...
J'ai repris ta page en html strict et charset ISO-8859-1 pour mon essai... Je crois que tu devrais être en Transitionnel et pas en xhtml strict, ce doctype est un peu difficile pour un débutant.
Sinon, ton image de fond s'affiche très bien mais étant "de fond" elle va rester sous certains éléments, et donc invisible, partiellement. Personnellement, je la vois très bien s'afficher alors que tu me disais qu'elle ne s'affichait pas

. Pas du tout! Si la partie droite reste, partiellement, cachée, du moins dans mon essai, tu n'as plus qu'à jouer sur les dimensions de l'image ou surtout des éléments qui la masquent en partie et aussi des marges de l'un ou des autres.
Voilà ce que j'obtiens, moi, sans toucher aux dimensions, avec :

Code : Tout sélectionner

body {
  margin: 20px auto;
  width: 760px;
  background-image: url(images/fond.png);
  background-repeat: repeat-y;
  background-position:  center center;
}

http://jlwebnet.free.fr/essaibreat.html
à+...
<edit>OK tu parlais d'un problème d'affichage dans Kpz, pas dans le navigateur, tu es avec Firefox et ce qu'affiche FF, Kpz l'affiche aussi, c'est le même moteur de rendu, Kpz est aussi un navigateur. J'affiche la même chose avec Kpz qu'avec FF, je vois le fond du <body> dans les 2. Il reste que dans FF, il ne s'affiche pas comme tu veux, tu voudrais voir le côté droit de la barre?
éventuellement virer margin:auto...</edit>

Geckozone

Interface KompoZer

Interface KompoZer

Qui est en ligne ?