Alignement élément en responsive

Version imprimable

2 pièce(s) jointe(s)

Bonjour,

J'ai un problème avec mon responsive, le reste est bon sauf les boutons des reseaux sociaux qui bouge lorsque je réduis la page, j'aimerais qu'ils restent bien alignés comme l'image à gauche et en dessous des liens gris . J'y suis depuis assez longtemps, et il me reste juste ce problème pour finir mon site. Si quelqu'un aurait une super astuce ;) Merci beaucoup, très bonne journée.
Pièce jointe 300567 Pièce jointe 300570

Mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="reseaux">
 
      <div id="facebook">
            <a href="https://www.facebook.com/?fref=ts"><img width="17" height="17" src="<?php echo(get_stylesheet_directory_uri()); ?>/img/fb.png" alt="facebook"/>
            </a>
      </div>
 
       <div id="pinterest">
            <a href="https://fr.pinterest.com/"><img width="17" height="17" src="<?php echo(get_stylesheet_directory_uri()); ?>/img/pint2.png" alt="pinterest"/>
            </a>
      </div>
 
      <div id="instagram">
          <a href="https://www.instagram.com/"><img width="17" height="17" src="<?php echo(get_stylesheet_directory_uri()); ?>/img/insta2.png" alt=""/>
          </a>
      </div>
 
      <div id="mail">
          <a href="mailto:@gmail.fr"><img width="22" height="22" src="<?php echo get_stylesheet_directory_uri(); ?>/img/mail3.png" alt=""/>
          </a>
      </div>
 
 </div>

MON CSS :

Code:

1
2
3
4
5
6
.reseaux{
 
margin-left: 75.2%;
margin-top: 2.7%;
font-size: 1.2em;
}

05/08/2017, 11h28
Invité
Bonjour,

le code fourni ne permet pas de reproduire l'image montrée, ni de TESTER.
- Pas assez de code CSS
- De plus, il faut le code HTML généré (et pas avec du PHP) -> "Ctrl"+"U"

Est-ce que ce code correspond à ce que tu veux faire ?
Code:

1 2 3 4 5 6 7 8 .reseaux { display: flex; width: 100px; margin-left: auto; margin-right: 10%; }

09/08/2017, 11h31
LearningBoy

Déterminer une largeur minimum
Bonjour chokolatine 35,

Une solution pour gérer ce genre de problème responsive, est de déterminer une largeur minimum pour tes éléments incomprésibles.
Ainsi tes éléments ne seront jamais écrasé grâce à la largeur minimum, et si la page est suffisamment large, alors les éléments seront extensibles :
Code:

1 2 3 4 5 .resaux { /* ... */ min-width : 100px; }
Cordialement,

Simon (https://awesome-angular.com)
31/08/2017, 15h17
chokolatine35

2 pièce(s) jointe(s)

@grophies

Bonjour,

merci beaucoup !! J'ai juste mis un display : flex et ça fonctionne :) Est-ce que vous savez, si l'on peut définir un emplacement fixe de chaque élément mais en hauteur ? Par exemple : j'ai une image avec le logo et un trait. Mon menu doit rester fixe sur l'image afin que le trait soit juste en dessous mais bien sûr quand je réduis la page le menu passe en dessous. merci encore pour votre patience ;) Pièce jointe 308104 Pièce jointe 308107
31/08/2017, 15h21
chokolatine35

@LearningBoy

Merci beaucoup !! J'arrive à comprendre lorsque l'on me parle de positionnement en schéma mais lorsque je dois l'appliquer sur le site, il n'y a rien à faire, je n'y arrive pas. Vous avez peut être des tutos ou des livres à me conseiller sur le responsive ? Très bonne journée. Maëva
31/08/2017, 15h24
Mell

Je mettrais un height fixe sur tes éléments de menu avec un line-height pour qu'ils soient centrés verticalement. Et l'image en background-image du menu en le plaçant correctement avec background-position.
Tu auras sûrement d'autres ajustement à faire, mais sans avoir le code, c'est compliqué de tout prévoir
01/09/2017, 11h28
LearningBoy

Bonjour chokolatine 35,

Si vraiment tu bloques, même avec les conseils de Mell, n'hésite pas à poster plus de code pour que nous puissions mieux t'aider, car pour le moment nous ne pouvons que faire des suggestions de propriétés CSS. ;)

@LearningBoy

En effet, j'ai tout essayé mais c'est toujours pareil .. dur dur ^^, voici plus de code :

PHP

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!-- HEADER -->
 
   <!-- LE LOGO -->
 
    <div id="logo">
        <a href="http://localhost:8888/harp/">
          <img src="<?php echo(get_stylesheet_directory_uri()); ?>/img/bb.png"   height="176" alt="harp-blog">
        </a>
    </div>    
 
   <!-- LES LIENS DES SITES --> 
 
