Code CSS catégorie design

[Rimbaude]

Bonjour ou Bonsoir.

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



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

[Ea]

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

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.

[Rimbaude]

Merci beaucoup x) Je vais voir si cela marche...

[Natsoumie]

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?

[Shadow]

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