teektak Posté 20 Décembre 2003 Posté 20 Décembre 2003 Bonjour! Je voudrais particulièrement saluer Sibelius, que je connais de Freegaia ;-) J'ai un ambitieux projet de site web, une sorte d'annuaire communautaire du flash. Au départ du projet je ne connaissais pas bien les standards du web, je me contentais de me renseigner un peu sur openweb etc. pour quelques "goodies" css comme on en faisais avec le javascript dans le tmeps ;-). Donc j'utilisais pour tous mes sites sans exceptions une mise-en-page de style table-layout, très graphique et extrêmement lourde. Il y a quelques semaines j'ai eu en quelque sorte "honte" de ne pas favoriser l'emergence d'un web standard, qui est l'idéal de tout développeur web (enfin c'est le mien...). J'ai donc décidé de prendre mon courage à 2 mains et de transcrire mon site en utilisant le CSS pour la mise en page purement graphique. Pour l'instant, j'ai réussi à transcrire la partie header de mon site plus ou moins justement, bien que je pense que l'utilisation de position: absolute; ne devrait idéalement n'être que très rarement utilisée. J'arrive donc à "l'espace pub"... et la rien à faire j'arrive pas à m'en sortir... Donc je sollicite très humblement votre aide, pour m'aider à placer correctement le calque et son contenu. A savoir: les boutons du menu (catégories, bestof, etc...) on comme propriété une taille de texte de 5px, sans quoi ils auraient l'air trop grands sous IE. Concernant l'accessibilité: Mon site ne l'est effectivement pas trop... il est archi-ultra-hyper-graphique. Mais ma conscience reste tranquille di fait que le flash n'est pas en soi un média accessible pour les handicapés. liens -> le site en table-layout: click l'essai en css: click sa feuille de style: click Si ça peut vous aider je suis sous winxp, firebird et je travaille sous dreamweaver mx 2004
Fruge Posté 20 Décembre 2003 Posté 20 Décembre 2003 (modifié) Bonsoir, Et bienvenue sur le Hub ! Pour répondre à ta question, j'essayerai un truc de ce genre : <div id="Conteneur"> <div id="general"> ... </div> <div id="Barre2"> <div id="Pub" style="width:500px;float:left">Pub</div> <div id="Autopromo" style="width:100px;float:left">Autopromo</div> <div id="Aide" style="width:60px;float:left">Aide-Faq</div> </div></div> Déjà, je mettrai tout dans un "Conteneur" bien centré et aux bonnes dimensions. Ensuite, tu mets ta première "barre" ("General"), puis la deuxième ("Barre2"). Dans cette "Barre2", tu places tes trois Div : "Pub", "Autopromo" et "Aide". Après, en fixant les height et width adéquates pour ces différents Div, tu devrais pouvoir arriver à tes fins (Tiens, si tu veux voir ce que ca donne : -http://test.hist-geo.com/Test.php) Fruge. Modifié 21 Décembre 2003 par Fruge
Raphael Posté 20 Décembre 2003 Posté 20 Décembre 2003 Théoriquement, tu devrais t'en sortir avec tous ces tutos : http://www.alsacreations.com/articles/ Tu sauras comment utiliser et positionner un div, le centrer, faire des menus, ... Bonne chance
teektak Posté 21 Décembre 2003 Auteur Posté 21 Décembre 2003 Sibelius > J'ai déja été souvent voir tes tutos, en passant excellents! Mais là j'ai pas trouvé réponse à ma question. Fruge > Merci pour ta réponse et ton exemple. En fait le bloc "conteneur" que tu me proposes, il existe déja: c'est le bloc "general". Dedans, il y a pour l'instant 3 blocs les uns au dessus des autres: -le bloc "header", contenant la large image du haut -le bloc "logoline", contenant le logo, les cubes, et le formulaire de login -le bloc "menuline", contenant les 3 boutons + le bouton d'inscription. En fait le problème se situe à l'étape suivante: lorsque je veux faire un 4ième bloc dans le bloc "general", il me "recopie" le bouton inscription qu'il place n'importe comment et mon texte ou ma bannière se trouve à l'intérieur du bouton! J'ai entendu parler de fusion de marges, serait-ce cela mon problème? En fait, pour me situer au plus près de ta solution, ma page est exactement comme tu le décris, sauf que je n'ai pas mis de séparation entre la pub (tu proposes "barre2") et le reste se trouvant au-dessus ("general"). enfin bon, je vais réessayer de différentes manières, je vous tiens au courant!
Raphael Posté 21 Décembre 2003 Posté 21 Décembre 2003 D'après le lien que tu donnes, tu n'as pas donné de conteneur global au site, donc c'est normal que tout ne soit pas centré. - donne un conteneur global - place tes divs les uns en dessous des autres (sans positionnement puisque c'est inutile) - si certains divs contiennent d'autres divs les uns à côtés des autres, place-les en floattant ... et tout sera centré !
Raphael Posté 21 Décembre 2003 Posté 21 Décembre 2003 Petit conseil : commence par délimiter toutes tes zones (canevas) et place les objets ensuite
teektak Posté 21 Décembre 2003 Auteur Posté 21 Décembre 2003 Ok, j'ai suivi vos conseils. -conteneur global cenré: c'est fait (bloc "general") -placer les divs les uns en dessous des autres: c'est fait -placer les divs côtes à côtes en 'float': c'est fait à moitié: une partie est en 'absolute' -mettre trois divs pour respectivement la pub, l'autopromo et l'aide: c'est fait aussi. J'ai carrément recopié ton exemple, Fruge. Donc voici le resultat: click Mais, il y a un mais! Vous remarquerez qu'il y a toujours ce fichu bouton "inscription" qui est dupliqué et le texte qui se trouve dans les divs "pub", "autopromo" et "aide" est dans le bouton!!! C'est le petit trait noir que vous voyez dans le bouton.
Fruge Posté 21 Décembre 2003 Posté 21 Décembre 2003 Je ne travaille pas (encore) en XHTML , je vais donc peut être dire une bétise, mais c'est normal que les balises <a /> ne soient pas fermées ? <div id="menuline"><a class="categories" href="flashquery.php" /><a class="bestof" href="lien.htm" /><a class="auhasard" href="lien.htm" /><a class="inscription" href="lien.htm" /></div> C'est peut être bétement ca qui pose problème (?) Fruge.
teektak Posté 21 Décembre 2003 Auteur Posté 21 Décembre 2003 normalement le "/" après la description de la balise indique une balise auto-fermante -> <a /> équivaut à <a></a> mais au point où j'en suis, je vais essayer...
Raphael Posté 21 Décembre 2003 Posté 21 Décembre 2003 (modifié) normalement le "/" après la description de la balise indique une balise auto-fermante -> <a /> équivaut à <a></a> Ah bon? jamais vu ça La balise <a> n'est pas auto-fermante Modifié 21 Décembre 2003 par SIBELIUS
teektak Posté 21 Décembre 2003 Auteur Posté 21 Décembre 2003 ça marche!!! je me demande bien pourquoi, mais en remplaçant les balises auto-fermantes par des balises simples, il n'y a plus aucun problème... Merci Fruge! Merci à toi aussi Sibelius, en fait j'ai recopié le code de ton excellent tuto sur les rollovers css et croyant mieux faire j'ai remplacé les <a></a> par des <a />. Ouf, je suis soulagé d'un poids là... Encore merci!
teektak Posté 21 Décembre 2003 Auteur Posté 21 Décembre 2003 pour tout vous dire, le truc des balises < />, je l'ai trouvé là: http://openweb.eu.org/articles/html_au_xhtml/ ça marche peut-être que pour les <br /> et les <img />...
Raphael Posté 21 Décembre 2003 Posté 21 Décembre 2003 ça marche peut-être que pour les <br /> et les <img />... Oui, mais <a> exige un lien-texte explicite entre la balise ouvrante et fermante
Monique Posté 21 Décembre 2003 Posté 21 Décembre 2003 Bonjour teektak, bienvenue sur le Hub et dans la famille des adeptes des standards Le problème vient probablement de la non-conformité du code de ton formulaire pour le doctype que tu as choisi : les proporiétés width, height et border ne peuvent pas être utilisées... le code valide est <div id="form_login"><form name="form1" id="form1" method="post" action="www"> <input name="login" id="login" type="text" class="login" onfocus="this.value=''" onblur="if(this.value=='')this.value='login';" value="login" size="10" /> <input name="pass" id="pass" type="password" class="pass" onfocus="this.value=''" onblur="if(this.value=='')this.value='pass';" value="pass" size="10" /> <input name="login_go" id="login_go" type="image" class="go" src="images/new/general/login_go.gif" /> </form></div> En principe cela devrait marcher.
teektak Posté 21 Décembre 2003 Auteur Posté 21 Décembre 2003 merci Monique. C'est vrai que j'avais pas fait attention à ça... Est-ce que les propriétés width, height peuvent être utilisées dans le cadres d'images toutes simples (ex: <img alt="..." src="..." width="..." height="...">)?
Raphael Posté 21 Décembre 2003 Posté 21 Décembre 2003 Est-ce que les propriétés width, height peuvent être utilisées dans le cadres d'images toutes simples Pas en doctype strict à ma connaissance
Monique Posté 21 Décembre 2003 Posté 21 Décembre 2003 Est-ce que les propriétés width, height peuvent être utilisées dans le cadres d'images toutes simples (ex: <img alt="..." src="..." width="..." height="...">)? Contrairement à SIBELIUS, je te répondrai que oui, c'est la propriété border qui n'est pas autorisée avec un doctype en mode strict. Un exemple ? cette ligne de code <img src="/img/logo.png" width="358" height="94" alt="OpenWeb, pour les standards du web" /> fait partie d'une page du site Openweb, valide XHTML 1 strict. En cas de doute, le mieux est de s'en référer aux spécifications du W3C. Sur cette page d'Openweb, tu disposes des liens vers les différentes spécifications
Raphael Posté 21 Décembre 2003 Posté 21 Décembre 2003 Un exemple ? cette ligne de code <img src="/img/logo.png" width="358" height="94" alt="OpenWeb, pour les standards du web" /> fait partie d'une page du site Openweb, valide XHTML 1 strict. Ok, j'en apprends tous les jours Ce doit être dans les tableaux que les propriétés width et height sont dépréciées alors. Par contre, pour l'exemple tiré d'OpenWeb, je ne suis pas très fièr d'eux : width="358" sans préciser l'unité, c'est pas très propre
teektak Posté 23 Décembre 2003 Auteur Posté 23 Décembre 2003 Ok, merci pour le renseignement au sujet de la balise <img>. Concernant mon site... j'ai un nouveau problème: lorsque je veux imbriquer des blocs dans un autre bloc, je voudrais que celui-ci s'adapte à la taille des blocs à l'intérieur, ce qui me paraît logique vu que je n'ai pas défini de taille pour le bloc contenant. Vous me direz que je n'ai qu'à définir une taille pour le bloc conteneur... Et bien c'est vrai qu'ainsi ça marche, mais j'utilise le bloc à différentes reprises et ça m'embêterait de devoir re-créer un bloc à chaque nouvelle utilisation de taille différente. le lieu du problème: click la feuille de style: click -> les informations sur les blocs "incriminés" se trouvent au bas de la feuille
Monique Posté 23 Décembre 2003 Posté 23 Décembre 2003 Bonjour teektak, Si tu attribues la propriété width: 100%; à ton bloc à imbriquer, cela devrait marcher.
teektak Posté 23 Décembre 2003 Auteur Posté 23 Décembre 2003 Bonsoir Monique, Merci de prendre le temps de m'aider, je t'en suis très reconnaissant. Je ne vois néanmoins pas où je dois placer le "width: 100%;": la partie en question est constituée de 3 blocs alignées les uns à côté des autres, dans un autre bloc qui s'intitule "millieu_en". En le plaçant dans un des trois blocs, j'obtiens un effet de retour à la ligne, ce qui ne correspond pas à mon voeu de mise en page. Si je le mets dans le bloc "millieu_en", ça n'a aucune incidence sur la suite... merci d'avance!
Monique Posté 23 Décembre 2003 Posté 23 Décembre 2003 Je n'avais pas bien compris ce que tu voulais faire... Si tu indiques les dimensions de ton image comme ceci <div id="minijeu"><img src="images/new/temp/minijeu_temp.gif" width="228" height="164" /></div> cela donne-t-il bien le résultat que tu souhaites obtenir ?
teektak Posté 23 Décembre 2003 Auteur Posté 23 Décembre 2003 non, cela ne change toujours rien... en fait le problème c'est que derrière les 3 blocs, dont l'image "minijeu", il devrait y avoir un fond blanc, et en dessous, l'"arrondi" du fond, comme l'indique logiquement la syntaxe du document. Mais le problème est qu'il ne met pas de fond blanc, et ceci a comme effet de "pousser" l'arrondi du fond vers le haut, ce qui n'est pas tou à fait ce que je souhaite... pour rappel, la version proche de laquelle je voudrais arriver est la: http://flashwall.teencity.firstream.net/
Monique Posté 23 Décembre 2003 Posté 23 Décembre 2003 OK, cette fois, j'ai vu ce que tu veux... un fond à coins arrondis. La technique n'est pas très simple Tu peux peut-être t'en tirer autrement... > tu coupes ton image en deux horizontalement > tu ouvres un bloc dans lequel tu places ces trois-ci un avec la partie haut de l'image un (qui contiendra minijeu, edito et news) avec un fond blanc un avec la partie bas de l'image A toi d'essayer
teektak Posté 23 Décembre 2003 Auteur Posté 23 Décembre 2003 Merci de ton aide, Monique. Je suis déja arrivé à ce point. J'ai donc 3 blocs: - le bloc "haut_en" de hauteur fixe contenant le haut arrondi en fond - le bloc "millieu_en" qui n'a aucune hauteur spécifiée, avec un fond blanc (qui n'est en fait pas complètement blanc -> ombrage sur le côté droit). - le bloc "bas_en" de hauteur fixe contenant le bas arrondi en fond Dans le bloc "millieu_en", j'ai aligné 3 autres bloc à l'intérieur - le bloc "minijeu": une image classique - le bloc "edito": du texte sur un fond d'image - le bloc "news": idem que le bloc "edito" Mon problème, c'est que ces 3 blocs ne s'affichent pas véritablement dans le bloc "millieu_en": c'est comme si celui-ci n'existait pas. Donc visuellement, on a: l'image arrondie du haut, l'image arrondie du bas (rien au millieu), et, pardessus, les 3 blocs "minijeu", "edito" et "news". Ce que je voudrais réaliser: je voudrais que les 3 blocs entre l'image arrondie du haut et celle du bas et sur un fond blanc -> donc dans le bloc "millieu_en". Je ne comprends tout simplement pas pourquoi le moteur d'affichage graphique ne comprend pas que, puisque j'ai spécifié le bloc "bas_en" après "millieu_en", je veux qu'il s'affiche avant le bas! C'est comme si le bloc "millieu_en" ne contenait rien et que les 3 blocs qui s'y trouvent sont superposés je ne sais comment...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant