Foire Au CSS - Version imprimable

Foire Au CSS - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Foire Au CSS (/showthread.php?tid=5104)

Pages : 1 2 3

Foire Au CSS - Thib4s - 20-08-2010

Bonjour à tous,

Bon voila, sa fait longtemps que je vois des personnes chercher des solutions a du CSS ou bien présenter des questions sur telle manière de faire telle chose...
C'est pourquoi je voudrais vous demander quels sont les trucs bizarres et méchant sur lesquels vous buchez afin que j'essaie de vous concocter un big tuto avec des exemples pour tout ce que vous ne comprenez pas.

Bien à vous.

RE: Foire Au CSS - Globe - 20-08-2010

Bonne initiative tiens, merci de ta proposition =D

Moi j'ai une question sur les en-têtes (h1). Avec un margin nul et un paddign nul, il m'affiche toujours un espace autour du texte dépendant de la taille de la police il arrive qu'il soit assez important, j'ai réussi à le régler avec des margins négatifs mais je me demandait si il n'existait pas une manière plus propre de faire.

EDIT : Et aussi, comment avoir des éléments d'opacité normale (1) à l'intérieur de div ayant une opacité inférieure ? Tous les éléments du div deviennent transparent lorsque je le fait et ça m'ennuie.

RE: Foire Au CSS - Thib4s - 20-08-2010

(20-08-2010, 10:41 PM)Globe a écrit : Moi j'ai une question sur les en-têtes (h1). Avec un margin nul et un paddign nul, il m'affiche toujours un espace autour du texte dépendant de la taille de la police il arrive qu'il soit assez important, j'ai réussi à le régler avec des margins négatifs mais je me demandait si il n'existait pas une manière plus propre de faire.

Normalement un "h1" si tu lui tape en propriété :

Code PHP :
<?php 

h1 {

  margin:0;

  padding:0;

} 

Tu lui met a zéro tous les espacement qu'il pourrait avoir.
Si sa marche pas tu peux essayer en faisant :

Code PHP :
<?php 

h1 {

  border: 0;

  font-size: 20px;

  margin: 0;

  outline: 0;

  padding: 0;

  vertical-align: baseline;

}

Si la encore ya un espacement c'est que tu as un problème d'héritage.
En gros si tu déclare un :
"#content h1 {}" il sera prioritaire sur un "h1 {}", donc vérifier si ta pas le cas qui traine. quelque part. (Je me suis pris la tête sur sa hier, un truc de fou Oo)

(20-08-2010, 10:41 PM)Globe a écrit : EDIT : Et aussi, comment avoir des éléments d'opacité normale (1) à l'intérieur de div ayant une opacité inférieure ? Tous les éléments du div deviennent transparent lorsque je le fait et ça m'ennuie.

Alors la probleme d'héritage encore.
Pour CSS, si tu as une architecture du genre :

Code PHP :
<?php 

<div>

  <span>Opacité 50% de 80% soit 40%</span>

  opacité 80%

</div> 

Et que tu applique une opacité de 50% a ton <span> et de 80% a ton <div>, CSS va d'abbord appliquer le 80% au div ET A SON CONTENU puis ensuite un 50% à ton <span> et son contenu résultat => l'intérieur du span sera a 40% de l'opacité de la normale et non a 50%.
Solution ? Utiliser un .png qui contient la couleur et une opacité de 80% comme background pour ton div ^^

Voila, voila, j'espere que j'ai aider ;P

RE: Foire Au CSS - jo_link_noir - 21-08-2010

(20-08-2010, 10:41 PM)Globe a écrit : Et aussi, comment avoir des éléments d'opacité normale (1) à l'intérieur de div ayant une opacité inférieure ? Tous les éléments du div deviennent transparent lorsque je le fait et ça m'ennuie.

Salut,
avec rgba ?

RE: Foire Au CSS - Globe - 21-08-2010

Ouais merci, en fait ouais je me doutais mais bon je me demandais si y'avait pas des solutions toutes faites parce que je redéfini mes en têtes complètement lorsque j'en rajoute. Pour l'opacité ça reste une solution de dépannage pour l'opacité c'est dommage mais merci beaucoup Wink

RE: Foire Au CSS - Thib4s - 21-08-2010

(21-08-2010, 12:49 AM)jo_link_noir a écrit :
(20-08-2010, 10:41 PM)Globe a écrit : Et aussi, comment avoir des éléments d'opacité normale (1) à l'intérieur de div ayant une opacité inférieure ? Tous les éléments du div deviennent transparent lorsque je le fait et ça m'ennuie.

Salut,
avec rgba ?

RGBA est pas encore cross-Broswer Sad

IE is baddddddddddd!!!!!

RE: Foire Au CSS - jo_link_noir - 21-08-2010

Pour ie y a toujours le filtre Gradient, c'est expliquer en fin de l'article.

RE: Foire Au CSS - keke - 23-08-2010

Coucou,

Je me posais une question en CSS. L'usage des float:left & right.
J'ai remarqué que l'ordre dans lequel on plaçait les div avait une importance importante pour ces balises.

J'en utilise de la manière suivante :
div menu (float:none Wink

div corps (float:right Wink

Ce qui m'affiche à l'écran
menu --- corps

Ce que je souhaiterais, c'est le même affichage, mais en plaçant au niveau du code html, mon menu après le corps. (pour la petite histoire, le menu peut parfois être dépendant de ce qui se passe dans le corps. Une solution MVC pourrait être une autre alternative que je n'ai pas retenue).

En te remerciant pour ta proposition ^^.

Kéké

RE: Foire Au CSS - Sephi-Chan - 23-08-2010

(23-08-2010, 10:18 AM)keke a écrit : Ce qui m'affiche à l'écran
menu --- corps

Ce que je souhaiterais, c'est le même affichage, mais en plaçant au niveau du code html, mon menu après le corps. (pour la petite histoire, le menu peut parfois être dépendant de ce qui se passe dans le corps. Une solution MVC pourrait être une autre alternative que je n'ai pas retenue).

Il faut que tu fasses flotter tes deux éléments (en spécifiant explicitement une largeur), du même côté si tu veux (ou un de chaque côté, à toi de faire des tests pour voir ce qui convient le mieux). Ensuite, il faut que tu donnes un contexte au bloc qui contient ton menu et ton corps : pour cela, tu peux lui donner la propriété CSS overflow: hidden;.

Sephi-Chan

RE: Foire Au CSS - srm - 23-08-2010

Si tu fais ça keke il faut une ancre pour aller directement au menu qui est tout en haut du corps, sinon ton site n'est pas accessible selon les critères d'accessibilité.

Où alors tu dois laisser le menu avant le corps.