Code CSS catégorie design

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

Résolu Code CSS catégorie design

Message par Rimbaude le 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 :



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

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 le 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
Aidactif
Aidactif

Messages : 23417
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 le Mer 9 Juin 2010 - 13:14

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

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 le 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
****

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 le 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


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Shadow
Adminactive
Adminactive

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

http://forum.forumactif.com
Shadow a été remercié(e) par l'auteur de ce sujet.

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


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