comment faire pour mon premier site

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

siger
Gecko
Messages : 98
Inscription : 25 nov. 2006, 10:58

comment faire pour mon premier site

Message par siger »

je souhaiterais me mettre à la création de sites web en loisir et voici mon projet (voir image).

Image

mon problème est que je ne sais pas comment faire pour faire une mise en page correcte avec les CSS pour les rubriques .
comment faire ?

merci de votre aide.
n'hésitez pas à me demander si je n'ai pas été clair.





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

Message par chinon37 »

[MODO]Merci de réduire la taille de la photo ci-dessus[/modo]
siger a écrit :comment faire pour mon premier site
Vaste question!!
Pour le menu (si je ne m'abuse, c'est la demande), je ferais une liste pour laquelle je supprimerais les puces. Ensuite, je définirais un fond vert et un cadre noir (comme à Saumur :P pouah, c'est pas bon, là, mais j'ai pas pu m'empêcher)pour chaque élément de la liste.

en pratique avec l'éditeur css:
ouvrir Kazcades par F11
- créer une régle: clic sur la palette de couleurs en haut à gauche de l'éditeur css > sélecteur: mettre ul (pour toute la liste> creer la règle de style
- dans l'onglet listes, type de puces: aucune

- créer une deuxième règle avec li
> dans l'onglet bordures, remplir les champs concernés
> dans l'onglet fond, choisir la couleur
> dans l'onglet boîte, choisir une dimension dans le champ largeur (ex: 150px), une dimension dans le champ hauteur (ex: 30px), une marge pour écarter les boite (ex: 5px). Tu peux ajuster avec les autres champs comme l'espacement etc...

code produit pour le css:

Code : Tout sélectionner

<style type="text/css">
ul {
    list-style-type: none;
    }
    li {
    border: 1px solid #000000;
    background-color: #649163;
    width: 150px;
    margin-top: 5px;
    height: 30px;
    }

    </style>
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.
siger
Gecko
Messages : 98
Inscription : 25 nov. 2006, 10:58

Message par siger »

merci beaucoup pouer ton aide et désolé pour la taille de la photo.

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

Message par chinon37 »

pour réduire la taille de l'image, il suffit que tu mettes une image plus petite chez ton hébergeur et elle se réduira automatiquement dans le 1er message.
(une largeur de 500px suffit amplement).
En réduisant ton image, tu supprimeras la barre de défilement horizontale (en bas de l'écran) dans ce post: celle-ci est pénible pour lire les messages.
Merci d'avance
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.
Répondre

Qui est en ligne ?

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