1. #1
    Membre du Club
    Femme Profil pro
    Développeur Web
    Inscrit en
    janvier 2012
    Messages
    249
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : janvier 2012
    Messages : 249
    Points : 52
    Points
    52

    Par défaut Positionner des éléments en absolute

    bonjour,

    je cherche comment bien positionner mes deux éléments (les deux aside à droite et à gauche) sur l'image .
    si vous regarder bien sur la premiere image, sur un écran normal les deux éléments sont bien placés.
    sur la deuxième image (sur un écran plus GRAND) les deux éléments sont carrément mal placés.

    mes deux éléments (les aside) sont mis en position absolute dans une section de position relative

    je vous passe le code pour que tout soit clair :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <section class="container relative"> 
            <?php if (MDETECT_SUPPORT == "desktop"): ?>
     
                <aside class="right-aside  uppercase text-center">
                    <div class="champi-text"> 
                        <h4 class="brown fz200 bold"> <?php echo __('pssst... '); ?> </h4>
                        <h4 class="brown fz200 bold"> <?php echo __('cliquez sur'); ?> </h4>
                        <h4 class="brown fz200 bold"> <?php echo __('le champignon'); ?> </h4>
                    </div>
                </aside> 
                <aside class="left-aside brown padding10 text-center OSWALD">
                    <h4 class="bold uppercase"> <?php echo __('50%'); ?></h4>  
                    <h4 class="bold uppercase inline fz180"> <?php echo __('<span class="inline-block fz120 letter-spacing">sur votre</span><br> <span class="fz110">abonnement</span><br><span class="fz120"> 6 et 12 mois</span>'); ?></h4>  <br>
                    <img class="fleche" src="<?php echo url('image') . DOSSIER_LANGUE; ?>/courslive3/millecinqcent/desktop/fleche-promo_.png"> <br> 
                    <h4 class="bold marginB20 codeichef">  <?php echo __('avec le code <br><span> 1500ICHEF</span>'); ?> </h4>
                    <a href="<?php echo l(array('controller' => 'courslive3', 'action' => 'landing2'), false, true)."?1500ICHEF"; ?>" class="yellow-btn uppercase bold" ><?php echo __('je m\'abonne'); ?></a>
                </aside>  
            <?php endif; ?> 
    .....

    CODE JS :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
     $(window).scroll(function () {
    //        var height = $('.bg-champi').height(); 
            var scrollTop = $(window).scrollTop();  
            var scrollDown = document.body.offsetHeight;
              if(scrollTop<550){
                    $('.left-aside').css({ 'position': 'absolute', 'top' : '-300px', 'left' : '-18%' });
                    $('.right-aside').css({ 'position': 'absolute', 'top' : '-300px', 'right' : '-18%'});
              }
              else if(scrollTop>=550){
                    $('.left-aside').css({ 'position': 'fixed', 'top' : '121px' , 'left' : '0%' });
                    $('.right-aside').css({ 'position': 'fixed', 'top' : '140px' ,'right' : '0%'});
              }
             if ((window.innerHeight + window.scrollY) > scrollDown-390) {
                    $('.left-aside').css({ 'position': 'absolute', 'top' : '200px', 'left' : '-18%' });
                    $('.right-aside').css({ 'position': 'absolute', 'top' : '300px', 'right' : '-18%'});
                }
     
     
        });

    j 'essai de bien les positionner sur n'importe quelle taille d'écran, les centrer par exemple chacun de son coté .


    merci
    Images attachées Images attachées   

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 952
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 952
    Points : 25 538
    Points
    25 538

    Par défaut

    Bonjour,
    pas tout bien compris, au moins le résultat attendu, mais une question quand même pourquoi ne pas gérer cela en CSS simplement

Discussions similaires

  1. Réponses: 8
    Dernier message: 11/06/2009, 21h46
  2. position des elements (debut avec swt)
    Par lilington dans le forum SWT/JFace
    Réponses: 10
    Dernier message: 19/06/2008, 12h37
  3. Position des balises H2 ou comment les numéroter
    Par haypo dans le forum XML/XSL et SOAP
    Réponses: 2
    Dernier message: 12/07/2003, 20h24
  4. Changer dynamiquement la position des onglets
    Par ginnovy dans le forum C++Builder
    Réponses: 2
    Dernier message: 11/09/2002, 19h24
  5. trier un tableau et compter des elements du tableau
    Par remi51 dans le forum Général Algorithmique
    Réponses: 6
    Dernier message: 17/06/2002, 17h51

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo