Mise en page responsive

Mise en page responsive - HTML/CSS - Programmation

Marsh Posté le 29-03-2016 à 23:31:34    

Bonjour à tous,
 
Je modifie actuellement un thème wordpress pour y intégrer le bandeau de ma page personnelle.  
L'agencement des éléments du bandeaux lorsque l'on redimensionne la page dans le template wordpress n'agit pas comme dans la page principale.
 
Lorsque l'on diminue la fenêtre du navigateur les images de contacts (email, linkedin, etc.) de la page personne (francoisguern.com) vont passer sous le logo et la photo en un bloc.
Alors que lorsque l'on diminue la fenêtre du navigateur les images de contacts du template wordpress (francoisguern.com/blog/) vont passer un par un sous les logos.
 
N'ayant pas le bon vocabulaire pour expliquer précisément, le mieux est d'ouvrir la page francoisguern.com/blog en paysage et portrait sur un téléphone mobile. On voit tout de suite que les icônes de contacts reste en partie sur la partie haute.
 
Encore désolé pour le manque de précision de la description.
Sauriez-vous ce qui coince pour que toutes les icônes de contacts fassent bloc et soit déplacer en même temps lors du redimensionnement ?
 
Merci !

Reply

Marsh Posté le 29-03-2016 à 23:31:34   

Reply

Marsh Posté le 30-03-2016 à 11:03:15    

Je pense que le pb vient, sur ton site perso de cette portion de css :

Code :
  1. #header {
  2.     width: 220px;
  3.     position: fixed; /*--Fix the sidenav to stay in one spot--*/
  4.     float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/
  5.     margin-left: 20px;
  6.     padding-top: 40px;    
  7.  
  8. }
  9.  
  10. *html #header {
  11.    position: absolute;
  12.    left: expression( ( 0   ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) )   'px' );
  13.    top: expression( ( 0   ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) )   'px' );
  14. }


 
Au passage, t'as vu que sur ton site perso, tu mets 2 fois le même fichier css :??:
 
Par ailleurs, quel intérêt de mettre une image de 400 Ko pour l'afficher en tout petit ? Ta page d'accueil met 3 plombes à s'afficher alors qu'elle pourrait être beaucoup plus rapide juste en adaptant la taille des médias en fonction de leur taille d'affichage. :o


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 30-03-2016 à 11:06:40    

Merci d'avoir jeté un oeil !
 
En fait, j'avais trouvé un site qui me plaisais bien et j'ai télécharger les fichiers que j'ai adapté. Ca venait d'un wordpress à la base. Donc j'avoue, ça ne doit pas être très propre !
 
Si je comprends bien, pour toi le problème est sur francoisguern.com et pas sur francoisguern.com/blog ? :??:  

Reply

Marsh Posté le 30-03-2016 à 14:50:03    

Ben sur le blog, le comportement me paraît plus approprié puisque les icônes passent en-dessous du logo et restent visibles alors que sur ta page perso, les icônes passent sur le côté et oblige à un scroll horizontal ce qui n'est pas ergonomique.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 30-03-2016 à 16:10:54    

En effet, il va falloir que je jette un oeil.
 
Sur le blog par contre les icônes ne restent pas toujours en dessous comme sur cette image. Justement je préfèrerais qu'elles passent directement en dessous dès qu'on redimensionne.
 
http://francoisguern.com/img.png

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed