Positionner un div dans un TD

Version imprimable

Bonjour,

J'ai un tableau avec une image de fond et dans un td un div pour afficher un texte à moitier transparent

Ce qui donne

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
 
</title>
    <script type="text/javascript" src="/Scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/Scripts/jquery-ui-1.10.2.custom.min.js"></script>
    <script type="text/javascript" src="/Scripts/ImgDefilante.js" language="jscript"></script>
    <script type="text/javascript" src="/Scripts/ModalPopupResult.js"></script>
    <link href="/Styles/custom-theme/jquery-ui-1.10.2.custom.min.css" rel="stylesheet" type="text/css" /><link href="/Styles/Site.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
    <form name="aspnetForm" method="post" action="Localisation.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkw4Ih5xLhrM7xRiYs4QVvGnL+bLg=" />
</div>
 
    <div>
        <div class="page">
            <div class="header">
                <div id="Login">
                    &nbsp;
                </div>
                <center>
                    <img src="/Images/palmier.jpg" alt="" /><br />
                    <br />
                    <div id="bandeau" style="position: relative; width: 800px; height: 120px; overflow: hidden;">
                    </div>
                </center>
            </div>
            <div class="main">
                <br />
                <center>
                    <ul id="ctl00_NavigationMenu" class="menu_deroulant">
                        <li><a href="/Accueil.aspx" title="">Villa <b>Blanche</b></a></li>
                        <li><a href="/Client/Details.aspx" title="">Descriptif</a></li>
                        <li><a href="/Client/Loisir.aspx" title="">A proximité</a></li>
                        <li><a href="/Client/Reservation.aspx" title="">Tarifs et disponibilités</a></li>
                        <li><a href="/Client/Localisation.aspx" title="">Localisation</a></li>
                        <li><a href="/Client/Avis.aspx" title="">Avis</a></li>
                    </ul>
 
    <table class="Loc">
        <tr>
            <td>
                <div class="LocAdresse">
                    <div class="LocAdresseTransp">
                    </div>
                    123, rue ParIci
                    <br />
                    98745 St Anne
                    <br />
                    Guadeloupe
                </div>
            </td>
        </tr>
    </table>
 
            </div>
            <div class="clear">
            </div>
            <br />
        </div>
        <div class="footer">
            <a href="/Accueil.aspx">Accueil</a>- <a href="/MentionLegale.aspx">Mentions légales</a>-
            <a href="/Contact.aspx">Nous contacter </a>
        </div>
    </div>
    <div id="MsgBack" title="Download complete">
        <div class='subcontent-box' id='Errortitre'>
        </div>
    </div>
    </form>
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.Loc
{
    width: 750px;
    height: 500px;
    background-image: url(/Images/Localisation.png);
    background-repeat: no-repeat;
}
 
.LocAdresseTransp
{
    background-color: #534D4D;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.5;
}
 
.LocAdresse
{
    color:#FCF5E9;
    position: relative;
    z-index: 10;
    width:200px;
}

Mais mon div reste au milieu de la hauteur et collé sur le bord gauche.
Je voudrai le positionner à un endroit précis de mon image.
Quelqu'un peut-im me dire comment faire

09/05/2013, 22h35
rodolphebrd
Bonjour,

Je suppose que vous parlez de ces DIV:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 .LocAdresseTransp { } .LocAdresse { color:#FCF5E9; background-color: #534D4D; width:200px; opacity:0.5; margin-left:auto; margin-right:auto; }
J'ai remodelé votre code en enlevant les positions absolute et relative qui ne servent à rien et j'ai positionné votre DIV au milieu par choix personnel...

Merci
J'étais parti d'un code trouvé sur le forum sans le remettre en cause, car il faisait un peu près ce que je voulais.

J'ai silmplifié le code

Code:

1
2
3
4
5
6
7
8
9
 <div class="Loc">
        <div class="LocAdresse">
            123, rue ParIci
            <br />
            98745 St Anne
            <br />
            Guadeloupe
        </div>
    </div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*Localisation*/
.Loc
{
    width: 750px;
    height: 500px;
    background-image: url(/Images/Localisation.png);
    background-repeat: no-repeat;
 
}
 
.LocAdresse
{
    color:#FCF5E9;
    z-index: 10;
    width:200px;
    color:#FCF5E9;
	background-color: #534D4D;
    width:200px;
	opacity:0.5;
	margin-top:20px;
}

Mais mon div LocAdresse ne s'est pas décalé. Il reste figé en haut maintenant

10/05/2013, 13h25
rodolphebrd

Expliquez-moi ce que vous désirez faire exactement.
Avec un schéma si possible, sinon on va tourner en rond.
10/05/2013, 13h52
Pelote2012

J'ai un premier div avec une carte en background

Je veux afficher une adresse mais le positonner sur ma carte à un endroit approprié Ex: 20px du haut et 60px du bord droit

Votre bloc se positionne sans problème !:

Code:

1
2
3
4
5
6
7
8
9
10
11
.LocAdresse
{
    color:#fff;
    width:200px;
	background-color:#ccc;
    width:200px;
	/*  <cite>Ex: 20px du haut et 60px du bord droit </cite>*/
	float:right;
	margin-top:20px;
	margin-right:60px
}

Z-index et opacity ne servent à rien.

10/05/2013, 20h12
Pelote2012

Merci

C'est le float right qui me manquait :ccool: