Div qui se chevauchent lorsque l'on modifie le taille de la fenêtre

**surfeur2** · 03/09/2014, 18h40

Tout est dit dans le titre, comment éviter ce problème?

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
body {
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
}
 
a {
	text-decoration:none;
	color:#FFF;	
 
}
 
h3 { 
	line-height:10px;
 
}

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
<div id="logo" style="position:absolute; top:0px; left:49%; z-index:1;">logo</div>
<div id="gauche" style="width:50%; height:1500px; min-width:300px; background-color:#F90; float:left; position:absolute; top:0px; z-index:1">
    <div id="menu" style="position:relative; top:100px; width:40%; height:200px; left:0px; padding:5px; z-index:1" align="right">
    <h1>Titre</h1>
    <p>&nbsp;</p>
 
    <a href="#">
    <h3>Titre</h3></a>
    <a href="#"><h3>Contact</h3></a>
    <a href="#"><h3>Stages</h3></a>
    <a href="#"><h3>Service</h3></a>
    <a href="#"><h3>Historique</h3></a>
    <a href="#"><h3>Valeurs</h3></a>
    <a href="#"><h3>Presse</h3></a>
    <a href="#"><h3>Photos</h3></a>
    <a href="#"><h3>Liens</h3></a>
 
    </div>
 
</div>
 
<div id="droite" style="width:50%; min-width:300px; height:1500px; background-color:#0066FF; float:right; position:relative; top:-10px; z-index:1">
    <div id="contenu" style="float:right; background-color:#FFFFFF; color:#000000; width:60%; height:400px; min-width:60%; position:relative; top:70px; left:-100px; border: solid 1px #000000; border-radius:3px; padding:5px; z-index:1">
 
 
      <p><h2>Presentation</h2> </p>
      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </p>
      <p>&nbsp;</p>
 
    </div>
</div>

**Muchos** · 03/09/2014, 21h34

C'est l'usage abusif du positionnement absolu

Que pensez-vous de ceci ?

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
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
  <meta charset="UTF-8" />
  <title>Chacun sa place</title>
  <style type="text/css">
div {
  float: left;
  width: 50%;
  height: 1500px;
  background: orange;
}
#blue {
  position: relative;
  background: blue;
}
#blue p {
  position: absolute;
  top: 10%;
  left: 25%;
  width: 50%;
  background: gray;
}
</style>
</head>
<body>
  <div></div>
  <div id="blue">
    <p>foo</p>
  </div>  
</body>
</html>

Div qui se chevauchent lorsque l'on modifie le taille de la fenêtre

CSS

Discussions similaires

Partager

Partager