décalage positionnement div css

**omariovich** · 24/12/2008, 10h41

Bonjour,
j'ai eu un petit problème lors du montage de ma page, et ça me prends tout mon temps pour le régler mais je n'arrive pas,
le but c d'arriver à faire une page telle que celle que je nomme but.jpg(en pieces jointes) j'ai fait un ficheir css et un html pour y arriver mais il y'a toujours des problème de marge et positionnement qui subsistent.
pouvez vous me filer un coup de main svp?
Merci d'avance.

ci joints les fichiers css html la page que j ai monté(ma page.jpg) et le page but(but.jpg)

**islyoung2** · 24/12/2008, 10h44

Salut, tu dois être un peut plus claire sur ton problème, car on ne peut pas t'aider rien qu'on ne voyant des images muette, balance un peut de ton code html et css, (la partie où tu pense qu'il y a problème).

**Macmillenium** · 24/12/2008, 11h18

Bonjour,

Il manque training.css dans tes PJ.

**omariovich** · 24/12/2008, 11h23

tous les fichiers y sont y compris les css et html

**Macmillenium** · 24/12/2008, 11h41

Le principe de ta mise en page n'est pas bon.
Je serais toi je ferais 2 divisions "right" pour englober l'ensemble des blocs gauche et "content" pour l'ensemble des blocs droits.
Un truc du genre

Code :

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

1
2
3
 
#content { width:600px; float:left; }
#right { width:300px; float:left; margin-left:10px; }

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns ="http://www.w3.org/1999:xhtml" xml:lang="fr"lang="fr">
<head>
...
<div id="right">
     <div class="contenu1">blabla</div>
     <div class="contenu1">blabla</div>
     <div class="contenu1">blabla</div>
</div>
 
<div id="content">
     <div class="contenu2">blabla</div>
     <div class="contenu2">blabla</div>
     <div class="contenu2">blabla</div>
</div>

Facile à gérer par la suite

**omariovich** · 24/12/2008, 16h40

d'accord je vais essayer ça et je vous réponds
Merci

**GihefBey** · 25/12/2008, 00h04

Bonjour,

L'impression que donne l'image qui correspond à ce que tu cherches c'est que c'est tracé au cordeau et figé.

Pour faire ça, le plus précis serait d'utiliser des positionnements en absolute.

Par exemple, un début

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Un titre</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="proposition.css">
</head>
<body>
  <div id="conteneur">
    <div class="bloc haut gauche" id="h_gauche">
      <p>bloc haut gauche h_gauche</p>
    </div>
    <div class="bloc haut droite" id="h_droite">
      <img class="image" src="vache2.png" alt="la vache" />
      <p>bloc haut droite h_droite</p>
    </div>
<!--    <div class="bloc"></div>
    <div class="bloc"></div>
    <div class="bloc"></div>
    <div class="bloc"></div>
    <div class="bloc"></div>
-->
    <div class="bloc bas gauche">
      <img class="image" src="vache2.png" alt="la vache" />
      <p>bloc bas gauche</p>
    </div>
    <div class="bloc bas centre">
      <p>bloc bas centre</p>
    </div>
    <div class="bloc bas droite">
      <p>bloc bas droite</p>
    </div>
  </div>
</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
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
html, body {
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #fff;
  color : #712934;
  }
#conteneur {
  position: relative;
  margin: 0 auto;
  width: 616px;
  height: 730px;
  text-align: left;
  border : 1px solid #1e90ff;
  background: #1e90ff url(but.jpg) no-repeat 0 0;
  font-family: 'Trebuchet MS', Verdana, sans-serif;
  }
 
.bloc {
  position : absolute;      
  background: transparent url(marron.png) repeat-x 0 0;
  width: 154px;
  height : 178px;
  }
 
.haut {
  top : 16px;
  }
.milieu {
  }
.bas {
  bottom : 16px;
  }
 
.gauche {
  left : 12px;
  }
.centre {
  left : 186px;
  width : 246px
  }
.droite {
  right : 12px;
  }
 
#h_gauche {
  width : 418px;
  height : 128px;
  }
#h_droite {
  height : 128px;
  }
 
.image {
  float : left;
  margin : 32px 4px 4px 10px; 
  }
 
p {
  margin : 32px 10px 10px;
  font-size : .8em;
  }
img {
  border : 1px solid #000;
  }

-

**summer_moon** · 13/01/2009, 12h40

bonjour les amis, je suis nouvelles au forum et j'espère que vous m'apporterez de l'aide et de même pour moi, bon j'ai un problème concernant une mise en page que j'ai divisé par les div, mais malheureusement,lorsque j'affiche la page il y'a un décalage qui dépend de chaque pc, voilà en pièce jointe mon fichier html et mon fichier css
merci bcp

**devyan** · 13/01/2009, 14h55

Bonjour,

Il est préférable de ne pas "mélanger" les sujets.

Merci de faire un sujet spécifique pour cette nouvelle demande

décalage positionnement div css

Positionnement en CSS

Discussions similaires

Partager

Partager