Positionner un div dans un TD

**Pelote2012** · 09/05/2013, 21h28

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 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
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 css :

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

**rodolphebrd** · 09/05/2013, 22h35

Bonjour,

Je suppose que vous parlez de ces DIV:

Code css :

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

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

**Pelote2012** · 10/05/2013, 13h17

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 html :

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

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 css :

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
/*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

**rodolphebrd** · 10/05/2013, 13h25

Expliquez-moi ce que vous désirez faire exactement.
Avec un schéma si possible, sinon on va tourner en rond.

**Pelote2012** · 10/05/2013, 13h52

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

**rodolphebrd** · 10/05/2013, 15h01

Votre bloc se positionne sans problème !:

Code css :

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

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.

Positionner un div dans un TD

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager