Oliblog's area (le blog de Olipro)
Retour au blog <<

Nouvelle CSS medievale

Mardi 29 janvier 2008 à 22 h 58
Edit : cette CSS n'est plus pour le moment, pour cause d'incompatibilité avec ie6

Plusieurs heures de boulot, mais ça y'est, j'y suis arrivé. Je vous laisse observer le nouveau décors de mon blog de votre oeil critique.
J'ai tout testé avec Firefox mais je n'utilise pas d'outils liées à firefox. Je sais qu'avec internet explorer, cette CSS ne marche pas du tout, et pour les autres je n'en sais rien.

Concernant le choix artistique, je fais appel à votre bon sens pour la critique. Si vous n'aimez ni le moyen-age, ni les peaux de Pergames, alors oubliez tout de suite.

Je vous laisse le lien vers la CSS si ça peut en aider quelques uns. Ce n'est pas ce qu'il y a de plus propre niveau présentation et ergonomie. CSS

J'oubliais : c'est prévu pour une résolution de 1024*768, mais j'ai aussi prévu de la marge pour vos 1280*1024. Il y a un possible décallage du parchemin pour les eeepc par contre.

Risques de bug :
- Ascenseur des archive.
- Barres des liens nofrag en bas.
- Decallage du parchemin.
- Affichage hasardeux pour des résolutions suppérieures à 1280*1024 (je n'aime pas spécialement les %, désolé.)
- Option d'admin qui déconnent, elles se trouvent trop à droite. Pour vous, c'est le bouton "modifier" à coté de votre commentaire. Mais comme c'est dans le meme lot que MES options d'administration, ça déconne un peu. Alors demerdez vous : "modifier" sera 10 cm à droite de votre réponse, pas trop grave :-)
par hervai
Mardi 29 janvier 2008 à 23 h 02
Ca sent pas le HD l'image de fond, dommage
par Olipro
Mardi 29 janvier 2008 à 23 h 05
J'ai passé une demi heure à la traiter cette image... C'est vraiment tres dur de rendre une grosse image nette.
Mardi 29 janvier 2008 à 23 h 06
C'est pas mal fait, mais c'est spécial tout de même. Fin je vais pas trop rammener ma gueule, puisque je suis incapable de faire la même chose.
par Olipro
Mardi 29 janvier 2008 à 23 h 16
Avec ces bugs de panneaux d'admin, j'ai supprimé le dernier commentaire malgré moi. Désolé.
Mardi 29 janvier 2008 à 23 h 19
J'aime bien l'idée du parchemin qu'on déroule. Bien vu.
par Winamp
Mardi 29 janvier 2008 à 23 h 22
ouais, bien vu, mais j'aurais quand même fait un rouleau de pq
par JiHeM
Mardi 29 janvier 2008 à 23 h 25
Le titre de l'article est presque entièrement enroulé, il faudrait tirer un peu plus.
par PoRCo
Mardi 29 janvier 2008 à 23 h 28
C'etait pour de blaguer loOL
par Olipro
Mardi 29 janvier 2008 à 23 h 32
t'en fais pas ;) c'était pas erreur, ça a supprimé le dernier message posté, connement.
Pour le titre enroulé, c'est réglé, merci.
Mardi 29 janvier 2008 à 23 h 33
Pareil que Jihem. Sous opéra ca rend comme sur Firefox.
Mardi 29 janvier 2008 à 23 h 40
Moui.
Mardi 29 janvier 2008 à 23 h 47
C'est super sympa, je trouve juste dommage que la fin de l'article ne soit pas plus marquée (entre la fin de l'article et les commentaires, il n'y a pas d'espace du coup tu ne sais pas ou s'arrete l'un et ou commencent les autres).

Sinon ? Beau boulot !
par Olipro
Mardi 29 janvier 2008 à 23 h 54
Ah oui merci pour la remarque, ça doit etre que le trait est caché juste à la limite. Je vais voir ça.
Mardi 29 janvier 2008 à 23 h 55
fake !
Mercredi 30 janvier 2008 à 00 h 06
J'écris ce commentaire juste pour voir le bouton Modifier qui déconne.

EDIT : Ah ouais quand même.
par jye
Mercredi 30 janvier 2008 à 00 h 18
Idem je suis curieux.

Edit : Et pourquoi tu ne mets pas :

#main div.admin {
...
margin-left:240px;
top:0px;
...
}
par Shinoda
Mercredi 30 janvier 2008 à 00 h 21
tu peux changer la police ou pas ?
par moSk
Mercredi 30 janvier 2008 à 00 h 21
L'image de fond est quand même assez abimée :/
par PoFzz
Mercredi 30 janvier 2008 à 00 h 29
Ah ouais ! C'est sympa !
par QQQ
Mercredi 30 janvier 2008 à 00 h 57
Le gout est assez douteux, ce qui reste totalement subjectif, mais j'aime bien aussi le parchemin. L'effet est fun.
Mercredi 30 janvier 2008 à 03 h 03
Un volontaire pour faire un rouleau de PQ ?
par biblix
Mercredi 30 janvier 2008 à 10 h 58
Splendide toussa


