Locace Posté 26 Janvier 2007 Partager Posté 26 Janvier 2007 'jour ! Aujourd'hui nouvelle épreuve : Case à Vins. Il s'agit sans doute d'un problème de flottants en CSS. Je m'explique : - la partie bonjour est placée comme je le souhaite - par contre la partie conseil est trop basse (vous devinez que je la veux à coté du "bonjour") Et là est tout le mystère : j'ai fait le header, le menu et le corps etc... en CSS avec des flottants:left . Je me disais donc que je connaissais un peu leur fonctionnement. Et là j'ai deux simple blocs : class="bonjour" et class="cadre2" et ces deux là malgré deux float:left refusent de se mettre côte à côte. Si je viens vous voir ce n'est pas par faineantise, c'est que j'ai beau manipuler les deux class je ne 'y arrive vraiment pas. Le mystère. J'en appelle donc à votre savoir et à votre intuition. Merci cent fois d'avance. .cadre2 {width:600px; height:auto; margin-left:220px; } .bonjour {margin-top:15px; max-width:196px; float:left; width:196px; height:auto; } Voilà voila Lien vers le commentaire Partager sur d’autres sites More sharing options...
karnabal Posté 26 Janvier 2007 Partager Posté 26 Janvier 2007 (modifié) Salut, Valide donc ton code et reviens-nous voir (deux <head> entre autres erreurs). Essaie d'éviter de mettre des <p> dans d'autres <p> et limite l'utilisation de tes <div> au minimum, il semble qu'il y ait pas mal de code superflu. <p> <p>Madame, Modifié 26 Janvier 2007 par karnabal Lien vers le commentaire Partager sur d’autres sites More sharing options...
captain_torche Posté 26 Janvier 2007 Partager Posté 26 Janvier 2007 Essaye également d'enlever la marge gauche de 220px de ton cadre2, il ne devrait pas y en avoir besoin (et il y a de fortes chances que ce soit ça qui merde). Lien vers le commentaire Partager sur d’autres sites More sharing options...
Locace Posté 26 Janvier 2007 Auteur Partager Posté 26 Janvier 2007 merci pour les conseils et commentaires. Ce n'est malheureusement pas cette histoire de marge qui solutionne le problème. C'est un vrai casse-tête. Il n'y a qu'un tout petit code PHP entre ls deux <div>. Et sinon Karnabal, comment limiter l'utilisation des <div> et pourtant créer les diférents "blocs" de mon site ? bonne soirée Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sarc Posté 26 Janvier 2007 Partager Posté 26 Janvier 2007 Bonjour Locace, Tu bosses en "div" comme si tu bossais en "table". Tu en as la même vision, c'est à dire découper la page, et coller les différents éléments de gauche à droite, de haut en bas. C'est justement là que réside toute la finesse : l'utilisation des div ne joue pas sur un quadrillage, mais sur une superposition. Comme en maternelle, quand on découpe des formes, des ronds, des carrés, des triangles, qu'on prend une feuille blanche et qu'on colle nos formes les unes par dessus les autres, pour arriver à notre oeuvre d'art finale. Un site, c'est exactement pareil. Qu'as-tu finalement sur ton site ? Tu as une bannière, qui va de tout en haut à gauche, à tout à droite... (Voir pièce jointe) (Au passage, la bannière est trop large, pour ma résolution ça rentre pas, et en sachant qu'il reste un pourcentage non négligeable en 800*600, les pauvres..) Ensuite, tu as un menu, et tu as un contenu. Soit exactement 3 parties. 4 si on rajoute le pied de page, qui comme la bannière va de tout à gauche à tout à droite. Je compte donc 4 div dans ta page, pas les.. beaucoup que tu as mis dans ton code. Il faut donc repenser le code sous cette forme là... Eventuellement, pour des histoires de fond, la div jaune pourra être placée au dessus de la verte, avec un padding adapté pour le contenu de la vert. Bref, après, c'est un apprentissage des différents modes de placement en CSS, des différents moyens de bouger les éléments, les mettre où tu veux, de gérer les fonds et les images... Et après tout ça, tu n'auras plus de marge embêtante. Bonne chance pour la suite Lien vers le commentaire Partager sur d’autres sites More sharing options...
Locace Posté 26 Janvier 2007 Auteur Partager Posté 26 Janvier 2007 Eh bien, il reste tant à apprendre. sarc merc bcp de prendre le temps comme tu le fais. Est ce que je dosi comprendre suite à ton sujet que je dois utiliser des position: plutot que des float: ??? Et deuxième question mon site cmprend donc les 4 parties (header, menu corps et footer), ce qui est censé me donner 4 <div>. Ok. Mais alors... mon menu qui est divisé en trois parties (le haut ou il y a marqué menu, les liens, et la partie arrondie en bas), pour le coder proprement et sans <div> qu'est ce que vous utilisez ? Merci pour les critiques ca me fera avancer encore plus. Lien vers le commentaire Partager sur d’autres sites More sharing options...
nyl auster Posté 26 Janvier 2007 Partager Posté 26 Janvier 2007 (modifié) tu peux utiliser une liste à puce dansle div, puis mettre en forme ta liste avec le css. tu as l'air débutant comme moi, alors je te dis un truc que j'ai pas bien réalisé au début (du coup je mettais trop de div): toutes les balises génère des "boites" que tu peux mettre en forme en css (attention à la distinction "en ligne" et "bloc"). "Div" est juste une balise anonyme qui génère une boite de type "bloc" (c'est à dire une "boite" suivi d'un retour obligatoire à la ligne pour le bloc suivant). Pour un menu, tu peux par exemple utiliser une liste à puce, (<ul><li></li><li></li></ul>) et mettre en forme les "li" (bordure, fond, réaction quand la souris passe dessus). Bon, si j'ai dit une bêtise, je laisse les autres me corriger, mais si ce post a pu aider un peu... Modifié 26 Janvier 2007 par nyl auster Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sarc Posté 26 Janvier 2007 Partager Posté 26 Janvier 2007 Les position: servent généralement à être plus précis dans ton collage, par exemple si tu veux que la pointe du triangle soit tout juste sur un côté de ton rond, un position absolute sera utile pour le coller au millimètre près... Vu ton site, tu peux y aller plus bêtement, des div à la suite marcheront. J'ai donné une idée de structure, ce n'est bien sûr par la seule possible ! Possibilité 1 : <div principal (fond : image avec cadre)><image bannière><contenu (float right, padding left)><menu></div><divfooter> Texte</div> Utile pour faire un lien sur ton image bannière vers l'accueil de ton site.. Ce genre de lien est a priori bon pour le référencement, et pour la navigation dans ton site (très simple de revenir vers l'accueil !) Possibilité 2 : <div principal></div><div image fond cadre><contenu (float right, padding left)><menu></div><divfooter> Texte</div> Pas d'image rajoutée en html, les images sont toutes chargées en CSS... Mais un div vide, c'est pas le top... etc, etc, etc... Après, ce sont mes visions des choses. D'autres auront peut-être d'autres façons de voir la page se construire, et donc d'autres codes associés Pour ton menu, ce ne sont pas des divs, ce sont plusieurs menus à la suite ! Là j'avoue, les possibilités de code sont encore multiples, et peut-être les idées suivantes seront décriées par d'autres : <dl> <dt>Titre-sous-menu</dt> <dd>lien1</dd> <dd>lien2</dd> <dd>lien3</dd> <dt>Titre-sous-menu</dt> <dd>lien1</dd> <dd>lien2</dd> <dd>lien3</dd>...</dl> Appelée liste de définitions, tu auras un style différent pour le titre d'un sous-menu et les liens... Listes de définition : mal comprises ? Peut-être tu peux voir ça comme une sucessions de sous-titres, et de listes de liens ? Dans ce cas-là, peut-être une structure du type <hn>Sous-titre-menu</hn><ul><li>lien1</li><li>lien2</li>...</ul> Avec n compris entre 1 et 6.. Mais là, j'ai un doute sur l'utilisation, et peut-être que d'autres qui passeront dans le coin crieront au sémantisme bafoué (?) Bref, de multiples façons de faire. Les div ne sont que les grandes zones, les petites devant être modélisées par d'autres balises. EDIT : nyl auster a répondu juste avant moi... 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