positionner une image par rapport à un menu

**Jo94230** · 31/07/2013, 00h06

Bonjour, j'ai un petit souci que j'arrive pas à régler alors que ça doit être très simple j'en suis certain ...

Je n'arrive pas à bien caler mon image à droite de mon menu... J'ai tenté la position: absolue / Fixed et cela déforme mon image; la relative ne la bouge pas... Un problème dans mon code certainement?

**rodolphebrd** · 31/07/2013, 07h37

Bonjour,

vous avez besoin de connaître les bases du positionnement : la FAQ CSS "le positionnement"

N'hésitez pas à utiliser le bouton # pour postez votre code.

voici une solution pour votre problème :

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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<style type="text/css">
@font-face {
        font-family: "Ms Serif";
        src: url('../font/serif.ttf');
}
.header {
        margin: 0 0 0 60px;
}
.menu {
        color: rgb(0, 0, 0);
    font-family:: MS Serif, New York, serif;
        font-size: 12px;
        height: 270px;
        line-height: 18px;
        margin: 10px;
        top: 150px;
        width: 217px;
        text-decoration: none;
        float: left;
}
.menu li {
        margin-top: 5px;
        display: block;
}
.menu a {
        text-decoration: none;
}
.home img {
        display: block;
        height: 30%;
        width: 30%;
        float: left;
}
</style>
</head>
 
<body>
<div class="header"><a href="#"><img src="img/logo.png" height="150" width="150" /></a></div>
<div class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">NEWFACE</a></li>
    <li><a href="#">Girl in town</a></li>
  </ul>
</div>
<div class="home"> <img src="http://lorempixel.com/300/300"/> </div>
</body>
</html>

**Jo94230** · 31/07/2013, 11h07

Merci beaucoup, croyez moi bien je cherche beaucoup avant de poster ici...
Maintenant j'ai un autre souci, je n'arrive pas à placer mes images sur une même ligne horizontale... J'ai essayé beaucoup de choses sans résultat.

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
 <!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 name="description" content="Thomas Broville fashion and portrait photographer">
<meta name="keywords" content="Thomas Broville, Fashion Photographer, www.matthieudelbreuve.com">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Thomas Brovilles Photographer</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
 
<body>
 
	<div class="header"><a href="http://thomasbroville.com"><img src="img/logo.png" height="200px" width="200px" /></a></div>
<div class="menu">
  <ul>
            	<li><a href="#">HOME</a></li>
                <li><a href="#">NEWFACE</a></li>
                <li><a href="#">Girl in town</a></li>
            </ul>
</div>
	<div class="images">
<img src="img/THOMASGRAPHIQUE.png"/>
<img src="img/Elena3.jpg"/>
	</div>
</body>
</html>

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
49
50
51
52
 @font-face { 	font-family: "Ms Serif"; 	src: url('../font/serif.ttf'); }
 
.header
{
display: block;
margin: 0 0 0 60px;
height: 100%;
width: 100%;
position: fixed;
}
 
.menu
{
color: rgb(0, 0, 0);
font-family:: MS Serif, New York, serif;
font-size: 16px;
height: 270px;
left: 40px;
line-height: 18px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
margin-top: 40px;
position: fixed;
top: 150px;
width: 217px;
z-index: 12;
text-decoration: none;
}
.menu li
{
margin-top: 8px;	
display: block;
}
 
 
.menu a
{
text-decoration: none;
}
 
.images img
{
display:inline;
padding:0 5px;
height: 35%;
width: 35%;
float: left;
margin-left: 320px;
margin-right: 100px;
margin-top: 0px
}

**Zalawy** · 31/07/2013, 23h23

Bonsoir,

Si j'ai bien compris ce que tu veux faire les images qui soient en position horizontale?
Ou bien,tu veux faire une image qui se place à droit de chaque index? Si c'est la dernière que tu as voulu,tu peux essayer d'utiliser un tableau.