Modifier le corps du site dans design Zurich

[skyjoe]

Bonjour,

J'ai lu le tutoriel sur les bases de modification et j'ai parcouru le forum en apprenant certaines choses mais malgré tout, je n'arrive pas à faire de manip qui fonctionne.

Au début, j'ai essayé de modifier la hauteur du header : je voulais juste le rapetisser afin que le contenu remonte, pour que le visiteur voit l'entièreté du site sans avoir à faire défiler l'ascenseur.
Il n'y a pas de paramètre "modifier le header", donc j'ai tenté de changer la hauteur de celui-ci en tapant ceci dans le code HTML :

<style type="text/css">
/*<![CDATA[*/
#header {eight: 300px;}
/*]]>*/
</style>

Ce qui a généré un message d'erreur (je ne sais pas où doit-on placer exactement ce genre de texte dans le code, d'ailleurs ?)

Mais finalement, je crois que c'est le corps entier du site que je dois modifier si je veux que l'intégralité des contenus s'affichent sur l'écran de l'utilisateur. En effet, diminuer la taille du header ne suffit pas puisque selon la résolution de l'écran, il prendra de toute façon plus ou moins de place.

Du coup, j'ignore comment m'y prendre. J'aimerais que le visiteur voit au moins le header ainsi que le contenu, pas forcément le Footer, ce n'est pas grave s'il faut descendre l'ascenseur pour le voir.

