Geckozone

je souhaiterais me mettre à la création de sites web en loisir et voici mon projet (voir 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

[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

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>

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

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