Responsive et textes a faire "cacher" et faire "apparaitre"
borg80
-
borg80 -
borg80 -
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:
Je vous fournis aussi mon HTML :
Alors... Le problème est le suivant :
-J'ai trois résolutions différentes et je souhaite afficher trois textes différents sur le
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é
Merci pour vos solutions qui vont assurément me faire progresser.
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 :
<!doctype html> <html> <head> <meta charset="utf-8"> <link href="mep.css" rel="stylesheet" type="text/css" media="all"/> <title>test1</title> </head> <body> <div class="header"><center> <div class="textetaille1200">Site web en height:1100px et width:1200px</div> <div class="textetaille600">Site web en height:1100px et width:600px</div> <div class="textetaille400">Site web en height:1100px et width:400px</div> </center> </div> <div class="blocbleu"></div> <div class="conteteneur1"> <div class="blocA"></div> <div class="blocB"></div> </div> <div class="blocC"></div> </body> </html>
Alors... Le problème est le suivant :
-J'ai trois résolutions différentes et je souhaite afficher trois textes différents sur le
<div class="header">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.
A voir également:
- Texte responsive
- Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
- Transcription audio en texte word gratuit - Guide
- Excel cellule couleur si condition texte - Guide
- Texte barré whatsapp - Guide
- Mettre un texte en majuscule - Guide
4 réponses
Salut,
quand tu veux le rafficher il faut mettre display:block; au lieu de ton display:;
quand tu veux le rafficher il faut mettre display:block; au lieu de ton display:;
.textetaille1200{display:block;}
.textetaille600{display:none;}
.textetaille400{display:none;}
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.
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.
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)
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)
