Geckozone

Forums d'assistance et de discussion sur les logiciels produits par Mozilla ou créés à partir des technologies Mozilla. Ce site ne dépend pas de la fondation Mozilla et est maintenu par un collectif de bénévoles.
https://forums.mozfr.org/

tout en 1 fichier css ,html ,js(résolu)

https://forums.mozfr.org/viewtopic.php?t=73134

Page 1 sur 2

tout en 1 fichier css ,html ,js(résolu)

Publié : 15 févr. 2009, 08:59
par bormat
bonjour j'ai un fichier html avec des feuille de style css et des fichier js est il possible de tout mettre dans le même fichier

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Publié : 15 févr. 2009, 09:57
par Fabrice.Tres.Net
Oui.

Mais cela a des avantages et aussi des inconvénients.
Si le css ou le js ne sont pas utilisés dans d'autres pages, c'est alors une bonne solution pour augmenter la vitesse de chargement et la charge réseau.
S'ils sont utilisés dans presque toutes les autres pages.. alors cela va charger le réseau et augmenter le temps de chargement.

Publié : 15 févr. 2009, 11:10
par bormat
c'est juste pour une page
comment dois faire ?


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Publié : 15 févr. 2009, 13:20
par Fabrice.Tres.Net
Il faut coller le code entre les balises javascript et css

Code : Tout sélectionner

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr">
<head>
  <title>MON SITE</title>
   <link href="style/messtyles.css" rel="stylesheet" type="text/css" media="screen" />
  <link href="style/print.css" rel="stylesheet" type="text/css" media="print" />
  <meta name="robots" content="index,follow" />
  <meta name="revisit-after" content="3 days" />
<script type="text/javascript">
//<![CDATA[
   /* ici mes fontions javascript  */
    //]]>
  </script>
  <style media="all" type="text/css">
//<![CDATA[
/* mes autres css */
h1 { color:blue}
    //]]>
  </style>
//<![CDATA[ et //]]> ne sont utiles qu'en xhtml

Publié : 15 févr. 2009, 20:07
par bormat
je n'y arrive pas Image


voici le code originale
ce qui est en bleu est ce que je veux supprimer et integrer directement le code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">


<title>48</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">

<meta name="GENERATOR" content="MSHTML 8.00.6001.18372">

<meta name="GENERATOR" content="MSHTML 8.00.6001.18372">

<link rel="stylesheet" type="text/css" href="marche_fichiers/index.css" media="all">

<style type="text/css">
img.c1 {width: 1364px; height: 840px;}
</style>
</head>


<body>


<script type="text/javascript">
</script>
<script type="text/javascript" src="marche_fichiers/prototype2.js">
</script>
<script type="text/javascript" src="marche_fichiers/dragdrop.js">
</script>
<script type="text/javascript" src="marche_fichiers/builder.js">
</script>
<script type="text/javascript" src="marche_fichiers/dragdrop.js">
</script>
<script type="text/javascript" src="marche_fichiers/cropper.js">
</script>
<script type="text/javascript">
//<![CDATA[
function onEndCrop( coords, dimensions ) {$( 'x1' ).value = coords.x1;$( 'y1' ).value = coords.y1; $( 'x2' ).value = coords.x2;
$( 'y2' ).value = coords.y2;$( 'width' ).value = dimensions.width;$( 'height' ).value = dimensions.height;}// example with a preview of crop results, must have minimumm dimensions
Event.observe(window,'load',function() {new Cropper.ImgWithPreview('Image',{minWidth: 20,minHeight: 20,ratioDim: { }, displayOnInit: true,onEndCrop: onEndCrop,previewWrap: 'previewArea'})});
//]]>
</script>
<div><br>

<div>
<form id="redimadavatar_form" method="post" name="redimadavatar_form" action="http://mon.doctissimo.fr/modificationcompte/avatar">

<input id="y1" value="79" name="y1"><input id="height" name="height"><input id="width" name="width"><input id="x1" value="154" name="x1">http://avatar.doctissimo.fr<input value="/6/7/4/2/862476/" name="url_avatar">TN2_<input value="1176906853.gif" name="url_id_avatar">
<div id="previewArea" class="imgCrop_previewWrap c11"><img id="imgCrop_image2" name="imgCrop_image2" alt="image" src="marche_fichiers/im_1225181347.jpg"><img id="imgCrop_image" class="c10" name="image" alt="" src="marche_fichiers/im_1225181347.jpg"></div>
<input id="x2" value="2174" name="x2" type="hidden"><input id="y2" value="199" name="y2" type="hidden"><input class="submit_button" value="Sauvegarder" name="redim" type="submit">
<div>
<div><img class="c1" id="Image" name="image" alt="image" src="marche_fichiers/im_1225181347.jpg"></div>
<input class="submit_button c1" onclick="javacript:window.location='/modificationcompte/avatar'" value="Annuler" name="redim" type="button"></div>

</form>

</div>

</div>

</body>
</html>




et j'ai ensuite testé ce code
ce qui est en rouge est le contenu de index .css


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script><endnote><head>
<script></script>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
<title>48</title>


<meta content="text/html; charset=utf-8" http-equiv="Content-Type">

<meta name="GENERATOR" content="MSHTML 8.00.6001.18372">

<meta name="GENERATOR" content="MSHTML 8.00.6001.18372">

<link rel="stylesheet" type="text/css" href="marche_fichiers/inddex.css" media="all">

<style type="text/css">
</style>
</head>


<body>

<script type="text/javascript">
</script>
<script type="text/javascript" src="marche_fichiers/prototype2.js">
</script>
<script type="text/javascript" src="marche_fichiers/dragdrop.js">
</script>
<script type="text/javascript" src="marche_fichiers/builder.js">
</script>
<script type="text/javascript" src="marche_fichiers/dragdrop.js">
</script>
<script type="text/javascript" src="marche_fichiers/cropper.js">
</script>
<script type="text/javascript">
//<![CDATA[
function onEndCrop( coords, dimensions ) {$( 'x1' ).value = coords.x1;$( 'y1' ).value = coords.y1; $( 'x2' ).value = coords.x2;
$( 'y2' ).value = coords.y2;$( 'width' ).value = dimensions.width;$( 'height' ).value = dimensions.height;}// example with a preview of crop results, must have minimumm dimensions
Event.observe(window,'load',function() {new Cropper.ImgWithPreview('Image',{minWidth: 20,minHeight: 20,ratioDim: { }, displayOnInit: true,onEndCrop: onEndCrop,previewWrap: 'previewArea'})});
//]]>
</script>
<style media="all" type="text/css">
//<![CDATA[
/* mes autres css */
.imgCrop_overlay {
position : absolute;
background : rgb(255, 255, 255);
width : 100%;
height : 100%;
opacity : 0.5;
}
.imgCrop_previewWrap {
position : relative;
overflow : hidden;
}
.imgCrop_previewWrap IMG {
position : absolute;
}
.imgCrop_wrap {
position : relative;
cursor : crosshair;
}
.imgCrop_selArea {
z-index : 2;
position : absolute;
cursor : move;
}
.imgCrop_clickArea {
background-color : rgb(255, 255, 255);
width : 100%;
height : 100%;
opacity : 0.01;
}
.imgCrop_handle {
z-index : 4;
border-bottom : 1px solid rgb(51, 51, 51);
position : absolute;
border-left : 1px solid rgb(51, 51, 51);
width : 6px;
background : rgb(255, 255, 255);
height : 6px;
border-top : 1px solid rgb(51, 51, 51);
border-right : 1px solid rgb(51, 51, 51);
opacity : 0.5;
}
.imgCrop_handleNE {
top : -3px;
cursor : ne-resize;
right : -3px;
}
.imgCrop_handleE {
top : 0;
cursor : e-resize;
right : -3px;
}
.imgCrop_handleSE {
bottom : -3px;
cursor : se-resize;
right : -3px;
}
.imgCrop_handleS {
bottom : -3px;
cursor : s-resize;
right : 0;
}
.imgCrop_handleSW {
bottom : -3px;
cursor : sw-resize;
left : -3px;
}
.imgCrop_dragArea {
z-index : 200;
position : absolute;
width : 100%;
height : 100%;
top : 0;
left : 0;
}
//]]>
</style>
<div><br>

<div>
<form id="redimadavatar_form" method="post" name="redimadavatar_form" action="http://mon.doctissimo.fr/modificationco ... ar"><input id="y1" value="79" name="y1"><input id="height" name="height"><input id="width" name="width"><input id="x1" value="154" name="x1">http://avatar.doctissimo.fr<input value="/6/7/4/2/862476/" name="url_avatar">TN2_<input value="1176906853.gif" name="url_id_avatar">
<div id="previewArea" class="imgCrop_previewWrap c11"><img id="imgCrop_image2" name="imgCrop_image2" alt="image" src="marche_fichiers/im_1225181347.jpg"><img id="imgCrop_image" class="c10" name="image" alt="" src="marche_fichiers/im_1225181347.jpg"></div>

<input id="x2" value="2174" name="x2" type="hidden"><input id="y2" value="199" name="y2" type="hidden"><input class="submit_button" value="Sauvegarder" name="redim" type="submit">
<div>
<div><img class="c1" id="Image" name="image" alt="image" src="marche_fichiers/im_1225181347.jpg"></div>

<input class="submit_button c1" onclick="javacript:window.location='/modificationcompte/avatar'" value="Annuler" name="redim" type="button"></div>

</form>

</div>

</div>

</body>
</html>


comme dans l'exemple j'ai mis le css après </script>
mais ça ne fonctionne pas


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Publié : 15 févr. 2009, 21:12
par bormat
est ce qu'il faudrait après chaque élément mettre style = ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Publié : 15 févr. 2009, 21:17
par Fabrice.Tres.Net
Toutes les déclarations css doivent être avant le body !

Publié : 15 févr. 2009, 21:39
par bormat
merci de ton aide
comme çelà c'est pareil
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script><endnote><head>
<script><endnote><head>
<script></script>
<meta name="generator"
content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
<title>48</title>
<meta content="text/html; charset=utf-8"
http-equiv="Content-Type">
<meta name="GENERATOR" content="MSHTML 8.00.6001.18372">
<meta name="GENERATOR" content="MSHTML 8.00.6001.18372">
<link rel="stylesheet" type="text/css"
href="marche_fichiers/inddex.css" media="all">
<style type="text/css">
</style>
<style media="all" type="text/css">
//<![CDATA[
/* mes autres css */
.imgCrop_overlay {
position : absolute;
background : rgb(255, 255, 255);
width : 100%;
height : 100%;
opacity : 0.5;
}
.imgCrop_previewWrap {
position : relative;
overflow : hidden;
}
.imgCrop_previewWrap IMG {
position : absolute;
}
.imgCrop_wrap {
position : relative;
cursor : crosshair;
}
.imgCrop_selArea {
z-index : 2;
position : absolute;
cursor : move;
}
.imgCrop_clickArea {
background-color : rgb(255, 255, 255);
width : 100%;
height : 100%;
opacity : 0.01;
}
.imgCrop_handle {
z-index : 4;
border-bottom : 1px solid rgb(51, 51, 51);
position : absolute;
border-left : 1px solid rgb(51, 51, 51);
width : 6px;
background : rgb(255, 255, 255);
height : 6px;
border-top : 1px solid rgb(51, 51, 51);
border-right : 1px solid rgb(51, 51, 51);
opacity : 0.5;
}
.imgCrop_handleNE {
top : -3px;
cursor : ne-resize;
right : -3px;
}
.imgCrop_handleE {
top : 0;
cursor : e-resize;
right : -3px;
}
.imgCrop_handleSE {
bottom : -3px;
cursor : se-resize;
right : -3px;
}
.imgCrop_handleS {
bottom : -3px;
cursor : s-resize;
right : 0;
}
.imgCrop_handleSW {
bottom : -3px;
cursor : sw-resize;
left : -3px;
}
.imgCrop_dragArea {
z-index : 200;
position : absolute;
width : 100%;
height : 100%;
top : 0;
left : 0;
}
//]]>
</style>
</head>
<body>
<script type="text/javascript">
</script>
<script type="text/javascript"
src="marche_fichiers/prototype2.js">
</script>
<script type="text/javascript"
src="marche_fichiers/dragdrop.js">
</script>
<script type="text/javascript"
src="marche_fichiers/builder.js">
</script>
<script type="text/javascript"
src="marche_fichiers/dragdrop.js">
</script>
<script type="text/javascript"
src="marche_fichiers/cropper.js">
</script>
<script type="text/javascript">
//<![CDATA[
function onEndCrop( coords, dimensions ) {$( 'x1' ).value = coords.x1;$( 'y1' ).value = coords.y1; $( 'x2' ).value = coords.x2;
$( 'y2' ).value = coords.y2;$( 'width' ).value = dimensions.width;$( 'height' ).value = dimensions.height;}// example with a preview of crop results, must have minimumm dimensions
Event.observe(window,'load',function() {new Cropper.ImgWithPreview('Image',{minWidth: 20,minHeight: 20,ratioDim: { }, displayOnInit: true,onEndCrop: onEndCrop,previewWrap: 'previewArea'})});
//]]>
</script>
<div><br>
<div>
<form id="redimadavatar_form" method="post"
name="redimadavatar_form"
action="http://mon.doctissimo.fr/modificationco ... ar"><input
id="y1" value="79" name="y1"><input
id="height" name="height"><input id="width"
name="width"><input id="x1" value="154"
name="x1">http://avatar.doctissimo.fr<input
value="/6/7/4/2/862476/" name="url_avatar">TN2_<input
value="1176906853.gif" name="url_id_avatar">
<div id="previewArea" class="imgCrop_previewWrap c11"><img
id="imgCrop_image2" name="imgCrop_image2" alt="image"
src="marche_fichiers/im_1225181347.jpg"><img
id="imgCrop_image" class="c10" name="image" alt=""
src="marche_fichiers/im_1225181347.jpg"></div>
<input id="x2" value="2174" name="x2"
type="hidden"><input id="y2" value="199"
name="y2" type="hidden"><input
class="submit_button" value="Sauvegarder" name="redim"
type="submit">
<div>
<div><img class="c1" id="Image" name="image"
alt="image" src="marche_fichiers/im_1225181347.jpg"></div>
<input class="submit_button c1"
onclick="javacript:window.location='/modificationcompte/avatar'"
value="Annuler" name="redim" type="button"></div>
</form>
</div>
</div>
</body>
</html>


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Publié : 15 févr. 2009, 21:45
par Fabrice.Tres.Net
Tu peux trouver de l'inspiration dans le source d'une page web, par exemple celle-ci
parapente vosges

Fais attention tu ne dois avoir qu'un seul body, ....

Tu peux aussi valider ton code html et css
http://validator.w3.org/
Tu ppeux le faire pour des pages en ligne ou en téléchargeant ton fichier

Publié : 15 févr. 2009, 21:47
par bormat
Fabrice.Tres.Net a écrit :Tu peux trouver de l'inspiration dans le source d'une page web, par exemple celle-ci
parapente vosges

Fais attention tu ne dois avoir qu'un seul body, ....

Tu peux aussi valider ton code html et css
http://validator.w3.org/
Tu ppeux le faire pour des pages en ligne ou en téléchargeant ton fichier
j'avais validé la pages le css était propre et le html aussi
je vais voir ta page et continuer des essaies

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Publié : 15 févr. 2009, 22:01
par Fabrice.Tres.Net

Code : Tout sélectionner

<head>
<script><endnote><head>
<script><endnote><head>
<script></script>
ça ce n'est pas très catholique...

Publié : 15 févr. 2009, 22:06
par bormat
j'ai réussis pour le css le endnote c'est mis tout seul avec nvu





<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
img.c1 {width: 1364px; height: 840px;}.imgCrop_overlay { position : absolute;background : rgb(255, 255, 255);width : 100%; height : 100%; opacity : 0.5; } .imgCrop_previewWrap { position : relative; overflow : hidden; } .imgCrop_previewWrap IMG { position : absolute; } .imgCrop_wrap { position : relative; cursor : crosshair; } .imgCrop_selArea { z-index : 2; position : absolute; cursor : move; } .imgCrop_clickArea { background-color : rgb(255, 255, 255); width : 100%; height : 100%; opacity : 0.01; } .imgCrop_handle { z-index : 4; border-bottom : 1px solid rgb(51, 51, 51); position : absolute; border-left : 1px solid rgb(51, 51, 51); width : 6px; background : rgb(255, 255, 255); height : 6px; border-top : 1px solid rgb(51, 51, 51); border-right : 1px solid rgb(51, 51, 51); opacity : 0.5; } .imgCrop_handleNE { top : -3px; cursor : ne-resize; right : -3px; } .imgCrop_handleE { top : 0; cursor : e-resize; right : -3px; } .imgCrop_handleSE { bottom : -3px; cursor : se-resize; right : -3px; } .imgCrop_handleS { bottom : -3px; cursor : s-resize; right : 0; } .imgCrop_handleSW { bottom : -3px; cursor : sw-resize; left : -3px; } .imgCrop_dragArea { z-index : 200; position : absolute; width : 100%; height : 100%; top : 0; left : 0; }
</style>
<title>54</title>
</head>
<body>
<script type="text/javascript">
</script>
<script type="text/javascript"
src="marche_fichiers/prototype2.js">
</script>
<script type="text/javascript"
src="marche_fichiers/dragdrop.js">
</script>
<script type="text/javascript"
src="marche_fichiers/builder.js">
</script>
<script type="text/javascript"
src="marche_fichiers/dragdrop.js">
</script>
<script type="text/javascript"
src="marche_fichiers/cropper.js">
</script>
<script type="text/javascript">//<![CDATA[
function onEndCrop( coords, dimensions ) {$( 'x1' ).value = coords.x1;$( 'y1' ).value = coords.y1; $( 'x2' ).value = coords.x2;
$( 'y2' ).value = coords.y2;$( 'width' ).value = dimensions.width;$( 'height' ).value = dimensions.height;}// example with a preview of crop results, must have minimumm dimensions
Event.observe(window,'load',function() {new Cropper.ImgWithPreview('Image',{minWidth: 20,minHeight: 20,ratioDim: { }, displayOnInit: true,onEndCrop: onEndCrop,previewWrap: 'previewArea'})});
//]]>
</script>
<div>
<div>
<form id="redimadavatar_form" method="post"
name="redimadavatar_form"
action="http://mon.doctissimo.fr/modificationcompte/avatar">
<div id="previewArea" class="imgCrop_previewWrap c11"><img
id="imgCrop_image2" name="imgCrop_image2" alt="image"
src="marche_fichiers/im_1225181347.jpg"><img
id="imgCrop_image" class="c10" name="image" alt=""
src="marche_fichiers/im_1225181347.jpg"></div>
<div><input id="x1" value="154" name="x1"><input
id="y1" value="79" name="y1"><input id="x2"
value="2174" name="x2" type="hidden"><input
id="y2" value="199" name="y2" type="hidden"><input
value="/4/1/6/7/1327614/" name="url_avatar"><input
value="1183395106.jpg" name="url_id_avatar"><input
id="width" name="width"><input id="height"
name="height"><input class="submit_button"
value="Sauvegarder" name="redim" type="submit"><input
class="submit_button c1"
onclick="javacript:window.location='/modificationcompte/avatar'"
value="Annuler" name="redim" type="button"></div>
</form>
</div>
<img class="c1" id="Image" name="image"
alt="image" src="marche_fichiers/im_1225181347.jpg">
</div>
</body>
</html>



Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Publié : 16 févr. 2009, 11:03
par chinon37
bormat a écrit :j'ai réussis pour le css le endnote c'est mis tout seul avec nvu
:roll: :roll: :roll: démoralisant de voir qu'il y en a encore qui utilisent Nvu.
Il est vrai que:
le sommaire du forum Geckozone a écrit :Nvu/Kompozer : l'éditeur de pages Web au format HTML
Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… qui monte… Nvu ! Nvu permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML. Prononcé N-view en anglais, on pourrait tout à fait dire N-vue en français. Enfin, pro-non-cez-comme-vous-voulez :)
et où est KompoZer?

Messieurs les Admin, faites quelque chose, viiiiite!!

Publié : 16 févr. 2009, 11:05
par bormat
chinon37 a écrit :
bormat a écrit :j'ai réussis pour le css le endnote c'est mis tout seul avec nvu
:roll: :roll: :roll: démoralisant de voir qu'il y en a encore qui utilisent Nvu.
Il est vrai que:
le sommaire du forum Geckozone a écrit :Nvu/Kompozer : l'éditeur de pages Web au format HTML
Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… qui monte… Nvu ! Nvu permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML. Prononcé N-view en anglais, on pourrait tout à fait dire N-vue en français. Enfin, pro-non-cez-comme-vous-voulez :)
et où est KompoZer?

Messieurs les Admin, faites quelque chose, viiiiite!!
j'ai tester composer et je n'ai vu aucune différence à part qu'il est portable
peux tu me dire les avantages

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Publié : 16 févr. 2009, 11:14
par chinon37
KompoZer
Les avantages? ... Presque pô:
- Il corrige simplement tous les bogues de Nvu.
- Il intègre un éditeur css abouti
- Il permet, grace aux extensions, de se passer de l'onglet source et d'éditer le code dans un éditeur externe avec indentation (utilisation de Tidy)
- etc...

L'installation des extensions apportant un réel + est détaillée ici: http://josar.free.fr/tutoKompozer/kompozerInstal.html[/b]
Fuseau horaire sur UTC+02:00
Page 1 sur 2

Développé par phpBB® Forum Software © phpBB Limited

Traduction française officielle © Qiaeru