Placer des éléments autour d'un autre

**Fr33dom** · 13/10/2010, 16h04

Bonjour,

voici le sujet d'aujourd'hui :

j'ai une image centrale, et je voudrai mettre des textes autour de celle ci.
avec comme données :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
#logo1 {
    width:551px;
    height:231px;
    margin: auto;
    margin-top: 100px;
}
 
#menu1 {
	position:relative;
	width:100px;
	height:AUTO;
	top: 0px;
	left: 0px;
}
#menu2 {
	position:relative;
	width:323px;
	height:AUTO;
	top: 0px;
	left: 0px;
}
#menu3 {
	position:relative;
	height:AUTO;
	top: 0px;
	left: 0px;
	width: 150px;
}
#menu4 {
	position:relative;
	width:223px;
	height:AUTO;
	top: 0px;
	left: 0px;
}

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
22
23
24
 
<body>
<div id="logo1">
  <img src="images.png" alt="Logo" />
  <div id="menu1">
      <h2>menu1</h2>
  </div>
  <div id="menu2">
      <h2>menu2</h2>
  </div>
  <div id="menu3">
    <h2>menu3</h2>
  </div>
  <div id="menu4">
      <h2>menu4</h2>
  </div>
  <div id="menu5">
      <h2>menu5</h2>
  </div>
  <div id="menu6">
      <h2>menu6</h2>
  </div>
</div>
</body>

j'aimerai savoir si je m'y prend bien dans un premier temps (je débute), ensuite j'aimerai savoir pourquoi ils sont tous l'un à la suite des autres et non l'un sur l'autre.

par avance merci

**polymorphisme** · 13/10/2010, 16h57

Bonjour,

dans un premier temps, tu dispose des tutoriels sur Les mises en pages avec les feuilles de styles CSS. Ils devraient éclaircirs un certains nombres de points.

**Fr33dom** · 13/10/2010, 18h45

je ne doit pas être doué, je ne vois pas comment faire.

une tite piste svp

**Fr33dom** · 14/10/2010, 11h59

et bien j'ai finalement réussi
j'ai eut une révélation ce matin ^^

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
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
#menu1 {
    width:100px;
    height:30px;
    top: -270px;
    position: relative;
    margin: auto;
    text-align: center;
}
#menu2 {
    width:265px;
    height:30px;
    top: 37px;
    left: -447px;
    position: absolute;
    text-align: right;
}
#menu3 {
    width:223px;
    height:30px;
    top: 38px;
    left: 297px;
    position: absolute;
    text-align: left;
}
#menu4 {
    width:223px;
    height:30px;
    top: 242px;
    left: 326px;
    position: absolute;
    text-align: left;
}
 
#menu5 {
    width:229px;
    height:30px;
    top: 289px;
    left: -80px;
    position: absolute;
}
#menu6 {
    width:140px;
    height:30px;
    top: 244px;
    left: -363px;
    position: absolute;
    text-align: right;
}

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
22
23
24
25
26
27
28
    <!-- start page -->
    <div id="logo1">
        <img src="Images/Logo.png" alt="Logo"/>
 
        <div id="menu1">
            <h2>menu1</h2>
 
            <div id="menu2">
                <h2><a href="menu2.html"></a>menu2</h2>
            </div>
 
            <div id="menu3">
                <h2><a href="menu3.html"></a>menu3</h2>
            </div>
 
            <div id="menu4">
                <h2><a href="menu4.html">menu4</a></h2>
            </div>
 
            <div id="menu5">
                <h2><a href="menu5.html">menu5</a></h2>
            </div>
 
            <div id="menu6">
                <h2><a href="menu6.html">menu6</a></h2>
            </div>
        </div>
    </div>

Placer des éléments autour d'un autre [XHTML 1.0]

HTML

Vue hybride

Discussions similaires

Partager

Partager