<div class="liens">
 
    <div id="classic">    
      <a href="http://localhost:8888/harp/classic/">HARP Classic</a>
    </div>
 
    <div id="online">   
      <a href="http://localhost:8888/harp/online/">HARP Online</a>
    </div>
 
</div>
 
   <!-- LES LIENS DES SITES -->
 
<div class="reseaux">
 
      <div id="facebook">
            <a href="https://www.facebook.com/harparchidesign/?fref=ts"><img width="17" height="17" src="<?php echo(get_stylesheet_directory_uri()); ?>/img/fb.png" alt="harp-facebook"/>
            </a>
      </div>
 
       <div id="pinterest">
            <a href="https://fr.pinterest.com/harparchidesign/"><img width="17" height="17" src="<?php echo(get_stylesheet_directory_uri()); ?>/img/pint2.png" alt="harp-pinterest"/>
            </a>
      </div>
 
      <div id="instagram">
          <a href="https://www.instagram.com/harp.archidesign/"><img width="17" height="17" src="<?php echo(get_stylesheet_directory_uri()); ?>/img/insta2.png" alt="harp-instagram"/>
          </a>
      </div>
 
      <div id="mail">
          <a href="mailto:florette.heurteux@gmail.fr"><img width="22" height="22" src="<?php echo get_stylesheet_directory_uri(); ?>/img/mail3.png" alt="harp-mail"/>
          </a>
      </div>
 
 </div>
 
  <!-- MENU -->
 
 <nav id="site-navigation" class="main-navigation" role="navigation">
      <button class="menu-toggle" aria-controls="menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'fichiers' ); ?>
 
      </button>
 
      <?php wp_nav_menu( array( 'theme_location' => 'menu-1', 'menu_id' => 'primary-menu' ) ); ?>
 </nav><!-- #site-navigation -->

CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
#logo{
    text-align: center;
    margin-top: 1%;
 
}
 
#logo img{
  max-width: 100%;
  height: auto;
}
 
/* ----------------------------
        LIENS DES SITES
------------------------------*/
 
.liens{
 
    margin-left: 75.2%;
    margin-top: -15%;
    font-size: 1.2em;
}
 
 
/* ----------------------------
RESEAUX SOCIAUX HAUT DE PAGE
------------------------------*/
 
.reseaux{
 
margin-left: 75.2%;
 
    font-size: 1.2em;
    display: flex;
}
 
#mail{
  padding-top: 2.5px;
  padding-left: 1px;
}
 
#instagram{
  padding-left: 1px;
}
 
/* ----------------------------
        MENU
------------------------------*/
 
.main-navigation{
 
    margin-top: 4%;
    margin-left: 11.5%;
    width: 75%;
 
}
 
.main-navigation ul ul{
  box-shadow: none;
  background-image: initial;
  background-size: 3px;
  background-position-x: initial;
  background-position-y: initial;
  background-repeat-x: initial;
  background-repeat-y: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(238, 238, 238);
  width: 100%;
  text-align: left;
  margin-top: 18%;
 
}

01/09/2017, 15h10
chokolatine35

@Mell

il n'y a rien a faire snif ^^ j'ai mis plus de code css plus bas. Merci encore pour tout le mal que vous vous donnez ;)
04/09/2017, 14h08
Mell

Peux-tu aussi fournir l'image entière "Le blog" que je te fasse un exemple ?
04/09/2017, 18h20
chokolatine35

1 pièce(s) jointe(s)

Le site c'est : harparchidesign.blog

Pièce jointe 309146
05/09/2017, 13h56
Mell

Salut chokolatine35,

Je n'ai pas été très loin dans mon JSfiddle, mais ça t'aidera à comprendre comment ça fonctionne
https://jsfiddle.net/z5hcLyr0/

Ta première erreur est de ne pas avoir découpé ton image en 2.
Tu comprendras sur mon exemple.
Tu auras également certaines modifications à faire pour les mobiles je pense.

Si tu ne t'en sors pas avec ça, je ne peux plus rien faire pour toi ^^
07/09/2017, 09h26
chokolatine35

Merciiiii !! ça fonctionne !! C'est génial :D ça m'a appris quelque chose, je ne savais pas qu'on pouvais mettre un background-image dans un menu !!! Juste un petit point, ça marche très bien pour la hauteur mais pour la largeur, pour éviter que le logo ne chevauche les onglets menu lorsque je veux réduire ma page ?

Et merci encore rien que ça je suis super contente hihi !!!

Bonne journée.
07/09/2017, 10h53
Mell

Il va te falloir partir sur un menu de ce type quand tu réduis ta page. Arrivée en mobile voir peut être tablette quand tu as un long menu, ta page ne pourra pas contenir tout ce dont tu as besoin.
Du coup regarde du coté des media queries et de ceci https://getbootstrap.com/docs/3.3/ex...bar-fixed-top/
ça te permettra de toujours pouvoir garder ton image "Le blog" sur n'importe quelle résolution.