Comment réaliser ce design

**userparis** · 22/02/2016, 19h25

Bonjour j'ai mis en place sur photoshop le design ci-joint en pièce jointe et je vais démarrer les développements mais je ne sais pas comment le faire.

En noir, c'est le body - html
Je veux que la partie beige reste fixe, toujours au meme endroit, meme quand on scroll vers le bas.
Je veux également que le menu ne bouge paset en scrollant vers le bas le contenu viendrai disparaître en dessous le menu dans le bloc beige.

J'ai une idée mais je sais pas si c est bon :

le background du body en couleur noir
un div d'environ 70% de largeur avec un background couleur beige et en positiion fixe avec un top d'environ 5%.

A l'intérieur de ce div un autre div contenant le menu en position fixe et avec un top de 5% également.

Ensuite le contenu en normal.
Et enfin en bas (mais je trouve ça un peu moche), un div d'une hauteur de 5% également en position fixe et avec un bottom à 0 de toute la largeur du body.

Dites moi si je fais bonne route avec de commencer ou si c est pas bon pouvez-vous m'indiquer comment m'y prendre.
Je souhaite que ce soit compatible IE 8 et +, Firefox, chrome.

Thank's ! Smiley biggrin

**NoSmoking** · 23/02/2016, 10h56

Bonjour,

Je souhaite que ce soit compatible IE 8...

si c'est un impératif, dans ce cas reste au plus simple sur base de DIVs

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div id="main">
  <div id="menu">
  </div>
  <div id="image">
  </div>
  <div id="texte">
    <div id="texte-image">
    </div>
  </div>
</div>

voici un exemple de comment on pourrait obtenir ce que tu cherches

Code html :

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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Exemple design pour IE8</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin:0;
  padding:0;
  font: 1em/1.5 Verdana, sans-serif;
  background:#000;
}
#main {
  position:relative;
  height:40em;
  margin:3em auto;
  background:#FEC;
}
#main div {
  box-sizing:border-box;
}
[class^="w_"]{
  margin:auto;
}
.w_35 {
  width:35em;
}
.w_40 {
  width:40em;
}
.w_50 {
  width:50em;
}
#menu {
  height:3em;
  background:#CDE;
}
#image {
  height:22em;
  background:#ECD;
}
#texte {
  position:relative;
  height:10em;
  background:#DEC;
  padding-right:15.5em;
}
#texte-image {
  position:absolute;
  bottom:0;
  right:0;
  height:15em;
  width:15em;
  background:#DDD;
  border:3px solid white;
}
</style>
<script>
</script>
</head>
<body>
<div id="main" class="w_50">
  <div id="menu" class="w_35">&lt;div id="menu"&gt;</div>
  <div id="image" class="w_35">&lt;div id="image"&gt;</div>
  <div id="texte" class="w_40">
    &lt;div id="texte"&gt;
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin leo erat, dictum pretium pharetra sed, sodales in est.
    </p>
    <div id="texte-image">&lt;div id="texte-image"&gt;</div>
  </div>
</div>
</body>
</html>

les dimensions et le style reste à adapter !

Pour la suite, cela va dépendre quand même de comment tu entrevoies la chose, amélioration progressive ou dégradation élégante.

Invité · 23/02/2016, 11h53

Bonjour,

Concernant le design...

1/ Moi, quand j'achète un ordi avec une certaine taille d'écran, ce n'est pas pour voir des sites... qui réduisent la taille visible à 70%... sinon, j'aurais acheté un ordi plus petit...

En clair : quel intérêt apporte ce tour noir ?

(à part sur très grands écrans)

2/ Ce que tu proposes fait penser au design des sites du siècle dernier, dont il fallait minimiser le poids (images,...) à cause de la lenteur de la connexion internet de l'époque.
Aujourd'hui, on a la 4G. On peu faire plus, et voir "plus grand"...

3/ A moins que tu soit le seul à utiliser ton site, il faut que tu aies conscience que les visiteurs auront des ordinateurs, tablettes et autres smartphones, avec des tailles et résolutions d'écran divers et variés !

Donc, il faut prévoir aussi des variations du design (mise en page,...) en fonction des médias (PC, tablette, smartphone) : c'est le "responsive design".

**userparis** · 24/02/2016, 11h34

Hello NoSmoking et merci de te pencher sur ma demande.

j'ai tester ton code et ça se rapproche de ce que je souhaite mais le plus dur reste à mettre en place.

comme je l'ai dis dans mon premier post
Je veux que la partie beige reste fixe, toujours au meme endroit, centré au milieu de l'écran horizontalement et verticalement, meme quand on scroll vers le bas.
Ensuite dans cette partie beige je veux également que le menu reste fixe, en fait en scrollant vers le bas il n'y a que le contenu c'est a dire la grande image, le texte et la petite image qui bougerait verticalement et viendrai disparaître en dessous du menu dans le bloc beige.

Tu me suit ?

Je pense qu'il faudrai que le main soit en absolute avec un top: environ 5%, height 90%, on aurait donc 5%, 90% et 5% en bas.
Et ensuite le menu également en absolute avec un top:0.

Dis moi stp si c'est une bonne solution.
Merci

**userparis** · 24/02/2016, 11h36

Hello Jreaux62,

La partie noir est juste esthétique (j'ai trouvé que ça rendait bien avec la photo noir et blanc).

Il est prévu que ce design soit codé responsive.
De manière simpliste (à améliorer par la suite) plus la taille de l'écran utilisé sera petite plus la partie noir de mon design disparaitra...

De plus le budget de mon client est très léger,, je n'ai donc pas passer des heures à réaliser cette simple maquette.

Enfin il vrai que je reste très léger en matière de webdesign, une petite formation, tuto en graphiste, webdesigner ne me ferai pas de mal, d'ailleurs si tu en as sous la main n'hésites pas à me le faire savoir.

Merci

**userparis** · 24/02/2016, 18h40

NoSmoking,

je suis arrivé à ce que je cherche mais j'ai dû utiliser un div de plus ce qui rajoute un niveau de plus et surtout j'ai mis un div en

Code css :

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

position:fixed

. Je suis pas très content parce qu'il me semble que l'élément div sort du flux et que ce n'est pas très bon pour le référencement. De même plus il y a de niveau moins le référencement est bon, peux-tu confirmer ?
Le cas échéant as-tu une autre solution maintenant que tu as le rendu souhaité.

Code html :

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Exemple design pour IE8</title>
    <meta name="Author" content="NoSmoking">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            font: 1em/1.5 Verdana, sans-serif;
            background: #000;
        }
 
        #main {
            position: relative;
            margin-top:3.5em;
            margin-left: 20%;
            margin-bottom:3.5em;
            background: #FEC;
        }
 
        #main div {
            box-sizing: border-box;
        }
 
        [class^="w_"] {
            margin: auto;
        }
 
        .w_35 {
            width: 35em;
        }
 
        .w_40 {
            width: 40em;
        }
 
        .w_50 {
            width: 50em;
        }
 
        .div_menu{
            height:3.5em;
            position:fixed;
            z-index:99999;
            top:0;
            left:20%;
            margin:auto;
            width:50em;
            background: #000;
        }
 
        .menu{
            margin-top:2em;
            background: #FEC;
        }
 
        .limenu{
            background:gray;
            width:70%;
            margin:auto;
        }
 
        #menu {
            height: 3em;
            background: #CDE;
        }
 
        #image {
            height: 22em;
            background: #ECD;
        }
 
        #texte {
            position: relative;
            height: 10em;
            background: #DEC;
            padding-right: 15.5em;
            border:solid 1px black;
        }
 
        #texte-image {
            position: absolute;
            bottom: 0;
            right: 0;
            height: 15em;
            width: 15em;
            background: #DDD;
            border: 3px solid white;
        }
    </style>
    <script>
    </script>
</head>
<body>
    <div class="div_menu">
        <div class="menu">
            <div class="limenu">&lt;div li menu&gt;</div>
        </div>
    </div>
    <div id="main" class="w_50">
        <div id="menu" class="w_35">&lt;div id="menu"&gt;</div>
        <div id="image" class="w_35">&lt;div id="image"&gt;</div>
        <div id="texte" class="w_40">
            &lt;div id="texte"&gt;
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin leo erat, dictum pretium pharetra sed, sodales in est.
            </p>
            <div id="texte-image">&lt;div id="texte-image"&gt;</div>
        </div>
        <div id="texte" class="w_40">
    &lt;div id="texte"&gt;
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin leo erat, dictum pretium pharetra sed, sodales in est.
    </p>
    <div id="texte-image">&lt;div id="texte-image"&gt;</div>
</div><div id="texte" class="w_40">
    &lt;div id="texte"&gt;
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin leo erat, dictum pretium pharetra sed, sodales in est.
    </p>
    <div id="texte-image">&lt;div id="texte-image"&gt;</div>
</div><div id="texte" class="w_40">
    &lt;div id="texte"&gt;
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin leo erat, dictum pretium pharetra sed, sodales in est.
    </p>
    <div id="texte-image">&lt;div id="texte-image"&gt;</div>
</div>
    </div>
</body>
</html>

Comment réaliser ce design

CSS

Vue hybride

Discussions similaires

Partager

Partager