Creer des cadres dans NVu

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érateur : chinon37

sindbad
Arias
Messages : 13
Inscription : 23 mars 2009, 17:38

Message par sindbad »

Merci, je l'ai installé. Tout va bien

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.7) Gecko/2009021910 Firefox/3.0.7
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

merci ~HP, je connaissais pas! Je retiens pour les demandes futures :D
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.
Avatar de l’utilisateur
~HP
Varan
Messages : 1141
Inscription : 29 juin 2008, 13:22

Message par ~HP »

Si ça peut aider :)

Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; fr-FR; rv:1.9.0.7) Gecko/2009030505 Firefox/3.0.7
fviale

Des cadres dans des cadres

Message par fviale »

Bonjour,

Est-il possible de créer un cadre dans un pied de page qui lui même est déjà un cadre.
En fait je voudrais un bloc à gauche en fond blanc pour mettre des coordonnées (le texte sur l'image ne se lit pas) et un bloc collé à droite avec une image en fond de page. Le tout est mon pied de page.

Merc pour vos conseils

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; InfoPath.2)
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Message par Ymai »

Bonjour
Oui, c'est possible. Mais certains évoquent alors l'idée d'une maladie nommée "divite" au cours de laquelle le patient tente, ad libitum, d'insérer des blocs qu'il insère dans des blocs qu'il insère dans...

Tout cela pour dire que le bloc gauche pourrait simplement être un paragraphe flottant à gauche et l'image pourrait simplement être flottante à droite.
Un bloc <p> et un bloc <img>.

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta
 content="text/html; charset=UTF-8" http-equiv="content-type"><title></title><style
 type="text/css">
#pied p {
  width: 400px;
  float: left;
  background-color: #00ff00;
}
#pied img {
  width: 15px;
  height: 15px;
  float: right;
}</style>
</head>
<body>
bla bla bla
<div id="pied"><p>bla bla bla bla bla bla bla bla bla bla</p>
<img alt="image" src="zolieImaze.gif"></div>
</body>
</html>
Il doit y avoir d'autres solutions encore.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.7) Gecko/2009030422 Ubuntu/8.04 (hardy) Firefox/3.0.7
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
fviale

Bloc, bloc, bloc

Message par fviale »

Merci Ymai

Pourquoi je n'arrive pas à faire coller mes blocs.
Cela veut dire que je peux pas utiliser la marge auto ?
Pour mon bloc entête j'ai une width de 900px et pour le texte j'ai une width de 880px avec une marge de 10px de chaque coté donc mes blocs sont bien alignés verticalement.

Là avec le bloc pied p et le blog pied img cela coince.

Sur kompozer en mode normal, les cadres en pointillés rouges semblent être bien collés mais quand je lance le navigateur le résultat ne correspond pas.

Une solution ?



Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; InfoPath.2)
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: Bloc, bloc, bloc

Message par Ymai »

fviale a écrit :Une solution ?
Poster le code complet de la page ici?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.7) Gecko/2009030422 Ubuntu/8.04 (hardy) Firefox/3.0.7
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
fviale

Message par fviale »

Voici le code de ma Page.

Soyez indulgent je débute.

J'ai gardé le code pied pour pied img, je n'ai créé que pied p en supplément

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta
 content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>structure</title><style
 type="text/css">
h1 {
  border-color: #cccccc;
  color: white;
  background-repeat: no-repeat;
  font-family: Arial,Helvetica,sans-serif;
  font-weight: bold;
  text-align: center;
  clear: none;
  width: 900px;
  margin-right: auto;
  margin-left: auto;
}
h2 {
  border-width: 2pt;
  font-family: Arial,Helvetica,sans-serif;
  font-weight: bold;
  text-align: left;
  color: white;
  height: 30px;
  background-color: #66cccc;
  margin-right: auto;
  margin-left: 20px;
  width: 800px;
}
#texte {
  border: 10pt solid #ccccff;
  font-family: Arial,Helvetica,sans-serif;
  margin-left: auto;
  visibility: visible;
  min-height: 500px;
  margin-right: auto;
  clear: right;
  width: 880px;
  background-color: white;
}
#entete {
  border: 5pt solid #cccccc;
  background-image: url(../images/Bandeauentetepage.jpg);
  background-repeat: no-repeat;
  width: 900px;
  height: 180px;
  text-align: center;
  line-height: 30px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 0px;
  top: 0px;
  clear: none;
  position: static;
}
#pied {
  height: 100px;
  background-repeat: no-repeat;
  font-family: Arial,Helvetica,sans-serif;
  background-image: url(../images/Bandeaubaspage.jpg);
  float: right;
  margin-left: 0px;
  width: 600px;
  margin-top: 10px;
  margin-right: 30px;
}
h3 {
  font-family: Arial,Helvetica,sans-serif;
  font-weight: bold;
  font-size: 1em;
  text-align: left;
  color: #6666cc;
  margin-bottom: 0px;
}
body {
  font-family: "Times New Roman",Times,serif;
}
a img {
  border-color: black;
  border-width: 5pt;
  float: left;
  margin-right: 20px;
}
#menu {
  margin-right: auto;
  margin-left: auto;
  margin-top: 5px;
  width: 900px;
}
p {
  margin-left: 20px;
  text-align: justify;
  margin-right: 20px;
}
.imageGauche {
  float: left;
  margin-right: 20px;
}
#piedP {
  float: left;
  height: 100px;
  margin-top: 10px;
  font-family: Arial,Helvetica,sans-serif;
  background-color: white;
  margin-right: 0px;
  width: 240px;
  margin-left: 30px;
}

</style></head>
<body style="color: rgb(0, 0, 0); background-color: rgb(204, 204, 204);"
 alink="#000099" link="#000099" vlink="#990099"><div
 style="text-align: left;" id="entete"><h1>Ma
maison &agrave; louer - Erdeven - Morbihand (56)</h1></div><div
 id="menu">menu&nbsp;</div><div id="texte"><h2>Ma
maison &agrave; louer - Environs de Carnac - Morbihand</h2> <p
 class="MsoNormal"><span style="font-weight: bold; font-style: italic;">Nous
sommes heureux
de vous pr&eacute;senter notre maison situ&eacute;e &agrave; la pointe
Sud de la Bretagne.</span><o:p></o:p></p>
<p class="MsoNormal">A proximit&eacute; de la mer (5
min.), nous sommes situ&eacute;s entre
Vannes (40 min.) et Lorient, &agrave; proximit&eacute; de
Carnac, d'Auray et de la rivi&egrave;re
d'Etel. Cette maison, au coeur du hameau de Kerminihy, saura vous
s&eacute;duire par
son charme, son confort et sa d&eacute;coration chaleureuse. Nous
esp&eacute;rons que vous y
passerez un s&eacute;jour tr&egrave;s agr&eacute;able.<span style="">&nbsp;
</span>Nous
sommes heureux de vous pr&eacute;senter notre maison
situ&eacute;e dans un coin magnifique de
la Bretagne.</p>
<h3><img src="../images/Entreemaison.jpg" title="entree de la maison"
 alt="entree de la maison"
 style="border: 2px solid ; width: 400px; height: 300px; float: left;"
 hspace="10">&nbsp;&nbsp;&nbsp; La maison comprend :</h3><ul><ul><ul><ul><ul><li
 style="margin-left: 31px; width: 445px;">Un s&eacute;jour, salle
&agrave; manger avec chemin&eacute;e
d'environ 25 m&sup2;,</li><li style="margin-left: 31px; width: 445px;">Une
cuisine am&eacute;nag&eacute;e et &eacute;quip&eacute;e,&nbsp;</li><li
 style="margin-left: 31px; width: 445px;">3 chambres,&nbsp;</li><li
 style="margin-left: 31px; width: 445px;">1 coin bureau avec
connexion internet Wi-Fi,</li><li
 style="margin-left: 31px; width: 445px;">1 SdB avec WC,</li><li
 style="margin-left: 31px; width: 445px;">1 WC s&eacute;par&eacute;,</li><li
 style="margin-left: 31px; width: 445px;">1 cellier,&nbsp;</li><li
 style="margin-left: 31px; width: 445px;">1 terrasse
am&eacute;nag&eacute;e.</li></ul></ul></ul></ul></ul>D'une superficie
de 110m&sup2;, elle peut accueillir jusqu'&agrave; 6
personnes.<br><br>Elle dispose d'un emplacement de parking devant la
maison et
d'un deuxi&egrave;me emplacement <span style="">&nbsp;</span>sur un
terrain
priv&eacute; &agrave; 30m de la maison.</div><br><div id="piedP"><h3
 style="text-align: left;">Anne-Lise VIALE</h3></div><div id="pied"></div></body></html>
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; InfoPath.2)
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

la page ci-dessous a été modifiée en gardant le div pied qui prend toute la largeur et 2 H3 avec chacun une classe.
Cela correspond-il à tes souhaits?

Morbihan prend un "d"???

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>structure</title><style type="text/css">
h1 {
  border-color: #cccccc;
  color: white;
  background-repeat: no-repeat;
  font-family: Arial,Helvetica,sans-serif;
  font-weight: bold;
  text-align: center;
  clear: none;
  width: 900px;
  margin-right: auto;
  margin-left: auto;
}
h2 {
  border-width: 2pt;
  font-family: Arial,Helvetica,sans-serif;
  font-weight: bold;
  text-align: left;
  color: white;
  height: 30px;
  background-color: #66cccc;
  margin-right: auto;
  margin-left: 20px;
  width: 800px;
}
#texte {
  border: 10pt solid #ccccff;
  font-family: Arial,Helvetica,sans-serif;
  margin-left: auto;
  visibility: visible;
  min-height: 500px;
  margin-right: auto;
  clear: right;
  width: 880px;
  background-color: white;
}
#entete {
  border: 5pt solid #cccccc;
  background-image: url(../images/Bandeauentetepage.jpg);
  background-repeat: no-repeat;
  width: 900px;
  height: 180px;
  text-align: center;
  line-height: 30px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 0px;
  top: 0px;
  clear: none;
  position: static;
}
#pied {
  height: 100px;
  background-repeat: no-repeat;
  font-family: Arial,Helvetica,sans-serif;
  background-image: url(../images/Bandeaubaspage.jpg);
  float: right;
  margin-left: 0px;
  width: 600px;
  margin-top: 10px;
  margin-right: 30px;
}
h3 {
  font-family: Arial,Helvetica,sans-serif;
  font-weight: bold;
  font-size: 1em;
  text-align: left;
  color: #6666cc;
  margin-bottom: 0px;
}
body {
  font-family: "Times New Roman",Times,serif;
}
a img {
  border-color: black;
  border-width: 5pt;
  float: left;
  margin-right: 20px;
}
#menu {
  margin-right: auto;
  margin-left: auto;
  margin-top: 5px;
  width: 900px;
}
p {
  margin-left: 20px;
  text-align: justify;
  margin-right: 20px;
}
.imageGauche {
  float: left;
  margin-right: 20px;
}
#piedP {
  float: left;
  height: 100px;
  margin-top: 10px;
  font-family: Arial,Helvetica,sans-serif;
  background-color: white;
  margin-right: 0px;
  width: 900px;
  margin-left: 30px;
}
.piedPl {
  display: block;
  width: 240px;
  float: left;
}
.piedPr {
  display: block;
  float: right;
  width: 240px;
}

</style></head><body style="color: rgb(0, 0, 0); background-color: rgb(204, 204, 204);" alink="#000099" link="#000099" vlink="#990099">
<div style="text-align: left;" id="entete">
<h1>Ma
maison à louer - Erdeven - Morbihand (56)</h1>
</div>

<div id="menu">menu </div>

<div id="texte">
<h2>Ma
maison à louer - Environs de Carnac - Morbihand</h2>
<p class="MsoNormal"><span style="font-weight: bold; font-style: italic;">Nous
sommes heureux
de vous présenter notre maison située à la pointe
Sud de la Bretagne.</span><o:p></o:p></p>
<p class="MsoNormal">A proximité de la mer (5
min.), nous sommes situés entre
Vannes (40 min.) et Lorient, à proximité de
Carnac, d'Auray et de la rivière
d'Etel. Cette maison, au coeur du hameau de Kerminihy, saura vous
séduire par
son charme, son confort et sa décoration chaleureuse. Nous
espérons que vous y
passerez un séjour très agréable.<span style=""> 
</span>Nous
sommes heureux de vous présenter notre maison
située dans un coin magnifique de
la Bretagne.</p>
<h3><img src="../images/Entreemaison.jpg" title="entree de la maison" alt="entree de la maison" style="border: 2px solid ; width: 400px; height: 300px; float: left;" hspace="10">    La maison comprend :</h3>
<ul><ul><ul><ul><ul><li style="margin-left: 31px; width: 445px;">Un séjour, salle
à manger avec cheminée
d'environ 25 m²,</li><li style="margin-left: 31px; width: 445px;">Une
cuisine aménagée et équipée, </li><li style="margin-left: 31px; width: 445px;">3 chambres, </li><li style="margin-left: 31px; width: 445px;">1 coin bureau
avec
connexion internet Wi-Fi,</li><li style="margin-left: 31px; width: 445px;">1 SdB avec WC,</li><li style="margin-left: 31px; width: 445px;">1 WC séparé,</li><li style="margin-left: 31px; width: 445px;">1 cellier, </li><li style="margin-left: 31px; width: 445px;">1 terrasse
aménagée.</li></ul></ul></ul></ul></ul>
D'une superficie
de 110m², elle peut accueillir jusqu'à 6
personnes.<br>
<br>
Elle dispose d'un emplacement de parking devant la
maison et
d'un deuxième emplacement <span style=""> </span>sur un
terrain
privé à 30m de la maison.</div>