Pour le moment, mon site ressemble à ça (http://bootchou.jimdo.com/) :

" />

Le contenu est coupé, je dois absolument remonter le tout et diminuer la hauteur du Header.

De plus, lorsque j'effectue une modif, même minime (un nombre de pixels pour le padding, par exemple) et que ce soit dans le code HTML ou CSS, Jimdo me propose cette validation :

" />

Je n'y comprends rien, lol.

Merci beaucoup de votre aide

[skyjoe]

Rhaaa j'ai trouvé où était "modifier le head", je m'étais perdu dans les codes du design et je croyais que cette option n'était plus d'actualité vu que les messages que j'ai lus datent un peu.

Néanmoins, je crois que c'est bel et bien le body que je dois forcer à rester à une certaine taille quelque soit la résolution de l'écran du visiteur.

[FilmsdeLover]

Ne mettez jamais de codes dans "Design personnalisé" si vous utilisez un modèle de site Jimdo, sinon, vous aurez le design avec la camionnette. Tout se fait dans "Modifier le head".

Ensuite, l'objectif "que le visiteur voit l'entièreté du site sans avoir à faire défiler l'ascenseur" ne veut rien dire parce qu'il existe des dizaines de résolutions différentes et que donc, ce qui marche pour l'un ne marchera pas forcément pour l'autre.

Voilà ce que donne votre site sur mon écran en 1366x768 :


L'image est donc tronquée sur la gauche et la droite. Il faut revoir cela, peut-être en utilisant deux images : l'une avec les personnages et le titre qui ferait 1000px de large (la largeur communément admise comme "maximale" pour être vue partout) et serait centrée, et une deuxième avec le fond orange qui prendrait elle toute la largeur de l'écran (width: 100%). Mais je ne vais pas vous cacher que ça va être difficile à faire. Je ne pense pas que tout mettre dans le body soit une bonne idée non plus.

Enfin, pour la hauteur, mon conseil est d'enlever les bandes oranges en haut et en bas de votre image. Et de réutiliser ces touches de orange perdues ailleurs (dans le texte, pour les titres etc).

[skyjoe]

Ok, merci pour votre rapidité et la qualité de votre réponse.

Pour ce qui est des deux bandes oranges en haut et en bas de l'image, je les avais ajoutées pour que mon fond couvre la totalité du header : autrement, il y avait un espace blanc en bas, ou en haut.

Du coup, j'aimerais bien les enlever mais si je ne veux pas de blanc je dois diminuer la hauteur du header.

J'ai tapé de nouveau ce code, cette fois-ci dans le menu "modifier le head" :

<style type="text/css">
/*<![CDATA[*/
#header {eight: 300px;}
/*]]>*/
</style>

Ce qui n'a rien changé. Est-ce que mon code est faux ou bien est-ce qu'on ne peut pas modifier la taille d'un header ?

[FilmsdeLover]

Déjà, chaque design a son propre code, avec ses propres divs. Donc #header peut marcher pour un site, mais pas forcément pour un autre. Ensuite, et c'est là que je voulais en venir, votre image n'est pas dans le Header de votre site. Elle est dans le body et c'est donc compliqué de la modifier convenablement. C'est pour ça que je vous ai parlé des "deux images" à agencer. Celle en fond transparent avec les personnages et le titre pourrait aller dans "Espace Logo" tandis que le fond resterait là où il est. Ce serait déjà un bon début.

[skyjoe]

D'accord, je vais prendre un peu de recul avec l'ergonomie du site car j'y suis depuis seulement 2 jours mais j'y ai passé plus d'une dizaine d'heures...j'en demande peut-être un peu trop pour une solution comme Jimdo alors que je n'ai que des bases d'HTML niveau école primaire, lol.

Merci beaucoup à vous et bonne journée

[FilmsdeLover]

J'ai fait un petit test ici : http://fdltest.jimdo.com/

Le problème de mettre la deuxième image à la place de "Espace logo" est qu'elle est limitée en taille, ce qui est assez embêtant. Mais vous comprenez l'idée. Pour diminuer la hauteur de l'image, j'ai entré les codes suivants :

Code:

<style type="text/css">
/*<![CDATA[*/
.tpl-spacing {
    min-height: 0;
}
/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
.body {background-color:white;}
/*]]>*/
</style>

Le premier réduit la hauteur minimum de cette image de fond tandis que le deuxième met un fond blanc au lieu de noir en cas d'image moins large. Ce ne sont que des pistes et comme je vous l'ai dit, il va falloir sans doute bien plus de modifs que ça pour faire ça bien. Ou prendre un autre modèle qui permettrait d'entre un logo plus "gros".

[skyjoe]

Ma solution était d'adapter vos informations directement dans l'image : à savoir, réduire l'espace persos + logo à 1024px max et réserver tout l'espace restant au fond, puis coller cette image en background comme elle l'est déjà. Car j'ai un peu peur d'être embêté à cause des restrictions liées à la taille de l'image et du logo que propose Jimdo.
Bien joué pour les modifs, c'est du propre

[FilmsdeLover]

Oui, à vous de voir. Il faut tester et si besoin, revenez demander sur le forum. Avec des codes, on peut (presque) tout changer mais il faut que le matériau de base s'y prête.

[skyjoe]

[skyjoe]

J'ai testé le 1er code et c'est parfait, un grand merci !

[skyjoe]

Ah non. Incroyable, je croyais m'en être enfin dépêtré et il se trouve que la hauteur de l'image de fond affichée sur mon interface n'est en réalité pas la même que celle du site.

Voilà ce que ça donne (en haut mon interface, en bas le site) :

[img][/img]

Les persos + logo ne font pas plus de 1000px de largeur.

En revanche, la bande de mon site est bien trop petite pour y insérer quelque chose de visible.
Du coup, j'ai bien tenté de modifier le code en tentant d'imposer une hauteur d'espace quelconque :

<style type="text/css">
/*<![CDATA[*/
.tpl-spacing {
height: 300px;
}
/*]]>*/
</style>

Rien n'y fait, quelque soit la valeur que je demande (10px, 300px, etc...) l'espace retrouve sa taille d'origine par défaut.
Il doit bien y avoir un moyen de lui imposer une hauteur mais je n'arrive pas à trouver comment procéder.

[FilmsdeLover]

Le code suivant doit fonctionner en théorie. Cela marche quand je le teste via Firebug :

Code:

<style type="text/css">
/*<![CDATA[*/
.tpl-spacing {
    height: 275px !important;
}
/*]]>*/
</style>

[skyjoe]

Chez moi ça ne marche pas, je le tape pourtant au bon endroit, dans "modifier le head".

En fait, quelque soit le nombre que j'inscris, l'espace libre est toujours le même.

Je ne pourrais pas tenter de rentrer un code de ce type par hasard ?

Code:

<style type="text/css">
div.tpl-spacing {
height: 35px;
}
</style>

Désolé, j'essaie de comprendre...

[skyjoe]

Ah en fait, quand je rentre 1000px, la hauteur change, elle augmente.

Donc apparemment, on peut pas taper en dessous d'une certaine valeur en espérant réduire la taille, car ça ne changera rien.
Que je tape 30px, ou 0, ou 300, la taille reste la même.

Et quand je tape mon code ci-dessus, Jimdo me le corrige mais il passe Cela dit, le problème reste.

Idem en tapant ça, rien ne change :

Code:

<style type="text/css">
/*<![CDATA[*/
.tpl-spacing {
    max-height: 10px !important;
}
/*]]>*/
</style>


[FilmsdeLover]

C'est parce que vous avez retiré le premier code, le plus important, que je vous ai donné, celui avec min-height.

Effacez tous les codes dans "Modifier le Head" et ajoutez ceci à la place :

Code:

<style type="text/css">
/*<![CDATA[*/
.tpl-spacing {
    height: 275px !important;
    min-height: 0;
}
/*]]>*/
</style>

Même si ça ne marche pas (et ça marche sans doute en passant en vue "Visiteur"), laissez-le pour qu'on puisse voir d'où vient le problème.

[skyjoe]

Ah ok, on doit "forcer" l'espace à avoir une taille minimale.

C'est génial, ça marche, que ce soit sur mon interface ou sur le site.

Un grand merci !

[Contenu sponsorisé]