28172 sujets

CSS et mise en forme, CSS3

Hello,

Aucun problème à signaler. Je voulais juste vous montrer ce petit projet pour rire sur lequel j'ai passé quelques heur... dizaines d'heures. Smiley smile
C'est une feuille de styles réutilisable qui permet d'afficher du texte HTML simple (titres, paragraphes, citations, listes... ce qu'on trouve dans un article ou billet de blog par exemple) comme si c'était du texte brut utilisant la syntaxe Markdown.

N'hésitez pas à consulter la feuille de styles, il y a des astuces sympa:
http://covertprestige.info/css/remarkdown/remarkdown.css

Et si vous trouvez des moyens élégants pour contourner les problèmes rencontrés ici (en anglais), faites-moi signe par mail ou en réponse dans ce sujet. Smiley cligne
Bonsoir,

Merci Florent pour ces liens, je vais me pencher sur les subtilités de ce CSS qui à l'air bien poussé ! A étudier en détails. Smiley cligne
Modifié par Spacedementia (26 Jan 2011 - 22:45)
bonsoir,

une petite idée pour <ol start> et <ol><li value>.

En selectionnant l'attribut et sa valeur avec un compteur initialisé a une valeur differente de 1 , on peut demarrer le comptage a peu prés ou l'on veut.
En testant des valeur negatives, opera, firefox et Ie8 semble être d'accord via css content et counter, c'est moins evident en se basant sur le simple attribut html.
test en ligne :
http://yidille.free.fr/plux/valign/uploads/ol-li-css-start-value.html
ou en copier/coller :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>test CSS. selecteur d'attribut[value]</title>
  <style type="text/css" media="screen">
/* mise en forme puce , css content  et initialisation du compteur */
ul {list-style-type:decimal;}
ol {
counter-reset: item;
list-style-type:none;
border:solid;
}
li {counter-increment:item;clear:left;}
ol li:before {content:counter(item)' -';
display:inline-block;
width:2em;
padding-right:0.5em;
text-align:right;
}
li[value] {font-weight:bold;background:lightblue;float:left;}
/* bidouille a mano pour  value  */
li[value="10"], ol[start="10"]  {
color:red;
counter-reset: item 9;
counter-increment: item;
}
ol[start="-5"]  {
color:purple;
counter-reset: item -6;
counter-increment: item  ;
}
ol[start="-5"] li:before {content:counter(item)'°C';} /* pour justifier ce compteur [cligne] */
li[value="0"]  {
color:green;
counter-reset: item -1;
counter-increment: item ;
}
</style>
</head>
<body>
<h1>test avec l'attribut start sur ol et value sur li dans des liste ordonnées et non-ordonnées</h1>
<h2>tests ol avec feuille de style comme correctif correctif</h2>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li value="-200">item 4 (value="-200" sans style)</li>
<li>item 5</li>
<li>item 6</li>

<li value="10">item 7  (value="10")</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>

<li value="0">item 12  (value="0")</li>
<li>item 13</li>
<li>item 14</li>
</ol>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li value="-200">item 4 (value="-200" sans style)</li>
<li>item 5</li>
<li>item 6</li>
</ol>
<ol>
<li value="10">item 1  (value="10")</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ol>
<ol>
<li value="0">item 1  (value="0")</li>
<li>item 2</li>
<li>item 3</li>
</ol>
<ol start="10">
<li>item 1  (ol start="10")</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ol>
<ol start="-5">
<li>item 1  (ol start="-5")</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ol>
<h2> list ul sans style </h2>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li value="-200">item 4 (value="-200")</li>
<li>item 5</li>
<li>item 6</li>
<li value="10" >item 7  (value="10")</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
<li value="0">item 12  (value="0")</li>
<li>item 13</li>
<li>item 14</li>
</ul>
<ul start="-5">
<li>item 1  (ul start="-5")</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</body>
</html>
Administrateur
Hello,

Cela fait plusieurs fois que je passe sur ce projet, que je survole la page de présentation et les explications et j'en viens toujours à la même conclusion : je dois être un peu trop fatigué en ce moment (une grippe qui traîne) et pas très réceptif, mais... à quoi ça sert en fait ? Smiley confus
fvsch a écrit :
C'est marqué sur la page de garde (certes en anglais) que ça sert à rien. Smiley smile

c'est tout l'attrait de la chose Smiley smile

Pour le selecteur Smiley start ou Smiley value , je ne comprend pas tout a fait ce qui clocherait.
Le selecteur est autant valide que class ou "balise x" et ne servirait qu'a réinitialisé le compteur(en surchargeant considérablement la feuille de style pour chaque valeur possible, soit).
Dommage qu'il ne soit pas possible de réinjecter et utiliser la valeur en reset via : attr(start) ou attr(value).

GC
gc-nomade a écrit :
(en surchargeant considérablement la feuille de style pour chaque valeur possible, soit)

Voilà, c’est ça qui cloche. J'ai essayé avec attr(start) mais ça ne prends pas, ce qui est logique vu que la spec 2.1 n'inclut pas cette fonctionnalité.
Dans l'idéal il faudrait que le navigateur expose le compteur par défaut, par exemple on pourrait faire:
ol {counter-reset: default 0;}
ol>li {counter-increment: default 10;}
et sans avoir à générer de pseudo-élément :before ou autre le compter par défaut des items de liste ordonnée afficherait 10, 20, 30, etc.