IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

[Débutant] position relative et absolue


Sujet :

HTML

  1. #1
    Membre actif Avatar de AurelBUD
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    202
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France, Calvados (Basse Normandie)

    Informations forums :
    Inscription : Mai 2004
    Messages : 202
    Points : 212
    Points
    212
    Par défaut [Débutant] position relative et absolue
    Bonjour,

    J'ai une petite question à poser concernant la position des div sur une page :

    Voilà je voudrais positionner un div à droite d'un autre. En utilisant float:right; c'est facilement faisable mais j'ai vu en me promenant sur le net qu'on pouvait utiliser left:X%; ...

    Or quand j'essaie d'utiliser ceci ca na marche pas et il met mon div comme si j'avais écrit left:0%; (donc tout a gauche quoi comme si j'avais rien mis).


    Ai-je oublier quelque chose ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    .logo {
          left: 55%;
          background-image : url(./css/mini.jpg);
          border : 2px solid #AAAAAA;
          width : 250px;
          height : 130px;
          background-repeat : no-repeat;
          margin : 10px;
       }

  2. #2
    Candidat au Club
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    3
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 3
    Points : 4
    Points
    4
    Par défaut
    Surement le ou bien A moins que ce ne soit hérité d'autres éléments...

  3. #3
    Membre actif Avatar de AurelBUD
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    202
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France, Calvados (Basse Normandie)

    Informations forums :
    Inscription : Mai 2004
    Messages : 202
    Points : 212
    Points
    212
    Par défaut
    J'ai justement essayé de la placer dans le conteneur et dans la class logo mais les deux ne marchent pas :/

  4. #4
    Nouveau membre du Club
    Inscrit en
    Septembre 2004
    Messages
    26
    Détails du profil
    Informations forums :
    Inscription : Septembre 2004
    Messages : 26
    Points : 29
    Points
    29
    Par défaut
    peut etre en utilisant margin-left ?

    ce site est pas mal pour ce genre de questions:

    http://www.w3.org/TR/REC-CSS2/box.html

  5. #5
    Membre actif Avatar de AurelBUD
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    202
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France, Calvados (Basse Normandie)

    Informations forums :
    Inscription : Mai 2004
    Messages : 202
    Points : 212
    Points
    212
    Par défaut
    Le problème en utilisant margin-left c'est que le div occupera la totalite de l'espace de puis la gauche alors qu'apparement l'attribut left permet de deplacer la div et non pas de l'allonger (ou alors j'ai rien compris cequi est aussi possible :p)

  6. #6
    Nouveau membre du Club
    Inscrit en
    Septembre 2004
    Messages
    26
    Détails du profil
    Informations forums :
    Inscription : Septembre 2004
    Messages : 26
    Points : 29
    Points
    29
    Par défaut
    pour qu'on soit clair post le bout du code html que t'utilises (ou au moins la partie intéressante..)

  7. #7
    Membre actif Avatar de AurelBUD
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    202
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France, Calvados (Basse Normandie)

    Informations forums :
    Inscription : Mai 2004
    Messages : 202
    Points : 212
    Points
    212
    Par défaut
    Voila le html :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <div class="logo">
       </div>
       <div class="titre">
          <p align="center"><?php  echo $this->getI18N('P_Titre_BT').". "; ?>
          <?php echo $this->getI18N('L_NumBT'); ?> : <strong><?php echo $this->toEdit->NUM_BT."."; ?> </strong></p>
       </div>
    et donc les deux classes css qui correspondent :

    Code : 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
    20
    21
    .titre {
          background-color : #EEEEEE;
          width : 60%;
          height : 100px;
          margin : 10px 0px 10px 80px;
          padding: 5px;
          font-size: 220%;
          border : 2px #777777 groove;
          text-align: center;
       }
     
       .logo {
          background-image : url(./css/mini.jpg);
          border : 2px dotted #AAAAAA;
          width : 250px;
          height : 130px;
          background-repeat : no-repeat;
          background-position : center;
          float : right;
          margin-right: 80px;
       }
    Cette solution marche, certe, mais j'aimerais enlever le dans .logo mais tout en conservant le logo correspondant à droite (donc avec le titre à gauche).

    J'ai trouvé sur internet des tutoriaux qui parlaient de l'attribut left mais j'arrive pas à l'utiliser. Même en mettant position:absolute ou position:relative...

  8. #8
    Membre actif Avatar de Ricou13
    Inscrit en
    Août 2002
    Messages
    292
    Détails du profil
    Informations forums :
    Inscription : Août 2002
    Messages : 292
    Points : 224
    Points
    224
    Par défaut
    Salut,

    En tout cas, utiliser left ou top si le div n'est pas positionné, cela ne sert à rien.
    il ne faut pas de tout pour faire un monde. Il faut du bonheur et rien d'autre. Paul Eluard
    Des fois ça malche, des fois ça malche pas. Garcimore

  9. #9
    Nouveau membre du Club
    Inscrit en
    Juin 2005
    Messages
    35
    Détails du profil
    Informations forums :
    Inscription : Juin 2005
    Messages : 35
    Points : 37
    Points
    37
    Par défaut
    Citation Envoyé par AurelBUD
    Cette solution marche, certe, mais j'aimerais enlever le dans .logo mais tout en conservant le logo correspondant à droite (donc avec le titre à gauche).

    J'ai trouvé sur internet des tutoriaux qui parlaient de l'attribut left mais j'arrive pas à l'utiliser. Même en mettant position:absolute ou position:relative...
    Pourquoi faire simple quand on peut faire compliquer...

    Mais la position obsolue fonctionne très bien.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
      .logo {
    	background-image : url(./css/mini.jpg);
    	border : 2px dotted #AAAAAA;
    	width : 250px;
    	height : 130px;
    	background-repeat : no-repeat;
    	background-position : center;
     
    /* positionner un bloc en absolu */
     
    	position: absolute;
    	top: 2%; /* je veux que mon logo soit positionné d'une valeur de 2% à partir du haut */
    	right: 5%; /* je veux que mon logo soit positionné d'une valeur de 5% à partir de la droite */
       }
    Le bloc a ses coordonnées il peut se placer correctement.

  10. #10
    Membre actif Avatar de AurelBUD
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    202
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France, Calvados (Basse Normandie)

    Informations forums :
    Inscription : Mai 2004
    Messages : 202
    Points : 212
    Points
    212
    Par défaut
    Bonjour,

    Le float a des comportements différents sous IE ou sur mozilla chez moi donc j'essaie de trouver une autre solution ...

    Merci pour vos réponses j'ai réussi à faire fonctionner

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Position relative ET absolue pour <ul> et <li>
    Par bigltnt dans le forum Mise en page CSS
    Réponses: 11
    Dernier message: 04/04/2007, 16h00
  2. [FLASH MX] Position y relative et absolue
    Par abenhass dans le forum Flash
    Réponses: 12
    Dernier message: 29/05/2006, 12h32
  3. position relative, position absolue.....?
    Par manutudescends dans le forum Balisage (X)HTML et validation W3C
    Réponses: 7
    Dernier message: 07/02/2006, 13h35
  4. popup et position relative
    Par Shea13 dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 26/11/2005, 00h05
  5. position() relative au noeud courant
    Par luta dans le forum XSL/XSLT/XPATH
    Réponses: 2
    Dernier message: 09/09/2004, 17h38

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