Dernieres finitions graphiques

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par snooper, 24 Janvier 2008.

  1. snooper
    snooper WRInaute passionné
    Inscrit:
    24 Août 2006
    Messages:
    1 297
    J'aime reçus:
    0
    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
     
  2. finstreet
    finstreet WRInaute accro
    Inscrit:
    10 Juillet 2005
    Messages:
    13 357
    J'aime reçus:
    2
    et un kit graphique... nan ?

    Parce que là...
     
  3. Bobulum
    Bobulum WRInaute discret
    Inscrit:
    21 Mars 2005
    Messages:
    56
    J'aime reçus:
    0
    Ton site ne s'affiche pas bien du tout sur Firefox...

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

    Un truc style :

    Code:
    .tondiv{
    width: taillepx;
    margin-left: auto;
    margin-right: auto;
    }
    Le tout contenu dans un élement avec text-align:center;.

    Les attributs qui te seraient utiles sont width et height.

    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.

    @+
     
  4. snooper
    snooper WRInaute passionné
    Inscrit:
    24 Août 2006
    Messages:
    1 297
    J'aime reçus:
    0
    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

    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?

    OK, merci beaucoup

    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 ""???

    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...

    @+++
     
  5. mikaweb
    mikaweb WRInaute discret
    Inscrit:
    4 Juillet 2007
    Messages:
    160
    J'aime reçus:
    0
    Avec Firefox, Opéra, Safari, je n'ai pas testé avec IE7 mais y a des soucis.

    Essaie de retravailler un peu le .css
     
  6. finstreet
    finstreet WRInaute accro
    Inscrit:
    10 Juillet 2005
    Messages:
    13 357
    J'aime reçus:
    2
    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...
     
  7. Bobulum
    Bobulum WRInaute discret
    Inscrit:
    21 Mars 2005
    Messages:
    56
    J'aime reçus:
    0
    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).

    Je parlais plutôt des attributs CSS :

    Code:
    background-image:url(images/angle-bleu.gif);
    width: 100px;
    height: 100px;
    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.


    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:
     
  8. snooper
    snooper WRInaute passionné
    Inscrit:
    24 Août 2006
    Messages:
    1 297
    J'aime reçus:
    0
    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?


    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?





    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.



    OK Merci


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

    Bonne journée
     
  9. snooper
    snooper WRInaute passionné
    Inscrit:
    24 Août 2006
    Messages:
    1 297
    J'aime reçus:
    0
  10. Bobulum
    Bobulum WRInaute discret
    Inscrit:
    21 Mars 2005
    Messages:
    56
    J'aime reçus:
    0
    Salut snooper,

    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: .

    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.

    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;
    }

    Et encore il n'est pas affamé !

    @+ :wink:
     
  11. snooper
    snooper WRInaute passionné
    Inscrit:
    24 Août 2006
    Messages:
    1 297
    J'aime reçus:
    0
    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.

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


    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

     
Chargement...
Similar Threads - Dernieres finitions graphiques Forum Date
Impactée par les dernières MAJ Référencement Google 9 Mars 2020
Vos gains adense sur les trois dernières années ? AdSense 24 Octobre 2015
Connaitre le trafic des dernières pages rajoutées Google Analytics 27 Novembre 2012
Comment connaitre dernières pages crawlées ? Crawl et indexation Google, sitemaps 11 Mars 2012
Les dernières pages de mon site n'apparaissent pas dans les SERP Crawl et indexation Google, sitemaps 2 Septembre 2011
afficher photo suivant nombre de vues, des dernières ... Développement d'un site Web ou d'une appli mobile 15 Mai 2011
Les dernières news du réféncement > Vos avis Demandes d'avis et de conseils sur vos sites 2 Mai 2010
Mes dernières modifications auront-elles un bon effet ? Problèmes de référencement spécifiques à vos sites 30 Novembre 2009
Date des dernières mises à jours dans les resultats Google Débuter en référencement 19 Octobre 2009
include page pour lire seulement les dernières balises li Développement d'un site Web ou d'une appli mobile 7 Octobre 2009
connaitre les dernieres versions de vos scripts préférés Développement d'un site Web ou d'une appli mobile 14 Mai 2009
Lister les dernières pages indexées ? Crawl et indexation Google, sitemaps 11 Mai 2009
Connaître les dernières pages indéxées Référencement Google 27 Février 2008
Voir derniéres pages référençées depuis 30 jours Référencement Google 5 Décembre 2007
Impact de ces dernieres semaines Problèmes de référencement spécifiques à vos sites 12 Avril 2007
[Résolu] Récupérer les 10 dernières entrées d'une table Développement d'un site Web ou d'une appli mobile 13 Février 2006
Dernières actions effectuées phpbb Administration d'un site Web 16 Juin 2005
Dernières pages mises en cache Débuter en référencement 10 Juin 2005
Comment gagner les dernières places dans Google Problèmes de référencement spécifiques à vos sites 11 Mars 2005
trouver les dernieres mises à jour Crawl et indexation Google, sitemaps 10 Février 2005