CSS modifié et léger bug

[meremptah]

Bonjour la communauté !

Je m'occupe d'améliorer, par codage CSS dans le head, le site internet que des élèves mettent au point dans le cadre du Concours de la Résistance.

Je suis assez content du rendu final mais j'observe un soucis ...

Le rendu "idéal" est celui qui s'affiche actuellement sur n'importe quelle page du site .... sauf la page d’accueil (exemple : la page "EN FRANCE OCCUPEE")

En effet, vous pourrez observer que la structure du site, juste sous le titre du site, est quelque peu différente entre la page d’accueil et toutes les autres pages.

J'aimerais, dans l'idéal, uniformiser tout cela ... Une idée ?

Voici ce que j'ai integré dans le head pour parvenir à ce résultats. Je vous préviens que j'ai tenté des modifs des valeurs de toutes les balises ainsi créées pour tenter d'identifier le problème mais...rien n'y fait, une différence persiste toujours.

Merci de votre aide !


<style type="text/css">
/*<![CDATA[*/
div#cc-m-12663522225.j-module.n.j-header
{margin-top: 75px !important;}
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
section#page-2428575125#tpl-header.layout-alignment
{height: 500px !important;}
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
h1#cc-m-header-12663522225
{background-color: rgba(34,34,34,0.9) !important;}
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
h1#cc-m-header-12663522225
{color: white !important;}
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
div.content-container
{padding-top: 15px !important;}  
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
div.logo-wrapper
{margin-top: 1px !important;}
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
div.logo-wrapper
{height: 375px !important;}
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
div.footer-container
{padding-top: 1px !important;}  
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
html.j-feature-js.j-feature-no-touch.j-feature-opacity.j-feature-csstransitions
{margin-top: 0px !important;}
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
section#tpl-header.layout-alignment
{height: 500px !important;}  
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
section#tpl-header.layout-alignment#page-2428575125
{height: 500px !important;}  
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
section#tpl-header.layout-alignment
{width: 960px !important;}  
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
section#tpl-header.layout-alignment
{padding-top: 20px !important;}  
/*]]>*/
</style>

[Disney Analysis]

Bonjour

Pouvez-vous préciser (avec une image comparative par exemple) où se situe votre problème car de mon côté, mis à part un espace plus prononcé entre le titre du site et le menu, je ne vois rien de différent ?

Par contre, au niveau de votre CSS, il ne faut pas ajouter...

Code:

<style type="text/css">
/*<![CDATA[*/

/*]]>*/
</style>

... à chaque fois, il faut travailler ainsi pour éviter les éventuels bugs :

Code:

<style type="text/css">
/*<![CDATA[*/

Votre code intégral, par exemple :

div.module1 {...}

img#module2 {...}

Ect.

/*]]>*/
</style>

En attendant votre réponse

[meremptah]

Justement ... c'est cela qui m’ennuie... l'espace plus grand entre le titre et ce qu'il y a en-dessous (barre de menu +, du coup, le contenu ... j'aimerais que tout soit au même niveau que sur les autres pages, hors accueil)

[meremptah]

J'ai actualisé le head en tenant compte des premières remarques :

<style type="text/css">
/*<![CDATA[*/
div#cc-m-12663522225.j-module.n.j-header
{margin-top: 107px !important;}
h1#cc-m-header-12663522225
{background-color: rgba(34,34,34,0.9) !important;}
h1#cc-m-header-12663522225
{line-height: 80px !important;}
h1#cc-m-header-12663522225
{height: 153px !important;}
h1#cc-m-header-12663522225
{color: white !important;}
div.content-container
{padding-top: 12px !important;}
div.logo-wrapper
{margin-top: 12px !important;}
div.logo-wrapper
{height: 440px !important;}
div.footer-container
{padding-top: 1px !important;}
html.j-feature-js.j-feature-no-touch.j-feature-opacity.j-feature-csstransitions
{margin-top: 10px !important;}
section#tpl-header.layout-alignment
{height: 630px !important;}
section#tpl-header.layout-alignment
{width: 960px !important;}
section#tpl-header.layout-alignment
{padding-top: 20px !important;}
div#cc-inner.cc-content-parent
{width: 2110px !important;}
div#cc-inner.cc-content-parent
{height: 2545px !important;}
/*]]>*/
</style>

[meremptah]

PS : J'ai pu fixer le "problème" pour la barre de menu, qui s'affiche désormais pile à la même place partout. Un seul "soucis" subsiste : sur la page d'accueil, le haut de la zone de "content" (vaste zone grisée) apparaît un peu plus bas, par rapport à la barre de menu, que sur toutes les autres pages.... Je prends toutes vos lumières

[FredVig]

il eu été plus simple de "zapper" la page d'accueil…
Vous créiez une nouvelle page après la page d'accueil, vous cachez la page d'accueil. Vous déposez un code de redirection sur l'ancienne page d'accueil.
En Pro et businness, il me semble que cela est possible sans code.

[FredVig]

Toutefois, j'aimerais mieux comprendre votre recherche.
Vous avez choisi un design pleine page.
Au passage, je trouve de votre design est remarquable et correspond bien au sujet.
Mais les sites sont aujourd'hui conçus pour changer de forme en fonction de l'écran. Aussi les éléments, (titre, image, textes…) vont changer de taille et de place selon la fenêtre du visiteur.
Le fond d'écran en particulier, va laisser apparaître une portion très variable de son contenu.
Il est donc nécessaire de penser les site en considérant ce comportement dynamique.
Ce qui motive mon message est votre remarque :
-" … s'affiche pile au même endroit"
Ce qui n'a pas vraiment de sens en l'occurrence, les éléments étant positionnés en fonction des dimensions de fenêtre. Je comprends votre idée par le fait que vous voulez un comportement identique d'une page à l'autre. Mais attention - en particulier - à ne pas attendre que le fond de page se positionne toujours à la même place.

[Solie]

Si j'ai bien compris, meremptah n'évoque pas son arrière-plan mais une anomalie d'espace plus conséquent entre le menu et le content sur sa page d'accueil. Du coup, le haut de son content apparaît plus bas par rapport à ses autres pages.

Voir la série de captures ci-après :

Vous pouvez réduire cet espace sur votre page d'accueil par du code. Mes camarades vont pouvoir vous aider

[meremptah]

J'y ai pensé FredVig ... mais dans 1 an, le site repassera en "Free".

Solie a tout dit...le soucis n'est pas dans l'arrière plan ... Mais dans le fait qu'à l'acceuil, le content est plus éloigné du menu que sur les autres pages...ça ne se joue plus à grand chose mais j'aimerais comprendre d'où cela vient ...

[Disney Analysis]

Ce petit bout de code devrait résoudre votre problème (car en fait il y a un code pour le site hors accueil, et un code pour l'accueil, je n'avais jamais vu ça sur Jimdo, ça doit être spécifique aux nouveaux designs) :

Code:

.cc-indexpage #tpl-header {min-height: 0px;padding: 100px 0 40px;}

#tpl-header {min-height: 0px;padding: 100px 0 40px;}

J'espère que votre problème sera résolu

[Disney Analysis]

D'ailleurs, j'en profite, je me suis permis de mieux mettre en forme votre CSS, ça n'en sera que plus facile

Code:

<style type="text/css">
/*<![CDATA[*/

div#cc-m-12663522225.j-module.n.j-header {margin-top: 107px;}

h1#cc-m-header-12663522225 {background-color: rgba(34,34,34,0.9);line-height: 80px;height: 153px;color: white;}

div.content-container {padding-top: 12px;}

div.logo-wrapper {margin-top: 12px;height: 440px;}

div.footer-container {padding-top: 1px;}

html.j-feature-js.j-feature-no-touch.j-feature-opacity.j-feature-csstransitions {margin-top: 10px;}

section#tpl-header.layout-alignment {height: 630px;width: 960px;padding-top: 20px;}
 
div#cc-inner.cc-content-parent {width: 2110px;height: 2545px;}

/*]]>*/
</style>

Plusieurs points :

• Evitez le "!important" sauf si nécessaire (c'est-à-dire quand le code originel prend le dessus) car si au premier abord il semble indispensable, il n'est qu'une source de conflit de codes et peut bugger sur certains navigateurs. Je vous conseille de ne le mettre que lorsque vous modifiez le CSS du module blog.

• Il est inutile de remettre la balise pour chaque bout du code visant la même balise, par exemple, ceci est inutile :

Code:

h1#cc-m-header-12663522225 {background-color: rgba(34,34,34,0.9);}
h1#cc-m-header-12663522225 {line-height: 80px;}
h1#cc-m-header-12663522225 {height: 153px;}
h1#cc-m-header-12663522225 {color: white;}

Préférez :

Code:

h1#cc-m-header-12663522225 {background-color: rgba(34,34,34,0.9);line-height: 80px;height: 153px;color: white;}

• Il est préférable de coder en CSS en suivant une certaine logique, de préférence toujours la même, afin que votre code soit propre et que vous vous en sortiez mieux lorsque vous le modifier. Par exemple, voici mon code CSS par défaut, celui que j'utilise pour mon site :

Code:

div#module1 {width: 10px; height: 10px; background: none; border: 0; margin: 0 auto; padding: 0; padding-top: 10px;}

[meremptah]

Merci !

[Contenu sponsorisé]