Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1506 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Mise en page responsive

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Mise en page responsive

n°2278579
c-francesc​o
Posté le 29-03-2016 à 23:31:34  profilanswer
 

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 !

mood
Publicité
Posté le 29-03-2016 à 23:31:34  profilanswer
 

n°2278588
rufo
Pas me confondre avec Lycos!
Posté le 30-03-2016 à 11:03:15  profilanswer
 

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
n°2278591
c-francesc​o
Posté le 30-03-2016 à 11:06:40  profilanswer
 

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 ? :??:  

n°2278601
rufo
Pas me confondre avec Lycos!
Posté le 30-03-2016 à 14:50:03  profilanswer
 

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
n°2278608
c-francesc​o
Posté le 30-03-2016 à 16:10:54  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Mise en page responsive

 

Sujets relatifs
lancer un lien sur une page web périodiquementChanger les données affichées sur une page Web
Insérer des données CSV dans un graph sur une page CSS/HTMLRéduire poids images avant de les charger dans une page HTML
Réduire poids images avant de les charger dans une page HTMLenregistrer page web complète avec menu déroulant
Formulaire responsive designCréation page HTML choix de la langue
Appeler une page en HTML5 via du Javascript 
Plus de sujets relatifs à : Mise en page responsive


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR