[DIV] Mise en page

**glober62** · 31/12/2008, 14h34

Bonjour à Tous,

Je souhaiterai vous exposer un problème avec une syntaxe CSS.

Je réalise un site avec une charte graphique au format JPEG.

Sur cette charte graphique, je dois créer différents blocs ; ceux-ci contiennent :

Le menu sur le côté gauche (en spry ou css)
La zone de texte au centre de la fenêtre (en css ou html+)
Le pied (mentions légales, plan, concepteur) au centre en bas de la page (en css ou html+)

J'arrive à centrer ma charte.

Aussi, lorsque j'insère mes blocs (menu, centre et pied), mon bloc menu est bien aligné à gauche sans texte à l'intérieur. Dès qu'il y a du contenu (texte ou spry ou css), celui-ci n'est plus aligné.

De même pour les blocs centre et pied.

Ceci quelque soit le navigateur.

Quelqu'un aurait-il un support ou un peu de temps pour m'expliquer.

Je propose un échange de services.

Merci d'avance de vos réponses,

Cordialement,

**GihefBey** · 31/12/2008, 21h03

Bonjour,

L'échange de base que je te propose est celui du code qui te pose problème.
Sans lui, on ne peut que suppoer. C'est-à-dire parler dans le vide.
Donne-nous le code HTML et CSS de ta page.
Ou mieux, une adresse web vers celle-ci.

En contre-partie, nos propositions pour le modifier.

-

**glober62** · 01/01/2009, 16h42

Bonjour,

Merci pour ta réponse.

Le menu devrait être aligné à la verticale entre la planête et le panneau.

Le texte doit normalement être positionné dans la zone blanche.

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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Famille Lecoutre - Bienvenue à la Ferme de La Lande</title>
<style type="text/css">
    <!--
    body {
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
    	background: #666666;
    	margin: 0; /* il est conseillé de mettre à zéro la marge et le remplissage de l'élément body, pour tenir compte des différentes valeurs par défaut des navigateurs */
    	padding: 0;
    	text-align: center; /* ce paramétrage centre le conteneur dans les navigateurs IE 5.x. Le texte est ensuite aligné à gauche (valeur par défaut) dans le sélecteur #container */
    	color: #000000;
    }
    .oneColFixCtr #container {
    	width: 800px;  /* paramétrage de la largeur à 20 pixels de moins que le plein écran (800 pixels) pour tenir compte de l'habillage du navigateur et éviter l'apparition d'un ascenseur horizontal */
    	background: #FFFFFF;
    	margin: 0 auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
    	border: 1px solid #000000;
    	text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
    }
    .oneColFixCtr #mainContent {
    	padding: 0 20px; /* ne pas oublier que le remplissage est l'espace à l'intérieur du cadre de l'élément div, alors que la marge est l'espace à l'extérieur de celui-ci */
    }
#apDiv1 {
	position:absolute;
	width:369px;
	height:437px;
	z-index:1;
	left: 345px;
	top: 97px;
	padding-left: 100px;
	padding-top: 25px;
}
.Style1 {
	font-size: small;
	font-family: Arial, Helvetica, sans-serif;
	color: #312c1b;
}
.Style2 {
	font-size: x-large;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #809f2a;
}
.Style3 {
	font-size: x-large;
	font-family: Arial, Helvetica, sans-serif;
	color: #312c1b;
}
.Style4 {color: #809f2a}
.Style5 {font-size: small; font-family: Arial, Helvetica, sans-serif; color: #e68516; }
#apDiv2 {
	position:absolute;
	width:136px;
	height:115px;
	z-index:2;
	left: 63px;
	top: 260px;
}
    -->
    </style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Style6 {
	color: #312c1b;
	font-weight: bold;
}
#apDiv3 {
	position:absolute;
	width:315px;
	height:19px;
	z-index:3;
	left: 277px;
	top: 610px;
	margin-left: 100px;
}
.Style7 {font-size: x-small}
-->
</style>
</head>
 
<body class="oneColFixCtr">
 
    <div id="apDiv2">
      <ul id="MenuBar1" class="MenuBarVertical">
        <li>
          <div align="left"><a href="index.html" class="Style6">Accueil</a> </div>
        </li>
        <li>
          <div align="left"><a href="gites.html" class="Style6">Nos G&icirc;tes</a></div>
 
        </li>
        <li>
          <div align="left"><a href="centre.html" class="Style6">Le Centre Equestre</a> </div>
        </li>
        <li>
          <div align="left"><a href="contact.html" class="Style6">Contact</a></div>
        </li>
 
      </ul>
    </div>
<div id="container">
      <div id="apDiv1">
        <p align="center" class="Style2">Bienvenue sur le site de </p>
        <p align="center" class="Style3">La Ferme de la L<span class="Style4">a</span>nde</p>
        <p align="justify" class="Style1">Au coeur du village de Rinxent, Marie Louise, Marie Hélène et Stéphane vous accueillent pour une étape inoubliable à la campagne. Située entre Calais et Boulogne, à 3 kms de Marquise, la Ferme de la Lande vous propose des promenades à cheval et des locations de gîtes ruraux.</p>
 
        <p align="justify" class="Style1">Havre de calme et de verdure, la Ferme de la Lande offre un point de départ idéal pour vos escapades à cheval. Guidés par nos précieux conseils, vous pourrez découvrir tous les trésors de la région Nord Pas-de-Calais.</p>
        <p align="right" class="Style5">Nous vous souhaitons une agréable visite !</p>
        <table width="191" border="0" align="center">
          <tr>
            <td><img src="images/logobienvenue.jpg" width="70" height="79" /></td>
            <td><img src="images/logogite.jpg" width="78" height="79" /></td>
          </tr>
        </table>
 
        <p align="right" class="Style5">&nbsp;</p>
  </div>
  <div class="Style7" id="apDiv3"><a href="plan.html">Plan du site</a> - <a href="mentions.html">mentions légales</a> - </div>
<div id="mainContent">
        <h1 align="center"><img src="images/master.jpg" width="760" height="600" /></h1>
 
      <!-- fin de #mainContent --></div>
    <!-- fin de #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

Meilleurs voeux à vous tous,

Merci de vos conseils,

**Deallyra** · 01/01/2009, 17h59

Bonjour,

Voici qui devrait t'aider à comprendre comment faire ta mise en page

Ensuite, je te conseillerai vivement de séparer ton CSS de ta page HTML.
Il peut en être de même pour ton Javascript.

Enfin, indentes ton code de manière à ce que chaque bloc soit aisément identifiable.

**GihefBey** · 01/01/2009, 18h32

Envoyé par glober62

Le menu devrait être aligné à la verticale entre la planête et le panneau.

D'accord.
Mais, sans voir "les" images, difficile de répondre.
Un lien serait vraiment plus utile.

-> Deallyra
Il a choisi une mise en page avec absolute.
Ça doit correspondre à des positions sur l'image de fond.

<edit>
Je crois que je viens de comprendre.

Place le apDiv2 (qui pourrait s'appeler menu) dans le container.
Ajoute un position : relative; au .oneColFixCtr #container {
Adapte les positionnements.
</edit>

-

**glober62** · 02/01/2009, 14h26

Bonjour,

Il n'y a qu'une image de fond.

Que conseillez vous dans ce cas là ?

Faire la découpe de l'image en séparant les différents blocs en différentes images ?

ou

Créer des blocs invisibles ?

J'ai également mis les fichiers dans ce message.

Nom : master.jpg
Affichages : 70
Taille : 117,8 Ko

Nom : master.jpg
Affichages : 70
Taille : 117,8 Ko

index.html

Merci de vos réponses

**GihefBey** · 02/01/2009, 15h14

Je ne peux que te répéter cette proposition.

Envoyé par GihefBey

Place le apDiv2 (qui pourrait s'appeler menu) dans le container.
Ajoute un position : relative; au .oneColFixCtr #container {
Adapte les positionnements.

Essaye-la.
Elle fonctionne (lien actif temporairement) sans avoir besoin de découper l'image.

À quoi j'ajoute ces précisions

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
.oneColFixCtr #container {
position : relative;
  width: 800px;
height: 600px;
background: #fff url(master.jpg) no-repeat 0 0;
  margin: 0 auto;
  border: 1px solid #000000;
  text-align: left;
  }
#menu {
  position: absolute;
/*  width: 136px;
  height: 115px;*/
  z-index: 2;
  left: 63px;
top: 310px;
  }
#menu ul {
list-style : none;
margin: 0;
padding: 0;
  }
#menu li a {
color: #312c1b;
font-weight: bold;
  }
#corps {
  position:absolute;
  width:369px;
  height:437px;
  z-index:1;
  left: 345px;
  top: 97px;
/*  padding-left: 100px;*/
  padding-top: 25px;
  }

Code html :

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

1
2
3
4
5
6
7
8
    <div id="menu">
      <ul id="MenuBar1" class="MenuBarVertical">
        <li><a href="index.html">Accueil</a></li>
        <li><a href="gites.html">Nos G&icirc;tes</a></li>
        <li><a href="centre.html">Le Centre &Eacute;questre</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>

Après avoir supprimé le <div id="mainContent">

"km" est invariable.

-

[DIV] Mise en page

CSS

Vue hybride

Discussions similaires

Partager

Partager