Image en dehors d'une div

**ric009** · 12/01/2014, 23h53

Bonjour,
je rencontre un problème avec une image qui ne rentre pas dans ma div content !

voici mon code :

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
 
<div id="photo_nom">
 
        <div id="photo">
        <img src="images/20140112.png" width="200" height="150" />
        </div>
 
 
        <div id="nom_prenom">
        <h1 id="titre_nom_prenom">xx xx</h1>
        </div>
 
<br /><br /><br />
</div>

je suis obligé de mettre des </br> pour que mon content couvre toute l'image

voici le css de mon content :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
 
#content{
margin-top:5%;
margin-bottom:5%;
margin-left:12%;
margin-right:10%;
height:100%;
min-width:1024px;
width:1000px;
background-color:#7c6b5e;
}

Cela peut venir d'une erreur dans mon content ?

Merci par avance

**Candygirl** · 13/01/2014, 07h40

Bonjour,

Le code que tu donnes est insuffisant puisqu'il ne permet pas d'observer le problème.

L'hypothèse la plus probable est que tu aies fait flotter #photo, auquel cas tu devrais consulter cette partie de la faq.

**ric009** · 13/01/2014, 20h34

Merci pour la réponse ! j'ai ajouter un overflow c'étais bien à cause d'un float de la photo mais j'ai le même problème pour mon menu qui s'affiche en bas du content alors que j'ai mis un overflow sur le content voici le code :

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
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
#content{
margin-top:5%;
margin-bottom:5%;
margin-left:12%;
margin-right:10%;
height:100%;
min-width:1024px;
width:1000px;
background-color:#7c6b5e;
}
 
#nom_prenom{
margin-left:30%;	
}
 
#photo{
float:left;
}
 
#photo_nom{
margin-left:5%;
overflow:hidden;
}
 
 
#titre_nom_prenom{	
font-family:Arial, Helvetica, sans-serif;
font-size:40px;
}
 
#presentation{
font-size:25px;
margin-left:34%;
margin-top:-10%;
}
 
 
ul{
	margin-left:12%;
    display: table;
    width: 1025px;
    margin-bottom:3%;
    padding: 0;
    background:#a2c8bf;
    background:#a2c8bf;
    background:#a2c8bf;
    background:#a2c8bf;
    background:#a2c8bf;
    background:#a2c8bf;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
                0 3px 5px rgba(0, 0, 0, .2),
                0 5px 10px rgba(0, 0, 0, .2),
                0 20px 20px rgba(0, 0, 0, .15);
overflow:hidden;	
}
 
 
ul li{
    display: table-cell;
}
 
ul li a{
    display: block;
    text-align: center;
    color:#000; 
    text-decoration: none;
    padding: 8px 40px 17px 40px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
 
	box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset , 
                0 -1px 0 hsl(210, 100%, 32%) inset, 
                0 -2px 0 hsl(210, 100%, 38%) inset, 
                0 -3px 0 hsl(210, 100%, 44%) inset, 
                0 -4px 0 hsl(210, 100%, 50%) inset, 
 
	transition: padding .3s, background:#003535;
	position: relative;
 
 
}
 
ul li:first-child a{
    border-radius: 3px 0 0 3px;
}
ul li:last-child a{
    border-radius: 0 3px 3px 0;
}
 
ul li a:hover, 
ul li a:focus{
    background: rgba(255,255,255,.2);  
}
 
ul li a:active{
    background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1)); 
    box-shadow: 0 0 2px rgba(0,0,0,.3) inset;
}
 
ul li a::before{
    content: '';
    position: absolute;
    left: 50%;
    bottom: 9px;
    margin-left: -2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background:#000; 
}
 
ul li a:hover::before,
ul li a:focus::before{
    background: white;
    box-shadow: 0 0 2px white, 
                0 -1px 0 rgba(0, 0, 0, .4);
}

voici mon html que j'ai include dans la div 'content'

Code html :

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

1
2
3
4
5
<ul>
  <li><a href="index.php?id=menu1" title="#">menu1</a></li>
  <li><a href="index.php?id=menu2" title="#">menu2</a></li>
  <li><a href="index.php?id=menu3" title="#">menu3</a></li>
</ul>

Merci par avance pour votre aide.

Invité · 13/01/2014, 21h10

Bonjour,
on ne voit toujours pas dans le code html la div "content" !

Peux-tu mettre un code plus complet ??

**ric009** · 13/01/2014, 21h20

voila mon content

Code php :

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
<body>
 
<div id="groupe">
<div id="content">
<?php 
include("hautpage.php"); 
echo '<br/>';		
include ("contenu.php"); 
echo '</div>';
include("menu.php");
echo '</div>';
echo '<div id="piedpage" align="center">';
include ("piedpage.php");
 
?>
</div>
</div>	
 
</body>

Invité · 13/01/2014, 21h37

Comme tu es ici dans le forum CSS, le PHP n'a pas lieu d'être...

Affiche le code html généré : "Ctrl" + "U".
(sinon, on ne peut pas tester...)

**ric009** · 13/01/2014, 21h48

Voilà toute ma page :

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
<body>
 
<div id="groupe">
<div id="content">
 
<div id="photo_nom">
        <div id="photo">
        <img src="images/20140" width="200" height="150" />
        </div>
        <div id="nom_prenom">
        <h1 id="titre_nom_prenom">prenom nom</h1>
        </div>
</div><br/><div id="presentation">
<a>Date de naissance : jj/mm/aaaa</a><br />
<a>Adresse : xx, France</a><br />
<a>Email : xx.xx@gmail.com</a><br />
 
</div>
</div><ul>
 
  <li><a href="index.php?id=menu1" title="#">menu1</a></li>
  <li><a href="index.php?id=menu2" title="#">menu2</a></li>
  <li><a href="index.php?id=menu3" title="#">menu3</a></li>
 
</ul></div><div id="piedpage" align="center"></div>
</div>	
 
</body>

Invité · 13/01/2014, 21h53

Voilà ce que ça donne : http://codepen.io/jreaux62/pen/kcKxA
Il manque l'URL absolue (réelle) de l'image...

Au fait :

Code :

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

1
2
3
4
5
6
    background:#a2c8bf;
    background:#a2c8bf;
    background:#a2c8bf;
    background:#a2c8bf;
    background:#a2c8bf;
    background:#a2c8bf;

UNE fois suffit

**ric009** · 13/01/2014, 22h04

Merci pour tes remarques

mais j'ai toujours le même problème mon menu est en dehors du content malgré mon overflow comment expliquer ça ?

Invité · 13/01/2014, 22h06

Sur quel navigateur ?
(poste une copie d'écran aussi)

Sur Firefox, je ne vois pas de problème particulier...
(à quoi ça doit ressembler ?)

**ric009** · 13/01/2014, 22h20

Voici une copie d'écran ! Je veux que la couleur du 'content' passe sous le menu, ou dit autrement que le menu soit dans le 'content'

Invité · 13/01/2014, 22h46

Tu as un </div> en trop, je pense.

N.B. Pense à faire une bonne indentation du code !
Tu verras plus clairement les imbrications de <div>....

**ric009** · 13/01/2014, 22h53

c'est à dire? une div non fermée ou trop de div? le nombre de div impact sur la page?

Invité · 13/01/2014, 22h58

http://codepen.io/jreaux62/pen/kcKxA

**ric009** · 14/01/2014, 20h30

Merci pour ta réponse le résultat correspond à ce que je veux mais je n'arrive pas à comprendre ce que tu as modifié dans le code ... ?

Image en dehors d'une div

CSS

Discussions similaires

Partager

Partager