<br>

<div id="piedP">
<h3 class="piedPl" style="text-align: left;">Anne-Lise VIALE</h3>
<h3 class="piedPr">coucou</h3>
<br>

</div>
</body></html>
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.
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Message par Ymai »

Re-...
Il me semble qu'il y a plusieurs causes de soucis.

Commençons par la plus évidente :D
Des retours à la ligne (<br>) se sont malicieusement introduits entre certains blocs.
J'extrais la fin du bloc "texte" et le début du bloc "piedP":

Code : Tout sélectionner

sur un terrain priv&eacute; &agrave; 30m de la maison.</div><br><div id="piedP">
Ce petit <br> prend de la place et empêche les blocs "texte" et "piedP" de se coller.

D'autre part, le bloc "piedP" contient une balise <h3>.
Celle-ci est munie, d'origine, d'une marge non négligeable.
idem pour la balise <h2> qui débute le bloc "texte".
Pour permettre aux blocs de se "coller", il faudrait attribuer une marge nulle à ces deux entités.

Code : Tout sélectionner

#texte h2 {margin: 0}
#piedP h3 {margin: 0}
Le bloc piedP me semble particulièrement malmené :wink:
Non seulement, il doit subir le voisinage d'un bloc "pied" qui est vide... mais aussi, son flottement à gauche, sa marge gauche et sa marge supérieure me paraissent suspects.
Je pense qu'un

Code : Tout sélectionner

#piedP {
  height: 100px;
  font-family: Arial,Helvetica,sans-serif;
  background-color: white;
  margin-right: auto;
  margin-left: auto;
  width: 880px;
} 
auraient été de bon aloi.
Le dernier souci à l'adhérence parfaite entre le "texte" et le "piedP" me semble être la grosse bordure de couleur parme autour du "texte".

Je crois que j'ai encore supprimé une bordure de 5pt au bloc "entete" et une marge supérieure de 5px au bloc "menu".
Et là, tout colle.
Bon, il y a peut-être un peu de ménage à faire à gauche et à droite. Mais pas gravissime...

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta
 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><title>structure</title><style
 type="text/css">
h1 {
  border-color: #cccccc;
  color: white;
  background-repeat: no-repeat;
  font-family: Arial,Helvetica,sans-serif;
  font-weight: bold;
  text-align: center;
  clear: none;
  width: 900px;
  margin-right: auto;
  margin-left: auto;
}
h2 {
  border-width: 2pt;
  font-family: Arial,Helvetica,sans-serif;
  font-weight: bold;
  text-align: left;
  color: white;
  height: 30px;
  background-color: #66cccc;
  margin-right: auto;
  margin-left: 20px;
  width: 800px;
}
#texte {
  border-left-style: solid;
  font-family: Arial,Helvetica,sans-serif;
  margin-left: auto;
  visibility: visible;
  min-height: 500px;
  margin-right: auto;
  clear: right;
  width: 880px;
  background-color: white;
}
#entete {
  background-image: url(../images/Bandeauentetepage.jpg);
  background-repeat: no-repeat;
  width: 880px;
  height: 180px;
  text-align: center;
  line-height: 30px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 0px;
  top: 0px;
}
#pied {
  height: 100px;
  background-repeat: no-repeat;
  font-family: Arial,Helvetica,sans-serif;
  background-image: url(../images/Bandeaubaspage.jpg);
  float: right;
  margin-left: 0px;
  width: 600px;
  margin-top: 10px;
  margin-right: 30px;
}
h3 {
  font-family: Arial,Helvetica,sans-serif;
  font-weight: bold;
  font-size: 1em;
  text-align: left;
  color: #6666cc;
  margin-bottom: 0px;
}
body {
  font-family: "Times New Roman",Times,serif;
}
a img {
  border-color: black;
  border-width: 5pt;
  float: left;
  margin-right: 20px;
}
#menu {
  margin-right: auto;
  margin-left: auto;
  width: 880px;
}
p {
  margin-left: 20px;
  text-align: justify;
  margin-right: 20px;
}
.imageGauche {
  float: left;
  margin-right: 20px;
}
#piedP {
  height: 100px;
  font-family: Arial,Helvetica,sans-serif;
  background-color: white;
  margin-right: auto;
  margin-left: auto;
  width: 880px;
}
#piedP h3 {
  margin: 0;
}
#texte h2 {
  margin: 0;
}
#entete h1 {
  margin: 0;
}

</style></head><body
 style="color: rgb(0, 0, 0); background-color: rgb(204, 204, 204);"
 alink="#000099" link="#000099" vlink="#990099">
<div style="text-align: left;" id="entete"><br></div><div
 id="menu">menu&nbsp;</div>
<div id="texte"><h2>Ma maison à louer - Environs de
Carnac - Morbihand</h2>
<p class="MsoNormal"><span
 style="font-weight: bold; font-style: italic;">Nous
sommes heureux
de vous présenter notre maison située à la pointe
Sud de la Bretagne.</span><o:p></o:p></p>
<p>A proximité de la mer (5
min.), nous sommes situés entre
Vannes (40 min.) et Lorient, à proximité de
Carnac, d'Auray et de la rivière
d'Etel. Cette maison, au coeur du hameau de Kerminihy, saura vous
séduire par
son charme, son confort et sa décoration chaleureuse. Nous
espérons que vous y
passerez un séjour très agréable.<span style="">&nbsp;
</span>Nous
sommes heureux de vous présenter notre maison
située dans un coin magnifique de
la Bretagne.</p>
<h3><img src="../images/Entreemaison.jpg"
 title="entree de la maison" alt="entree de la maison"
 style="border: 2px solid ; width: 400px; height: 300px; float: left;"
 hspace="10">&nbsp;&nbsp;&nbsp; La maison
comprend :</h3><ul><ul><ul><ul><ul><li
 style="margin-left: 31px; width: 445px;">Un séjour, salle
à manger avec cheminée
d'environ 25 m²,</li><li
 style="margin-left: 31px; width: 445px;">Une
cuisine aménagée et équipée,&nbsp;</li><li
 style="margin-left: 31px; width: 445px;">3
chambres,&nbsp;</li><li
 style="margin-left: 31px; width: 445px;">1 coin bureau avec
connexion internet Wi-Fi,</li><li
 style="margin-left: 31px; width: 445px;">1 SdB avec WC,</li><li
 style="margin-left: 31px; width: 445px;">1 WC séparé,</li><li
 style="margin-left: 31px; width: 445px;">1 cellier,&nbsp;</li><li
 style="margin-left: 31px; width: 445px;">1 terrasse
aménagée.</li></ul></ul></ul></ul></ul>D'une
superficie
de 110m², elle peut accueillir jusqu'à 6
personnes.<br><br>Elle dispose d'un emplacement de parking
devant la
maison et
d'un deuxième emplacement <span style="">&nbsp;</span>sur
un
terrain
privé à 30m de la maison.</div>
<div id="piedP"><h3 style="text-align: left;">Anne-Lise
VIALE</h3></div>
</body></html>

PS: la classe "msoNormal" n'apporte rien... que des mauvais souvenirs d'un MS-Word qui a dû traîner par là. L'essentiel est de se soigner. :wink:

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.7) Gecko/2009030422 Ubuntu/8.04 (hardy) Firefox/3.0.7

[edit]Pfffttt... Grillé parce que j'ai trop voulu expliquer.
C'est dur d'être un super-héros.
[/edit]
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

J'étais seulement pressé, je dois partir... :P
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.
VuesInspirees
Arias
Messages : 3
Inscription : 30 oct. 2009, 19:55

Re: Creer des cadres dans NVu

Message par VuesInspirees »

Bonjour,

Je débarque avec Komposer (en français) devant mettre à jour mon site web perso dans un langage plus actuel (mais je ne suis pas du tout calée, j'ai tout fait à l'époque intuitivement avec Adobe Golive 4 que je n'ai jamais eu les moyens de mettre à jour et ça n'existe plus).

Bref, pour conserver les cadres (ou même effet) avec komposer, je ne connais pas les fameux CSS, je n'y comprends rien (mais il faut dire que je n'ai pas appris encore)

Car ce qui urge, surtout est de mettre à jour les liens des webmasters dont les sites ont changé d'url.
Ensuite, biensûr corriger mes coquilles et préciser ou simplifier un peu selon ma vue actuelle.

