Dernieres finitions graphiques

snooper · 24 Janvier 2008

Bonjour

Je vous avais posé de nombreuses questions sur mon design:
voici le rendu, corrigé de toutes fautes xhtml

=>Avec colonnes factices: http://www.legypteantique.com/colonnes/essai2.html
=>Sans colonnes factices: http://www.legypteantique.com/kurt2/kurt/

Que préférez vous? La fin de la colonne gauche en absence de colonne factice vous choque-t-il? Quelles remarques pouvez vous me faire pour améliorer encore ce design?

Enfin, questions betes:
-->Comment faire pour que la page soit centrée sous firefox, sans pour autant faire une usine a gaz au niveau du code?
-->Faire pour definir la taille des images en css: pour l'angle qu ifait 200*200 pixels, peut on rajouter à la ligne

Citation:
background-image:url(images/angle-bleu.gif);
un code pour dire: affiche cette image, mais que sur 100 pixels sur 100 pixels?

-->Comment faire - on m'a dit de regarder ce que font les autres sites, mais je n'arrive pas spécialement - pour faire comme une sorte d'ombrage autour de l'article principal? à l'instar de ce forum, ou encore des sites http://www.agenda-culturel.com/agenda_c ... lieux=6715
http://www.compare-le-net.com/index.php ... _site=21...
http://energie-verte.blogspot.com/2007/ ... rants.html ?

-->Enfin, peut on automatiser sans avoir à passer par php? si je passe sous php, les normes w3c doivent elles etre respectées a la lettre?

Car je voudrais utiliser des fonctions include() et surtout permettre de changer la couleur du design, sous la forme:

<?
switch ($DESIGNDUSITE)
{

case "bleu":
$feuille-css='design_bleu.css';
break;

case "rouge"

[...]
}
?>

Puis dans ma page mettre

<link href="<? echo "$feuille-css"; ?>" rel="stylesheet" type="text/css" />

Cordialement

finstreet · 24 Janvier 2008

et un kit graphique... nan ?

Parce que là...

Bobulum · 24 Janvier 2008

snooper a dit:
Bonjour

Je vous avais posé de nombreuses questions sur mon design:
voici le rendu, corrigé de toutes fautes xhtml

=>Avec colonnes factices: http://www.legypteantique.com/colonnes/essai2.html
=>Sans colonnes factices: http://www.legypteantique.com/kurt2/kurt/

Ton site ne s'affiche pas bien du tout sur Firefox...

snooper a dit:
Que préférez vous? La fin de la colonne gauche en absence de colonne factice vous choque-t-il? Quelles remarques pouvez vous me faire pour améliorer encore ce design?

Le design est simple, mais les liens et la police sont vraiment trop basiques.

snooper a dit:
-->Comment faire pour que la page soit centrée sous firefox, sans pour autant faire une usine a gaz au niveau du code?

Un truc style :

Code:

.tondiv{
width: taillepx;
margin-left: auto;
margin-right: auto;
}

Le tout contenu dans un élement avec text-align:center;.

snooper a dit:
-->Faire pour definir la taille des images en css: pour l'angle qu ifait 200*200 pixels, peut on rajouter à la ligne

Citation:
background-image:url(images/angle-bleu.gif);
un code pour dire: affiche cette image, mais que sur 100 pixels sur 100 pixels?

Les attributs qui te seraient utiles sont width et height.

snooper a dit:
-->Enfin, peut on automatiser sans avoir à passer par php? si je passe sous php, les normes w3c doivent elles etre respectées a la lettre?

PHP n'a rien à voir avec la validation W3C, c'est l'HTML (généré par PHP dans ce cas) qui est à valider. On peut mettre ce qu'on veut derrière le PHP, l'important est de bien séparer dans ta logique l'affichage du traitement.

@+

snooper · 24 Janvier 2008

finstreet

Le but ici n'est pas d'avoir une merveille graphique, mais un site clair et distinct, où on trouve facilement de l'information, tout en améliorant (légèrement) le graphisme de http://www.legypteantique.com.

Quand aux kits, ils sont chiants pour retravailler les images, ou faire des MAj avec des codes parfois ardus a comprendre, n'émergeant pas de nous.

Donc si tu as des conseils a me donner ok si je te saoule avec mes questions ok mais ne te permet pas de critiquer comme ca sans expliquer pourquoi et sans avoir de site en url a visiter pour voir l'application de tes conseils.

Bobulum

Le design est simple, mais les liens et la police sont vraiment trop basiques.

Tu veux dire quoi par la? Je ne vais pas mettre du Windings tout de meme? Enfin, je peux remettre les memes liens que sur http://www.legypteantique.com.Sinon au niveau de la question des fausses colonnes quel est ton avis?

Le tout contenu dans un élement avec text-align:center;.

OK, merci beaucoup

Les attributs qui te seraient utiles sont width et height.

J'ai oublié de préciser que j'ai deja essayé le code background-image:url(images/angle-bleu.gif width="100" height="100"); et que ca ne marchait pas. La faute aux ""???

PHP n'a rien à voir avec la validation W3C, c'est l'HTML (généré par PHP dans ce cas) qui est à valider. On peut mettre ce qu'on veut derrière le PHP, l'important est de bien séparer dans ta logique l'affichage du traitement.

OK merci beaucoup, c'est ce que je cherchais à savoir. Sinon peut on optimiser son site sans passer au PHP?

Et question HS: pour citer une phrase precise y a til un bouton precis sur ce forum?

Car pour le moment, je dois a chaque fois me coltiner le tapage des 2 balises quote pour citer...

@+++

mikaweb · 24 Janvier 2008

Avec Firefox, Opéra, Safari, je n'ai pas testé avec IE7 mais y a des soucis.

Essaie de retravailler un peu le .css

finstreet · 24 Janvier 2008

snooper a dit:
finstreet

Le but ici n'est pas d'avoir une merveille graphique, mais un site clair et distinct, où on trouve facilement de l'information, tout en améliorant (légèrement) le graphisme de http://www.legypteantique.com.

Quand aux kits, ils sont chiants pour retravailler les images, ou faire des MAj avec des codes parfois ardus a comprendre, n'émergeant pas de nous.

Donc si tu as des conseils a me donner ok si je te saoule avec mes questions ok mais ne te permet pas de critiquer comme ca sans expliquer pourquoi et sans avoir de site en url a visiter pour voir l'application de tes conseils.

Ben c moche c moche... je vais pas te dire qu'i lfaut légèrement modifier la couleur... c juste... moche ... c du net des années 90... et acceptez d'etre nul en graphisme, je vois pas où est le soucis...

Bobulum · 24 Janvier 2008

snooper a dit:
Tu veux dire quoi par la? Je ne vais pas mettre du Windings tout de meme? Enfin, je peux remettre les memes liens que sur http://www.legypteantique.com.Sinon au niveau de la question des fausses colonnes quel est ton avis?

Ben je verrai bien un Verdana, une police un peu plus ronde. Pour les liens, c'est surtout les couleurs qui ne me plaisent pas. Attention, c'est que mon avis perso hein

.

Pour les fausses colonnes, je saurais pas donner d'avis car seul le premier exemple marche chez moi, l'autre ne marche pas sous FF et IE7 (je testerai sous Linux demain voir si ça vient de chez moi).

snooper a dit:
J'ai oublié de préciser que j'ai deja essayé le code background-image:url(images/angle-bleu.gif width="100" height="100"); et que ca ne marchait pas. La faute aux ""???

Je parlais plutôt des attributs CSS :

Code:

background-image:url(images/angle-bleu.gif);
width: 100px;
height: 100px;

snooper a dit:
OK merci beaucoup, c'est ce que je cherchais à savoir. Sinon peut on optimiser son site sans passer au PHP?

Tu as trois solutions, soit en HTML pur et dur, soit en incluant des javascript (pas une bonne solution), soit en travaillant avec des PHP (ou autre CGI). Quitte à ce que tes fichiers ne contiennent que du code HTML et pas de PHP, ça ne changera rien à al validation mais facilitera ton travail.

Maintenant, les extensions seront en *.php, si ça te gène de trop tu peux passer par de l'URL-Rewriting à la limite.

snooper a dit:
Et question HS: pour citer une phrase precise y a til un bouton precis sur ce forum?

Car pour le moment, je dois a chaque fois me coltiner le tapage des 2 balises quote pour citer...

Je sais pas trop... Je fais comme toi, ça permet de réfléchir à ce que je vais mettre et de noter (un peu) moins n'importe quoi :lol: .

@+ :wink:

snooper · 25 Janvier 2008

finstreet

Tu ne vois pas le souci. En gros, c'est comme si tu dis a quelqu'un: ton produit, c'est de la merde mais c'est pas grave. Si on me dit ca je chercherai a ameliorer le produit, c'est tout.

Salut Bobulum

Pour la police, j'ai changé en Verdana. Pour les couleurs maintenant tu les trouve trop flashy? Mal adaptées? Les coulerus que je propose sont: jaune, orange, rouge, mauve vert, bleu, et par défaut noir (cf http://www.legypteantique.com changement de couleur en bas du menu gauche).

Pour les fausses-colonnes, ok (moi non plus cela ne fonctionne pas sous ff ou plutot si: la colonne de gauche est bien tirée au dela du necessaire, mais pas jusqu'au bout: la faute au padding de 10 px?

Maintenant, les extensions seront en *.php, si ça te gène de trop tu peux passer par de l'URL-Rewriting à la limite

Cela ne me derange pas j'utiliser le php depuis plusieurs années. Simplement, je me dis, quand je vois certains sites tels que clubic qui doivent etre super perfectionnes et qui utilisent le html. Ou comment siteduzero fait pour proposer des designs variables dans des pages en html? En incluant du PHP dans les feuilles CSS? Car en gros, j'aime pouvoir faire un design paramétrable pour le visiteur, en agissant ainsi:

-Présence d'un design par défaut
-En cliquant sur une autre couleur, un cookie est envoyé au visiteur
-Le site détecte le cookie, recupere la valeur, et inclue ensuite une feuille dyu style feuille-couleur.css

Y a til plus simple?

Je parlais plutôt des attributs CSS :

Code:
background-image:url(images/angle-bleu.gif);
width: 100px;
height: 100px;

En essayant ce code cela ne marche pas ni avec

background-width: 100px;
background-height: 100px;

et avec ce le code

background-image:url(images/angle-bleu.gif);
width:50px;
height:50px;

la navigateur assimile le fait que ce soit la cellule qui doit faire 50 px de haut et de large... Le rendu avec le code que tu m'a proposé est ici:

http://www.legypteantique.com/colonnes/essai3.html

Sinon je comprends pas

en mettant le code

h2
{
font-size: 0.8em;
color: black;
font-family: verdana, arial;
border-bottom: 1px solid #FF0000;
background-image: url("http://www.legypteantique.com/xhtml/images/bouton.gif"); /* Une petite image de fond sur les titres h2 */
background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
padding-left: 20px;
margin-bottom:10px;
}

h2.titresmenugauche
{
font-size: 0.8em;
color: white;
font-family: verdana, arial;
background-image: url("images/BGC_bleu.jpg"); /* Une petite image de fond sur les titres h2 */
background-repeat: repeat; /* L'image ne se répètera pas, elle sera à gauche du titre
}

puis <h2 class="titresmenugauche">Titre du menu gauche </h2>

Il m'affiche l'image bleue d'arriere plan de 1 pixel de large sans la repeter (alors que j'ai dit repeat) tandis qu'il souligne d'un pixel en rouge, alors que cela n'est valable que pour les h2 traditionnels.

Encore plus bizarre, si je mets avec le meme code, la definition de h2.titresmenugauche avant h2 le rendu est different. Si je détermine un h2.titresmenugauche specifique pour mon menu gauche, comment faire pour déterminer un h2 par défaut?

Et peut on decaler les sous titre du menu gauche por que l'image occupe toute la largeur de la colonne, alors que dans la page, il y a un padding de 10 px? J'ai essayé le code

margin-left=-10px;

Mais cela ne fonctionne pas.

Je sais pas trop... Je fais comme toi, ça permet de réfléchir à ce que je vais mettre et de noter (un peu) moins n'importe quoi

OK Merci

Autrement très beau ce bouledogue, surtout le gros plan de sa gueule

Bonne journée

snooper · 28 Janvier 2008

Bobulum · 28 Janvier 2008

Salut snooper,

snooper a dit:
Pour la police, j'ai changé en Verdana. Pour les couleurs maintenant tu les trouve trop flashy? Mal adaptées? Les coulerus que je propose sont: jaune, orange, rouge, mauve vert, bleu, et par défaut noir (cf http://www.legypteantique.com changement de couleur en bas du menu gauche).

Le changement de police n'a pas l'air de marcher sur ton site :? . Je trouve les couleurs un peu trop "début du web", tu sais avec les liens bleus, noir et blanc. Maintenant c'est un avis personnel, les goûts et les couleurs... Je profiterai plus du caractère "Egypte" du site pour mettre des couleurs un peu "sable", soleil, pierres... Sans tomber dans le kitch des gif 1024*768 en fond d'écran bien sur :lol: .

snooper a dit:
Pour les fausses-colonnes, ok (moi non plus cela ne fonctionne pas sous ff ou plutot si: la colonne de gauche est bien tirée au dela du necessaire, mais pas jusqu'au bout: la faute au padding de 10 px?

La colonne de droite doit être en float: right, celle de droit en right, leur width doit être fixé. Si tu as des problèmes, gère avec les width et les padding gauche-droite.

snooper a dit:
Cela ne me derange pas j'utiliser le php depuis plusieurs années. Simplement, je me dis, quand je vois certains sites tels que clubic qui doivent etre super perfectionnes et qui utilisent le html. Ou comment siteduzero fait pour proposer des designs variables dans des pages en html? En incluant du PHP dans les feuilles CSS? Car en gros, j'aime pouvoir faire un design paramétrable pour le visiteur, en agissant ainsi:

-Présence d'un design par défaut
-En cliquant sur une autre couleur, un cookie est envoyé au visiteur
-Le site détecte le cookie, recupere la valeur, et inclue ensuite une feuille dyu style feuille-couleur.css

Y a til plus simple?

Je ne comprends pas trop ta demande. D'après ce que j'ai compris, l'utilisation d'un système de template pourrait te convenir : http://phpcodeur.net/articles/php/templates .

Pour ton problème de H2, je ferai plus en une simple classe :

Code:

h2 {
background-image...
background-position: left;
background-repeat: none;
padding-left: 20px;
border-bottom: 2px solid Red;
}

snooper a dit:
Autrement très beau ce bouledogue, surtout le gros plan de sa gueule

Et encore il n'est pas affamé !

@+ :wink:

snooper · 28 Janvier 2008

Bobulum

le changement de police n'a ete effectue que sur http://www.legypteantique.com/colonnes/essai2.html. En fait je cherche à améliorer mon design donc je creer un modele et je ferais toutes les modifs de mes sites apres et en meme temps.

Sinon pour faire plus Egypte (ou grece pour l'autre site) par exemple ca te semblerait bien que je mette en arriere plan derriere les articles le fond present sur l'index avec le design noir (les hieroglyphes) ou en arriere plan de page??? Car je vois tout a fait ce que tu veux dire pour "debut du web" mais ce qui m'enerve c'est que quand je vois un beau site et cherche à m'en inspirer, je remarque en general qu'il a des caracteres plutot simples pourtant. Ce forum a bien des liens basiques bleus.

La colonne de droite doit être en float: right, celle de droit en right, leur width doit être fixé. Si tu as des problèmes, gère avec les width et les padding gauche-droite.

Oui mais je n'aimerais pas fixer la hauteur d'une colonne. Je vais essayer ton conseil (pour le float, et le padding).

Je ne comprends pas trop ta demande. D'après ce que j'ai compris, l'utilisation d'un système de template pourrait te convenir : http://phpcodeur.net/articles/php/templates .

Donc obligé de passer par une BDD? Ne puis-je pas améliorer le système promu par https://www.google.fr/search?hl=fr&q=php+debutant&meta= ???

En gros je demandais si je pouvais faire un design paramétrable en css directement, plutot que mon usine a gaz en php qui consiste a

-Mettre un design par défaut sur le site
-Creer une page send.php envoyant un cookie avec la variable couleur si une couleur differente est choisie par l'internaute
-Creer une feuille de switch entre les couleurs pour dire quelles feuille css inclure

Pour ton problème de H2, je ferai plus en une simple classe :

Pour des raisons graphiques ou pratiques? C'est vrai que finalement des ronds classiques font plus pro qu'une fleche de couleur.

Enfin, fais juste attention: bouledogue et hamsters ne font pas toujours très bon ménage.

Merci pour tous ces conseils et bonnes continuations pour ton blog (et ton bouledogue).

Cordialement
Martin

Cliquez pour agrandir...