Jump to content
Sign in to follow this  
Zlika

responsiv landscape et portrait

Recommended Posts

Bonsoir,



Pour une version mobile d'un site, j'utilise foundation.


Pour un affichage en portrait j'aimerai un bloc d'infos par ligne et pour un landscape j'aimerai avoir 2 blocs dans la largeur.



Dans un premier temps j'étais parti sur un class="row maClasse" en passant un width à 50% en css sur du landsacape mais je n'arrivais à rien de bon.



Finalement j'ai un row dans lequel j'insère mes 2 blocs en float left doublé d'un float right ! Je trouve pas ça propre dans la démarche.



Et vous comment faites vous ?


Merci


Zlika



Share this post


Link to post
Share on other sites

Tu pourrais peut-être mettre les deux blocs en inline-block ?



display: inline-block;


vertical-align: top;



et pour la largeur, affecter 50% (avec margin et padding à 0, sinon un peu moins) pour le landscape et 100% pour le portrait


Share this post


Link to post
Share on other sites

Il utilise un système de grid, toucher la css n'est pas une bonne idée.


Pourquoi mets-tu des float à l'intérieur de tes row ? utilise les classes fournies par foundation, ou ne l'utilise pas du tout.



http://foundation.zurb.com/docs/components/grid.html



regarde du coté de source ordering, tu as ce que tu souhaites faire si j'ai bien compris ton truc :



<div class="row">
<div class="medium-6 medium-push-6 columns">6</div>
<div class="medium-6 medium-pull-6 columns">6, last</div>
</div>

j'utilise pas du tout ce grid (blueprint ou boostrap), alors je me garde d'aller trop loin dans l'explication pour pas dire de c**.


Share this post


Link to post
Share on other sites

Bonsoir,



Merci Clair de Lune j'ai encore des réflexes HTML4 inscrits en routine...



Sinon oui SStephane utiliser un système grid est très structurant, rester dans la démarche est fondamental. C'est pas le source ordering que je recherchais mais plutôt l'ajout d'une classe... j'ai fini par trouvé mon bonheur ici ...Sass y a plus qu'à ! Dans l'attente je vais passer par le inline-block + @media landscape !



Merci @vous 2 de m'avoir mis sur la bonne piste.


Zlika


Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By Elnin
      Bonjour, je suis musicien et je commence à coder mon propre site, car il se trouve que, comme la plupart d'entre vous, j'adore coder (bref).
      En tous cas, je viens de terminer la maquette du design, et il se trouve que suis incompétent à réaliser certaines bases du site...
      Il se trouve que j'aimerais séparer (en gros) la page web en deux, avec une grande ligne diagonale. Dans un vieux tutoriel, j'avais lu qu'en Javascript, l'on pouvait dessiner tout ce qu'on voulait sur des calques avec canvas... Problème : je n'ai que quelques bases en Javascript qui ne me permettront surement pas d'atteindre mon objectif. Je sollicite donc votre aide pour m'indiquer ne serait-ce qu'un lien ou ce que j'aimerais réaliser est expliqué ou si vous connaissez certaines balises...
      Merci d'avance,
      Elnin
    • By himelle
      Bonsoir,
       
      Je suis en train de créer un site internet sur wordpress avec le thème premium enfold qui comporte un endroit pour y insérer le css.
      J'ai une page "calendrier" et sur cette page, je souhaiterai modifier le background-color tout comme sur les pages de chaque événements lorsque l'on veut les lire.
      (Mais pas sur les autres. Je précise car j'ai essayé de modifier le .container et forcément les fonds de toutes les pages du sites ont été modifiées. Ce n'est pas mon but.)
      Le calendrier est également un plug-in premium (the events calendar) et c'est pourquoi même lorsque j'accède aux fichiers par filezilla je suis perdue.
      Est ce que quelqu'un pourrait m'aider ?
       
      Je vous remercie.
    • By ivoyages
      Je viens d'enlever la possibilité de s'inscrire par le forum Phpbb car j'ai lié le forum à ma base membre. Les membres du site peuvent donc participer au forum.

      Dans le template du forum, j'aimerais faire pointer vers le bloc de connexion / inscription mais celui-ci ne s'affiche pas. Le template Phpbb a pourtant été rafraîchi.

      Dans template/overall_header.html, j'ai



      <div id="login">
      <div align="left" id="loginbloc1"><?php include('http://www.i-trekkings.net/mod.login.php'); ?></div>
      </div>
      Dans stylesheet.css, j'ai





      /* ---------- BLOC LOGIN ---------- */
      #login {
      width:995px;
      height:31px;
      background-color:#3b362e;
      font-family:Arial, Helvetica, sans-serif;
      font-size:12px;
      color:#ff9933;
      }
      #loginbloc1 {
      float:left;
      height:22px;
      padding:0px 0px 0px 0px;
      margin-top:6px;
      }


      #login a, #login a:link, #login a:visited, #login a:active {
      font-family:Arial, Helvetica, sans-serif;
      font-size:12px;
      font-weight:normal;
      color:#ff9933;
      text-decoration:none;
      }
      #login a:hover {
      color:#e7511e;
      }
      #login a#pasencore, #login a#pasencore:link, #login a#pasencore:visited, #login a#pasencore:active {
      font-family:Arial, Helvetica, sans-serif;
      font-size:12px;
      font-weight:normal;
      color:#fff;
      text-decoration:none;
      }
      #login a#pasencore:hover {
      color:#e7511e;
      }

      Une idée, pourquoi le bloc ne s'affiche pas ?


      Grégory



    • By Thornubik
      Bonjour a tous,



      Je souhaiterais copier plus ou moins copier l'interface de ce site : http://www.jmthiphop.com/ sur celui ci http://www.rapandrevenge.com/index.php dont je m'occupe pour la maintenance, je souhaite simplement crée cette foutue trame verticale avec un fond (tout comme le site JMTHIPHOP) lorsque je touche au code sur mon site voila ce que j'obtiens, ce n'est pas si eloigné du but rechercher mais le noir n’englobe qu'un élément a la fois au lieu d’englober tous les articles je vous laisse voir par vous même : http://www.heberger-image.fr/images/74088_Exemple_site_.jpg.html



      merci a ce qui prendront le temps de me répondre,



      a bientot,



      Thorn

×
×
  • Create New...