Discussion :

[gup]

Bonjour,

Voilà mon problème: je voudrais placer un texte en bas à droite d'une boite

Code :

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

1
2
3
4
5
 
<div id="main">
...
<div class="nav"><a href="page2.html"> Suivant &raquo;</a></div>
</div>

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
 
#main {
  margin-left: 260px;
  margin-top: 0px;
  width: 68%;
  height:80%;
  position: absolute;
  background-image:url(trait_bas2.png);
  background-position:bottom;
  background-repeat:no-repeat;
}
 
.nav {
  float:right;
}

Quelqu'un pourrait-il m'indiquer comment je pourrais faire s'il vous plait ?

[BoudBoulMan]

Je connais une méthode mais malheureusement, on doit spécifier une hauteur en pixels (en non en pourcentage) et elle ne fonctionne que sous firefox

Ce que je fais, je donne une hauteur à "main" et j'y place tout au-dessus un flottant qui va avoir une hauteur qui est 20px plus petite que celle de "main", et il suffit d'indiquer l'attribut css "clear:both" à la classe "nav"

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
#main {
  margin-left: 260px;
  margin-top: 0px;
  width: 68%;
  height:200px; /* faut spécifier une taille en px */
  position: absolute;
  background-image:url(trait_bas2.png);
  background-position:bottom;
  background-repeat:no-repeat;
}
 
.spacer{
  float: left;
  height: 180px; /* un peu moins grand que main */
}
 
.nav {
  float:right;
  clear: both; /* on rajoute ça pour que le contenu de nav s'affiche en dessous de spacer */
}

Code :

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

1
2
3
4
5
<div id="main">
<div class="spacer"></div>
...
<div class="nav"><a href="page2.html"> Suivant &raquo;</a></div>
</div>

[Strix]

Bonjour bonjour

T'as pas trouvé plus compliqué BoudBoulMan ?

Voilà à quoi doit ressembler .nav :

Code :

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

1
2
3
4
5
6
.nav {
	float:right;
	position:absolute;
	bottom:0px;
	right:0px;
}

Bonne journée

[BoudBoulMan]

ha ouais pas mal le position:absolute

Bon, je vais aller me cacher...