Code CSS catégorie design

4 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Code CSS catégorie design

Message par Rimbaude Sam 5 Juin 2010 - 13:11

Bonjour ou Bonsoir.

Je voudrais seulement savoir si quelqu'un aurait un code CSS pour que la présentation des catégories soient :

Code CSS catégorie design Img-131042jfupd

Merci d'avance pour votre aide et votre réponse.
Rimbaude

Rimbaude
Nouveau membre

Messages : 11
Inscrit(e) le : 06/12/2009

http://hemoglobine.forumactif.us
Rimbaude a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS catégorie design

Message par Ea Dim 6 Juin 2010 - 5:28

Bonjour,



Et bien pour les sujets : 7 | messages : 11 ça c'est une modification de template ^^

Pour les 2 blocs ça ce ne serait pas compliqué à faire en mettant juste du html + css dans la section ^^

Par exemple là pour pas se compliquer la vie on peut mettre un tableau :

Code:
<table style="width: 100%">
<tr>
    <td style="width: 80%">
      CONTENU CASE 1
    </td>
    <td style="width: 20%">
      CONTENU CASE 2
    </td>
</tr>
</table>
Et mettre comme contenu quelque chose du style :

Code:
<div class="blocdesc">Contenu du bloc</div>
En ayant mis dans le CSS ( PA > Affichage > Couleurs > Feuille de style CSS ) :

Code:
.blocdesc {
  width: 100%;
  margin: 60px;
  overflow-y: auto;
  border: 1px solid #fff;
  -webkit-border-radius:  6px; 
  -moz-border-radius:  6px; 
  border-radius:  6px;
  -moz-box-shadow: 0 0 4px #000;
  box-shadow: 0 0 4px #000;
  -webkit-box-shadow: 0 0 4px #000;
}
Et voici des explications sur ces propriétés pour pouvoir les modifier à ta guise Smile

    Code:
    width: 100%;
    C'est juste pour que ça fasse toute la largeur de la case.

    Code:
    margin: 60px;
    C'est pour que la hauteur de ces cases fasse 60 pixels.

    Code:
    overflow-y: auto;
    C'est pour que si il y ait trop de chose dans la case, on autorise une barre de défilement verticale à apparaitre ( normalement c'est de base comme cela ).

    Code:
    border: 1px solid #fff;
    C'est pour mettre un bord d'un pixel d'épaisseur, en continu ( donc pas pointillé, en tiret, ... ) et de couleur #fff ( quand on met que 3 chiffres hexadécimaux, chaque chiffre peut-être doublé pour nous donner la bonne couleur donc là c'est comme mettre #ffffff ).

    Code:
    -webkit-border-radius:  6px; 
    -moz-border-radius:  6px; 
    border-radius:  6px;
    Ces trois propriétés servent à la même chose, donc logiquement il faut y mettre la même valeur, il y en a plusieurs juste pour traiter les différents navigateurs. Ici on dit qu'on veut un bord de la case avec un rayon de 6 pixels ( pour se le représenter, ça signifie que si on avait un carré de 12 * 12 pixels avec cette propriété il serait rond ).

    Code:
    -moz-box-shadow: 0 0 4px #000;
    box-shadow: 0 0 4px #000;
    -webkit-box-shadow: 0 0 4px #000;
    Même cas qu'avant, les 3 propriétés font la même chose mais certaines marchent sur certain navigateurs alors que pour d'autre ce sont d'autres propriétés.

    Enfin le tout met une ombre à la boîte, le premier paramètre est le déplacement horizontal, le second le déplacement vertical, le troisième le degré de flou ( plus il y a un degré élevé plus ce sera répandu et rendu clair ) et puis le dernier paramètre est la couleur de l'ombre, c'est assez important car suivant le fond ça peut donner des très bons effets ou pas.

Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS catégorie design

Message par Rimbaude Mer 9 Juin 2010 - 13:14

Merci beaucoup x) Je vais voir si cela marche... résolu
Rimbaude

Rimbaude
Nouveau membre

Messages : 11
Inscrit(e) le : 06/12/2009

http://hemoglobine.forumactif.us
Rimbaude a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS catégorie design

Message par Natsoumie Dim 20 Juin 2010 - 21:57

Merci d'arrêter de pointer des créations venant d'Alderia pour en obtenir les codes.


Et pour ne pas parraitre mal élevé, je croyais que Forum Actif allait arrêter de donner les codes de divers Forums tout cuit dans le bec à des gens qui viennent les demander.

Hors, on ne dirait pas dans le cas présent. Dois-je rappeler que bien que les codes ne se protègent pas, les squelettes de Forums, eux se protègent et que Paparazzi, le thème est couvert par le copy right de France?

Alors, comment dois-je prendre la chose de mentionner comment faire exactement la même chose que la création de Paparazzi?
Natsoumie

Natsoumie
****

Féminin
Messages : 470
Inscrit(e) le : 14/07/2007

http://www.alderia.biz
Natsoumie a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Code CSS catégorie design

Message par Shadow Lun 21 Juin 2010 - 14:20

Bonjour Natsoumie,

Désolée, Etana a juste expliqué les priorités des attributs, le code CSS n'est pas sous votre nom. Merci d'éviter ce genre de message inutile et de respecter le travail des autres.

Sujet verrouillé.

Cordialement
Shadow

Shadow
Modéractive
Modéractive

Féminin
Messages : 24354
Inscrit(e) le : 30/03/2007

Shadow a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum