Responsive et textes a faire "cacher" et faire "apparaitre"Fermé

Question

Bonjour à tous!, Je suis apprentis en web-design et je m'entraine en ce moment au responsive-design. J'ai créé de jolis blocs colorés que j'ai mis en place dans mon doc HTML, puis mis en page dans mon CSS. Vous pourrez constater que j'ai 3 résolutions disponibles pour mon site web : 1200px / 600px / 400px (se ne sont pas des standards, mais c'est juste pour essayer). Avant de parler de mon problème, voici mes codes : CSS: @charset "utf-8"; /* CSS Document */ body{height:1100px; width:1200px; background-color:#FFA8CB; alignment-adjust:central; margin: 0 auto 0 auto;} .header{height:180px; width:1200px; background-image:url(images/header1200.jpg);} .textetaille1200{display:;} .textetaille600{display:none;} .textetaille400{display:none;} .blocbleu{height:320px; width:1200px; background-image:url(images/blocbleux1200.jpg);} .blocA{height:300px; width:600px; float:left; background-image:url(images/blocAx600.jpg);} .blocB{height:300px; width:600px; float:right; background-image:url(images/blocBx600.jpg);} .blocC{height:300px; background-image:url(images/blocCx1200.jpg); width:1200px; padding-top:300px;} .conteneur1{width:1200px; height:300px} @media screen and (max-width:800px) { body{height:1100px; width:600px; background-color:#FFA8CB; alignment-adjust:central; margin: 0 auto 0 auto;} .header{height:180px; width:600px; background-image:url(images/header600.jpg);} .textetaille1200{display:none;} .textetaille600{display:;} .textetaille400{display:none;} .blocbleu{height:320px; width:600px; background-image:url(images/blocbleux600.jpg);} .blocA{height:300px; width:300px; float:left; background-image:url(images/blocAx300.jpg);} .blocB{height:300px; width:300px; float:right; background-image:url(images/blocBx300.jpg);} .blocC{height:300px; background-image:url(images/blocCx600.jpg); width:600px; padding-top:300px;} .conteneur1{width:600px; height:300px} @media screen and (max-width:550px) { body{height:1100px; width:400px; background-color:#FFA8CB; alignment-adjust:central; margin: 0 auto 0 auto;} .header{height:180px; width:400px; background-image:url(images/header400.jpg);} .textetaille1200{display:none;} .textetaille600{display:none;} .textetaille400{display:;} .blocbleu{height:320px; width:400px; background-image:url(images/blocbleux400.jpg);} .blocA{height:300px; width:200px; float:left; background-image:url(images/blocAx200.jpg);} .blocB{height:300px; width:200px; float:right; background-image:url(images/blocBx200.jpg);} .blocC{height:300px; background-image:url(images/blocCx400.jpg); width:400px; padding-top:300px;} .conteneur1{width:400px; height:300px} Je vous fournis aussi mon HTML : test1

Alors... Le problème est le suivant : -J'ai trois résolutions différentes et je souhaite afficher trois textes différents sur le

en fonction de la résolution. Exemple : Quand mon site est en 1200px, je souhaite afficher sur le header : "Site web en height:1100px et width:1200px" Quand mon site est en 600px, je souhaite afficher sur le header : "Site web en height:1100px et width:1200px" Quand mon site est en 400px, je souhaite afficher sur le header : "Site web en height:1100px et width:1200px" J'ai donc eu une idée : Je tape mes 3 textes différents sur le HTML(avec 3 classes différentes), puis j'utilise la propriété {display:none;} sur mon CSS afin d'afficher, masquer les textes à ma guise. Il suffit de voir le HTML et le CSS afin de comprendre aisément ce que j'ai voulu faire, je suis si naïf!!! Cependant, cela ne fonctionne pas du tout et je ne sais fichtrement pas comment réaliser ce que je souhaite! La chose étant que je refuse de me laisser à la facilité et de taper mon texte sur photoshop directement sur le header, je suis ptêt pas un fou du web, mais certainement pas un boucher :). Merci pour vos solutions qui vont assurément me faire progresser. Configuration: Windows 7 / Firefox 34.0

Skinnyfly2 · Answer

Salut,

 quand tu veux le rafficher il faut mettre display:block; au lieu de ton display:;

.textetaille1200{display:block;}
.textetaille600{display:none;}
.textetaille400{display:none;}

borg80 · Answer

Merci, cela fonctionne très bien! Merci 1000 fois :)

Est il possible d'obtenir une explication sur le "display:block"? Je ne comprend pas vraiment comment il marche. J'ai compris que display:none permettait de masquer... Mais le block? Comment fonctionne t'il?

(Je suis allé voir sur le web mais je trouve rien de bien clair)

Skinnyfly2 · Answer

Les balises s'affichant en "block" (bloc) : elles prennent toute la largeur disponible et s'affichent avec un saut de ligne avant et après.
Lorsque tu cache un bloc avec display:none le seule moyen de le redéfinirent c'est en lui attribuant une autre propriété comme le inline ou autre. Le faite de faire comme tu a essayer avec juste display:; ne change pas la valeur attribué au début c'est a dite le none. Du coup il ne se rafichera pas.

Après si c'est juste pour du texte tu peut utiliser visibility: hidden; pour le masquer et visibility: visible; pour la rafficher.

borg80 · Answer

Okay, c'est clair comme de l'eau de roche maintenant! Et oui, c'est uniquement pour du texte, donc j'utiliserai la commande "visibility" la prochaine fois. Je vais aller m'amuser à faire disparaitre des blocs histoire de pas zapper la commande "display".

Tank you!

Responsive et textes a faire "cacher" et faire "apparaitre"

4 réponses

Discussions similaires

Newsletters