Http://unesourisetmoi.free.fr - CSS et PHP, pour le choix du visiteur

ancien post bonjour,
j'avais déjà demandé des avis il y a belle lurette concernant mon site:
unesourisetmoi css et php
maintenant ... enfin j'ai réussi à espacer les lettres du titre, à mieux gérer le menu et surtout à mettre un switcher pour laisser libre choix au visiteur au niveau de la couleur (... mais là il m'en a fallu de l'aide ! car en php ... je suis nul de chez nul) (bon il y a encore des pages en 'travaux' ou certainement d'autres avec des erreurs ou des fautes ...)
enfin, c'est fait et maintenant je voudrais bien de nouveau avoir un maximum d'avis, de critiques (positives) pour améliorer encore plus ce site et surtout au niveau de la css
grand merci à l'avance
@mitiés
b g
Modifié par bg62 (28 May 2007 - 14:52)

Hello,
je pense que tu n'a pas posté dans le bon salon vu qu'il y a un salon dédié : Ergonomie et esthétique générale, demandes d'avis et de critiques.

Pour ton design j'aime bien c'est sobre et visuel à la fois, donc on s'y retrouve bien.
Pour ton switcher par contre tu aurais pû le pousser un peu plus. C'est à dire qu'au lieu de changer juste la couleur du haut de page, tu aurais pu changer toutes les couleurs : background, titres, bordures... vu que normalement tu as un css par couleur.

Sujet déplacé.

Par contre, comme préconisé pour ce salon, il faudrait indiquer le nom ou l'URL du site dans le titre du sujet. Merci d'avance.

Florent V. a écrit :
Sujet déplacé.

Par contre, comme préconisé pour ce salon, il faudrait indiquer le nom ou l'URL du site dans le titre du sujet. Merci d'avance.

MERCI d'avoir mis le post au bon endroit ...
et ... comment faire pour faire apparaître l'url dans le titre du sujet ? (il faut que je l'édite de nouveau ?)
@mitiés
b g

Bellami a écrit :
Hello,
je pense que tu n'a pas posté dans le bon salon vu qu'il y a un salon dédié : Ergonomie et esthétique générale, demandes d'avis et de critiques.

Pour ton design j'aime bien c'est sobre et visuel à la fois, donc on s'y retrouve bien.
Pour ton switcher par contre tu aurais pû le pousser un peu plus. C'est à dire qu'au lieu de changer juste la couleur du haut de page, tu aurais pu changer toutes les couleurs : background, titres, bordures... vu que normalement tu as un css par couleur.

MERCI pour tout cela, ça fait plaisir au moins !
mais quant à changer plus de choses au niveau du look ... ça je ne sais pas faire ... cela devient un peu trop complexe pour moi !
il faut agir sur la CSS ou sur le PHP ?
@mitiés
b g

bg62 a écrit :
et ... comment faire pour faire apparaître l'url dans le titre du sujet ? (il faut que je l'édite de nouveau ?)

Tout à fait

bg62 a écrit :

il faut agir sur la CSS ou sur le PHP ?

sur le css

Par exemple stylebleu.css tu définis un fond bleu des titres blanc..., et ainsi de suite pour stylerouge.css... C'est exactement ce que tu as déjà fait sauf que tu l'appliques à d'autres éléments. Après tout dépend de quel manière tu as codé en php, mais tu devrais avoir un fichier css pour chaque couleur.

Mikachu a écrit :

Tout à fait

bonjour, je viens de faire une modification ...
j'espère que c'est ce que tu voulais ?
@mitiés
b g

Bellami a écrit :

sur le css

Par exemple stylebleu.css tu définis un fond bleu des titres blanc..., et ainsi de suite pour stylerouge.css... C'est exactement ce que tu as déjà fait sauf que tu l'appliques à d'autres éléments. Après tout dépend de quel manière tu as codé en php, mais tu devrais avoir un fichier css pour chaque couleur.

bon alors, ne m'embrouille pas trop ...
j'ai une css générale pour l'ensemble des pages
j'en ai une autre à la racine

body
{
	background:#f0f0f0 url(img/bodybg-.jpg) repeat-x;
}
#mainmenu a:hover
{
	background:#f0f0f0 url(img/menuhover-.jpg) top left repeat-x;
}
#mainmenu a.current
{
  background:#f0f0f0 url(img/menuhover-.jpg) top left repeat-x;
}

puis j'ai ensuite un dossier avec un répertoire par couleurs, contenant 2 'gifs' et un autre fichier css:

body
{
	background:#f0f0f0 url(bodybg.jpg) repeat-x;
}
#mainmenu a:hover
{
	background:#f0f0f0 url(menuhover.jpg) top left repeat-x;
}
#mainmenu a.current
{
  background:#f0f0f0 url(menuhover.jpg) top left repeat-x;
}

ici c'est celui pour 'blue'
un peu compliqué ... mais maintenant, concrètement, comment appliqué les exmples de transformations que tu me propose ?
@mitiés
b g

La css générale tu la laisse telle quelle. C'est celle par défaut du site.

Apres donc tu as des répertertoires pas couleur.

Par exemple si tu veux modifier les titres h1 du bleu, tu modifies le fichiers css qui se trouve dans le répertoire bleu.
Par exemple :

body

{

	background:#f0f0f0 url(bodybg.jpg) repeat-x;

}

#mainmenu a:hover

{

	background:#f0f0f0 url(menuhover.jpg) top left repeat-x;

}

#mainmenu a.current

{

  background:#f0f0f0 url(menuhover.jpg) top left repeat-x;

}

h1 {
	font: 1.2em verdana, arial, sans-serif;
	color: #369;
	text-decoration: none;
	text-align: center;
	margin: 0;
	padding: 0;
}

Ainsi toutes les balises h1 du css bleu possèderont cette propriété.

Tu répètes ainsi de suite pour chaque couleur, en changeant ce que tu souhaite (h1 h2 a p ...) parmi les nomnbreusues propriétés CSS ( color font align ...)

j'espère avoir été assez clair sinon je te mettrai dans un prochain post mes fichiers css si cela peut t'aider

Merci Bellami cela à l'air relativement simple
mais ... dans ces fichiers, les nouvelles définitions des balises (h1) par exemple ne vont pas entrer en conflit avec celles qui existent déjà (faut-il les laisser ?) dans la css générale du site ?
@mitiés
b g

Non, il n'y aura pas de conflit, il y aura addition des deux css, et quand il y a deux même définitions, la dernière "lue" par le navigateur aura la priorité.

Dans ton cas,

<link rel="stylesheet" media="screen" type="text/css" href="andreas09.css" />
		<link rel="stylesheet" media="screen" type="text/css" href="img/css-blue/css.css" />

c'est css.css qui aura la priorité.

Un exemple (c'est quand même plus parlant):
Dans andreas09.css tu as :

a {
color:#505050;
font-weight:bold;
text-decoration:none;
}

Imaginons que dans css.ccs tu ai :

a {
color:#369;
padding:1em;
}

Au final l'ensemble des deux css donnerait :

a {
color:#369;
font-weight:bold;
text-decoration:none;
padding:1em;
}

Donc non, tu n'as pas à modifier la css générale du site, mais juste changer les propriétés que tu souhaites dans css.css. Le mieux est que tu fasses toi-même des essais.

Grand merci, je vais donc essayer ... plusieurs choses pour voir ce que cela pourrait donner
autres suggestions ?
@mitiés
b g

ben je rame un peu quand même ....
je pense que c'est surtout au niveau de la couleur de fond de la partie centrale de la page qu je devrais 'jouer' un peu sur les couleurs ... mais après plusieurs essais je tombe souvent sur des couleurs un peu trop fortes ou criardes !
comment "créer" une couleur qui correspondrait à celle choisie sur le 'switcher' mais avec un estompage relativement fort pour que cela reste quand même discret
@mitiés
b g