Interro surprise pour les rois du CSS : Alignement en diagonale

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par indigene, 23 Juillet 2015.

  1. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 156
    J'aime reçus:
    173
    Bonjour,

    Je souhaite réaliser un alignement en diagonale de mon texte par rapport à une image triangulaire que j'ai mis en background.

    Voici une représentation visuelle :
    [​IMG]
    (l'image a été prise sur un forum. quelqu'un cherchait à faire la même chose que moi et n'a pas eut de réponses concluantes)

    J'arrive bien à le faire en utilisant plein de div avec des width en pourcentage et en faisant varier le pourcentage au fur et à mesure. En gros je met une ligne de texte par div.

    Le problème c'est si l'utilisateur prend envie de grossir la police à l'écran. :?

    Le gros problème c'est avec le responsive où c'est complètement pété quand on rétrécit la largeur de l'écran. :(

    Quelqu'un saurait-il faire ? Avec des rotates peut-être ? Avec un plug-in wordpress ? Du jquery ?
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 004
    J'aime reçus:
    284
  3. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 156
    J'aime reçus:
    173
    Non, pas du tout.
    Je fais l'alignement sur une image qui, elle, est carrée, mais qui présente une moitié en diagonale de la couleur du fond. Donc elle donne l'apparence d'être un triangle.
    Voici comment j'ai placé l'image dans le html :
    Code:
    <div id="aw9vBAKz3" class="span12 tw-para "><h2>Titre</h2>
    <div class="imagefond1">
    ....
    <div class="ptext">
    
    Et voici comment elle est déclarée dans le css :
    Code:
    @-ms-viewport{width:device-width;}.hidden{display:none;visibility:hidden;}
    .visible-phone{display:none !important;}
    .visible-tablet{display:none !important;}
    .hidden-desktop{display:none !important;}
    .visible-desktop{display:inherit !important;}
    .imagefond1{background:hsl(0,0%,0%) url(../../../_media/img/large/Sans_titre-16.jpg) no-repeat scroll left top;background-size:50%;}
    @media (min-width:768px) and (max-width:979px){
    .hidden-desktop{display:inherit !important;} 
    .visible-desktop{display:none !important ;} 
    .visible-tablet{display:inherit !important;} 
    .hidden-tablet{display:none !important;}
    .imagefond1{background:hsl(0,0%,0%)}
    }
    @media (max-width:767px){
    .hidden-desktop{display:inherit !important;} 
    .visible-desktop{display:none !important ;} 
    .visible-tablet{display:inherit !important;} 
    .hidden-tablet{display:none !important;}
    .imagefond1{background:hsl(0,0%,0%)}
    }
    
    Tu noteras qu'au passage j'ai résolu le problème du responsive assez radicalement car j'ai simplement supprimé l'image si la largeur devient inférieure à 980.

    Pour ce qui est du traitement du décalage, voici le code html :
    Code:
    <div class="imagefond1">
    <div class="ptext">
    <div class="large50"><p>bla bla bla </p></div>
    <div class="large55"><p>bla bla bla</p></div>
    </div><div style="clear:both">
    <div class="large35">&nbsp;</div><h3 class="large65">Titre H3</h3></div>
    <div class="ptext">
    <div class="large70"><p>bla bla bla</p></div>
    <div class="large80"><p>bla bla bla</p></div>
    <div class="large86"><p>bla bla bla</p></div>
    <div class="large92"><p>bla bla bla</p></div>
    </div>
    
    Et dans le css j'ai mis ceci :
    Code:
    @-ms-viewport{width:device-width;}.hidden{display:none;visibility:hidden;}
    .visible-phone{display:none !important;}
    .visible-tablet{display:none !important;}
    .hidden-desktop{display:none !important;}
    .visible-desktop{display:inherit !important;}
    .imagefond1{background:hsl(0,0%,0%) url(../../../_media/img/large/Sans_titre-16.jpg) no-repeat scroll left top;background-size:50%;}
    [b].large50{width:50% !important;float:right !important;}
    .large55{width:55% !important;float:right !important;}
    .large35{width:35% !important;float:left !important;}
    .large65{width:65% !important;float:left !important;}
    .large70{width:70% !important;float:right !important;}
    .large80{width:80% !important;float:right !important;}
    .large86{width:86% !important;float:right !important;}
    .large92{width:92% !important;float:right !important;}
    [/b]@media (min-width:768px) and (max-width:979px){
    .hidden-desktop{display:inherit !important;} 
    .visible-desktop{display:none !important ;} 
    .visible-tablet{display:inherit !important;} 
    .hidden-tablet{display:none !important;}
    .imagefond1{background:hsl(0,0%,0%)}
    .large50{width:100% !important; float:right !important;}
    .large55{width:100% !important; float:right !important;}
    .large35{width:100% !important; float:left !important;}
    .large65{width:100% !important; float:left !important;}
    .large70{width:100% !important; float:right !important;}
    .large80{width:100% !important; float:right !important;}
    .large86{width:100% !important; float:right !important;}
    .large92{width:100% !important; float:right !important;}}
    @media (max-width:767px){
    .hidden-desktop{display:inherit !important;} 
    .visible-desktop{display:none !important;} 
    .visible-phone{display:inherit !important;} 
    .hidden-phone{display:none !important;}
    .imagefond1{background:hsl(0,0%,0%)}
    .large50{width:100% !important; float:right !important;}
    .large55{width:100% !important; float:right !important;}
    .large35{width:100% !important; float:left !important;}
    .large65{width:100% !important; float:left !important;}
    .large70{width:100% !important; float:right !important;}
    .large80{width:100% !important; float:right !important;}
    .large86{width:100% !important; float:right !important;}
    .large92{width:100% !important; float:right !important;}}
    
    Tu noteras qu'au passage j'ai résolu le problème du responsive assez radicalement car j'ai simplement supprimé le pourcentage pour le forcer à 100% si la largeur devient inférieure à 980.
    En responsive il n'y a pas d'image donc pas de décalage en diagonale à effectuer :mrgreen:
     
Chargement...
Similar Threads - Interro surprise rois Forum Date
marqueurs nommés vs marqueurs interrogatifs requête préparée Développement d'un site Web ou d'une appli mobile 16 Janvier 2019
Marqueur nommé ou interrogatif pour les requetes préparées ? Développement d'un site Web ou d'une appli mobile 30 Décembre 2018
Point d'interrogation dans l'URL = duplicate ? Débuter en référencement 26 Décembre 2017
Points interrogation à la place des accents Développement d'un site Web ou d'une appli mobile 23 Novembre 2016
Duplicate content et URL en point d'interrogation Référencement Google 25 Novembre 2015
[résolue] Probléme redirection et point d'interrogation URL Rewriting et .htaccess 23 Novembre 2015
RedirectPermanent + problème lié au point d'interrogation URL Rewriting et .htaccess 24 Avril 2015
Interrogation et test sur la valeur d'un lien interne Tests et études de cas 14 Novembre 2014
URL rewriting et point d'interrogation URL Rewriting et .htaccess 8 Septembre 2014
Redirection d'une URL avec un point d'intérrogation URL Rewriting et .htaccess 2 Août 2014
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice