lundi 26 novembre 2007

Comment faire des div aux bords arrondis en CSS?

Vous n'êtes pas spécialiste en CSS mais vous souhaitez tout de même avoir un site présentable graphiquement?
Un seul conseil => allez sur le site RoundedCornr.
Vous pouvez agrémenter vos div de bords arrondis et même de dégradés de couleurs.
Regardez ce que j'ai réussi à faire !

vendredi 23 juin 2006

Générateur de feuille de style

J'ai trouvé un site qui permet de générer un feuille de style de base. A vous de choisir le style approprié pour les tableaux, listes, titres, liens, corps du document...
Ce site est destiné à tout développeur ayant quelques difficultés avec les CSS. Vous n'avez plus besoin de taper du code, ce système est rapide et efficace. Vous pouvez maintenant vous concentrer sur vos styles un peu plus élaborés.
Voyez par vous-même : Générateur de feuille de style

vendredi 9 juin 2006

Firefox et l'extension Web Developer : CSS (1)

Je fais du développement PHP et je dois quelque fois modifier du CSS existant. Je ne sais pas du tout quels sont les fichiers et styles utilisés et je n'ai pas vraiment envie de faire un grep sur tous les fichiers CSS.
Une amie m'a conseillé d'utiliser une extension très pratique présente sur le navigateur Firefox : Web Developer

Comment faire pour savoir dans quel fichier et dans quel partie se situe tel div ou tel td ou tel form?

Mode d'emploi:

- Une fois l'outil téléchargé et installé, vous cliquez sur CSS --> View Style Information.
- Votre souris se transforme en une petite croix qu'il va falloir placer sur le style recherché,
- Au niveau de la barre d'état toute l'arborescence apparaît
- Puis cliquez une fois sur la zone en question,
- Une nouvelle fenêtre s'ouvre avec le fichier où se situe le style et la partie précise où il est défini.

Exemple :
Je vais sur ce site : http://www.spreadfirefox.com/

Je clique au niveau du menu sur Intro (cf.image 1),  et voilà ce que j'obtiens au niveau de la barre d'état (cf. image 2) et au niveau de la nouvelle fenêtre :
http://www.spreadfirefox.com/themes/spreadfirefox/style.css

a, .content a, *:link    (line 1082)
{
    color: rgb(0, 51, 153);
    text-decoration: underline;
}

a, .content a, *:link    (line 1082)
{
    color: rgb(0, 51, 153);
    text-decoration: underline;
}

a:hover, .content a:hover    (line 1089)
{
    color: rgb(51, 51, 51);
    text-decoration: underline;
}

#site-name, #site-name a, #header a    (line 189)
{
    color: rgb(255, 255, 255);
    text-decoration: none;
}

#header ul a    (line 220)
{
    float: left;
    display: block;
    padding-top: 4px;
    padding-right-value: 4px;
    padding-bottom: 4px;
    padding-left-value: 10px;
    padding-left-ltr-source: physical;
    padding-left-rtl-source: physical;
    padding-right-ltr-source: physical;
    padding-right-rtl-source: physical;
    background-color: transparent;
    background-image: url(header_tab.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    -x-background-x-position: 0%;
    -x-background-y-position: -600px;
    -moz-background-clip: -moz-initial;
    -moz-background-origin: -moz-initial;
    -moz-background-inline-policy: -moz-initial;
    font-weight: bold;
    color: rgb(255, 255, 255);
    text-decoration: none;
}

#header ul li:hover a    (line 229)
{
    -x-background-x-position: 0%;
    -x-background-y-position: -400px;
}

Copies d'écran
Image 1


Image 2 : html>body>div #wrapper1>div #wrapper2>div #header .header>
div .headpadding>ul #primary>li>a