Mais moche sur un 20", tu as eu la bonté de le préciser au moins.
par Olipro
Mercredi 30 janvier 2008 à 18 h 02
Jye,
merci, je vais essayer cela.
Shinoda,
oui absolument. Je vais essayer quelques polices, mais si tu as une idée particuliere en tête, n'hésite pas à la transmettre.
Aux autres :
Vous ne pensez donc qu'au caca !
par Olipro
Mercredi 30 janvier 2008 à 18 h 07
Alors j'explique :
si je décalle les boutons "modifier/supprimer" vers la gauche, alors MON panneau d'administration se retrouve lui aussi décallé vers la gauche, c'est à dire derriere les articles. Je ne peux plus le voir.
Et comme je n'ai pas trouvé la moindre trace de ce panneau d'administration dans le source du blog, je ne peux pas le deplacer independement.
Je ne connais pas son nom
mais ça serait un truc du genre :

#admin <nom du panneau d'administration>
{position : fixed
margin-left : 800px;
}

Il ne reste plus qu'à determiner quoi mettre entre les guillemets
Tant que l'on n'aura pas décidé d'un code universel pour toute chose liée à la spécification, l'informatique sera toujours et constemement ralentie lors du passage d'une personne à une autre.
par jye
Mercredi 30 janvier 2008 à 18 h 27
#comments div.admin {
margin-left:240px;
top:0px;
}

Faudrait ptete pas oublier qu'on peut pas tout faire sans maitriser un peu. Si tu maitrisais les feuilles de style tu n'aurais aucun probleme. Enfin j'avoue ne pas avoir vraiment compris le sens de ta phrase.
par Olipro
Mercredi 30 janvier 2008 à 18 h 50
Non tu n'avais pas compris. Enfin je pense que si je ne connaissais pas les feuilles de style je n'aurai sans doute pas fait cette css.
Non en fait c'était cette page html en particulier que je ne maitrisais pas, c'est à dire la division "comment" dans admin. J'ignorais son existence, et comme elle n'est pas dans le source (surement dans un module php ou java, là par contre je n'y connais rien) je ne pouvais pas la deviner.

c'est à dire que je sais que si je veux modifier toto sans modifier dudule dans :
<div name="prout">
<div name="toto">
</div>
<div name="dudule">
</div>
</div>
je sais quoi faire. Mais si j'ignore l'existence du nom "toto" c'est pas gagné. On se comprend ?

encore qu'on ne devrait meme pas raisonner comme ça. Dans 10 ans ça aura encore changé. Un raisonnement pur dirait que :
si toto : prout & dudule : prout
alors pour modifier toto sans modifier dudule il faut faire [prout] toto{}


(tiens d'ailleur moi j'aurai plutot fait #admin comments {...}
là j'ai une defaillance, faudrait que je revoie mes cours...)
Mercredi 30 janvier 2008 à 19 h 41
"- Affichage hasardeux pour des résolutions suppérieures à 1280*1024 (je n'aime pas spécialement les %, désolé.)"

Hmmm... c'est très mal spécifié tout ca :)))
par jye
Mercredi 30 janvier 2008 à 20 h 01
Alors soit je ne comprends vraiment rien à tes propos (le prend pas mal hein), soit tu te trompes ?

Les feuilles de style s'applique sur du code html, le code html est "executé" coté client (sur ton navigateur donc), il est donc impossible que des elements dont tu donnes un style avec ta css soit absent de ta page html (comme l'est du code PHP ou JAVA, mais le code HTML ne peut pas etre caché par du code PHP ou JAVA puisqu'a ce moment là, c'est executé coté serveur et ton navigateur ne pourra pas lire ce code - et donc afficher ta page).

Sinon dans ton exemple tu confonds name et class. Je comprend ce que tu veux dire, mais ce que tu dis est impossible (cf mon paragraphe d'avant).

Quand je prend le code source de cette page, je vois rapidement :

<div id="comments">
<a name="c" class="null"></a>
<a name="322310" class="null"></a>
<div class="comment commentnum1">
<div class="title"> </div>
<div class="author"> par <a href="http://www.nofrag.com/~hervai/">hervai</a></div>
<div class="date">Mardi 29 janvier 2008 à 23 h 02</div>
<div class="body">Ca sent pas le HD l'image de fond, dommage</div>
<div class="admin"><script type="text/javascript"><!--//--><![CDATA[//><!--
is_authed && comment_functions(3054, 18058, 322310, 'Olipro/2008/jan/29/34595-nouvelle-css-medievale/322310/');
//--><!]]></script></div>

</div>
</div>

Donc on voit que les commentaires sont tous entre la balise <div class="comments">

En gros ce que je te donne :

#comments div.admin {
margin-left:240px;
top:0px;
}

Signifie :

J'applique le style suivant dans les div qui ont comme class admin au sein des elements qui ont comme class comments.

Je suis clair ?
par Olipro
Mercredi 30 janvier 2008 à 20 h 11
Tres clair, c'était la différence entre class et div que je ne saisissais pas, mais ça n'était pas la source du probleme. La source du probleme venait du fait que je cherchais le div lié à mon tableau de commande, et non le div lié aux commentaires. C'est vrai, si l'on ne peut changer l'un autant changer l'autre. Je n'avais pas pensé à la simplicité.

Par contre je maintiens le fait que je n'ai absolument pas trouvé mon panneau de controle sur le source de la page html du blog. Pourtant il y'est, je l'ai meme modifié avec la css. C'est là ou ça dépasse mes compétences.
par jye
Mercredi 30 janvier 2008 à 21 h 44
OK maintenant je comprends moi aussi ce que tu veux dire ! En fait le panneau d'admin se situe ici dans ton code (là l'exemple vient de mon blog) :

<div id="main">

<div id="title">I Has A Bug <span class="author">(le blog de <a href="http://www.nofrag.com/~jye/">jye</a>)</span></div>

<div class="admin"><script type="text/javascript"><!--//--><![CDATA[//><!--
is_authed && blog_admin(840);
//--><!]]></script></div>

c'est le code javascript is_authed && blog_admin(840); qui remplit la partie avec le code html correspondant en prenant soin de checker avant si tu es bien l'admin du blog.

ta demarche etait en effet mauvaise car le panneau d'admin comme tu peux le voir au dessus est compris dans le div main. Mais malheureusement le div des commentaires l'est aussi. C'est pour ça qu'il faut modifier le panneau admin des commentaires tu n'as pas le choix.

Ce qui aurait été plus simple, c'est que le dev des layout du blog est definie une classe adminauthor pour ton panneau d'admin et une classe admincomment pour les commentaires.
par Olipro
Mercredi 30 janvier 2008 à 22 h 05
Oui c'est ce que je pense aussi. Bon c'est le seul truc bancal de ce code html c'est pas si grave apres tout, mais un petit commentaire d'explication aurait été sympathique de la part de ceux qui ont codé ça.
Je n'ai aucune connaissance en java, comme quoi, je risquais pas de trouver ça tout seul.
par jye
Mercredi 30 janvier 2008 à 23 h 35
Attention Java et Javascript n'ont rien à voir, va faire un tour sur wikipedia pour bien saisir la difference (qui est enorme) !
par Olipro
Mercredi 30 janvier 2008 à 23 h 54
J'aurai des cours là dessus très bientot, enfin, des qu'on en aura terminé avec l'assembleur, mais je vais quand même aller voir pour prendre un peu d'avance. ;)
Toutes les personnes enregistrées peuvent poster un commentaire dans ce blog.

Commenter

Tags autorisés : [b] [/b], [i] [/i], [u] [/u], [code] [/code], [img]Adresse d'une image[/img], [url=Adresse d'un site web] [/url]
Vous pouvez aligner vos images à droite ou à gauche en modifiant le tag [img] comme ceci : [img right] ou [img left].

Pour vos vidéos/animations flash : [video]Adresse d'une animation[/video], pour préciser la largeur et hauteur : [video width=100 height=200]...[/video]