Conseil sur la conception de ma mise en forme

**gaya102** · 01/09/2009, 17h19

Bonjour

voila pour la page en question
j'ai mis les bordures pour voir toutes les cellules

http://www.lemondedegaya.fr/mariage.php

voila la ou il y a "fgfgdg" je voudrais mettre sur plusieurs images et que quand on cliques dessus une popup s'ouvre avec l'image plus grande.

D'après vous est ce qu'il faut que je remette un tableau dans un tableau avec des cellules ou je les met directement

Aussi je voudrais que la cellule ou il y a marqué faire part de mariage soit haute de 20px mais je n'y arrive pas.

Vous en pensez quoi?

merci d'avance de vos conseils.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>le monde de gaya et ses faire part</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <meta name="Description" content="Vos faire-part de naissance, mariage, remerciements, stickers et tableaux personnalisés qui vous correspondent le mieux ... Aide pour vos événements : mariage/pacs, communion, anniversaire ...">
	<meta name="keywords" content="faire, part, parts, faire-parts, faireparts, faire part, fairepart, mariage, deuil, deces, remerciement, union, naissance, fete, bebe, marie, ligne, en-ligne, online, original, artisanal, bapteme, papier, rare, unique, maries, creation, main, qualite, travail, soigne, soin, passion, invite, invitation, jubile, menu, remerciement, livre d'or" /><meta name="Robots" content="All">
<meta name="author" content="Thaon Sandrine">
<meta name="revisit-after" content="5 days">
 
<base href="http://www.lemondedegaya.fr">
		<link rel="stylesheet" href="menu.css" type="text/css" media="screen"/>
	    <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="page.css" />
		 <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="ie2.css" />
      <![endif]-->
 
</head>
 
   <body>
 
 
       <div id="unite">      
 
<div id="titre">   
 
 Le monde de Gaya
 
 </div>  
 <div id="texte">   
 
 Faire-part de mariage originaux et  personnalisés.   <br>
 
 </div>  
 
           <div id="menubas">
          <?php
include("menu.php");
?> 
 
           </div>
           <div> 
			<p class="texte2">
				</p>
			<p class="texte2">
				Chaque grand évènement mérite d'être annoncé avec originalité. Pour cela l'entreprise artisanale "le Monde de Gaya" est à votre disposition.
 
			</p>
			<br>
			<p class="texte2">
				Je vous propose deux façons différentes de choisir votre faire part étape par étape 
			En choisissant d'abord le visuel en adaptant le format, 
			En choisissant d'abord le format et ensuite le visuel
 
			</p>
		<br>
			<p class="texte2">
 
		Pour vos évènements, vous trouverez également les marque-places, menus, cartes de remerciements assortis à votre faire-part. 
 
</p>
 
			</div>
       </div>        
   </body>
</html>

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
body {
	background-color: #f7d8fc;
	font-family:Comic Sans MS, Times New Roman, Times, serif;
	font-style: italic;
}
 
img {
	border:0;
	vertical-align:middle;
}
 
a {
	color: #781d89;
	font-family:Comic Sans MS, Times New Roman, Times, serif;
 
	font-size: 15px;
	text-decoration: none;
	text-align: center;
} 
 
a:hover {
    color: #e365f6;
	font-family:Comic Sans MS, Times New Roman, Times, serif;
 
	font-size: 15px;
	text-decoration: none;
	text-align: center;
}
 
#unite {
	position:absolute;
	left:50%;
	margin-left:-490px;
	width: 980px;
	top:50%;
	margin-top:-271px;
	height: 542px;
	background-image : url("images/fond_page.jpg");
	background-repeat: no-repeat;
	border :2px solid black;
}
 
#titre{
    color: #b04cbf;
	font-family: Comic Sans MS, Times New Roman, Times, serif;
 
	font-size: 36px;
	text-decoration: none;
	text-align: center;
	position:absolute;
	top: 5px;
	left : 205px;
}
 
#texte{
    color: #7890d2;
	font-family: Comic Sans MS, Times New Roman, Times, serif;
 
	font-size: 17px;
	text-decoration: none;
	text-align: right;
	position:absolute;
	top: 65px;
	left: 585px;
 
 
}
 
 
.texte2{
    color: #7890d2;
	font-family: Comic Sans MS, Times New Roman, Times, serif;
 
	font-size: 16px;
	text-decoration: none;
	text-indent:30px;
	text-align: center;
	position:relative;
	top: 70px;
	left: 220px;
	width: 739px;
	overflow: auto;
	margin: 0 0 10px 0;
	}
 
#menubas {
	 margin-top: 108px;
	 float:right;
	 padding-right: 5px;
}
 
#contenu {
position: relative;
top: 140px;
vertical-align:middle;
border-collapse:separate;
width: 979px;
height: 400px;
}
 
td /* Toutes les cellules des tableaux... */
{
text-align: center; /* Tous les textes des cellules seront centrés*/
   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
   border: 1px solid black; /* ... auront une bordure de 1px */
}
#marge{
width: 200px;
font-size: 6px;
}
 
a.margetitre{
font-size: 15px;
 
font-weight: bold;
}
 
a.margetitre:hover{
font-size: 15px;
font-weight: bold;
}
 
#titrecontenu {
font-size: 17px;
color: #781d89;
text-align:left;
text-decoration: underline ;
height:10px;
 
}

Pour IE6

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
#contenu {
position: relative;
top: 3px;
vertical-align:middle;
border-collapse:separate;
width: 979px;
}
 
td /* Toutes les cellules des tableaux... */
{
text-align: center; /* Tous les textes des cellules seront centrés*/
   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
   border: 1px solid black; /* ... auront une bordure de 1px */
}
#marge{
width: 200px;
font-size: 6px;
}
 
a.margetitre{
font-size: 15px;
font-weight: bold;
color: #781d89;
}
 
a.margetitre:hover{
font-size: 15px;
font-weight: bold;
}
.texte2{
    color: #7890d2;
	font-family: Comic Sans MS, Times New Roman, Times, serif;
 
	font-size: 16px;
	text-decoration: none;
	text-indent:30px;
	text-align: center;
	position:relative;
	top:10px;
	left: 212px;
	width: 739px;
 
	overflow: auto;
	margin: 0 0 10px 0;
	}
#titrecontenu {
font-size: 17px;
color: #781d89;
text-align:left;
text-decoration: underline ;
height:10px;
 
}

Merci

**Damouille** · 02/09/2009, 08h21

quand on cliques dessus une popup s'ouvre avec l'image plus grande.

Les popup sont un peu old schools, de deplus certains navigateurs bloquent leur affichage (trop souvent utilise par le passe pour balancer des pubs).

Je te conseille plutot une lightbox, c'est quand meme plus classe. -> http://www.huddletogether.com/projects/lightbox2/

Concernant les tableaux si tu peux eviter d'en faire c'est toujours mieux.

**gaya102** · 02/09/2009, 08h59

justement je voudrais éviter d'en mettre comme je peux faire pour enlever le mien. Mon menu de gauche ma bloque.

**Damouille** · 02/09/2009, 09h12

Tu remplaces par des div et tu mets ta colonne de gauche en float:left comme ici

**gaya102** · 02/09/2009, 09h26

je vais essayer

on peut quand même leur indiquer des hauteur?ils doivent faire tant de hauteur et se trouver a tant de hauteur.

**gaya102** · 02/09/2009, 10h11

voila j'ai réussi maintenant faut le remplir

http://www.lemondedegaya.fr/naissance.php

Enfin non car je viens de voir que sous IE6 c'est le bordel

Pourquoi ca ne marche jamais pour les deux

**Damouille** · 02/09/2009, 10h18

C'est quand meme plus sympa ainsi. Tu viens de reduire de plus de la moitier la taille de tes pages.

Maintanant pour remplir continue de founier dans la gallerie css. Elle contient a priori tout ce dont tu as besoin.

**gaya102** · 02/09/2009, 10h24

bon voila c'est aussi rectifier pour ie6 j'ai l'impression de faire le site 2 fois lol

En tout cas merci pour ton aide

juste une dernière chose

comment on fait pour mettre des images les une à coté des autres et non pas les une en dessous des autres comme dans c'est le cas

**Damouille** · 02/09/2009, 10h33

Le tag <img> etant un element inline, les images devraient se mettre naturellement les unes a cote des autes.

Code :

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

1
2
3
4
5
6
7
<div class="gallerie">
  <img src="monimage.jpg" alt="text alternatif" />
  <img src="monimage2.jpg" alt="text alternatif" />
  <img src="monimage3.jpg" alt="text alternatif" />
  <img src="monimage4.jpg" alt="text alternatif" />
...
</div>

Si tu souhaites mettre les images dans des div afin d'avoir plus de possibilite au niveau du style, il te faudra un float.

Code :

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

1
2
3
4
5
6
7
8
<div class="gallerie">
  <div class="image"><img src="monimage.jpg" alt="text alternatif" /></div>
  <div class="image"><img src="monimage2.jpg" alt="text alternatif" /></div>
  <div class="image"><img src="monimage3.jpg" alt="text alternatif" /></div>
  <div class="image"><img src="monimage4.jpg" alt="text alternatif" /></div>
...
  <div class="clear"></div>
</div>

Code :

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

1
2
3
4
5
6
.gallerie .image {
  float: left;
}
.clear {
  clear: both;
}

**gaya102** · 02/09/2009, 10h36

ok mais ca veut dire quoi?

.clear {
clear: both;
}

**Damouille** · 02/09/2009, 10h42

Code :

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

1
2
3
.clear {
  nettoie: les-deux;
}

Plus sérieusement lis ceci : clear

**gaya102** · 02/09/2009, 11h53

merci de ton aide en tout cas

ca veut dire quoi ca au juste je comprend pas trop

both :
The generated box is moved below all floating boxes of earlier elements in the source document..

Traduction
La boîte générée se déplace sous chacune des boîtes flottantes qui sont issues d'éléments précédents du document source ;

et comment on fait pour mettre un espace entre les photos

**Macmillenium** · 02/09/2009, 12h30

Bonjour,

clear est une propriété dégageante, elle permet de nettoyer le positionnement généré par les boites flottantes, c-à-d, un élément doté de la propriété clear n'est pas impacté par un adjacent flottant.

**gaya102** · 02/09/2009, 12h42

c'est un peu compliqué pour moi tout cas je pense qu'avec des manipulations je devrai arriver à comprendre.

Par contre je n'arrive toujours pas a mettre un espace entre mes images