M'aider à structurer mon site ?!? Comment coller mes Block ?

Salut,

bon j'essais différement de structurer mon site pour ceux qui on suivit le début.

Bref là j'ai deux Block DIV : "menu" (la photo) et "contenu" (le truc violet uni)

J'aimerais que le block "menu" reste à gauche et que sa taille ne change pas. Et pour le block "contenu", j'aimerais qu'il soit collé sur la droite du block "menu" mais je n'y arrive pas et j'aimerais que ce block "contenu" fasse le reste de la fenêtre et s'adapte par la taille selon la fenêtre ! J'suis clair ?
Mon site :
http://www.ya1ick.com/index2.htm

Bonsoir Toubo,

Tout d'abord, j'ai plusieurs remarques à faire à propos de ton code.

Premièrement, dans ton code XHTML tu oublie l'attribut alt qui est très important, voilà pourquoi.

<img src="fond_menu.jpg" width="500" height="500" border="0" usemap="#Map" alt="Texte de remplacement" />

Ensuite tu construit ton menu avec la balise map .
C'est bien la première fois que je vois un menu construit de cette manière et je ne pense pas que cela soit une bonne solution.

Ensuite, dans ton code CSS, tu as oubliés un point-virgule à la fin de la propriété float ce qui engendre la non application de cette propriété :

#menu
{
   
  float:left
   height: 500px;
   width: 500px;
   margin-left: 0px;
	margin-right: 0px;
   margin-top: 0px;
   margin-bottom: 0px; 
   background-color:#19e9eb;

   
}

Personnellement, je pense que, dans ton cas, l'idéal serait de revoir la structure de ta page.
Pour cela tu peux, par exemple, consulter les gabarits d'Alsacréations.

Qu'en penses-tu ?

En espérant t'avoir aidé .

salut,

merci pour ton aide et tes conseils, j'ai fait les changements et ça ne change rien. Je ne comprends rien ça fait 1 mois que j'essai plein de truc alors qu'au départ je voulais faire un truc tout simple.

Pourquoi je n'arrive pas à coller les deux et que la deuxieme soit fléxible ?

Bonsoir,

Tu as retiré float:left; dans ta div menu, remets-le et ça devrait être bon ?

J'ai modifié mais c'est pas encore ça ! Le bolck de gauche ne fait pas le reste de la fenetre automatiquement en se redimentionnant, et en plus il passe sous l'autre si on réduit trop la fenêtre

Bonjour,

a écrit :
Je ne comprends rien ça fait 1 mois que j'essai plein de truc alors qu'au départ je voulais faire un truc tout simple.

Je serais toi, je passerais un peu de temps du côté du Guide de survie du positionnement CSS et des documents et tutoriels qui y sont liés.

Essayer plein de trucs, c'est bien. Essayer en ayant des connaissances théoriques plutôt qu'en y allant au petit bonheur la chance, c'est mieux.

Si tu sais faire aide moi ! C'est bien gentil de me rediriger mais c'est facile car des tutoriaux j'en bouffe depuis 1 mois et personne ne sait faire !

toubo a écrit :
C'est bien gentil de me rediriger mais c'est facile car des tutoriaux j'en bouffe depuis 1 mois et personne ne sait faire !

Bien sûr que si, il y a des gens qui savent faire. (Moi y compris.) Mais le but de ce forum n'est pas de livrer des solutions et des codes prêts à l'emploi. Le but de ce forum est d'accompagner les apprenants (amateurs ou futures professionnels) dans leur apprentissage. Il ne s'agit donc pas de prouver qu'on sait faire, mais de t'aider à comprendre.

Donc, sur ta page tu as deux blocs. Les deux sont flottants à gauche. Petit récapitulatif rapide de quelques conséquences du positionnement flottant:
- si on ne donne pas de leur à un élément flottant, il va restreindre sa largeur à celle de son contenu;
- si le conteneur (ici la fenêtre du navigateur) n'est pas assez large pour faire tenir plusieurs éléments flottants, alors ceux qui «dépassent» passeront à la ligne.

Ici tu as donc deux flottants, le premier a une largeur de 500px, et le deuxième de 50%. Là, c'est des maths mais c'est pas compliqué:
- si le conteneur fait 1000px de large, les deux blocs tiennent pile poil (le premier fait 500px, le deuxième fait la moitié de 1000px donc également 500px);
- si le conteneur fait plus de 1000px de large, il y aura forcément un espace (de largeur variable) après le deuxième bloc;
- si le conteneur fait moins de 1000px de large, le deuxième bloc passera à la ligne.

Ton problème ici, c'est que tu as deux blocs flottants alors que ça n'est absolument pas nécessaire. Tu pourrais te contenter d'avoir un seul bloc flottant (le menu), et de laisser le deuxième prendre toute la largeur restante. Comme le bloc flottant va, en temps normal, passer par dessus un bloc non flottant (seul le contenu est repoussé... c'est une autre caractéristique du positionnement flottant), on pourra par exemple utiliser un margin-left pour le deuxième bloc.

Donc, concrètement:

#gauche {
  float: 200px;
  background: red;
}
#droite {
  margin-left: 200px;
  background: blue;
}

Florent V., j'ai une petite question à te poser :

Sur son site, Toubo a structuré son menu en utilisant les balises <map> et <area>.
Or, je me suis un petit peu renseigné et je ne pense pas que cela soit un choix judicieux pour structurer ce dernier car, d'après ce tutoriel et cette documentation, ces balises sont faites pour insérer des images mappées ainsi que des liens hypergraphiques.

De plus, d'après cette discussion, ça n'a pas l'air d'être très recommandé pour le référencement ?

EDIT : Voir ici pour la balise <map>.
Modifié par jQz (06 Aug 2009 - 21:24)

Rien n'interdit de réaliser un menu avec une image map. Surtout que le code de toubo est accessible (attributs alt bien renseignés).

a écrit :
ces balises sont faites pour insérer des images mappées ainsi que des liens hypergraphiques

L'image mappée, c'est une technique. Ça ne dit pas dans quel cas l'usage de la technique en question est pertinent on non.
Par ailleurs, l'appellation «lien hypergraphique» ne veut à priori pas dire grand chose, et me semble être une invention de l'auteur du tutoriel sur le SdZ. Le terme n'est pour ainsi dire repris nulle part ailleurs, et n'émane pas de la spécification HTML 4 (ou de sa traduction française). Donc on ne peut pas dire «MAP est à réserver aux liens hypergraphiques», ça ne veut rien dire.

Pour le référencement, je n'en sais rien. Ayant une formation scientifique (puis une formation littéraire, et mine de rien chez les littéraires aussi on aime la rigueur), je ne me fie pas trop aux déclarations de tel ou tel, non sourcées, sur les forums consacrés au référencement. J'ai fait une recherche rapide et ne suis tombé sur rien de concret (j'entends par là des résultats d'étude ou de test), juste des déclarations qui disent soit «c'est pris en compte par les moteurs de recherche», soit «c'est mal/peu pris en compte par les moteurs de recherche».

Florent V. a écrit :

Bien sûr que si, il y a des gens qui savent faire. (Moi y compris.) Mais le but de ce forum n'est pas de livrer des solutions et des codes prêts à l'emploi. Le but de ce forum est d'accompagner les apprenants (amateurs ou futures professionnels) dans leur apprentissage. Il ne s'agit donc pas de prouver qu'on sait faire, mais de t'aider à comprendre.

Donc, sur ta page tu as deux blocs. Les deux sont flottants à gauche. Petit récapitulatif rapide de quelques conséquences du positionnement flottant:
- si on ne donne pas de leur à un élément flottant, il va restreindre sa largeur à celle de son contenu;
- si le conteneur (ici la fenêtre du navigateur) n'est pas assez large pour faire tenir plusieurs éléments flottants, alors ceux qui «dépassent» passeront à la ligne.

Ici tu as donc deux flottants, le premier a une largeur de 500px, et le deuxième de 50%. Là, c'est des maths mais c'est pas compliqué:
- si le conteneur fait 1000px de large, les deux blocs tiennent pile poil (le premier fait 500px, le deuxième fait la moitié de 1000px donc également 500px);
- si le conteneur fait plus de 1000px de large, il y aura forcément un espace (de largeur variable) après le deuxième bloc;
- si le conteneur fait moins de 1000px de large, le deuxième bloc passera à la ligne.

Ton problème ici, c'est que tu as deux blocs flottants alors que ça n'est absolument pas nécessaire. Tu pourrais te contenter d'avoir un seul bloc flottant (le menu), et de laisser le deuxième prendre toute la largeur restante. Comme le bloc flottant va, en temps normal, passer par dessus un bloc non flottant (seul le contenu est repoussé... c'est une autre caractéristique du positionnement flottant), on pourra par exemple utiliser un margin-left pour le deuxième bloc.

Donc, concrètement:

#gauche {
  float: 200px;
  background: red;
}
#droite {
  margin-left: 200px;
  background: blue;
}

Salut merci pour la réponse, malheureusement ça ne fonctionne pas :s
Pourquoi tu me fais déplacer le block de gauche de 200px ?

a écrit :
Comme le bloc flottant va, en temps normal, passer par dessus un bloc non flottant (seul le contenu est repoussé... c'est une autre caractéristique du positionnement flottant), on pourra par exemple utiliser un margin-left pour le deuxième bloc.

Cette explication justifie l'emploi de la propriété margin.

Merci Florent V. pour tes explications .
Modifié par jQz (06 Aug 2009 - 23:08)

J'pige pas tout effectivement, j'ai fait quelque modif à l'essai.

Et plusieurs autres problème apparaissent, comment centrer verticalement mes deux blocs maintenant, je sais que c'est un problème récurent mais bon...

De plus comment supprimer l'espace entre mes miniatures vu qu'il y a 0 de marge entre les cellules et pourtant ya bien un truc ?

Concernant mes miniatures comment faire pour qu'elles ne disparaissent pas lorsque l'on redimensionne trop la fenêtre et qu'elles restent dans leur bloc ?

youhou !

toubo a écrit :
Salut merci pour la réponse, malheureusement ça ne fonctionne pas :s

Je n'ai rien donné de fonctionnel. J'ai donné un exemple de code qui illustre le positionnement flottant, un lien vers une page qui illustre le positionnement flottant... et bien sûr tu as déjà passé un mois à lire des articles et tutoriels sur le sujet.

toubo a écrit :
Pourquoi tu me fais déplacer le block de gauche de 200px ?

Je n'ai jamais dit que le block de gauche devait être déplacé de 200px, ni que le code que je donnais était à appliquer tel quel. À vrai dire, j'ai choisi à dessein des identifiants différents de ceux que tu utilises, et une dimension (200px) différente de celle qui te préoccupe (500px). Le but est que tu puisse comprendre l'exemple, et savoir comment appliquer le principe expliqué à ta mise en page.

toubo a écrit :
Et plusieurs autres problème apparaissent, comment centrer verticalement mes deux blocs maintenant, je sais que c'est un problème récurent mais bon...

Hop: http://covertprestige.info/css/centrer-bloc/

toubo a écrit :
De plus comment supprimer l'espace entre mes miniatures vu qu'il y a 0 de marge entre les cellules et pourtant ya bien un truc ?

En utilisant un outil tel que Firebug (pour Firefox), le Web Inspector de Safari ou Chrome, ou les outils pour développeur intégrés à IE8, en mode «Inspecter», tu peux savoir quels sont les styles qui s'appliquent à un élément donné. Ça te permettra de voir quel style pose problème, et dans quelle feuille de styles (et à quelle ligne) il est défini.

Salut merci beaucoup pour tes réponses ^^ T'inquietes pas je lis bien tout même si je ne comprends pas tout, ce n'est pas mon métier, chacun son truc. En tout cas pour les 200px j'avais pigé le truc c'est pour ça que je trouvais bizare que tu ne marques pas 500px J'suis pas totalement teubé ! hihi

Sinon regarde j'ai avancé sur ma structure Par contre j'ai pas compris ton truc de Firebug que j'ai d'installé mais je ne sais pas m'en servir ! lol

Je comprends ta vonlonté pour les autres qu'ils apprennent d'eux même et c'est ce que je fais mais je le redis ce n'est pas mon métier, je n'ai pas les moyens de payer quelqu'un pour le faire donc j'essais de me débrouiller seul. Après je ne peux pas passer mon temps à apprendre un autre métier, tu comprends ? Donc quand je bloque, je bloque.

Pour cette histoire d'espace entre mes images alors qu'il n'y a pas de marge je pige pas c'est tout et je ne sais pas ce que je peux faire ?

toubo a écrit :
Pour cette histoire d'espace entre mes images alors qu'il n'y a pas de marge je pige pas c'est tout et je ne sais pas ce que je peux faire ?

Eh bien en réalité il y a une marge. Donc soit tu parcours toutes les feuilles de styles utilisées en essayant de repérer quel code s'applique... soit tu utilises Firebug pour le repérer plus facilement.

Ouvrir Firebug: F12.
Passer en mode Inspecter: deuxième bouton en haut à gauche dans l'interface de cet outil.
Ensuite, tu peux cliquer avec la souris sur un élément à inspecter. Tu verras apparaitre cet élément dans l'arbre DOM (code HTML) à gauche, et les styles qui s'appliquent à droite. À gauche, tu pourras choisir un autre élément pour vérifier les styles qui s'appliquent à ce dernier. Tu peux aussi, en survolant les éléments dans le volet de code à gauche, voir apparaitre dans la page une représentation graphique de leurs marges (en jaune) et padding (en violet).

a écrit :
Sinon regarde j'ai avancé sur ma structure Par contre j'ai pas compris ton truc de Firebug que j'ai d'installé mais je ne sais pas m'en servir ! lol

Toubo, voici un lien qui explique comment utiliser ou plus explicitement comment maîtriser Firebug.
Modifié par jQz (08 Aug 2009 - 14:49)

J'ai regardé et je ne vois pas où il y a une indication pour dire de faire une marge :s

Comme l'a dit Florent V.

a écrit :
Eh bien en réalité il y a une marge. Donc soit tu parcours toutes les feuilles de styles utilisées en essayant de repérer quel code s'applique... soit tu utilises Firebug pour le repérer plus facilement.

Ici, il faut que tu repères le code qui pose le problème d'espacement entre tes images par l'intermédiaire de Firebug.

Donc, as-tu repéré ce bout de code ?