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

bormat · Message par **bormat** » 15 févr. 2009, 08:59

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

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 15 févr. 2009, 09:57

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.

bormat · Message par **bormat** » 15 févr. 2009, 11:10

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

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 15 févr. 2009, 13:20

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

bormat · Message par **bormat** » 15 févr. 2009, 20:07

je n'y arrive pas

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

bormat · Message par **bormat** » 15 févr. 2009, 21:12

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

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 15 févr. 2009, 21:17

Toutes les déclarations css doivent être avant le body !

bormat · Message par **bormat** » 15 févr. 2009, 21:39

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

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 15 févr. 2009, 21:45

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

bormat · Message par **bormat** » 15 févr. 2009, 21:47

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

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 15 févr. 2009, 22:01

Code : Tout sélectionner

<head>
<script><endnote><head>
<script><endnote><head>
<script></script>

ça ce n'est pas très catholique...

bormat · Message par **bormat** » 15 févr. 2009, 22:06

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

Message par **chinon37** » 16 févr. 2009, 11:03

bormat a écrit :j'ai réussis pour le css le endnote c'est mis tout seul avec nvu

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!!

bormat · Message par **bormat** » 16 févr. 2009, 11:05

chinon37 a écrit :
bormat a écrit :j'ai réussis pour le css le endnote c'est mis tout seul avec nvu
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

Message par **chinon37** » 16 févr. 2009, 11:14

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]

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

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

Qui est en ligne ?