Besoin conseils alignement de blocs

Bonjour à tous,
Je souhaite réaliser un design classique (voir image) mais je me heurte à quelques soucis de compréhension concernant l'alignement.
Je sollicite donc vos avis d'experts.



Je me permets 3 questions :

> Question 1:
Dans quel ordre inscrire logiquement ces blocs dans le code HTML (dans le fux) ?
L’ordre choisi est-il absolument déterminant ?
L'ordre ci-dessous est-il correct ?

1. Logo
2. Bannière
3. Zone accès rapide
4. Moteur de recherche
5. Menu
6. Bloc de droite (bloc jaune)
7. Contenu
8. Pied de page

> Question 2 :
Comment réaliser l’alignement horizontal des éléments "menu" et "moteur" ?

Faut-il faire sortir du flux le bloc "moteur" en utilisant un float :right ?
Faut-il plutôt créer un seul bloc parent (appelé "navigation" par exemple) avec deux blocs enfants ("menu" et "moteur") imbriqués dedans ?

> Question 3:
Pour positionner à l’emplacement indiqué le bloc jaune et le faire sortir du flux :
Faut-il privilégier la propriété float:right ? Ou la propriété position:absolute ? (sachant que je ne connais pas à l'avance la hauteur exacte occupée finalement par ce bloc).

Merci d’avance pour vos précieux conseils.

jpv56

Salut,

1. Concernant le code, normalement la logique serait que tes éléments soient dans le code et dans la page rendue dans le même ordre, en sachant qu'en lecture européenne, on lit de gauche à droite puis de droit en haut.

Idéalement :
Logo > bannière > Accès rapide > Menu > Moteur de recherche > Contenu > Bloc jaune > Pied de page.

Si tu utilise un flottant pour le moteur de recherche et le bloc jaune, tu devras malheureusement les placer avant les blocs auxquels ils sont juxtaposés, et briser cet équilibre. Mais la précisément pas le choix.

Si tu utilise du positionnement absolu pour ton moteur de recherche (peut être plus justifié que le flottant), l'ordre pourra être identique entre le code et le rendu. Attention pour le bloc jaune, pour que le positionnement absolu soit viable, il faut que ce bloc ne soit jamais plus long que celui du contenu ! Sinon il y aura un soucis au niveau du pied de page.

2. Personnellement je pense que j'opterai pour un positionnement absolu, avec des pincettes pour gérer sa gestion vis à vis du contenu qui suit et en cas d'agrandissement.
Tu peux effectivement englober tes deux zones dans un conteneur, évitant le flottant. A ce moment là le menu pourra flotter à gauche (du coup gardant l'ordre logique), et le menu rester dans le flux dans l'espace restant. A voir...

3. Comme dit plus haut, si le contenu est toujours plus long tu peux choisir le positionnement absolu, sinon il vaudra mieux opter pour un flottant, imposant malheureusement une inversion de code.

Hello, je suis moi meme en train de faire mon site donc, je vais essayer de repondre à tes questions:

1°/-L'odre des objets n'est pas important dans la mesure ou, OUI ils vont etre afficher dans l'ordre de lecture du programme c'est à dire de haut en bas mais, ils finiront par tous etres affichés.
Donc si ta page n'est pas surchargé, ça devrait aller.

Personnellement j'aurais fait comme ça:

1°/-Logo
2°/-Bannière
3°/-Zone d'accès rapide
4°/-Menu
5°/-Moteur de recherche
6°/-Contenu
7°/-Bloc jaune de droite
8°/-Le pied de page

Donc y'a pas énormément de changement d'ordre comme tu peux le constater.

2°/-Perso ton alignement de moteur et Menu, j'aurais fait ça avec trois DIV, tel que suit:

<div id="GlobalMenu">
<div id="Menu"></div>
<div id="Search"></div>
</div>

La dessus tu rajoute un css KIVABIEN, c'est à dire que tu applique un float:left à tes éléments.

Bon après tu peux faire ça avec deux div différents mais c'est plus chiant à mon humble avis.

3°/-Bon la pour le trois, rebelote, j'aurais fait ça avec un imbrication de div, et comme la haut tu peux aussi faire ça avec en vrac:

Des tableaux (caca, c'est pas fait pour ).
Deux divs avec chacun leurs positionnement comme tu le sent.

Voulou, si tu as besoin d'infos supplémentaires n'hésite pas.

Merci pour vos lumières.
Je cernais plus ou moins la problématique mais ça restait un peu nébuleux !
En vous lisant je peux aussi conclure qu'il n'existe finalement pas de solution miracle.
En fait, il faut peser le pour et le contre de chaque solution et opter pour celle qui présente le moins d'inconvénients.

Mikachu :
Pourquoi privilégies-tu un positionnement absolu pour le moteur de recherche ? Parce que cet élément ne variera jamais dans le sens de la hauteur ? (contrairement au bloc jaune où un étirement vertical est toujours possible).

DR I:
Imaginons que je crée, comme tu le proposes, un bloc "global menu" qui contiendra le menu et le moteur. A quel élément dois-je appliquer le float:left ? Au bloc menu ou bien au conteneur ? (global menu). Et quid du bloc moteur : je le laisse simplement occuper l'espace vacant à droite du bloc menu ?

Merci !

jpv56

Disons que le volume utile d'une zone de recherche peut être sensiblement connu à l'avance, tu sais que tu dois avoir un champ de x caractères de large, la hauteur est globalement proportionnelle. Tu peux avoir un bouton pour valider l'envoi de la recherche (ou pas si la validation se fait par la touche entrée, mais il est quand même mieux de prévoir un bouton).
Eventuellement un lien "recherche avancée" si ton moteur le permet, qui conduit en ce cas vers une autre page.
Donc si les éléments sont extensibles ils ne varieront pas trop en taille car il s'agira plus d'éléments visuels que textuels.

Pour un contenu textuel cela serait bien plus gênant, car à priori la proportion de texte serait bien plus conséquente, et l'agrandissement du texte provoquerait un fort agrandissement du bloc, pouvant mettre à mal la mise en page et provoquer des problèmes d'accessibilité.

Merci Mikachu pour tes explications très claires et fort logiques.
Je vais opter pour la solution du positionnement absolu pour mon moteur de recherche.

Ce qui pourrait donner - pour le menu - quelque chose du genre :
1. Un bloc conteneur "navigation".
2. Qui contiendrait deux blocs enfants :
> le bloc menu (avec la propriété display:inline pour le mettre à l'horizontal)
> le bloc moteur (avec la propriété position:absolute)

Merci de me corriger si je me trompe.

jpv56

Si ton moteur de recherche est positionné, le bloc englobant les deux est inutile vu que ton moteur sera en dehors du flux. Il ne reste qu'à gérer le menu à ses cotés (marges à droite au minimum).
Par contre si tu veux englober les deux, ce sera plus pour une utilisation du menu en flottant à gauche et le moteur utilisant l'espace du conteneur global à droite (comme je le proposais comme alternative dans mon premier message).

jpv56 a écrit :

DR I:
Imaginons que je crée, comme tu le proposes, un bloc "global menu" qui contiendra le menu et le moteur. A quel élément dois-je appliquer le float:left ? Au bloc menu ou bien au conteneur ? (global menu). Et quid du bloc moteur : je le laisse simplement occuper l'espace vacant à droite du bloc menu ?

Merci !

jpv56

Ouep, alors perso j'aurais appliquer le CSS au div global.

DR I a écrit :
Ouep, alors perso j'aurais appliquer le CSS au div global.

Dans la mesure ou le menu + le moteur de recherche prennent toute la largeur du site, cela ne présente aucun intérêt et apporte de la précarité à la structure de la page.