Adapter un design Photshop en CSS

**Djokx** · 10/11/2010, 17h48

Bonjour,
J'ai réalisé un nouveau design pour mon site via photshop en espérant pouvoir m'en servir directement, mais mauvaise surprise, c'est sous forme de tableau et donc très long à charger. J'essaye donc de refaire le site en CSS/xHTML mais autant vous dire que je ne suis pas un as.
La version CSS est donc visible sur la page d'accueil et la version photoshop reste visible sur cette page.

Voilà a quoi ressemble mon CSS actuel:

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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
 
a img {
border:none;
}
 
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #191919;
	color: #000000;
}
 
/* Haut */
#menuHaut {
    width: auto; 
	height: 27px; 
	background-repeat:no-repeat; 
	background-image:url(../img/menu.png); 
	margin-left: 45%;
	list-style:none; 
	font: bold 10px Verdana, Arial, Helvetica, sans-serif; 
    }
 
#menuHaut ul {
    height: 27px; 
	margin-top: auto; 
	list-style:none; 
	font: bold 10px Verdana, Arial, Helvetica, sans-serif;
	}
 
#menuHaut li  {
    float:left; 
	}
 
#menuHaut a {
    display: block; 
	width: 75px; 
	padding-top: 8px; 	
	text-decoration: none; 
	color:#fff;
	}
 
 
/* Header */
#header {width: 154px; 
    height: 95px; 
	margin: 0px auto 0 25%; 
	padding:0; 
	background-image:url(../img/Home.png);
	}
 
/* Actu */
#Actu {
    width: 1007px; 
	height: 143px; 
	background-image:url(../img/Actu.png);}
 
/* Contenu */
#contenu {
        padding: 2% 3%;
        width: 1024px;
        height: auto;	
        margin: auto;		
        background: #ffffff; 
        color: #191919; 
        border: 1px solid #89a; 
        text-decoration: none; 
        -moz-border-radius: 10px 10px 0 0; 
        -webkit-border-radius: 10px 10px 0 0; 
        border-radius: 10px 10px 0 0;         
        -webkit-border-top-left-radius: 10px; /* pour Chrome */ 
        -webkit-border-top-right-radius: 10px; /* pour Chrome */  
}
 
#liens {
    margin-top: 20px;
    background-image:url(../img/liens.png);
	width: 213px; 
	height: 43px;
    padding-left: 5px;	
	background-repeat:no-repeat;
	text-align: center;
	padding-top: 10px;
	font: bold 18px Verdana, Arial, Helvetica, sans-serif; 
	color: #C84E08;
	position:relative;    
	}
 
/* Dégradé a régler plus tard #liens span{
    position:absolute;
    display:block;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:url(../img/gradient_1.png) repeat-x;
	} */
 
#question {
    margin-top: -660px;
	margin-left: 463px;
    background-image:url(../img/question.png);
	width: 213px; 
	height: 43px;
    padding-left: 5px;	
	background-repeat:no-repeat;
	text-align: center;
	padding-top: 10px;
	font: bold 18px Verdana, Arial, Helvetica, sans-serif; 
	color: #0855C8;
	position:relative;    
	}
 
/* Dégradé a régler plus tard #quesion span{
    position:absolute;
    display:block;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:url(../img/gradient_1.png) repeat-x;
	} */
 
#bloc1 {
        width: 400px;
        height: auto;			
        background: #ffffff; 
        color: #191919; 
        border: 1px solid #89a; 
        text-decoration: none; 
        -moz-border-radius: 10px 10px 0 0; 
        -webkit-border-radius: 10px 10px 0 0; 
        border-radius: 10px 10px 0 0;         
        -webkit-border-top-left-radius: 10px; /* pour Chrome */ 
        -webkit-border-top-right-radius: 10px; /* pour Chrome */  
}
 
#bloc2 {
        margin-left: 463px;
        width: 400px;
        height: auto;			
        background: #ffffff; 
        color: #191919; 
        border: 1px solid #89a; 
        text-decoration: none; 
        -moz-border-radius: 10px 10px 0 0; 
        -webkit-border-radius: 10px 10px 0 0; 
        border-radius: 10px 10px 0 0;         
        -webkit-border-top-left-radius: 10px; /* pour Chrome */ 
        -webkit-border-top-right-radius: 10px; /* pour Chrome */  
}

J'ai pour l'instant deux petits problèmes,

Le menu qui est décalé, car je teste avec 2 résolutions. Que j'essaye en margin en % ou auto, je n’obtient pas un résultat convenable sur les 2 écrans
Pour ce qui est des deux blocs de textes, je ne sais pas comment les placer à la même hauteur. Là j'ai triché avec les pixels mais si je change le texte du premier, le second sera décalé. Je ne sais pas quelle propriété utiliser pour ça

Merci d'avance et bonne soirée.

PS: J'allait oublier le code HTML qui va avec:

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
 
<!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>Djokx.com: Mes Travaux</title>
 
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="master">
<div id="header"></div>
 
<div id="menuHaut">
<table border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td>	
	<ul>
		 <li><a href="index.php" class="index">Accueil</a></li>
		 <li><a href="travaux.php">Travaux</a></li>
		 <li><a href="#">Autre</a></li>
		 <li><a href="#">Autre</a></li>
		 <li><a href="#">Autre</a></li>
	</ul>
	</td>
  </tr>
</table>
</div>
 
<div id="contenu">
 
<div id="Actu"></div>
 
<div id="liens">Derniers Liens<span></span></div>
<div id="bloc1"><p>Lorem Salu bissame*! Wie geht's les samis*? Hans apporte moi une Wurschtsalad avec un picon bitte, s'il te plaît.
  Voss*? Une Carola et du Melfor*? Yo dû, espèce de Knäckes, ch'ai dit un picon*!</p> 
<p>Hopla vous savez que la mamsell Huguette, la miss Miss Dahlias du messti de Bischheim était au Christkindelsmärik en compagnie de Richard Schirmeck (celui qui a un blottkopf), le mari de Chulia Roberstau, qui lui trempait sa Nüdle dans sa Schneck*! Yo dû, Pfourtz*! Ch'espère qu'ils avaient du Kabinetpapier, Gal*!</p>
<p>Yoo ch'ai lu dans les DNA que le Racing a encore perdu contre Oberschaeffolsheim. Verdammi et moi ch'avais donc parié deux knacks et une flammekueche. Ah so*? T'inquiète, ch'ai ramené du schpeck, du chambon, un kuglopf et du schnaps dans mon rucksack. Allez, s'guelt*! Wotch a kofee avec ton bibalaekaess et ta wurscht*? Yeuh non che suis au réchime, je ne mange plus que des Grumbeere light et che fais de la chym avec Chulien. Tiens, un rottznoz sur le comptoir.</p>
<p>Tu restes pour le lotto-owe ce soir, y'a baeckeoffe*? Yeuh non, merci vielmols mais che dois partir à la Coopé de Truchtersheim acheter des mänele et des rossbolla pour les gamins. Hopla tchao bissame*! Consectetur adipiscing elit</p> </div>
 
<div id="question">Derniers Liens<span></span></div>
<div id="bloc2"> <p>Lorem Salu bissame*! Wie geht's les samis*? Hans apporte moi une Wurschtsalad avec un picon bitte, s'il te plaît.
  Voss*? Une Carola et du Melfor*? Yo dû, espèce de Knäckes, ch'ai dit un picon*!</p> 
<p>Hopla vous savez que la mamsell Huguette, la miss Miss Dahlias du messti de Bischheim était au Christkindelsmärik en compagnie de Richard Schirmeck (celui qui a un blottkopf), le mari de Chulia Roberstau, qui lui trempait sa Nüdle dans sa Schneck*! Yo dû, Pfourtz*! Ch'espère qu'ils avaient du Kabinetpapier, Gal*!</p>
<p>Yoo ch'ai lu dans les DNA que le Racing a encore perdu contre Oberschaeffolsheim. Verdammi et moi ch'avais donc parié deux knacks et une flammekueche. Ah so*? T'inquiète, ch'ai ramené du schpeck, du chambon, un kuglopf et du schnaps dans mon rucksack. Allez, s'guelt*! Wotch a kofee avec ton bibalaekaess et ta wurscht*? Yeuh non che suis au réchime, je ne mange plus que des Grumbeere light et che fais de la chym avec Chulien. Tiens, un rottznoz sur le comptoir.</p>
<p>Tu restes pour le lotto-owe ce soir, y'a baeckeoffe*? Yeuh non, merci vielmols mais che dois partir à la Coopé de Truchtersheim acheter des mänele et des rossbolla pour les gamins. Hopla tchao bissame*! Consectetur adipiscing elit</p></div>
 
</div>
</div>
</body>
</html>

**vrd-74** · 10/11/2010, 21h23

Bonjour

Pour le menu, le plus simple et de faire une div globale englobant #contenu et #menuHaut, qui fera donc la largeur de #contenu et sera placée en margin auto.
Il faut alors placer #menuHaut en float:right pour l'avoir tout à droite de #contenu (si c'est bien ce que vous voulez).

Pour le html :

Code :

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

1
2
3
4
5
6
7
8
<div id="master">
    <div id="header"></div>
    <div id="main">
        <ul id="menuHaut">...</ul>
        <br class="clear" />
        <div id="contenu">...</div>
    </div>
</div>

Cela dit #master peut faire aussi l'office si le header doit aussi être centré par rapport au corps de la page.

Pour le css :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
div#main {
    margin: auto;
    width: 1024px;
}
ul#menuHaut {
    float: right;
}
.clear {
    clear: both;
}

Les propriétés de largeur et de marges peuvent alors être enlevées de #contenu. Le br est là pour assurer le retour à la ligne après le ul flottant.
Vous pouvez garder le reste du style sur le ul.

Pour les blocs, pourquoi avoir passé #question et #liens en position relative ? Ils peuvent tout à fait rester dans le flux. #liens et #bloc 1 serait en float: left par exemple, et #question et #bloc2 aurait une marge à gauche correspondante à la largeur de #bloc1.

PS: un petit conseil, évitez les design d'exactement 1024px de large, le rendu plein page sur un écran 1024 est souvent laid. Mieux vaut privilégier un design un peu plus étroit de 900 ou 950 par exemple pour garder un peu de marges sur les côtés.

**Djokx** · 10/11/2010, 23h33

Salut,
Et merci beaucoup, vos conseils m'ont bien débloqués, tout est plus beau que jamais, je vais donc pouvoir améliorer tout ça et commencer à ajouter du contenu.

Bonne fin de soirée!

Adapter un design Photshop en CSS

CSS

Vue hybride

Discussions similaires

Partager

Partager