Insérer pages news, galeries... et un menu déroulant.

Message par **chinon37** » 02 juin 2010, 21:11

portoss a écrit : Pour les tableaux j'ai pas très bien compris. J'ai juste mis un tableau central pour écrire dedans et que ma page soit centré ainsi que l'écriture (de plus je ne voulais pas que le site prenne toute la page juste le milieu).

Inutile de mettre un tableau alors qu'il existe en html les blocs conteneurs génériques <div>
Là où dans le code pour un tableau tu auras avec KompoZer ceci:

Code : Tout sélectionner

<table>
    <tbody>
       <tr>
           <td>mon contenu
           </td>
       </tr>
   </tbody>
</table>

avec un conteneur générique, tu auras:

Code : Tout sélectionner

<div>mon contenu</div>

Avoue que c'est plus simple!!!
Pour le centrer, il suffit de mettre les marge de droite et de gauche à "auto" après avoir donné une largeur au bloc.

portoss · Message par **portoss** » 03 juin 2010, 19:11

En ce qui concerne le menu déroulant, j'ai finalement réussi. Je même réussi à faire en sorte qu'il s'intègre bien à la page sans tout me bousiller

encore merci...

chinon37 a écrit :
portoss a écrit : Pour les tableaux j'ai pas très bien compris. J'ai juste mis un tableau central pour écrire dedans et que ma page soit centré ainsi que l'écriture (de plus je ne voulais pas que le site prenne toute la page juste le milieu).
Inutile de mettre un tableau alors qu'il existe en html les blocs conteneurs génériques <div>
Là où dans le code pour un tableau tu auras avec KompoZer ceci:
Code : Tout sélectionner
<table>
    <tbody>
       <tr>
           <td>mon contenu
           </td>
       </tr>
   </tbody>
</table>
avec un conteneur générique, tu auras:
Code : Tout sélectionner
<div>mon contenu</div>
Avoue que c'est plus simple!!!
Pour le centrer, il suffit de mettre les marge de droite et de gauche à "auto" après avoir donné une largeur au bloc.

A voir le code, il est vrai qu'il est plus simple... cependant je n'ai pas compris comment faire (je suis lent à la détente). Et puis, vu que j'ai déjà crée 5-6 pages, est t-il vraiment conseiller de mettre un conteneur générique ? ou le tableau peux faire l'affaire ?

Message par **Ymai** » 03 juin 2010, 19:18

portoss a écrit :En ce qui concerne le menu déroulant, j'ai finalement réussi. Je même réussi à faire en sorte qu'il s'intègre bien à la page sans tout me bousiller

Super!!

portoss a écrit : est t-il vraiment conseiller de mettre un conteneur générique ?

Oui, positivement oui.

portoss a écrit :ou le tableau peux faire l'affaire ?

Non. Tout à fait négativement.

portoss · Message par **portoss** » 03 juin 2010, 19:53

Reçu 5 sur 5. J'ai virer le tableau et j'ai mis des marges... et pour encadrer le tout j'ai mis des bordures sauf que contrairement au tableau l'encadrement "encadre" ma bannière.
Est-il possible de faire un encadrement sans que la bannière soit elle aussi pris en compte ? (que ça encadre juste le texte et reste qui ce situe en dessous de la bannière).

Message par **chinon37** » 04 juin 2010, 07:55

Oui, bien sûr que tu peux faire un cadre qui ne prenne pas la bannière.
Je te mets ci dessous un code que tu peux copier coller dans un onglet source de KompoZer pour voir.

Code : Tout sélectionner

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>essai</title>
<style type="text/css">
h1 {
width: 700px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
#content {
border: 2px solid #33ff33;
width: 700px;
margin-right: auto;
margin-left: auto;
height: 600px;
background-color: #cccccc;
text-align: center;
}

</style>
</head>
<body>
<h1><img style="width: 337px; height: 75px;" alt=""
src="http://www.geckozone.org/common/images/geckozone_logo.png"></h1>
<br>
<div id="content">conteneur générique</div>
</body>
</html>

Tu copie ce code à la place de celui présent, juste après le doctype. (le doctype, c'est : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">)
Tu constates
- une bannière
- un conteneur générique à fond gris et bordure verte

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 04 juin 2010, 08:26

Tant qu'à faire, on met l'image de la bannière dans la partie css, ce qui donne

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>essai</title>
<style type="text/css">
h1 {
width: 700px;
margin-right: auto;
margin-left: auto;
text-align: left;
height:80px;
background:url(http://kompozer.sourceforge.net/images/kompozer_128x128.png) no-repeat 100% 50% yellow;
}
p { margin-left: 2em; background:white;}
#content {
border: 2px solid #33ff33;
width: 700px;
margin-right: auto;
margin-left: auto;
height: 600px;
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>LE TITRE DE CETTE PAGE</h1>
<div id="content">
	<h2>Sous-titre</h2>
	<p>Mon premier paragraphe va être très court.</p>
	<p>le second aussi</p>
</div>

</body>
</html>

Message par **chinon37** » 04 juin 2010, 09:37

Oui, évidemment... j'ai encore été en dessous de tout sur ce coup là!

Merci Fabrice, d'avoir rectifié. A vouloir trop simplifier, j'en oublie les fondamentaux

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 04 juin 2010, 11:32

Si tout le monde été en dessous de tout comme toi, le monde serait merveilleux.

portoss · Message par **portoss** » 04 juin 2010, 17:44

Bonjour,
En réaliter, je me suis aperçu que le cadre prenait la bannière parce que au départ je ne sélectionner pas la bonne <div>.
Mais, en bas de la fenêtre de Kompozer, je sélectionne la bonne <div> puis clique droit, "Style interne", onglet "Bordure" et le tour est joué...

Merci quand même pour le code, je l'ai tester mais je n'ai réussi que a saccager ma page

bref... le principal c'est que c'est bon.
A plus tard (je suis sur que doué comme je suis j'aurais encore quelques questions

).

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 04 juin 2010, 18:54

Pour partir sur de bonnes bases, le mieux est de nous montrer ta première page. Cela permettra de rectifier avant de dupliquer les erreurs dans toutes les autres pages.

portoss · Message par **portoss** » 09 juin 2010, 16:35

Bonjour;
Désolé de répondre seulement maintenant, mais j'étais assez occuper les jours précédent que je n'ai pas pu accéder au PC.
Bref... pour la page voici le code html :

Code : Tout sélectionner

<!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN "http://www.w3.org/TR/html4/scrict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Index</title>
</head>
<body
style="color: rgb(0, 0, 0); background-color: black; width: 1000px; margin-right: auto; margin-left: auto;"
alink="#000099" link="#0000d8" vlink="#008d00">
<div style="text-align: center;">&nbsp;<br>
<div
style="border-style: outset; border-color: rgb(75, 75, 74); text-align: center; background-color: rgb(51, 51, 255);"><span
style="color: rgb(255, 255, 102);">Accueil &nbsp; &nbsp; &nbsp;
&nbsp;&nbsp; News &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Encyclopedia&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Contact</span><br style="color: rgb(255, 255, 102);">
<div style="text-align: center; background-color: white;"><br
style="color: rgb(255, 255, 102);">
<h2 style="color: rgb(255, 255, 102); background-color: rgb(204, 0, 0);">SITE
WEB EN CONSTRUCTION : PLUS D'INFO <a href="Contact.html">ICI</a><br>
</h2>
<br style="color: rgb(255, 255, 102);">
<div
style="text-align: center; color: rgb(51, 51, 51); background-color: white;"><span
style="font-style: italic;"><span style="text-decoration: underline;">Bienvenue
&agrave; tous :</span><br>
<br>
<br>
Site exemple :<br>
<br>
</span>Une encyclop&eacute;die est un ouvrage couvrant l'ensemble des
champs du savoir ou des connaissances, ou une partie
d&eacute;termin&eacute;e de ceux-ci. Sa conception repose sur une
organisation du savoir, qu'il s'agisse d'une classification
th&eacute;matique, alphab&eacute;tique ou tout autre mode
classificatoire permettant au chercheur d'information de se
rep&eacute;rer dans l'ensemble des donn&eacute;es. Plusieurs types
d'organisation peuvent &eacute;galement &ecirc;tre utilis&eacute;s de
fa&ccedil;on crois&eacute;e.</div>
<br style="color: rgb(81, 152, 174);">
<br style="color: rgb(81, 152, 174);">
<div style="text-align: right; background-color: rgb(51, 204, 255);">&nbsp;&nbsp;&nbsp;
<span style="color: rgb(0, 0, 153);"> &copy; <a href="Contact.html">2010</a></span>
</div>
</div>
</div>
</div>
</body>
</html>

Ne faites pas attention à la couleur et au texte, c'est juste pour vous montrer un exemple...

Allez je continue la création, j'espére que je n'ai pas trop d'erreurs parce que là j'ai déjà crée 5-6 pages...

portoss · Message par **portoss** » 16 juin 2010, 16:05

Bonjour;
Vous êtes tous partis en vacances ???

Pour la page html, ça va ? Rien de "grave" a signalé ?
J'ai une autre question, j'ai réussi à insérer le menu déroulant mais le probléme est que je peux rien mettre à coté (texte, images...) tout est en dessous du menu déroulant. C'est normal ?
De plus, la couleur du texte est noir par défaut. A chaque fois que je saute une ligne ou copie-colle du texte, je suis obligé de cliquer sur le carré bleu et modifier la couleur du texte. Comment puis-je mettre al couleur bleu du texte par défaut pour toute la page ?
@+

EDIT : pour ce qui est de la couleur du texte, c'est bon j'ai trouvé

Message par **chinon37** » 16 juin 2010, 17:00

portoss a écrit :Bonjour;
Désolé de répondre seulement maintenant, mais j'étais assez occuper les jours précédent que je n'ai pas pu accéder au PC.

Ben nous aussi!

J'ai l'impression que tu es atteint de divite aiguë! Pourquoi tous ces div dans les div? Ne peux-tu pas simplifier le code?
La mise en page ne doit pas se faire à coup de touches "entrée". Les propriétés css, les blocs titres les marges et espacements (padding) sont là pour ça.
Pour ton menu, tout depend de sa dimension, de son positionnement.

portoss · Message par **portoss** » 17 juin 2010, 10:57

chinon37 a écrit :
portoss a écrit :Bonjour;
Désolé de répondre seulement maintenant, mais j'étais assez occuper les jours précédent que je n'ai pas pu accéder au PC.
Ben nous aussi!

Ok, là je m'incline

chinon37 a écrit :J'ai l'impression que tu es atteint de divite aiguë! Pourquoi tous ces div dans les div? Ne peux-tu pas simplifier le code?
La mise en page ne doit pas se faire à coup de touches "entrée". Les propriétés css, les blocs titres les marges et espacements (padding) sont là pour ça.
Pour ton menu, tout depend de sa dimension, de son positionnement.

Pas tout compris là. Pour les div, je tape sur la touche "entrée" seulement lorsque je veux sauter une ligne et/ou modifier l'alignation du texte.
Je ne vois pas comment m'y prendre autrement

Est-ce vraiment nécessaire de modifier ou la divite aiguë peut-elle faire l'affaire ???

Après, pour mon menu déroulant, il est situé en haut à gauche de ma page, mais cela n'est pas très grave, j'ai juste un espace vide avant mon texte.

Sinon une autre question, est-il possible de faire en sorte d'afficher une image en taille réelle lorsque je clique dessus ? Au lieu de faire "clic droit" puis "afficher l'image".

Merci à vous pour vos réponse et bonne journée.

portoss · Message par **portoss** » 19 juin 2010, 12:18

Bonjour;
Bon je viens de regarder un peux avec le css, bloc de titres, padding... mais je ne vois toujours pas comment faire !!!
Je vous explique ma "méthode" comme ça ce sera peut être un peu plus clair :
"Imaginons une page sur fond quelconque !
Je commence par donné le nom de ma page ici Index.
Ensuite je définit la couleur de l'arrière plan, le header et autres.
Puis je commence à taper mon texte, je commence par un titre et pour cela je vais dans la barre d'outils et je sélectionne "Titre 2" par exemple.
Je saute 1 ou 2 ligne et j'écris mon texte.
Ensuite j'ai envie que le paragraphe suivant soit centré, dans ce cas je saute une ligne puis dans la barre d'outils je sélectionne "Centrer texte" et j'écris.
Et ainsi de suite.[/code]

Je ne vois donc pas d'autres solutions, sachant que le css est pour la feuille entière ou le menu déroulant, à moins que je dois crée un css pour chaque partie différentes de ma page !!!

Bref... j'attends avec grande impatience vos précieux conseils.
En attendant, je vous souhaite une agréable journée.

Geckozone

Insérer pages news, galeries... et un menu déroulant.

Re: Insérer pages news, galeries... et un menu déroulant.

Re: Insérer pages news, galeries... et un menu déroulant.

Re: Insérer pages news, galeries... et un menu déroulant.

Re: Insérer pages news, galeries... et un menu déroulant.

Re: Insérer pages news, galeries... et un menu déroulant.

Re: Insérer pages news, galeries... et un menu déroulant.

Re: Insérer pages news, galeries... et un menu déroulant.

Re: Insérer pages news, galeries... et un menu déroulant.

Re: Insérer pages news, galeries... et un menu déroulant.

Re: Insérer pages news, galeries... et un menu déroulant.

Re: Insérer pages news, galeries... et un menu déroulant.

Re: Insérer pages news, galeries... et un menu déroulant.

Re: Insérer pages news, galeries... et un menu déroulant.

Re: Insérer pages news, galeries... et un menu déroulant.

Re: Insérer pages news, galeries... et un menu déroulant.

Qui est en ligne ?