Partage
  • Partager sur Facebook
  • Partager sur Twitter

taille en poucentage

3 novembre 2016 à 13:27:20

Bonjour,

sur le site suivant : http://www.emicom.fr/

j'essaie de faire en sorte que le contenu s'adapte aux différentes tailles d'écrans.

J'ai donc donné une taille de 33 % aux différentes <li> composants le menu.

Quand je réduis la page, le contenu disparaît au lieu de rapetisser et je ne comprends pas de quoi cela vient.

Quelqu'un peut m'aiguiller ?

  • Partager sur Facebook
  • Partager sur Twitter
3 novembre 2016 à 15:57:22

Salut,



C'est normal, tu as un display none qui traine
.site-header-menu {
    display: none;
}


  • Partager sur Facebook
  • Partager sur Twitter
3 novembre 2016 à 16:31:40

Merci ! en fait le display: none n'était pas actif mais l'élément était Inline.

J'ai un autre souci que je n'arrive pas à résoudre : je n'arrive à à comprendre de quoi vient la marge en haut ?

  • Partager sur Facebook
  • Partager sur Twitter
3 novembre 2016 à 17:38:58

La marge de ? 

Tu as un reset au début de ton CSS ?

  • Partager sur Facebook
  • Partager sur Twitter
3 novembre 2016 à 23:17:14

L'espace de plusieurs cm en haut du site.

J'ai essayé d'affecter margin:0 à tout un tas d'élément mais cela ne fonctionne pas.

C'est le template Wordpress 2016 que j'utilise et à vrai dire, je le trouve particulièrement compliqué. En principe, les templates wordpress de base devraient être basique et ne demandé qu'à être développé.

Du coup, pas de reset en début de CSS : on est plutôt censé placer les modifs à la suite du CSS de base.

  • Partager sur Facebook
  • Partager sur Twitter
4 novembre 2016 à 9:08:49

Ben tu peux toujours mettre un reset en début du fichier CSS, ou te créer une feuille CSS que tu appelles après celle de base.

Ce reset est récent si tu veux, je m'en sers de temps en temps :)

Si ta classe .site-header tu as un padding de 5.25em 4.5455% que tu devrais pouvoir modifier dans ta feuille CSS de base, donc pas sur que tu ai besoin du reset en fin de compte ;)

-
Edité par MrChampy 4 novembre 2016 à 9:11:34

  • Partager sur Facebook
  • Partager sur Twitter
4 novembre 2016 à 10:55:22

tu as essayé un margin : 0 au body ?
  • Partager sur Facebook
  • Partager sur Twitter
L'humour et l'amour sont les meilleurs remèdes.
4 novembre 2016 à 13:08:58

Merci de vos réponse,

j'ai appliqué un reset +margin:0 au body + padding : 0 à .site-header.

Le padding:0 à site-header a réduit la marge, mais casse la mise en page (cela ajoute une ligne blanche verticale entre 2 colonnes).

Il reste toujours une petite marge inexplicable.

  • Partager sur Facebook
  • Partager sur Twitter
4 novembre 2016 à 13:14:40

Il faudrait nous mettre ton code si tu veux bien ^^'
  • Partager sur Facebook
  • Partager sur Twitter
L'humour et l'amour sont les meilleurs remèdes.
4 novembre 2016 à 13:24:54

Le html, le css ou les deux ?

Cela me parait plus simple d'utiliser l'outil "developpement du navigateur" pour voir ce qui est interprété.

Comme c'est un template wordpress, le css de base est long pour pas grand chose.

EDIT:

J'ai réussi à enlever la barre blanche verticale.

Et j'ai trouvé de quoii vient la marge du haut :

<style type="text/css" media="screen">
	html { margin-top: 32px !important; }
	* html body { margin-top: 32px !important; }
	@media screen and ( max-width: 782px ) {
		html { margin-top: 46px !important; }
		* html body { margin-top: 46px !important; }
	}
</style>

Le problème c'est que ce bout de css est incorporé au HTML et que je ne peux pas reprendre le dessus avec la feuille de style CSS.

Décidement, ce template wordpress est décevant...



-
Edité par lj1982 4 novembre 2016 à 13:39:01

  • Partager sur Facebook
  • Partager sur Twitter
4 novembre 2016 à 13:42:30

Je viens de jeter un coup d'oeil au code et ça me parait globalement bon.

Le seule truc à faire c'est vérifier toutes les div (ainsi que celles contenant du texte) pour vérifier si un padding ne se serait pas glissé. Après, il faut aussi jeter un coup d'oeil aux conflits qui peuvent survenir.  Vérifie aussi tes contenaires. Mais bon, j'imagine que tu l'as déjà fait ^^'

Edit :

Ah oui, je l'avais vu ce bout de code, mais je me disais que ça paraissait trop "flagrant" pour être ça ton soucis et que cette marge était voulue ^^' comme quoi..

-
Edité par mickaelzt 4 novembre 2016 à 13:43:43

  • Partager sur Facebook
  • Partager sur Twitter
L'humour et l'amour sont les meilleurs remèdes.
4 novembre 2016 à 13:44:48

Pas vraiment, ma structure me parait très bordelique...

En fait j'aurais bien plus vite fait à faire ce site sans wordpress. Mais le problème, c'est les future MAJ sur le contenu où j'aimerais ne pas être sollicité.

  • Partager sur Facebook
  • Partager sur Twitter
17 mars 2020 à 10:45:03

C'est parce que tu es connectée à ton wordpress et cet espace de 32px correspond au menu noir en haut (mais qui n'apparait pas). Si tu te deconnectes de ton wordpress la marge n'apparait plus (ou si tu ouvres ta page dans un nouveau navigateur)

-
Edité par isabelle.guilbaud 17 mars 2020 à 10:45:18

  • Partager sur Facebook
  • Partager sur Twitter
17 mars 2020 à 12:03:54

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

  • Partager sur Facebook
  • Partager sur Twitter
Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL