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

Conseil sur la conception de ma mise en forme

CSS

Vue hybride

Discussions similaires

Partager

Partager