Premier essai en CSSFermé

Question

Bonjour,

Voilà, je puis vous proposer une ébauche de mon premier essai en CSS. Pour ceux que cela inquièterai, sachez que je n'y connais rien et qu'en cherchant un peu, on peu assez facilement arriver à quelques chose.

Le code n'est sans doute pas au propre, travaillant avec Dreamweaver 2 et Notepad++, vision sous IE en local via l'adresse C:\Documents and Setting\ ............ Plus facile que de lire dans Dreamweaver 2 qui casse le travail (!?). En bas à droite, le lien est à replacer en haut à droite, dans le bandeau.

J'ai donc à gauche une barre de navigation (c'est le nom que je luis donne) et en haut à droite un menu qui bien entendu se modifie en fonction des appels de la navigation. Le résultat s'affiche dans le milieu.

Reste à placer une barre verticale à droite pour clôre, avec un quart de cercle vers la gauche en haut et en bas. Celui du bas doit êre coupé au niveau des fleurs et s'arrêter juste après. Le bas à gauche doit obtenir un même arrondi en blanc pour équilibrer l'ensemble.

Voilà, je suis un peu long, mais je m'absente durant trois semaines, et je souhaitais vous présenter le bébé avant mon départ.

Le lien est: http://www.jouenne-depreux.org mais attention, tout est encore en vrac. Si cela intéresse quelqu'un, il peut se servir sans problème, ce site devant faire une présentation auprès du www3C. Cela fait partie de la charte d'agrément. 

Comme je le dis dans le texte de présentation, merci aux contributeurs qui sauront se reconnaître.

Vos commentaires sont bien entendu les bienvenus.

Merci de vos commentaires.

Jacques

king · Answer

Ben au premier coup d'oeil, le site a bizarrement une grosse perte de place à gauche et ne répond pas très bien à IE (problème de positionnement).

Dalida · Answer

salut, réponses et commentaires en vrac... - fichier css, comme la déjà dit Divx78 - vive l'indentation ! 100 lignes en html, facile ! fois trois ou quatre avec du php... - le html, je te conseille d'organiser la structure avec header/content multicolonne/footer :

- div#cadre : 'width' en px. si tu veux passer partout tu peux tomber à 770px. et dans moins de 800px on a encore beaucoup de place pour écrire (si, si !!!). ou alors dimensions entièrement variables mais il faut du contenu pour occuper 1200px... pour ses enfants préfère les tailles relatives ça évite pas mal de ratés dus aux différences d'interprétation. - 'margin' : haut et bas comme tu veux, gauche et droite à "auto" si tu veux centrer ton cadre. - div#titre : va venir se placer en haut et te fournit un bloc à l'intérieur duquel tu es libre de composer. - div#contenu : se place en dessous de #titre et sera le conteneur des colonnes. - div#texte, div#navigation : 'width' en % et flottants. ça évite d'avoir recours à 'padding' qui est interprété différement. - div#text : {clear:left;} pour que #pied se recole en dessous à gauche. - div#pied : le conteneur qui te permet d'afficher la validation où tu veux. le but du jeu pour moi c'est d'éviter de jouer sur 'margin'/'padding' à droite et à gauche. encore et toujours les broblème d'interprétation. dans la hauteur pas de problème mais dans la largeur ça peut vite devenir une prise de tête. donc je range tout gentillement, quite à ajouter quelques

et je laisse faire. - body{font-style:Arial,Helvetica,sans-serif;} pour profiter de la cascade et tu peux ajouter color/background-color. - {background-image: url(file:chemin_relatif);} - les couleurs en hexadecimal. oui je sais, au début ça fait mal... - {opacity} : /*CSS3*/ si je ne m'abuse, va falloir hacker... - {height: auto;} : à priori inutile. - {position: absolute;} : moi je m'en méfie, du moins pour positionner les conteneurs principaux, c'est trop rigide à mon goût. - les avant le texte, je trouve ça plus logique et c'est plus accessible. - pour les 'font-size' je cascade en faisant : : 100%, on prend la taille navigateur : 0.8em, taille par défaut de tout le texte et j'ajuste au cas par cas en essayant d'y toucher le moins possible mais en utilisant toujours les 'em'. ai lu un super article qui explique ce choix, essayerai de le retrouver. -quand un élément est unique il vaut mieux utiliser un 'id' plutôt qu'une 'class' (qui valent 100 et 10 en priorité si je ne me trompe pas). ça plus les

pour séparer chaque partie de la page et tu ne devrais plus avoir besoin de '!important'. et pour finir la tartine, je remets une couche avec FF. j'ai commencé les css en testant sous IE, me disant je fais le plus ch**** en premier et le reste coulera de source : tout faux, c'est l'inverse. mieux vaut dabord faire tourner chez Mozzila et Opera qui ont un rendu plus "carré" même s'il n'est pas parfait et ensuite bidouiller pour les masses. regarde la capture de mon écran. j'y affiche ta page en condition de debug pour css. dans la partie droite je modifie la feuille de style et je vois à gauche ce qui ce passe et tout ça dans le navigateur. en plus j'ai une fenêtre d'info qui me dit tout des éléments de la page. ça plus des dizaines de fonctions indispensables. je peux aussi afficher en utilisant le moteur IE et sans avoir quitté FF. bref, j'en suis assez content... Firefox, WebDeveloper pour FF, IETab mais aussi... WebDeveloper pour Opera WebDeveloper pour WinIE désolé pour la longueur... [ Mathieu ] savoir rester faignant, c'est progresser en informatique. enfin, j'essaie...

Gihef · Answer

Bonjour, Vous reprendrez bien une petite tartine (-; Bonne idée, la reprise de tes pages avec des CSS. Après avoir suivi votre discussion et parcouru ta page je me permets ces quelques propositions bienveillantes. Commence par faire le ménage dans la head. Les et mal formées, mal fermées. Puis par ferme correctement les
et . Et surtout, abandonne tout de suite les styles définis dans les balises alors que tu utilises une feuille de styles assez complète. C'est pénible à lire et à gérer. Les conseils que te donne Dalida prouvent qu'il a étudié le sujet. La manière de faire qu'il suggère est classique, simple à comprendre et à mettre en œuvre. Elle n'est accessible qu'une fois qu'on a fait les erreurs que font les débutants (-; (je n'ai plus ma 1re page avec CSS, mais je ne te dis pas…) “je ne suis pas d'accord pour que le CSS soit dans un conteneur” Pourtant, E. Meyer dont tu donnes un exemple l'utilise#container {width: 647px; margin: 75px auto 0; padding: 0; position: relative; text-align: left;}Ce “container” là est bien le conteneur dont on parle (on trouve aussi main, principal, global…). Il est très pratique pour regrouper le reste et pour centrer facilement l'ensemble. C'est un bon moyen d'apprendre. Il existe des tas d'autres manières de faire. Mais pas aussi simple à gérer. Ça permet aussi d'éviter le positionnement en “absolute” qui est tentant mais est rigide et, je trouve, ne devient accessible au webmestre que lorsqu'il maîtrise quelques rudiments. Perso., je ne m'en sers, pour l'instant, que lorsque je construis une page avec des dimensions déterminées et où des éléments doivent être fixes (un exemple avec absolute où rien n'est dessiné dans l'image). De la même manière des blocs “float” (j'adooooooore) suivis d'un autre en “clear” te permettront d'avoir ton pied de page toujours en-dessous et ton contenu s'adaptera en hauteur à ce qu'il contiendra. Si tu as plus de texte à insérer que ne peuvent en contenir les 1108px que tu as prévus que se passera-t-il ? En 1000px, ça ne passe même pas pour un écran en 1024. Il vaut mieux que tu prévoies un peu plus de marge de manœuvre. Ou au moins, que tu laisses ton contenu à moins de 800px de large pour que ceux qui visiteront tes pages avec cette résolution ne soient pas obligés d'utiliser l'ascenseur horizontal pour lire. Si tu trouves un moyen de lui permettre de s'adapter en largeur, ça sera plus agréable. Pour voir, dans cet exemple, j'ai repris ta page et l'ai remaniée un peu, après avoir placé les éléments dans un conteneur. Avec le menu gauche et le contenu en float et le pdp en clear. C'est très facile à acquérir. + Un outil pour de l'indentation après coup : http://infohound.net/tidy/ ou http://www.w3.org/People/Raggett/tidy/ La page sur les em : http://www.blog-and-blues.org/weblog/2004/05/24/214-font-size-em

Dalida · Answer

salut !

j'avais même pas lu le html...  :o|

voici l'article dont je parlais.

merci Gihef, je ne suis pas cabot en générale mais là ça fait plaisir ! j'ai tout appris tout seul et j'en suis à mes début. je ne croise que des webmasters sur Flash ou ASP et parfois on me prend vraiment pour un rigolo avec mes css et mes convictions sur l'accessibilité...

Gihef · Answer

Vraiment, merci de rien.

J'ai aussi appris seul. Et je continue. Doucement.
C'est pour ça que je préfère vivre avec des “ rigolos” (-;

Jacobéo · Answer

Bonjour Dalida et Gihef,

Les vacances se termminent, mais je profite d'un poste pour vous remercier de votre aide (mème sous le soleil, on oublie pas ceux qui nous aident) J'ai aussi profité d'une occasion pour faire une essais en CSS pour des amis. Voici l'adresse http://www.terradillos-jdmolay.com/ Il reste encore à faire le tableau sous forme de css, mais là, je verrais à mon retour. Merci pour cette aide qui m'a permis d'entrer (légèrement) dans le monde du CSS.

--Internet ne vaut que s'il est partagé ...
Jacques

king · Answer

C'est amusant car le premier lien donné à un souci IE et le dernier c'est l'inverse, firefox semble battre la campagne?

Reste à faire un compromis entre les 2 ;-)

Y a aussi un div "conteneur" qui bizarrement ne semble pas très utile dans ce cas, or comme son nom l'indique, il devrait contenir!
C'est pourtant une solution simple pour organiser la page car les autres "div" vont se régler sur lui, ce qui évite beaucoup de déconnades d'autres contenus qui vont se ballader n'importe où.
De plus le système sataisfait aussi bien IE que Firefox ou Opera.

Kingpopo · Answer

vi en fait, j'ai pas regardé à fond, ça vient probablement des infos du ou des css, car c'est bordélique sous Firefox (pour le lien 2).

Donc ça donne la même apparence que sans le div conteneur, soit le contenu qui se ballade un peu n'importe où.

Premier essai en CSS

8 réponses

Discussions similaires

Newsletters