Discussion :

[AurelBUD]

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;
   }

[cynik]

Surement le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

position:relative;

ou bien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

position:absolute

A moins que ce ne soit hérité d'autres éléments...

[AurelBUD]

J'ai justement essayé de la placer dans le conteneur et dans la class logo mais les deux ne marchent pas :/

[rapathonyk]

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

[AurelBUD]

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)

[rapathonyk]

pour qu'on soit clair post le bout du code html que t'utilises (ou au moins la partie intéressante..)

[AurelBUD]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

float : right;

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...

[Ricou13]

Salut,

En tout cas, utiliser left ou top si le div n'est pas positionné, cela ne sert à rien.

[gibigue]

Cette solution marche, certe, mais j'aimerais enlever le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

float : right;

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.

[AurelBUD]

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