décalage positionnement div css

Version imprimable

24/12/2008, 10h41
omariovich

4 pièce(s) jointe(s)

décalage positionnement div css

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)
24/12/2008, 10h44
islyoung2

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).
24/12/2008, 11h18
Macmillenium

Bonjour,

Il manque training.css dans tes PJ.
24/12/2008, 11h23
omariovich

re

tous les fichiers y sont y compris les css et html

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:

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

Code:

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 ;)

24/12/2008, 16h40
omariovich

re

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

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:

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:

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;
  }

13/01/2009, 12h40
summer_moon

2 pièce(s) jointe(s)

probème de décalage de div

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
13/01/2009, 14h55
devyan

Bonjour,

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

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