Aller au contenu | Aller au menu | Aller à la recherche
mardi 20 septembre 2011
Par rivsc le mardi 20 septembre 2011, 11:24
Le créateur de http://bbxdesign.com/ vient de lancer un site / tutorial sur l'intégration html / css. Il est vraiment bien fait (je l'ai survolé), si vous n'y connaissez rien, je vous souhaite une bonne lecture. Tout est ici : http://css.steaw.com/ . Cliquez sur rideau puis le menu sera en haut à droite.
lundi 5 septembre 2011
Par rivsc le lundi 5 septembre 2011, 12:56
Voici quelques petites astuces pour les intégrateurs web
1) Z-index ne fonctionne pas :
z-index ne fonctionne que sur les éléments positionnés (Ah ok je fais quoi alors : => position:relative; )
2) Z-index 20 au dessus de z-index 100 pourquoi ? :
Il y a certainement des contextes d'empilement différents (un parent différent avec un z-index).
3) Clear ça sert à quoi ?
clear : left / right / both : Il sert à faire un espèce de retour chariot à gauche / droite / les deux.
4) Mon bloc prend toute la place pourquoi ?
Justement parce que c'est un bloc (display:block;)... mettre display:inline si vous voulez qu'il prenne la place qu'il a besoin.
5) Je veux fixer les dimensions de mon élément, mais c'est un display:inline.
C'est pour cela qu'il existe la valeur de la proprété display : "inline-block".
6) Vertical-align ne fonctionne pas :
Vertical align ne fonctionne que sur les cellules de tableau, donc display:table-cell; ou display:table-row;
7) Je souhaite que mes deux blocs cote à cote aient la même hauteur, et si possible non fixé :
Il faut les mettre en display:table-cell; et si possible mettre le conteneur parent en table-row.
8) Quand je change les paddings mon bloc change de taille :
Oui les padding ne comprenne pas la taille du bloc (content-box), il faut donc spécifier : box-sizing:border-box; maintenant les bordures et le padding sont inclus, les margins quand à eux sont toujours exclus.
9) Un élément de type bloc prend width:100%; par défaut !
10) N'oubliez pas le reset css (http://meyerweb.com/eric/tools/css/reset/).
En espérant que ça puisse servir à quelques uns.
mardi 14 juin 2011
Par rivsc le mardi 14 juin 2011, 12:15
Bon l'outils en ligne de commande lessc c'est un peu has-been du coup ! Less s'utilise maintenant coté client avec le script javascript. Du coté serveur ça tourne avec Node.js, un peu lourd, pour juste compiler un css...
Mais du coup la version client est super pratique. Rien besoin, pas besoin de déployer un fichier css compilé, c'est le script js qui compile le css à la volée.
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
Voir la doc lesscss
jeudi 31 mars 2011
Par rivsc le jeudi 31 mars 2011, 11:11
vendredi 4 mars 2011
Par rivsc le vendredi 4 mars 2011, 15:47
Voici un petit tricks CSS pour avoir un background qui s'affiche à 100% en hauteur et largeur. L'image de fond doit être de bonne qualité (en jpg c'est mieux). J'ai utilisé CSS3 donc les vieux navigateurs fond la tête mais bon... pour une demo : demo css
<html> <head> <style type="text/css"> body{ background-color:transparent; border: solid transparent; border-width:1px 1px 1px 1px; -o-border-image: url("./image.jpg") 1 1 1 1 stretch; -ms-border-image: url("./image.jpg") 1 1 1 1 stretch; -webkit-border-image: url("./image.jpg") 1 1 1 1 stretch; border-image: url("./image.jpg") 1 1 1 1 stretch; } </style> </head> <body> test </body> </html>
Donc ça c'était la solution compliquée, en css 3 on peut utiliser
background-size faire :
background-size: 100% 100%;
mardi 1 mars 2011
Par rivsc le mardi 1 mars 2011, 00:11
Voici une quantité astronomique de layouts de base pour faire des sites web. Ca laisse du choix et du temps plutôt que de ré-inventer la roue ! C'est gratuit profitez-en !
Le lien : http://blog.html.it/layoutgala/
mercredi 23 février 2011
Par rivsc le mercredi 23 février 2011, 09:34
Bon voilà je sais que ce blog n'est pas très beau, la mise en évidence du code est foireuse, et je viens de chercher comment faire la mise en évidence de la syntaxe. (Oui je viens seulement de chercher)
Donc voilà désormais je vais m'en servir et je vous en parle : http://pygments.org/ permet de faire tout ça avec une grande classe ! Plusieurs thèmes sont disponibles !
D'autant que je n'ai pas envie d'investir dans un hébergement payant pour ce blog car il ne me rapporte rien (mise à part la satisfaction de rendre un petit peu service)
La liste des langages supportés est impressionnante :
« billets précédents - page 2 de 5 - billets suivants »
