1

Discussione: Disposition dans le header

Ale a dit un jour :

Pour le header et le footer la grille ne vient pas prise en compte...
La disposition des boites se fait entièrement au niveau du CSS par le dessinateur.
C'est à lui donc de positionner les boites en fixant la largeur, le fond etc...
Je trouve juste comme ça pour ne vous priver d'aucune partie de l'amusement.


Mais je ne m'amuse pas du tout et styler le header est un cauchemar.
Je fais parfois plus d'une centaine de tests pour la disposition : un peu de padding par ici, un display inline-block par là, ou encore jouer sur une taille proportionnelle du logo. Mais je n'arrive jamais à positionner par exemple logo et site_title sur la même ligne, et j'ai beau mettre du float: right, le slogan est calé à gauche, et le logo est tronqué.. Et dès qu'on change de taille d'écran, c'est de nouveau l'enfer.

Alors que je rêve depuis des années d'avoir un site_title en texte pour qu'il soit bien référencé, j'en suis réduite presque tout le temps à intégrer le titre du site dans une image en background du header.

J'ai besoin d'aide. Ou de modification du code.

Help oskour mayday mayday

Jai tellement honte du résultat actuel que je ne publie pas l'url du site de travail (Ale et Alain, vous l'avez).

2

Re: Disposition dans le header

Ciao Kat... le traitement de l’entête dans adHoc est encore assez provisoire...

tu voudrais ça?

http://i.share.pho.to/d89e9901_o.png

3

Re: Disposition dans le header

Oui, merci, quelque chose comme ça.
Mais je ne veux pas qu'on le fasse pour moi.
Je veux savoir comment faire.

4

Re: Disposition dans le header

C'est déjà mieux, mais il y a eu tellement d'essais itératifs, que je vais avoir du mal à reproduire le style.
C'est plus propre, mais je trouve le style très fade, terne, sans génie. On dirait une skin du capitaine Barbe Blanche.

https://image.prntscr.com/image/t-9-gpBtQi_a4S9BZhJVcA.png

5

Re: Disposition dans le header

donc voyons,

la disposition des éléments dans l’entête est en fonction du css uniquement.

Il suffit donc de placer les trois éléments dans le même conteneur (head-top ou head-mid ou head-btm) en donnant le float left ou right selon les besoins.

On dirait une skin du capitaine Barbe Blanche.

voilà c'est vrai... c'est une bonne raison pour modifier quelque chose, a partir des couleurs je dirais.

A++

6

Re: Disposition dans le header

Je suis sans doute bloquée par les couleurs du logo existant de l'association. Ou alors c'est l'influence du capitaine et sa proximité géographique avec l'association dans l'extrême Ouest, là où le ciel rencontre la mer ...

7

Re: Disposition dans le header

bien, alors laisse toi influencer par l’extrême Sud d’outre-Alpes... là aussi le ciel rencontre la mer...

8

Re: Disposition dans le header

Je ne comprends toujours pas le header.
Je suis partie de ta no_skin et j'essaye de mettre tout en haut une barre mince et noire
Déjà la barre noire ne fait pas toute la largeur, elle s'arrête aux limites du wrapper et je ne comprends pas comment tu as fait dans ta skin, car en changeant seulement les couleurs, je n'arrive pas au même résultat.

https://image.prntscr.com/image/-cSNxWL7TyabNtYYcOLFpg.png

Puis, j'essaye de mettre sur une même ligne, j'ai choisi celle du milieu dans head-mid, le menu et un autre élément, la date ou le drapeau. Là, j'ai choisi user-panel.

Et ça ne se met pas sur une seule ligne.

Et user Panel ne doit pas être un bon choix, car j'ai aussi le champ de recherche dont je ne veux pas. (User-panel, c'est un élément qui vient du module User ?)

Si j'essaie de mettre seulement le drapeau à côté du menu, le menu va prendre toute la première ligne, et le drapeau sera en-dessous, à gauche et tout seul.

https://image.prntscr.com/image/52d9w80xQ1Kh-5l9VjbOlw.png

Pourquoi les éléments du header ne se mettent pas sur une seule ligne quand on les place sur une seule ligne ?

9

Re: Disposition dans le header

Pourquoi les éléments du header ne se mettent pas sur une seule ligne quand on les place sur une seule ligne ?

Pourquoi ils devraient se mettre sur une seule ligne? Ils sont des divs donc ils vont occuper tout l'espace disponible en largeur...
Ils ne sont pas de celles d'un tableau... c'est au codeur de les disposer l'un à coté de l'autre.
ça se fait comment? au besoin tu peux utiliser les propriétés float et display:table du css.

Déjà la barre noire ne fait pas toute la largeur, elle s'arrête aux limites du wrapper

donc il suffit de donner le fond au div #head-top plutôt qu'au wrapper avec

#head-top{background:#000}

Envoie moi une image de ce que tu veux réaliser avec ton css de travail si tu as besoin de mon aide.

A++

10

Re: Disposition dans le header

Merci Ale, je comprends chaque fois un peu plus un peu mieux. Il faut que je note tout cela pour le retrouver la prochaine fois.