Portekoi Posté 26 Juillet 2005 Partager Posté 26 Juillet 2005 Bonjour à tous, Je fais encore partis de ces dinosaures utilisant encore les 'Table'. Ma question est simple : Comment obtenir en CSS l'équivalent de cet exemple : http://desfurets.free.fr/css/ Ne tenez pas compte de la validation W3C dans cet exemple réalisé, je l'avoue, à la hâte... le but étant de me montrer les biens fait du css que j'ai déjà constaté maintes fois d'ailleurs En css, je suis une bille.. je ne fais que bidouiller pour le moment d'où la médiocrité de mon exemple... pourtant, le fait d'avoir des coins dans un tableau avec des dégradés est un cas d'école. A vous jouer Portekoi Lien vers le commentaire Partager sur d’autres sites More sharing options...
MarvinLeRouge Posté 26 Juillet 2005 Partager Posté 26 Juillet 2005 Salut, Si la question est "comment centrer un bloc dans un autre", la réponse est : #contenu{ margin : 0 auto 0 auto;} en supposant que tu colles en haut et en bas Lien vers le commentaire Partager sur d’autres sites More sharing options...
Raphael Posté 26 Juillet 2005 Partager Posté 26 Juillet 2005 Salut, Si la question est "comment centrer un bloc dans un autre", la réponse est : Oui, sinon je ne comprends pas trop non plus ce qui poserait problème. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Dudu Posté 26 Juillet 2005 Partager Posté 26 Juillet 2005 Salut, Si la question est "comment centrer un bloc dans un autre", la réponse est : #contenu{ margin : 0 auto 0 auto;} Que l'on peut d'ailleurs simplifier en écrivant margin: 0 auto lorsqu'on veut économiser quelques précieux octets Ceci mis à part, je ne comprends pas trop non plus où est le souci Lien vers le commentaire Partager sur d’autres sites More sharing options...
Portekoi Posté 26 Juillet 2005 Auteur Partager Posté 26 Juillet 2005 (modifié) Salut, Non je pense que l'on c'est mal compris En css, comment procéderiez vous? Peut être plus clair comme ca. EDIT : Le but est de me montré l'équivalent en CSS. Ca peut pas être plus clair EDIT2 : Je n'ai pas de soucis. Je demande aux puristes de réaliser la même chose en CSS. à titre d'exemple sinon, je n'ai aucun problème ++ Portekoi Modifié 26 Juillet 2005 par portekoi Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sarc Posté 26 Juillet 2005 Partager Posté 26 Juillet 2005 Hum l'article qui aurait pu y répondre est dans le livre "CSS2 Pratique du design web" de Raphaël Goetter... Il y a plusieurs façons plus ou moins sémantiquement bonne de faire des menus en CSS... La solution la plus facile est de faire un div avec le milieu du menu en background, et de rajouter sans margin et sans padding l'image du haut du menu, et l'image du bas du menu... <div id="menu"><img src="hautmenu.png">Contenu, menu, etc...<img src="basmenu.png"></div> Mais c'est pas le plus rigoureux disons... Il y a plusieurs méthodes de ce genre.. Enfin là je pourrais pas te coder tout ton menu à priori Lien vers le commentaire Partager sur d’autres sites More sharing options...
Portekoi Posté 26 Juillet 2005 Auteur Partager Posté 26 Juillet 2005 (modifié) C'est là que je voulais en venir Est ce que quelqu'un peut, s'il a le temps , refaire ce que j'ai fais mais en CSS pur et dur ? Pour info, je peux donner n'importe quelle hauteur / largeur à mon tab ++ Modifié 26 Juillet 2005 par portekoi Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sarc Posté 26 Juillet 2005 Partager Posté 26 Juillet 2005 portekoi, faudrait surtout les images en fait... La grosse différence entre les tables et le CSS, c'est que les tables sont un découpage là ou le CSS est un collage... Il faudrait donc avoir une image du tableau d'en dessous, et une image du tableau d'au dessus Si tu les mets sur ton FTP je pourrai peut-être t'aider... Lien vers le commentaire Partager sur d’autres sites More sharing options...
Portekoi Posté 26 Juillet 2005 Auteur Partager Posté 26 Juillet 2005 Ben tu fais un imprime écran et roulez jeunesse Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sarc Posté 26 Juillet 2005 Partager Posté 26 Juillet 2005 le tableau d'en dessous j'aurai du mal à le prendre avec un impr écran, c'est ce que j'essayais de t'expliquer... Lien vers le commentaire Partager sur d’autres sites More sharing options...
Portekoi Posté 26 Juillet 2005 Auteur Partager Posté 26 Juillet 2005 (modifié) Bé.... c'est le même que celui du dessus... C'est le même tableau mais imbriqué.... il pourrait très bien faire 100% de la page ou 15%... Rha, je pige pas ce que tu me demandes La fatigue surement Modifié 26 Juillet 2005 par portekoi Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sarc Posté 26 Juillet 2005 Partager Posté 26 Juillet 2005 Le problème c'est qu'en CSS il est difficile de faire des tableaux fluides en largeur en fait.. lol, on arrive à un problème si tu veux des tableaux qui puissent être de taille différentes sans changer l'image de base Bref, je vais essayer de faire quelque chose avec un impr écran, même si les images sont pas détourées parfairement Lien vers le commentaire Partager sur d’autres sites More sharing options...
Portekoi Posté 26 Juillet 2005 Auteur Partager Posté 26 Juillet 2005 Fainéant Détouré sur du blanc; ca devrait le faire lol Sinon, si tu me dis qu'en CSS, c'est pas possible d'avoir des div 'extensible' pour l'image de fond, cela m'étonne pas mal... Y a qu'a voir openweb.org ++ Portekoi PS : Merci d'essayer, c'est sympa Lien vers le commentaire Partager sur d’autres sites More sharing options...
v4np13 Posté 26 Juillet 2005 Partager Posté 26 Juillet 2005 (modifié) Je pourrais te le faire les doigts de pied dans le nez. Contacte moi pour me dire avec précision ce que tu veux avec les images, dimensions, contenu,... Edit: vous me faites marrer avec imprimer l'écran, il y a beaucoup plus simple: avec firefox, clic droit -->informations sur la page-->média-->enregistrer sous Modifié 26 Juillet 2005 par v4np13 Lien vers le commentaire Partager sur d’autres sites More sharing options...
Portekoi Posté 26 Juillet 2005 Auteur Partager Posté 26 Juillet 2005 (modifié) Justement, taille variable tout comme la hauteur, c'est ca l'intérêt... Donc contenu variable aussi, cela va sans dire Bonne nuit Modifié 26 Juillet 2005 par portekoi Lien vers le commentaire Partager sur d’autres sites More sharing options...
v4np13 Posté 26 Juillet 2005 Partager Posté 26 Juillet 2005 Regarde ici, le deuxième exemple, il faut juste l'adapter avec tes images. Je vais dormir, bonne nuit Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sarc Posté 26 Juillet 2005 Partager Posté 26 Juillet 2005 v4np13 tu viens d'indiquer à Raphaël que ses articles étaient encore visibles... Tu exagères Pour faire un truc fluide en horizontal, ouai il faut utiliser le deuxième exemple de cette page, mais bon ça fait tout de suitr très lourd, presque autant qu'avec les tableaux... Sur openweb, tu n'as rien de fluide en horizontal qui soit un menu compliqué comme les tiens, ce sont justes des menus carrés avec une couleur de fond et une bordure non ? Ou alors j'ai mal vu... J'ai fait ça pour toi... C'est vite fait, pas optimisé et tout, mais c'est un exemple du tuto d'alsacréations ! Marche avec IE et FF, j'ai pas essayé le reste... Par contre, avec des menus comme les tiens, Il faut pas faire d'erreurs au niveau du padding et du margin, sinon tu te retrouves rapidement avec des trucs moches... faut quasiment travailler sans margin et padding pour être sûr de ne pas avoir de bugs d'affichages lol Pour avoir des menus très très gros en taille, il faut par contre augmenter la taille de l'image p.png et g.png... L'inconvénient de cette méthode Lien vers le commentaire Partager sur d’autres sites More sharing options...
Portekoi Posté 27 Juillet 2005 Auteur Partager Posté 27 Juillet 2005 Ok... y a t'il d'autres avis? Car perso, je préfère garder mes tableaux, dans cet exemple, que d'utiliser les CSS non? Il n'est donc pas possible de refaire mon exemple avec des tableaux agrandissables à volonté suivant le contenu avec des images en coin + bord? Ben vive les 'table' alors Je sais bien que le CSS est une très bonne technologie. Je dis ca pour les puristes du CSS ++ Portekoi Lien vers le commentaire Partager sur d’autres sites More sharing options...
Portekoi Posté 27 Juillet 2005 Auteur Partager Posté 27 Juillet 2005 Re, Mon tableau est composé de : 1 image de coin en haut à gauche 1 fond en haut 1 image de coin en haut à droite 1 image de 'bordure' (car dégradé) à droite Mon contenu 1 image de 'bordure' (car dégradé) à gauche Cette zone est étirable aussi bien en largeur qu'en hauteur. 1 image de coin en bas à gauche 1 fond en bas 1 image de coin en bas à droite Voilà pour répondre à ta question Portekoi Lien vers le commentaire Partager sur d’autres sites More sharing options...
Dudu Posté 27 Juillet 2005 Partager Posté 27 Juillet 2005 En fait, il va sûrement falloir retravailler d'abord les images. Elles sont taillées sur mesure pour une page "tablisée" Comme le dit sarc, si tu veux de l'élastique, il faut des images grandes en largeur/hauteur. Pour comprendre le mécanisme, regarde cet exemple d'onglets coulissants en CSS Lien vers le commentaire Partager sur d’autres sites More sharing options...
Portekoi Posté 27 Juillet 2005 Auteur Partager Posté 27 Juillet 2005 (modifié) J'ai l'impression que l'on ne se cmoprends pas Le lien que tu m'as donné explique le principe d'extension horizontale d'un menu. Mais, si on garde cet exemple et que j'ai un onglet contenant un titre qui est sur 3 lignes, je vais devoir modifier mes images de 'côté' afin de prévoir le cas. (augmenté la hauteur à la main) Et si demain j'ai un menu sur 4 lignes ou X lignes, comment faire? Je dois découper mes images de 'côté' à chaque coup? Avec mon tableau, le problème ne se pose pas mais on dirait bien que oui en CSS. Je rappelle la composition de mon tableau : 1 image de coin en haut à gauche1 fond en haut 1 image de coin en haut à droite 1 image de 'bordure' (car dégradé) à droite Mon contenu 1 image de 'bordure' (car dégradé) à gauche Cette zone est étirable aussi bien en largeur qu'en hauteur. 1 image de coin en bas à gauche 1 fond en bas 1 image de coin en bas à droite En faites mon tableau réagit comme les onglets sauf qu'il est agrandissable en largeur ET en hauteur sans intervention de ma part. Où sont les 'puristes' du CSS? ++ Modifié 27 Juillet 2005 par portekoi Lien vers le commentaire Partager sur d’autres sites More sharing options...
Dudu Posté 27 Juillet 2005 Partager Posté 27 Juillet 2005 J'ai l'impression que l'on ne se cmoprends pas Le lien que tu m'as donné explique le principe d'extension horizontale d'un menu. Mais je sais bien L'exemple n'a rien à voir avec ce que tu veux faire. Je t'ai donné le lien juste pour que tu comprennes comment préparer le terrain d'un point de vue "images" avant de se lancer dans le code html/css. Regarde bien comment les images sont découpées pour faire le menu CSS, le mécanisme sera le même dans ton cas Lien vers le commentaire Partager sur d’autres sites More sharing options...
Portekoi Posté 27 Juillet 2005 Auteur Partager Posté 27 Juillet 2005 Et donc, dans mon cas, je devrais découper une image de côté 'gauche' (par exemple) de 500 en hauteur, c'est bien cela? Lien vers le commentaire Partager sur d’autres sites More sharing options...
Dudu Posté 27 Juillet 2005 Partager Posté 27 Juillet 2005 Voilà Ou alors jouer avec les couleurs de fond, çà marche bien aussi. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Portekoi Posté 27 Juillet 2005 Auteur Partager Posté 27 Juillet 2005 Oui mais dans le cas d'un dégradé, c'est image avec hauteur 'figée' obligatoire... Je vais garder mes tableaux Merci à tous Portekoi Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant