osCommerce France : Accueil Forum Portail osCommerce France Réponses aux questions Foire aux contributions

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> Liste de tutoriels CSS, dernière MAJ : 10/04/2005
mosaic
posté 22 Feb 2005, 20:22
Message #1


Ceinture noire OSC
Icône de groupe

Groupe : Modérateurs
Messages : 2908
Inscrit : 24-October 04
Lieu : Quimper ( Finistère )
Membre no 3567



A la manière de Corbin, je me propose de tenir une liste de tutoriels CSS :

Peu à peu, ce post évoluera en fonction des tutoriaux intéressants et je m'efforcerai de les classer afin de mieux s'y retrouver :

On parle de css sur le forum francophone :
http://www.oscommerce-fr.info/forum/index....topic=18752&hl=


La version Osc entraide Projet de développement d'une solution Osc respectant les standards


Sommaire :

1 - Quelques définitions
2 - Liste des propriétés CSS
3 - Liste des sites traitant de CSS
4 - Quelques éditeurs CSS
5 - Quelques validateur d'accessibilité

Articles complémentaires :

Le sélecteur universel
Les 16 couleurs au nom prédéfini
Les polices de caractères
Majuscule et minuscule
Décorez vos titres
Différenciation des hyperliens internes et externes

Un bon nombre de sujets traités ici proviennent de l'excellent site d'alsacréations

user posted image

Méthodologie pour résoudre les problème d'affichage en css


1 - Quelques définitions :

CSS : Cascading Style Sheets ( Feuilles de style en cascade )

--------------------------------------------------------------------------------

Les feuilles de style en cascade représentent un type de langage HTML étendu qui donne un contrôle "absolu" sur l'apparence de vos pages web. Les CSS procurent une réelle rigueur typographique, un "look" et une maîtrise constante sur l'ensemble du site web. De ce fait on peut dire qu'elles donnent un pouvoir créatif à tous ceux qui n'en ont pas...Au départ du moins.

Une feuille de style en cascade est une liste de règles définies par le langage HTML.
Le terme en cascade se réfère à la manière dont les règles générales des CSS s'effacent devant les règles locales. Avec les CSS, vous pouvez définir des règles générales ou locales. Comme les règles locales l'emportent toujours sur les règles générales, on s'y réfère en tant que cascade.

Définition issue de media-box

--------------------------------------------------------------------------------

2 - Liste des propriétés CSS

Toutes les propriétés CSS et leur compatibilité avec les différents navigateurs

Vous retrouvez toutes ces propriétés sur media-box

2 - 1 ) La structure des balises

il existe deux grands groupes principaux de balises : les balises de type "bloc" et les balises de type "en-ligne" (ou "inline")

Ne vous inquiétéz pas, je traduirais prochainement les infos ci-dessous

2 - 1 - 1 ) Les balises en ligne

les "en-ligne" se placent toujours l'un à côté de l'autre afin de rester dans le texte. Par exemple : le renforcement d'une partie de texte à l'aide de la balise <strong>

Constatation par l'exemple :

CODE
<strong>Bienvenue</strong> et <em>cher visiteur</em>


Ce texte va s’afficher sur une seule ligne (aucun retour à la ligne) car les balises qui le définissent sont de type "en-ligne".

* A - Anchor
* ABBR - Abbreviation
* ACRONYM - Acronym
* B - Bold text
* BASEFONT - Base font change
* BDO - BiDi override
* BIG - Large text
* BR - Line break
* CITE - Citation
* CODE - Computer code
* DFN - Defined term
* EM - Emphasis
* FONT - Font change
* I - Italic text
* IMG - Inline image
* INPUT - Form input
* KBD - Text to be input
* LABEL - Form field label
* Q - Short quotation
* S - Strike-through text
* SAMP - Sample output
* SELECT - Option selector
* SMALL - Small text
* SPAN - Generic inline container
* STRIKE - Strike-through text
* STRONG - Strong emphasis
* SUB - Subscript
* SUP - Superscript
* TEXTAREA - Multi-line text input
* TT - Teletype text
* U - Underlined text
* VAR - Variable


2 - 1 - 1 ) Les balises en bloc

les "blocs" se placent toujours l'un en dessous de l'autre par défaut (comme un retour chariot). Par exemple: une suite de paragraphes (balise <p>) ou les éléments d’une liste (balise <li>).

Constatation par l'exemple : Un menu de navigation

CODE
<ul id="navlist">

<li><?php echo ' <a class="FooterPageLinks" href="' . tep_href_link(FILENAME_MENTIONSLEGALES) . '">' . HEADER_LINKS_MENTIONSLEGALES . '</a>';?></li>


<li ><?php echo ' <a class="FooterPageLinks" href="' . tep_href_link(FILENAME_WEBMASTER) . '">' . HEADER_LINKS_WEBMASTER . '</a>';?></li>


<li><?php echo ' <a class="FooterPageLinks" href="' . tep_href_link(FILENAME_LINKS) . '">' . HEADER_LINKS . '</a>';?></li>

<li><?php echo '<a class="FooterPageLinks" href="' . tep_href_link(FILENAME_SCOLAIRE) . '">' . HEADER_LINKS_SCOLAIRE . '</a>';?></li>

</ul>




* ADDRESS - Address
* BLOCKQUOTE - Block quotation
* CENTER - Centered block
* DIR - Directory list
* DIV - Generic block-level container
* DL - Definition list
* FIELDSET - Form control group
* FORM - Interactive form
* H1 - Level-one heading
* H2 - Level-two heading
* H3 - Level-three heading
* H4 - Level-four heading
* H5 - Level-five heading
* H6 - Level-six heading
* HR - Horizontal rule
* ISINDEX - Input prompt
* MENU - Menu list
* NOFRAMES - Frames alternate content
* NOSCRIPT - Alternate script content
* OL - Ordered list
* P - Paragraph
* PRE - Preformatted text
* TABLE - Table
* UL - Unordered list

* DD - Definition description
* DT - Definition term
* FRAMESET - Frameset
* LI - List item
* TBODY - Table body
* TD - Table data cell
* TFOOT - Table foot
* TH - Table header cell
* THEAD - Table head
* TR - Table row

* APPLET - Java applet
* BUTTON - Button
* DEL - Deleted text
* IFRAME - Inline frame
* INS - Inserted text
* MAP - Image map
* OBJECT - Object
* SCRIPT - Client-side script

--------------------------------------------------------------------------------


3 - Liste de sites traitant des CSS

Tutoriels Alsacréations :

Vous pouvez y retrouvez de nombreux tutoriels de mise en page, de création de menus et pleins d'infos sur les CSS.
A noter que ce site possède aussi un forum avec une communauté très active

Les articles CSS sur le blog d'elmoustiko :

Un roll over en CSS avec une seule image : "Ce petit tutoriel simple vous explique comment réaliser un menu codé en xhtml et mis en forme grâce aux css, le menu réagit au passage de la souris pour laisser apparaître une nouvelle image de fond. L'avantage de la méthode utilisée ici, est de n'utiliser qu'une seule image contenant l'état normal et l'état survolé. Ceci permet de découvrir l'image instantanément après le passage de la souris, l'image étant chargée une bonne fois pour toute dès l'affichage de la page".

Les tutos CSS de Mammouthland :

Pour les débutants, avec notamment un excellent générateur de Feuille de style

Les articles d'Openweb :
Pour se perfectionner dans les CSS

Liste des traductions françaises disponibles des documents W3C : Pour les pros qui n'ont pas peur de la lecture...

mandarindesign

Css drive
De nombreux exemples de sites utilisant les css

Cutting Edge Css
pleins de menus différents valides css

aleto.ch
En anglais, mais super intéressant. A noter que ce site propose aussi d'autres techniques
--------------------------------------------------------------------------------

4 - Quelques éditeurs CSS

TopStyle Lite 3.10

un logiciel freeware plutôt sympa
( proposé par kilix le 22/02/2005 )

--------------------------------------------------------

5 - Quelques validateurs d'accessibilité

Validateur d'accessibilité sur le site acces-pour-tous

Validateur CSS


--------------------
#mosaic {
autodidacte: max;
derision: min;
ms3: never;
occupation: 9999;
latitude : 48;
longitude : -4.1;
competent: none !important;
}

documentation MS2 / F.A.Q. / Contribes FR / Contribes US
Go to the top of the page
 
mosaic
posté 26 Feb 2005, 16:04
Message #2


Ceinture noire OSC
Icône de groupe

Groupe : Modérateurs
Messages : 2908
Inscrit : 24-October 04
Lieu : Quimper ( Finistère )
Membre no 3567



Le sélecteur universel

Pour appliquer exactement le même style à tous les éléments d'une page web, vous pouvez utiliser le sélecteur universel noté *.

* {
color: red;
font-family: verdana, sans-serif;
font-size: 100%;
font-weight: normal;
line-height: 1.4em;
}

Il sera donc logiquement à placer au début de votre feuille de style


Pour en savoir plus


--------------------
#mosaic {
autodidacte: max;
derision: min;
ms3: never;
occupation: 9999;
latitude : 48;
longitude : -4.1;
competent: none !important;
}

documentation MS2 / F.A.Q. / Contribes FR / Contribes US
Go to the top of the page
 
mosaic
posté 26 Feb 2005, 17:02
Message #3


Ceinture noire OSC
Icône de groupe

Groupe : Modérateurs
Messages : 2908
Inscrit : 24-October 04
Lieu : Quimper ( Finistère )
Membre no 3567



Les 16 couleurs au nom prédéfini

black #000000
gray #808080
maroon #800000
red #FF0000
green #008000
lime #00FF00
olive #808000
yellow #FFFF00
navy #000080
blue #0000FF
purple #800080
fuchsia #FF00FF
teal #008080
aqua #00FFFF
silver #C0C0C0
white #FFFFFF

Toutes les autres couleurs devront être codées en hexadécimal

Pour facilement se retrouver dans toutes les couleurs sécurisées pour le web, Pixelistan vous propose un script pour créer une page web avec un tableau de toutes ces couleurs pour le web

J'ai légèrement adapté celui-ci pour que vous n'ayez finalement que ce code à placer dans une nouvelle page

En local, dans votre rep www/ créer un nouveau dossier que vous appelerez par exemple couleursweb

Créez alors www/couleursweb/index.html et copiez-y le code ci-dessous :

CODE
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Date de création: 26/02/2005 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
h1 {
font-size: 2em;
margin: 1.5em;
border: 2px solid #ccc;
background-color:  #ffffa0;
padding: 0.5em;
}

p {
font-size: 1em;
margin: 1.5em;
font-weight: bold;
}

.tableauhexadecimal {
font-size: 1.2em;
margin-left: 6em;
}
</style>
</head>
<body>
<h1>Palettes de couleurs pour le web</h1>
<p>Retrouvez sur cette page les 512 valeurs hexadécimales</p>
<p>Ce tableau est issu d'un tutoriel de <a href="http://www.pixelistan.com/pages/tutoshop_couleurs_hexa.htm">Pixelistan</a>
<br />N'oubliez pas de placer # devant le code hexadécimal</p>
<div class="tableauhexadecimal">
<script language="JavaScript1.1" type="text/javascript">
clr=new Array('00','20','40','60','80','a0','c0','ff');
for (i=0;i<8;i++) {
document.write("<table border=0 cellpadding=15>");
for (j=0;j<8;j++) {
document.write("<tr>");
for (k=0;k<8;k++) {
document.write('<td bgcolor="#'+clr[i]+clr[j]+clr[k]+'">');
document.write('<tt><font color="#'+clr[7-i]+clr[7-j]+clr[7-k]+'"> ');
document.write(clr[i]+clr[j]+clr[k]+' </font></tt></td>'); }
document.write("</tr>"); }
document.write("</table><br>"); }
</script>
<div>

</body>
</html>


--------------------
#mosaic {
autodidacte: max;
derision: min;
ms3: never;
occupation: 9999;
latitude : 48;
longitude : -4.1;
competent: none !important;
}

documentation MS2 / F.A.Q. / Contribes FR / Contribes US
Go to the top of the page
 
mosaic
posté 26 Feb 2005, 19:47
Message #4


Ceinture noire OSC
Icône de groupe

Groupe : Modérateurs
Messages : 2908
Inscrit : 24-October 04
Lieu : Quimper ( Finistère )
Membre no 3567



Les polices de caractères

Tailles relatives

Il est conseillé d'utiliser des tailles relatives (em)* au lieu de tailles fixes (px) pour les caractères.

arrow.gif Ne pas fixer de corps de base.

En effet, le corps de base étant déterminé par le visiteur dans les préférences de son navigateur

arrow.gif Fixer tous les autres corps en valeurs proportionnelles au corps de base (de préférence en cadratin - em).


Cette méthode a plusieurs avantages, notamment de s’adapter aux préférences (ou handicaps visuels) des visiteurs ; certains qualifient cette approche de la seule méthode conforme aux normes d’accessibilité.

Elle permet aussi de s’adapter à tout média (pas seulement l’écran d'ordinateur)


Tailles prédéfinies par le navigateur

Les feuilles de style offrent aussi deux autres possiblités dans la continuité de ce qu'on faisait en HTML classique :

Leur interprétation est laissée aux soins du navigateur du visiteur :
xx-small x-small small medium large x-large xx-large

Malheureusement, la taille par défaut du navigateur correspond plutôt à small («petit») pour Explorer et à medium («moyen») pour NN6 et Mozilla, ce qui veut dire qu'on risque de se décaler d'un cran dans cette hiérarchie de tailles en passant d'un navigateur à un autre. Par ailleurs, l'éventail des tailles est bien plus grand dans Explorer que dans NN6. Notre avis est qu'on s'expose à des variations trop grandes d'un visiteur à l'autre en définissant ainsi les tailles de police.

Tailles relatives

Tout comme dans le HTML classique et son codage par size="+1" ou size="-1", on peut aussi simplement demander des caractères plus grands ou plus petits que dans l'élément contenant (larger ou smaller dans le codage).

Définir plusieurs polices

il y a un risque pour que la police que vous utilisez soit absente de l'ordinateur de votre visiteur

L'astuce consiste simplement à ne pas indiquer une seule police mais au moins trois (une présente sur PC, une autre présente sur Mac et une présente sous Linux et de définir également un type de police :

body {
font-family : arial, helvetica, sans-serif;
}
ou
body {
font-family : 'times new roman', times, serif;
}

En procédant ainsi (appel de la police Windows puis la police équivalente pour Mac et enfin le type de police) vous limitez au maximum les problèmes. Le navigateur cherchera à utiliser la police Arial, si il ne la trouve pas il cherchera la police Helvetica et en cas de recherche infructueuse, il utilisera la police sérif par défaut.

Issu de l'excellent site accès pour tous


--------------------
#mosaic {
autodidacte: max;
derision: min;
ms3: never;
occupation: 9999;
latitude : 48;
longitude : -4.1;
competent: none !important;
}

documentation MS2 / F.A.Q. / Contribes FR / Contribes US
Go to the top of the page
 
mosaic
posté 3 Mar 2005, 18:41
Message #5


Ceinture noire OSC
Icône de groupe

Groupe : Modérateurs
Messages : 2908
Inscrit : 24-October 04
Lieu : Quimper ( Finistère )
Membre no 3567



Majuscule et minuscule

Propriété text-transform

arrow.gif None : sans effet sur le texte

arrow.gif Lowercase : toutes les lettres de chaque mot seront en minuscules

arrow.gif Uppercase : toutes les lettres de chaque mot seront en majuscules

arrow.gif Capitalize : la première lettre de chaque mot sera en majuscule



--------------------
#mosaic {
autodidacte: max;
derision: min;
ms3: never;
occupation: 9999;
latitude : 48;
longitude : -4.1;
competent: none !important;
}

documentation MS2 / F.A.Q. / Contribes FR / Contribes US
Go to the top of the page
 
mosaic
posté 5 Mar 2005, 22:19
Message #6


Ceinture noire OSC
Icône de groupe

Groupe : Modérateurs
Messages : 2908
Inscrit : 24-October 04
Lieu : Quimper ( Finistère )
Membre no 3567



Décorez vos titres :

Les titres peuvent êtres définies à l'aide des balises h1, h2, ..., h6

Pour donner un peu de style à vos titres, voici quelques propriétés :

dans votre stylesheet.css :

CODE
h2 {
line-height: 1em;
background-color: #fff;
padding-left: 2em;
color: #769712;
font: 1.2em "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
font-weight: bold;
padding-bottom: 0.7em;
border-bottom : 1px solid #ccc;
background: url(http://.../catalog/images/icontitre.gif) no-repeat left top;
}


et dans votre fichier

<h2>Sous-titre</h2>

Attention à bien respecter l'ordre des titres ( celà est important, entre autre, pour l'accessibilité )


--------------------
#mosaic {
autodidacte: max;
derision: min;
ms3: never;
occupation: 9999;
latitude : 48;
longitude : -4.1;
competent: none !important;
}

documentation MS2 / F.A.Q. / Contribes FR / Contribes US
Go to the top of the page
 
mosaic
posté 25 Mar 2005, 17:00
Message #7


Ceinture noire OSC
Icône de groupe

Groupe : Modérateurs
Messages : 2908
Inscrit : 24-October 04
Lieu : Quimper ( Finistère )
Membre no 3567



Opacité - transparence des images sur Firefox

/* effet d'opacité sur les images */
img { filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5; }

a:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}

Source : http://www.mandarindesign.com/opacity.html...citynoscripting


--------------------
#mosaic {
autodidacte: max;
derision: min;
ms3: never;
occupation: 9999;
latitude : 48;
longitude : -4.1;
competent: none !important;
}

documentation MS2 / F.A.Q. / Contribes FR / Contribes US
Go to the top of the page
 
mosaic
posté 25 Mar 2005, 18:20
Message #8


Ceinture noire OSC
Icône de groupe

Groupe : Modérateurs
Messages : 2908
Inscrit : 24-October 04
Lieu : Quimper ( Finistère )
Membre no 3567



Pour n'appliquer une feuille de style que à IE, placer les lignes suivantes avant l'appel à la feuille de style classique :

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Celà permet ainsi de résoudre les problèmes d'affichage


--------------------
#mosaic {
autodidacte: max;
derision: min;
ms3: never;
occupation: 9999;
latitude : 48;
longitude : -4.1;
competent: none !important;
}

documentation MS2 / F.A.Q. / Contribes FR / Contribes US
Go to the top of the page
 
mosaic
posté 26 Mar 2005, 15:40
Message #9


Ceinture noire OSC
Icône de groupe

Groupe : Modérateurs
Messages : 2908
Inscrit : 24-October 04
Lieu : Quimper ( Finistère )
Membre no 3567



Différenciation des hyperliens internes et externes

Objectif :
Prévenir clairement l'internaute des conditions dans lequel il va quitter le service en ligne qu'il visite.

Solutions techniques possibles :
Il est possible d'ajouter l'information dans le libellé du lien ou dans le titre du lien, dans le comportement du lien (ouverture dans une nouvelle fenêtre).



CODE
<a href="http://www.openweb.eu.org" class="lienexterne">OpenWeb</a>


.lienexterne:after {
content:" (ce lien cible un site externe)"
}


Fiche n°50 sur la bonne pratique opquast ( http://www.opquast.org/ )


--------------------
#mosaic {
autodidacte: max;
derision: min;
ms3: never;
occupation: 9999;
latitude : 48;
longitude : -4.1;
competent: none !important;
}

documentation MS2 / F.A.Q. / Contribes FR / Contribes US
Go to the top of the page
 
manmachine
posté 13 Apr 2005, 18:58
Message #10


Ceinture marron OSC
Icône de groupe

Groupe : Modérateurs
Messages : 1814
Inscrit : 2-July 04
Lieu : Nantes
Membre no 2788



je me permet d'ajouter ceci qui me semble plus qu'important !

QUOTE (Holly Bergevin et John Gallant)

Habituellement, quand de nouveaux codeurs commencent à apprendre CSS, ils regardent le résultat de leurs efforts dans IE/Win, ce navigateur étant installé sur la plupart des ordinateurs. Étant novices en CSS, ils expérimentent jusqu'à trouver un code qui rend bien sous IE. Mais sans le savoir ils se forment à utiliser du code non standard pour y arriver. Puis, quand ils entendent parler d'autres navigateurs et téléchargent l'un ou l'autre, ils sont choqués de voir leurs belles créations mutilées. Naturellement, ils blâment ces navigateurs, convaincus de leur culpabilité, alors que la faute revient en fait à leur IE bien-aimé. Quand un patron leur dit qu'il doivent « faire marcher le site » dans tous les navigateurs modernes, ils tentent frénétiquement de corriger ces navigateurs alternatifs, sans savoir que IE est la source du problème.


aller :

user posted image


--------------------
Nous ne sommes pas un SAV, nous aidons, mais nous ne faisons pas à votre place ..
Go to the top of the page
 
lateralus
posté 26 May 2006, 11:14
Message #11


Ceinture jaune+ OSC
Icône de groupe

Groupe : Membres
Messages : 80
Inscrit : 20-July 05
Lieu : Scionzier (74)
Membre no 6571



La liste (et les correspondances) pour tous les caractères spéciaux en HTML :
http://www.htmlgoodies.com/beyond/referenc...cle.php/3472611


--------------------
Affichage sstotal HT, Bookmark, Browse by Categories 2.5, Category box enhancement, Contact us choice 1.0.1, Featured products 1.5.5.1, MultiGeoZone MultiTable Shipping 1.101, Os Active Desktop 2.3, Paymenttypes 1.2, Phpmyvisites 2.1, Session counter, Skype Contact 1.0, Stats products per month 1, Store Pick Up Version 1.4, Updated spiders.txt, Who's Online Enhancement 2.00, BackButtons, Google Analytics, stats_sales_csv_1.2, google_position_1.3, Customers List Improved 1.4, boxe defilante, add_button_back, xsell_v2.2_1, product_sort_v1.6, Description in Product Listing 2.5
Go to the top of the page
 
profilm
posté 3 Jun 2006, 22:34
Message #12


Ceinture orange OSC
Icône de groupe

Groupe : Membres
Messages : 188
Inscrit : 22-June 05
Membre no 6286



CITATION(lateralus @ 26 May 2006, 05:14) [snapback]176403[/snapback]

La liste (et les correspondances) pour tous les caractères spéciaux en HTML :
http://www.htmlgoodies.com/beyond/referenc...cle.php/3472611


Bonjour

La même chose en français dans le texte : Référence HTML pour les caractères ..

Cordialement
Thierry


--------------------
Go to the top of the page
 
Gnidhal
posté 20 Jun 2006, 20:29
Message #13


5eme dan OSC
Icône de groupe

Groupe : Administrateur
Messages : 9221
Inscrit : 4-March 03
Lieu : Pau
Membre no 927



Truc déjà cité par Mosaic mais avec une référence qui complète :
comment masquer une feuille de style à IE ou la masquer aux autres navigateurs :
les trucs et astuces sont là : http://www.blog-and-blues.org/articles/Les...pour_IE_Windows
il y a plusieurs méthodes qui exploitent les failles du naviagteur Microsoft (elle sont nombreuses)


--------------------
Tout d'abord : - Ni Hotline ni Service Après Vente, ces forums sont un lieu d'échange. BIEN POSER SA QUESTION (généralités)
Les "Informations Importantes" que vous devez ABSOLUMENT avoir lues :
Règlement, Bien poser sa question dans ces forums et Bien utiliser les Forums.
Les raccourcis pour gagner du temps : la FAQ, les PDF de la Doc (MS2-fr): PDF-V1 et PDF-V2, le moteur de Recherche sur les forums , la Liste des Contributions de Corbin.

----------------------------- Quelques sites de référence ---------------------------
PHP: Le site du Zéro et PHP Débutant avec la DOC en français -- HTML: Self HTML - WebProgrammation -- CSS: OpenWeb - AlsaCréations - CSS/Edge -- Autres ressources: - XajaX - highslide js
Les bons outils : EasyPHP - WAMP-5 - - Notepad++ - Firefox et son extension WebDeveloper
Le gène idéal c'est le gène original. Le génie des halles est un Génie des Alpages qui tente d'être à la page. (Merci f'murrr pour les cours de philosophie de chien)
Go to the top of the page
 
PAT.K
posté 19 Apr 2007, 15:32
Message #14


Ceinture blanche OSC
Icône de groupe

Groupe : Membres
Messages : 1
Inscrit : 19-April 07
Membre no 16698



/* **********************************/
/* les differents selecteurs */
/* **********************************/
/* 1. s'applique à toutes les balises p */
p {
font:Arial, Helvetica, sans-serif small bold ;
color:blue;
}
/* **********************************/
/* 2. s'applique à toutes les balises div ayant comme classe "jaune" */
div.fd_jaune {
font:Arial, Helvetica, sans-serif small bold ;
font-variant: normal;
background-color: #FFCC00;
}
/* **********************************/
/* 3. s'applique à toutes les balises ayant comme classe "rouge" */
.rouge {
/* la propriété inherit indique la classe ici definie herite de la classe du parent */
font-variant: inherit;
font-weight: bold;
color: #CC0000;
}
/* **********************************/
/* selecteur universel */
* {
background-color:#cccccc;

}
/* **********************************/
/* selecteurs d'identifiant id */
#menu_bleu {
background-color:#0099FF;
color:#CCC;
}

/* **********************************/
/* selecteurs d'attributs */
/* igorés par IE */
/* concerne toutes les balises acronym ayant pour atribut tittle */
acronym[title] {
background-color:green;
}
*[title]{
letter-spacing:10px;
}
/* concerne toutes les balises h1 ayant pour atribut tittle et id */
h1[title][id] {
color:#000000;
background-color:#FFFFFF;
}
h1[title="titre 1"] {
text-align:center;
}

/* **********************************/
/* sélecteurs parent descendants */
/* igorés par IE */
div h2 {
border: double;
}
ul li {
background-color:black;
}
ul li ol li {
background-color:red;
}
/* **********************************/
/* sélecteurs d'elements adjacents */
/* s'applique au deuxieme élément ayant un lien de fratie */
/* s'il suit immediatement le premier */
div+h3{
font-size:large;
color:green;
}


/* *************************************/
/* les pseudo-classes
/* ************************************/

/* les liens */
/* link permet d'igorer les ancres nommées */
a:link {
color:#FF6600;
}
a:visited {
color:#000099;
}
a:hover {
background-color:#660000;

}
/* lors du clic */
a:active {
background-color:#FFFFFF;
}
/*******************************/
/* igorés par IE */
input:focus {
background-color:#0099FF;
color:#FFFFFF;
}
/* s'applique à la balise p uniquement si elle est le premier enfant */
p:first-child {
background-color:#FFFFFF;
}
/* si on veut appliquer un style suivant une langue : <p lang="fr">pseudo-classe lang</p>*/
p:lang(fr) {
background-color:#FFFF00;
color:#000000;
}

/* *************************************/
/* les pseudo elements
/* ************************************/
#pseudo_element {
color:#000000;
}
#pseudo_element:first-letter {
font-size:300%;
}
#pseudo_element:first-line {
color:#FF0000;
}

/* ajoute au debut ou à la fin les caractères définis dans le content */
/* igorés par IE */
#pseudo_element_2:before {
content:"<<";
font-weight:bold;
color:#000000
}
#pseudo_element_2:after {
content:">>";
font-weight:bold;
color:#000000;
}
/* !important */
/* s'il ya conflit entre 2 propriété !important prend la priorité */
/* la classe ci-dessous forcera tous les fonds en bleu */
/*///////////////////////////
* {
background-color:#CCCCFF !important;
}
//////////////////////////////*/
Go to the top of the page
 
fc_pim
posté 23 Aug 2007, 11:05
Message #15


Ceinture jaune OSC
Icône de groupe

Groupe : Membres
Messages : 59
Inscrit : 7-August 07
Membre no 18625



Je crois que l'éditeur cité dans le premier post en tant que Freeware est desormais payant pour la somme de 80 $.
Peut etre faut il editer le message ?

(N'hesitez pas a supprimer mon message en cas de besoin une fois qu'un moderateur / administrateur en aura pris connaissance)
Go to the top of the page
 
fissiaux
posté 23 Aug 2007, 18:24
Message #16


5eme dan OSC
Icône de groupe

Groupe : Membres
Messages : 17048
Inscrit : 26-November 03
Lieu : Chez moi
Membre no 1669




Pas pour la version Lite comme Mosaic avait écrit.

Lien au milieu de la page

http://www.newsgator.com/Individuals/TopStyle/Default.aspx
Go to the top of the page
 
fc_pim
posté 24 Aug 2007, 08:54
Message #17


Ceinture jaune OSC
Icône de groupe

Groupe : Membres
Messages : 59
Inscrit : 7-August 07
Membre no 18625



Ah oui effectivement... je n'avais pas vu.
Et bien, peut etre que mon message servira a d'autres qui auraient loupé la version free a leur premier passage.

Merci pour ta réponse.
Go to the top of the page
 

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



RSS Version bas débit Nous sommes le : 19th March 2024 - 11:42
Ce site est déclaré auprès de la commision Nationale
de l'Informatique et des Libertés (déclaration n°: 1043896)