Bref, quand j'ai ouvert ma page d'accueil en français (constituée de 3 cadres regardez : http://vuesinspirees.free.fr/Cadre.html ) dans Kompozer, je n'ai pas su corriger un lien défectueux (celui du titre) et ça a fait pire (tout est parti en ouille ! biensur vous ne pouvez pas voir ce que ça a donné puisque je ne l'ai pas publié du coup!) car impossible de faire s'ouvrir la fenêtre dans le cadre de destination habituel (certainement écrasé par Komposer).

Est-ce que tous mes liens quelle que soit la page que je vais ouvrir sous komposer pour corriger une simple quoquille vont être ainsi écrasés ou c'est seulement si je cherche à modifier ces liens ?

Donc une membre de ce forum m'a conseillé de venir sur ce forum et me faire expliquer comment travailler avec les CSS.
CSS qui si j'ai bien compris remplacent la lourdeur des cadres pour (je le souhaite ardemment) obtenir le même effet.
Déjà, que signifie cet acronyme ?

Merci d'avance pour vos conseils avisés.
Cordialement,
Vi! :P
Fabrice.Tres.Net
Tyrannosaurus Rex
Messages : 2390
Inscription : 26 juin 2006, 12:50

Re: Creer des cadres dans NVu

Message par Fabrice.Tres.Net »

Je fais court car un lit m'attend.

Les CSS sont des feuilles de styles qui permettent d'obtenir la même présentation des pages de son site web.
Bien entendu on peut avoir des présentations différentes pour différentes parties de son site.

En général, une page sera composée de parties identiques (en-tête, bas de page, menu(s)) et d'une partie variable correspondant à chaque page.

Je te conseille de lire les 2 tutos de ma signature. Commence par celui à la cargolade qui est peut-être plus accessible.

Tu peux avoir un aperçu rapide des CSS par ce petit exercice de 5mn qui ne nécessite que firefox et son extension webdevelopper
http://josar.free.fr/tutoKompozer/feuil ... o_css.html
Gagea
Iguane
Messages : 627
Inscription : 20 juil. 2008, 10:25

Re: Creer des cadres dans NVu

Message par Gagea »

VuesInspirees a écrit :CSS qui si j'ai bien compris remplacent la lourdeur des cadres pour (je le souhaite ardemment) obtenir le même effet.
Déjà, que signifie cet acronyme ?
Une recherche sur Google donne des pages de résultats.

CSS 2 (Cascaded Style Sheet)
D'après wikipédia :"CSS est utilisé pour décrire la présentation d'un document structuré écrit en HTML ou en XML, et c'est le World Wide Web Consortium (W3C) qui en a la direction.
CSS est utilisé pour définir les couleurs, les polices, le rendu, et d'autres caractéristiques liées à la présentation d'un document.
L'objectif est de bien séparer la structure (écrite en HTML ou similaire) et la présentation (en CSS) du document. Cette séparation fournit un certain nombre de bénéfices, permettant d'améliorer l'accessibilité, de changer plus facilement de structure et de présentation, et de réduire la complexité de l'architecture d'un document.
Enfin, CSS permet de s'adapter aux caractéristiques du récepteur."
Un tuto pour débuter avec Kompozer : Initiation Internet : Kompozer et CSS
Un tuto d'exercices : Apprendre Kompozer
VuesInspirees
Arias
Messages : 3
Inscription : 30 oct. 2009, 19:55

Re: Creer des cadres dans NVu

Message par VuesInspirees »

Bonsoir, :P

Merci à tous pour vos réponses,
Le truc c'est que je n'ai pas beaucoup de temps disponible...

:idea: :arrow: Pensez-vous que je puisse copier-coller mes "templates" (est-ce comme ça qu'on dit "modèles de pages et de cadres" ?) que j'ai créés de façon intuitive (en wysiwyg) et les adapter/corriger en CSS pour obtenir le même effet dans/avec Komposer ? (ou ne n'y comprends vraiment rien ? lecture trop rapide des pages utiles :oops: )

Si le CSS est du wysiwyg, ça va... sinon c'est pas demain la veille que je vais mettre mon site à jour... :roll:

Oui j'ai vu le site de JoSar, c'est elle qui m'a dit de venir voir ici pour poser mes questions.
Mais bon je le lis un peu chaque fois que j'ai le temps, mais n'ai pas encore eu le temps de configurer correctement Komposer comme elle le recommande...

On va y arriver, ça prendra le temps que ça doit prendre.... (là, je débarque vraiment de chez débarquer).

@+
Merci
Vi! :P
Répondre

Qui est en ligne ?

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