Feuilles de style CSS

Bonjour à tous,

Tout d’abord, je tiens à encore féliciter (officiellement) notre ami Tybodoudou. Je l’ai déjà fait avant, mais via d’autres systèmes….

En ce qui concerne mon probléme d’ , c’est à la fois simple et compliqué.
Je suis moi même webmaster de quelques sites. J’en donnerai peut être les URL plus tard, mais je voudrai d’abord améliorer leur design. On m’avait conseillé Spip, mais pour ce que je veux faire, cela me semble bien trop compliqué.
Je m’attaque donc aux problémes des CSS. Seulement, si j’ai bien compris leur utilité, je n’arrive pas à bien les maitriser. Malgrè les sites que m’a conseillé Tyty, ce n’est pas encore clair. Une fois compris, je suis certain de pouvoir tout effectuer.
Alors, voilà ! Je n’arrive pas à bien comprendre comment on effectue des "blocs", et les mettre à une place prècise sur la page. En fait, la page d’accueil de Tyty me plait bien. La prèsentation est simple, mais assez complète. Il faudrait que j’arrive à faire une page avec quelques infos qui restent en permanence sur la page, et au milieu, les autres pages pourraient défiler.
Je vous donne une URL de ce que je souhaiterai arriver à faire : http://www.jumeauxetplus92.asso.fr/

C’est pour un site du même genre. Donc, tous les conseils sont les bienvenus. Ce qui me semblerait idéal, ce serait de pouvoir faire les modifs en direct avec quelqu’un…. 😉
Autre chose : il faut que j’arrive également à créer un accès réglementé, pour mettre des photos, qui ne doivent être visibles que par les adhérents (ben vi, ce sont des enfants ! Des jumeaux, car je suis webmaster du site de Jumeaux et Plus de ma région. Pas question que n’importe qui ait accès aux photos)

Merci d’avance

18 Responses to “Feuilles de style CSS

  • Blop … dés que j’ai vraiment le net hors d’un cyvber-café, je suis ton doc pti gars … en attendant ces quelques jours qui commencent à durer (pinaise la vie sans le net c’est pas le pied) …. bah trouve quelqu’un d’aut ou patiente 😉

  • Ben alors mon ch’tit Talineo. On a perdu sa super connexion adsl??? 😉
    Bon, en tous cas, je prends bonne note de ton désir de m’aider. Tu viendras quand tu pourras, ca sera plus simple…. 🙂

  • Je suis dégoûté : je pensais recevoir pleins de réponses, de zentilles personnes qui voudraient m’aider. C’est Tyty qui me l’avait dit !
    Ben non, presque rien. Pourquoiiiiiiiiiiiiiiiiiiiiii ????? Suis pas si méchant que ca quand même 🙂

  • dsl de pas avoir repondu avant, mais je crois que c’est apreil pour tout le monde on a beauoup de boulot en ce debut d’année, ca ira un peu mieux dans qq semaines 😉

    Bon alors pour ton pb d’affichage déjà… tu peux prendre mes sources j’ai passé mon site sous licence GPL pour l’interface, ce qui fait que tu peux le reutiliser à loisir mais bon si tu fais des modif faut le preciser ici par exemple et mettre le lien en consequence =)
    Pour les blocs tu peux regarder cette page , elle est assez simple. En gros ca se divise en deux parties, les blocs qui s’imbriquent les un dans les autres, c’est ce qu’on appelle les <div> et <span>, le premier etant vertical et le second horizonal. Dans la pratique tu mets toujours un span dans un div, pour chaque div.

    ex:

    <div class="titre-menu">
    <span class="titre-menu-gauche">Tribune</span>
    </div>

    tu remarqueras que chaque bloc à une classe, on peut mettre un id mais c’est quasiement la meme chose… ca ne te sera pas utile, donc je te montre avec ca. Là c’est le code du haut du bloc Tribune sur la partie gauche de mon site. Chaque classe est reliée à une feuille de style (CSS), c’est dans celle ci que tu vas mettre les propriétés, la encore tu trouveras les sources, elles sont indiqué en haut de chacune de mes pages… tu peux le visionner bien sur avec ton navigateur vu que c’est du texte pur…

    voilà ce qu’on optient en CSS


    // pour la div
    div.titre-menu
    {
    position: relative;
    left: 0px;
    top: 0px;
    background-image: url("images/haut_menu_gauche.png" );
    height: 20px;

    }

    // pour le span
    span.titre-menu-gauche
    {
    position: relative;
    top: 2px;
    font-size:12pt;
    font-family:Verdana;
    color:#474646;
    font-weight:bold;
    text-align:center;
    }


    Le div definit la position par rapport à un autre bloc, là c’est celui qu’il y a au dessus de lui, un autre bloc le conteneur de l’image du haut, le texte et l’image du bas du bloc, je lui dis de se placer relativement à l’autre à 0 pixels pres, je lui definit une hauteur de 20 pixels et je lui donne une image en fond.
    Dan le span je definis la police que je vais employer… l’alignement, la fonte, la taille…
    et sa position par rapport au div titre-menu…

    Bon je pense avoir repondu à ta question, ensuite c’est à toi de tester, sachant que c’est assez difficile que ca marche à la fois sous IE et Mozilla ( ne neglige pas mozilla, c’est lui qui respecte les regles pas IE… et il gagne en popularité +5% depuis 6 mois, 15% des surfeurs sont dessus… d’ailleur qq qui s’y connait ne serais-ce qu’un peu choisit mozilla et pas un "navigateur skin" qui utilise IE genre crazy broswer qui n’ont aucune utilité vu que les meme defauts et failles sont repercutés…

    Passons… En ce qui concerne les utilisateurs, il faut que tu gere ca dans une base de donnée avec du php par exemple et mysql pour la BDD, il faut que tu identifies à chaque fois les utilisateur avec des sessions et/ou des cookies, a chaques pages tu testes si la personne à acces a son repertoire ou non… c’est ce qui se passe sur daftsite par exemple… une seule personne à le droit de modifier les infos… les admin on des droits en plus que les modos, les modos en ont plus que les simples users… c’est une hierarchie… mais là je peux pas trop t’aider, je te donne l’essentiel, bon courage 😉

    http://openweb.eu.org/ : un des meilleurs site pour comprendre les CSS, il est fait par une personne qui bosse pour mozilla 😉

  • Hello,

    je te remercie bien Tyty… Je vais voir ce que je peux faire avec tout cela. Il va falloir que je décortique le tout, car pour moi, c’est encore du chinois, mais bon, je pense pouvoir avancer un peu.

    Lorsque j’aurai terminé, je te tiendrai bien entendu au courant. Il est cependant possible que je te pose quelques questions d’içi là !

    Merci encore

  • Salut Tyty, c’est encore moi.

    Bon, j’ai bien regardé tes trucs. Probléme, je ne trouve pas comment récupérer les feuilles .css. J’arrive bien à avoir la source, mais le reste, je trouve pas. Je pense que je suis encore un peu béta comme gars

    Pour le reste, je suis tout de même en train d’avancer sur mon "projet", mais bon, il me reste pas mal de points flous.
    Je pense que si on le peut, le mieux serait de se trouver en direct sur msn. Cela simplifierait la tâche, je pense. Mais, je sais, il faut du temps….

  • salut lukep

    hum… je ne sais pas trop de quoi tu parles, pour afficher le source faut juste allé sur /style.css dans mon site. Le css tu peux soit l’integrer à la page, ce qui est deconseillé et moins pratique en fait, parce que t obliger de le changer à chaque fois sur toutes tes pages… c’est vraiment à utiliser avec parcimonie… ou sinon tu as une ou plusieurs feuilles de style à coté…

    Pour la recuperer dans ton code il suffit de mettre une balise de ce style, il faut savoir qu’elle n’est pas normalisée et qu’il en existe plusieurs sorte:

    <link rel="stylesheet" href="style.css" type="text/css" />

    voilà j »espere que j’ai pu t’aider, je suis pas tres frais, je rentre d’un anniv… et niveau temps c’est chaud time en ce moment… j’ai pas encore pu bosser ce we je suis deg… donc le moyen differé est encore le meilleur, tali je pense aura plus de temps pour t’aider en direct, en tout cas à mon avis d’ici 4 mois ca va etre chaud, apres ca sera plu cool 😀
    Bon courage en tout cas

  • Bon, je viens donc de récupérer ton fichier .css…. Va falloir que je m’y colles de plus près pour bien le cerner.
    Ensuite, je pense que si je le comprends bien, je pourrai alors me faire mon propre fichier. J’y avance en ce moment, mais il me reste quelques problémes pour le positionnement de certains blocs. Je vais voir.

    Je pourrai peut etre faire des print écran, ca pourrait bien aider à l’explication….

  • Ca y est, à force de tests divers, je commence à comprendre le truc pour gérer le .css. Et ce, sans ton propre fichier, s’il te plait !!!!!

    Bon, sérieusement, je ne suis pas encore arrivé au bout de mes peines, car il me reste au moins 2 trucs à comprendre : faire le menu, en haut de ma page, et que ca ouvre dans une partie de ma page seulement, sans changer le reste. Et aussi comprendre toujours le probléme des accès réservés…

    Mais j’avance petit à petit

  • pour le chargement partiel de la page il faut utiliser les includes en php, c a d que tu met par exemple le haut de la page dans une page, le menu de gauche dans une autre et le contenu dans une autre, ensuite tu créé une page principale index.php par exemple ou tu fait un

    include("haut.php" );
    include("menu.php" );
    include("centre.php" );

    Pour chaque page tu aura les meme menu, meme fichier t’entete etc…

    Ca t’evitera de reecrire à chaque fois dans tes pages tt le contenu qui ne bouge pas… Par contre l’internaute est obligé de recharger la page en entier, comme sur mon site par exemple, tu peux pas trop passer à travers sauf en utilisant les frames, mais c’est pourri… ca n’est plus dans la nouvelle norme et c’est vraiment moche…

  • yep, j’ai lu ça aussi sur un autre site. Bon, j’ai réussi, jusqu’à prèsent, à faire presque ce que je voulais. Pas encore sur le site de l’association, mais sur celui du soft pour PDA. Il me reste encore un ch’tit probléme, avant de voir à "cacher" les données d’accès (user et mdp)… Ben vi, je n’ai pas encore réussi cela. Mais avant, j’ai un autre probléme : j’ai inclus dans ma page d’accueil 2 formulaires php, qui prennent sur ma base de données MySQL…. Ca marche pas, alors qu’en page séparée, ca marche bien. Je suppose qu’il y a conflit, mais bon, ce n’est pas bien grave.

    Il faut que je regarde mieux tes .css, sachant que pour le moment, je ne m’en suis (finalement) pas servi. :p

    Allez Tyty, , bon travail et moi aussi, je m’y remets :

  • ouep faudrait un peu plus cresuer le pb, difficile de voir comme ca

    Ca ca peut t’interesser je pense pour faire ton site facilement, ca ressemble pas mal à du spip apparement… mais abordé d’une manière differnete, ca permet un rendu dynamique à partir de pages statiques… j’ai pas plus le temps de regarder, je verai plus tard 😉

  • Salut à tous! 😉
    Bon moi, c’est Bourrin, mais pour ceux qui veulent savoir, je suis un obscur mec de première année de BTS IG… lol !!!
    Bon ok, je viens mettre mon grain de sel dans la convo !

    1. Euh, déjà mes félicitations au webmaster. Ca fait plaisir de voir un site valide XHTML 1.1 (pas facile de faire fi de l’attribut "target"!), honnêtement, quelqu’un qui suit les recommandations du W3C à la lettre! Pour ma part, avec mon site de 400 pages, je ne suis qu’au XHTML 1.0 Transitional : j’ai pas encore décidé de me séparer de mes target blank ! ^^

    2. A propos de SPIP, je suis disons assez sceptique sur ce CMS. Je connais bien les gars d’UZine pour avoir un certain penchant conservateur, et notamment avec le HTML4 et tout le bazar… Même s’il est assez sympa, je pencherais d’avantage sur Nucleus, et son système de modules. Bon évidemment l’idéal c’est de faire TON cms, mais là c’est une autre histoire!

    3. Pour le CSS, je peux te proposer quelques liens intéressants :
    csszengarden : le CSS Zen Garden, *LA* référence en matière de design CSS
    glish : on y trouve des trucs de base pas mal.
    yoyodesign Si tu es bourrin, ben tu te tappes la doc du W3C. Je l’ai imprimé à la maison, c’est assez chaud ! XD Enfin, pas tellement, mais disons que c’est fouillis. toutefois, c’est vraiment la référence si tu cherches quelque chose.

    Par contre, prépares toi à t’arracher les cheveux quand tu regarderas l’aperçu de ta page valide XHTML et CSS dans Internet Exploseur… là c’est tout de suite moins joisse ! lol !

    * Sur le positionnement des divs…
    Attention au positionnement : il peut provoquer des effets indésirables.
    Je préconiserais plutôt cette méthode :


    #menu{
    float:left;
    width:141px;
    margin:0;
    padding:0px 0px 0px 0px;
    }

    (Les valeurs données sont à titre d’exemple ;P)

    Pour le lien vers la feuille CSS, c’est bête, mais IE gère mal son utilisation dans certains cas ! Pour être sûr du résultat, et même si c’est moins joli tu peux glisser dans ton head :


    <style type="text/css">
    @import url("monfichier.css" );
    </style>

    En ce qui concerne les méthodes d’inclusion, et si vous n’aimez pas les URL du genre monurl.php?page=250&css=machinchose
    il y a toujours cette solution :
    phpscripts-fr.net

    Je pense que c’est vraiment le plus facile si on veut avoir des URL transparentes sur son site. Et ce, bien plus sécurisé que les include, ça va de soi. Pas de possibilité de passer des paramètres malicieux à la page.

  • salut bourrin 😉 content que le site te plaise, pourrais-je voir le tiens?

    Sinon pour les CSS… je galere justement là pour faire un beau coulé de texte à coté des images dans les articles, ca marche niquel avec un float sous gecko ou khtml… par contre on peut toujours se gratter sous IE… bizzareement les images passent en dessous de l’image de fond… c’est ballo qd meme lol!
    Donc pour le moment je cherche une soluce prace que c’est moche le centré sous mozzi et totalement à gauche sous ie…
    hhaaa vivement des navigateur krosoft qui respecteront les regles du W3C… on peut toujours rever 😉

    au fait si tu peux te presenter ici ca serait cool, mais à mon avis on est dans le meme bahut… memem si je sais pas qui tu es 😉

    Par contre fait gaffe pour les balises, ce n’est pas comme sous phpbb 😉 les liens sont differents, ya une petite FAQ qui montre un peu tout ;). Ah oui… tout le monde peut poster des news, sondages, articles sur daftsite, c’est le principe 😉 donc eclate toi bien vu que tu as pas peur de taper comme certains 😉 c cool!

  • tiens lukep je viens de trouver un CMS, je sais pas trop ce qu’il vaut mais il a l’air simple en tout cas, si tu as la flemme de te coder tout ton site 😉

    Chrono-site, au passage je l’ai trouvé sur linuxfr 😉

  • Re!

    (Je suis allé me présenter dûment dans le topic approprié 😉 ).

    Pour IE et le float, c’est une longue histoire… Le peek-a-boo bug, ça te parle ? Essaies donc de faire un

    <br clear="all" />
    ou de mettre un élément avec une propriété CSS

    clear:both
    Ben tu te prépares déjà à déchanter…

    Pour IE qui respecte les standards du W3C, je crois que c’est mal barré. Il n’a pas bougé depuis le IE6 SP1 de fin 2001, donc je pense qu’il ne vaut mieux pas trop s’attendre à du progrès de ce côté là. Par contre tu peux compter sur lui pour faire tourner toutes les fonctions non-normées genre les derniers ActiveX et tous les bidules .NET à la con (je repense à Guissani, dire que cette prof est une fan de Micro$oft, ça fait mal!)…

    Pour les balises, j’ai pigé quand j’ai fait "éditer le post"… Effectivement c’est original, mais c’est pas plus mal, je suis trop influencé par le BBCode de PhPBB (surtout que maintenant Invision Power Boards le supporte également), va falloir m’adapter ! lol !

    –> Tout le monde peut venir poster sur le site ? Wiki power ? ^^

    Ah oui j’allais oublier mes sites, les voilà, si quelques uns d’entre vous aiment les mangas :
    Ranma Otaku
    Ningyo
    Doumoto Bar
    Rumiko no Sekai

    Sans compter bien évidemment mon espace personnel sur le NTsvr105, dans l’alias "michel/", déjà PhPisé et CSS-isé, au grand dam de P.Boisson que j’ai obligé à accepter les modifs perso de sécurité pour enlever le safe-mode de PhP (ben oui faut bien vivre et développer librement non ? 🙂 ).

  • lol boisson aussi je l’ai fait crisé, ya pas de soucis 😉
    premiere fois que je l’ai vu je me suis pris la tete avec lui… et ca continue, heureusement je l’ai pas en cours 😉 sinon pas mal du tout tes sites, orienté tres manga et anim d’apres ce que je vois, c cool 😉 mon preferer c celui de ranma 1/2 =)

    Sinon pour les artibut clear je connais, j’ai dejà testé… mais ca resoud pas mon pb… je l’utilise dans d’autre endroit si me souvenir sont bon sur le site.. mais bon là l’image est en dessous du background.. donc bon.. looll

    Sinon pour le DAftcode, bein ouep c’est special, mais en meme tps si j’ai developpé un forum c’est pas pour qu’il soit identiques aux autres… plus leger en ressources et avec des options essentielle et utile.. genre les quote j’en veux pas, c’est la soluce de flemard :p

  • j’en ai trouvé un autre, dotclear… CA m’a l’air vraiment pas mal, le code source est tres propres et le rendu tres bon… un bon CMS je pense, à tester! C’est plus pour un blog mais bon… c’est tres beua je trouve 😉

Commentaires