Vous êtes ici : Accueil > Forums > Développement de vos sites

CSS - Questions diverses

Geraldd

Mercredi 29 Septembre 2010 12:11

CSS
Questions diverses

http://adminsrc.files.wordpress.com/2008/10/css-img.gif




Fond de page dégradé

Citation de rigs :
tu héberges cette image sur ton site http://img8.imageshack.us/img8/3728/fondae.jpg et dans ton fichier CSS (body{}) tu ajoutes cette ligne
background: #787878 url(adresse ou se trouve le dégradé) repeat-x;
C'est le dégradé que j'utilise sur mon site

Après avoir téléchargé ton fichier image sous le nom fonddegrade.jpg dans le répertoire images, j'ai mis dans mon fichier css :

body {
margin:0 auto;
padding:0;
font: 12px Arial, Helvetica, sans-serif;
background: #F0F0F0 url(images/fonddegrade.jpg) repeat-x;
}

Ca ne marche pas. Pourquoi ?
Message modifié 1 fois, dernière modification Mercredi 29 Septembre 2010 14:59 par Geraldd
http://www.coqsrouges.fr/bordeaux-tennis_de_table/
rigs

Mercredi 29 Septembre 2010 12:15

c'est le chemin d'accès au fichier qui n'est pas bon.

Essaye : ../images/fonddegrade.jpg

PS: celui que j'ai donné était a titre d'exemple parce que je viens de le tester sur ton site et il rend pas terrible ^^ (trop foncé et trop court)
Geraldd

Mercredi 29 Septembre 2010 12:16

Citation de rigs :
c'est le chemin d'accès au fichier qui n'est pas bon. Essaye : ../images/fonddegrade.jpg

Merci.

C'est fou le temps qu'on perd avec des petites erreurs idiotes qui devraient nous sauter aux yeux.
Message modifié 1 fois, dernière modification Mercredi 29 Septembre 2010 15:01 par Geraldd
http://www.coqsrouges.fr/bordeaux-tennis_de_table/
robinos33

Mercredi 29 Septembre 2010 16:18

Tu as téléchargé Firebug ?(extension très pratique pour le css, sur Firefox)
C'est vraiment très très pratique pour faire des tests de tes éléments css, et de savoir les images chargées (ou non) etc...
topaloff

Mercredi 29 Septembre 2010 20:30

J'en ai déjà parlé sur un autre sujet...
Il préfère Chrome Content
Je m'en fous d'être mauvais, je bois pour l'oublier
Geraldd

Jeudi 30 Septembre 2010 00:19

Citation de robinos33 :
Tu as téléchargé Firebug ?(extension très pratique pour le css, sur Firefox)
C'est vraiment très très pratique pour faire des tests de tes éléments css, et de savoir les images chargées (ou non) etc...

Je préfère Chrome, qui possède en fonctionnalité de base un inspecteur d'éléments parfait.
Il suffit de cliquer sur un élément d'une page et ça te donne tout le code afférent, html css java etc. et son emplacement dans le code global avec une présentation compacte mais complète.

Exemple (cliquer pour agrandir)

" target="_blank">http://img7.imageshack.us/img7/7590/chrometh.jpg
http://www.coqsrouges.fr/bordeaux-tennis_de_table/
Geraldd

Vendredi 01 Octobre 2010 12:01

Bord de page ombré
http://coqsrougestt.free.fr/1/

http://img706.imageshack.us/img706/2748/10374517.jpg

J'ai fait ça : background: #E6E6E6 url(../images/fonddepage.gif) repeat-y 50% 0%;

Ca produit l'effet désiré de bord avec une ombre.

Mais il y a deux effets indésirables :
- la hauteur de ma page est désormais celle de la fenêtre navigateur. Ce qui créée un espace vide sous mon pied de page.
- une marge intérieure d'une vingtaine de pixels. Ma barre de navigation horizontale grise ne touche plus le bord de la page.
http://www.coqsrouges.fr/bordeaux-tennis_de_table/
rigs

Vendredi 01 Octobre 2010 16:04

Les effets indésirables ^^ c'est une prise de tête surtout quand ils sont diffèrents d'un navigateur à l'autre.

pour faire un ombrage j'utilise maintenant le CSS3. Donc dans ton cas au niveau du background je ne laisserai que la couleur (#E6E6E6)

et je placerai dans la partie #centrage { } le code suivant :

box-shadow: -1px 1px 10px #555;
-o-box-shadow: -1px 1px 10px #555;
-moz-box-shadow: -1px 1px 10px #555;
-webkit-box-shadow: -1px 1px 10px #555;

Pour les explications c'est ici : http://www.alsacreations.com/tuto/lire/910-creer-des-ombrages-ombres-css-box-shadow-text-shadow.html

P.S : avec ce code l'ombrage n'apparait pas dans Internet Explorer. Pour ce dernier il y a autre chose a ajouter (comme d'habitude!!!)
Geraldd

Samedi 02 Octobre 2010 01:26

Citation de rigs :
#centrage { } le code suivant :
box-shadow: -1px 1px 10px #555;
-o-box-shadow: -1px 1px 10px #555;
-moz-box-shadow: -1px 1px 10px #555;
-webkit-box-shadow: -1px 1px 10px #555;
P.S : avec ce code l'ombrage n'apparait pas dans Internet Explorer. Pour ce dernier il y a autre chose a ajouter (comme d'habitude!!!)

Je décidé d'adopter des solutions qui fonctionnent avec IE. 1 internaute sur 2 utilise IE.

Pour l'instant, ma meilleure idée est d'ajouter du texte dans mes pages de hauteur insuffisante. Ca fera disparaître l'espace blanc sous le pied de page.
Pour le padding imprévu, tant pis, je me résigne.
http://www.coqsrouges.fr/bordeaux-tennis_de_table/
rigs

Samedi 02 Octobre 2010 02:34

C'est IE qui ne respecte pas les conventions alors pour ma part j'ai pris le partie de donner priorité a Firefox, Opéra, Chrome et Safari.
Pour IE si ça donne le même résultat tant mieux, sinon si cela reste lisible cela me suffit.
Il faut encourager ceux qui respectent les règles Namého (dsl pour le p"tit coup de gueule... 1ere journée de championnat en D3 alors que cela faisait des années que je jouais en D1 ou D2 => résultat j'ai perdu 27 points en jouant comme un zombie ! J'ai les nerfs...)

Le code que je t'ai donné n'était pas pour IE mais si tu suis le lien tu auras les 2 ou 3 lignes pour ce navigateur.

Cela dit j'ai regardé ta technique pour l'ombrage et je dois avoué que je n'y avais pas pensé. Si tu veux garder cette façon de faire et ne plus avoir ce padding imprévu, il suffit d'utiliser une image à la bonne taille ^^ (c'est un peu comme ta faute de frappe pour ta requète).
La partie blanche de ton image de fond fait environ 987PX alors que ton site fait 930PX de large.
Voili-voila et j'en profite pour noter cette tech dans un coin cela pourra toujours me servir.
Message modifié 1 fois, dernière modification Samedi 02 Octobre 2010 02:35 par rigs
Geraldd

Samedi 02 Octobre 2010 09:01

Citation de rigs :
Le code que je t'ai donné n'était pas pour IE mais si tu suis le lien tu auras les 2 ou 3 lignes pour ce navigateur

non, le rendu "équivalent" pour IE est trop moche :

http://img690.imageshack.us/img690/8307/ombrageie.jpg

Je vais chercher une autre solution.
Message modifié 3 fois, dernière modification Samedi 02 Octobre 2010 11:33 par Geraldd
http://www.coqsrouges.fr/bordeaux-tennis_de_table/
Geraldd

Samedi 02 Octobre 2010 09:06

( à effacer. Erreur de manipulation)
Message modifié 3 fois, dernière modification Lundi 04 Octobre 2010 12:44 par Geraldd
http://www.coqsrouges.fr/bordeaux-tennis_de_table/
Geraldd

Samedi 02 Octobre 2010 09:09

( à effacer. Erreur de manipulation )
Message modifié 2 fois, dernière modification Lundi 04 Octobre 2010 12:45 par Geraldd
http://www.coqsrouges.fr/bordeaux-tennis_de_table/
Geraldd

Samedi 02 Octobre 2010 09:10

( à effacer, erreur de manipulation )
Message modifié 3 fois, dernière modification Lundi 04 Octobre 2010 12:45 par Geraldd
http://www.coqsrouges.fr/bordeaux-tennis_de_table/
Geraldd

Lundi 04 Octobre 2010 12:49

Finalement, j'ai décidé de mettre à profit cet espace imprévu en bas de page pour appliquer quelques idées d'embellissement du pied de page que j'avais initialement écartées. Donc, cet effet indésirable est un mal pour un bien.

Citation de rigs :
La partie blanche de ton image de fond fait environ 987PX alors que ton site fait 930PX de large

Merci !
Faut que j'arrête l'informatique quand j'ai pas assez dormi Clin d'oeil
Message modifié 1 fois, dernière modification Samedi 09 Octobre 2010 01:07 par Geraldd
http://www.coqsrouges.fr/bordeaux-tennis_de_table/
Geraldd

Samedi 08 Janvier 2011 02:34

Problème de padding non souhaité

http://img375.imageshack.us/img375/1643/69631666.jpg

Je veux que les puces soient collées au trait bleu de gauche.

Mon code est sans complications.

html

< d i v class="menudroite">
< h 2 >Autres rubriques< / h 2 >
< u l >
< l i > (...)< / l i>
< l i > (...)< / l i>
< l i > (...)< / l i>
< l i > (...)< / l i>
< / u l >
< / d i v>


css

.menudroite {
padding-left:2px;
padding-right:5px;
}
.menudroite h2{
font-size:12px;
font-weight:bold;
color:#101010;
border-bottom:6px solid #800202;
padding-bottom:0px;
margin-bottom:2px;

}
.menudroite li {
font-family: Arial, sans-serif;
font-size: 100%;
color: black;
list-style-type: none;
background-image: url(../images/puce_bulle_bordeaux.gif);
background-repeat: no-repeat;
background-position: 0 0em;
padding-left: 15px;
}
.menudroite li a {
font-size:11px;
color:#333;
text-decoration:none;
}
.menudroite li a:hover{
text-decoration:underline;
}


Ca fait deux heures que je perds sur cette connerie. Impossible de voir pourquoi mes puces se mettent à 15 km du trait bleu.
J'ai essayé list-style-image:url("/images etc... Même résultat.




Solution provisoire


D'après l'inspecteur de Chrome, y a un truc qui s'appelle "user agent stylesheet" qui met un padding de 40 pixels sans qu'on lui ait rien demandé.

http://img832.imageshack.us/img832/8708/17685172.jpg

Du coup, j'ai viré les < u l > et j'obtiens le positionnement désiré. Mais j'aimerais bien comprendre ce qui s'est passé.
Message modifié 5 fois, dernière modification Samedi 08 Janvier 2011 03:06 par Geraldd
http://www.coqsrouges.fr/bordeaux-tennis_de_table/
Geraldd

Samedi 08 Janvier 2011 02:52

y a un moyen simple de faire des cadres avec coins arrondis affichés correctement par IE Firefox et Chrome ?

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
ne fonctionne pas sous IE 8.
Message modifié 5 fois, dernière modification Samedi 08 Janvier 2011 08:49 par Geraldd
http://www.coqsrouges.fr/bordeaux-tennis_de_table/
fandusrfc

Samedi 08 Janvier 2011 21:23

Je ne pense pas malheureusement ...
sur IE 9 c'est ok par contre.

très bon tuto sur tout ce qu'est bordure et ombres ici => http://www.alsacreations.com/tuto/lire/910-creer-des-ombrages-ombres-css-box-shadow-text-shadow.html Content
fandusrfc -> jerem35 vu que l'on a pas voulu modifié mon pseudo automatiquement
Geraldd

Dimanche 09 Janvier 2011 09:59

oui, on en parle juste au dessus
http://www.coqsrouges.fr/bordeaux-tennis_de_table/
fandusrfc

Dimanche 09 Janvier 2011 12:48

ah je n'avais pas vu désolé Clin d'oeil
fandusrfc -> jerem35 vu que l'on a pas voulu modifié mon pseudo automatiquement
1
0
24 messages

Vous êtes ici : Accueil > Forums > Développement de vos sites