Discussion :

[zouuc]

Bonjour tout le monde,

Je dois passer un test pour être accepté en stage en dev web et il y a une partie CSS / HTML. Il me reste 2 problèmes / questionnements.

Tout d'abord, l'exercice est que je dois refaire en CSS / HTML une page web qu'on me donne en image.


Voici l'image précise qui regroupe mes deux problèmes :
http://imageshack.us/f/706/1uip.png/

1 / Mon premier problème est le titre "FURNITURE" est-ce un style CSS ou alors une image ? Mais si c'est une image je ne vois pas comment faire en sorte que la partie extérieur soit parfaitement placée. Si c'est un style CSS je ne vois pas du tout ce que c'est ou comment faire.

2 / Mon second soucis est le block de texte sur la gauche qui ne prend pas la même taille que celui de l'image.
J'ai ça en code HTML / CSS pour le moment :

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
<section>
	<div id="container">
		<article id="left">               
			<h1>FURNITURE</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc massa velit, iaculis et mattis eget, molestie eu magna. Aenean lobortis tempus quam, adipiscing tristiaue tellus commodo nec. Suspendisse vestibulum eros lectus, nec imperdiet arcu.
			</br></br>
			Proin porttito, justo eget gravida facilisis, tortor risus consequat erat, id pellentesque felis nunc quis dolor. Etiam elementum portitor odio, in cursus ligula rhoncus vel.
			</p>
		</article>
 
		<aside id="right">
			<img src="Pictures/picture.png" alt="Here is a picture" />
		</aside>
	</div>
</section>

Voila pour le CSS :

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
section
{
	display: inline-block; 
	width: 100%;
	padding-top: 0.2em;
	padding-bottom: 2%;
}
 
section #left, #right
{
	box-shadow: 0 15px 25px -22px #999, 0 76px 18px -80px #999, 0 118px 20px -124px #999;
}
 
#container
{
	display: inline-block;
	height: auto;
}
 
#left
{
	float: left;
	height: inherit;
	width: 25%;
	padding-left: 15px;
	padding-right: 25px;
	margin-left: 3%;
	background-color: #f4f4f4;
}
 
#left p
{
	font-family: "Arial";
	color: #959595;
	font-size: 13px;
	line-height: 130%;
}
 
 
#right
{
	float: right;
	margin-right: 0%;
}

Merci si l'un d'entre vous à une piste.

[winow]

j'ai pas compris la question mais je pense peut etre que tu veut cela ?

j'ai ajouté ce qui se trouve entre --> /* ici */ et /**/

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
<style>
section
{
	display: inline-block; 
	width: 100%;
	padding-top: 0.2em;
	padding-bottom: 2%;
}
 
section #left, #right
{
/* ici */
height:300px;
/**/
	box-shadow: 0 15px 25px -22px #999, 0 76px 18px -80px #999, 0 118px 20px -124px #999;
}
 
#container
{
	display: inline-block;
	height: auto;
}
 
#left
{
	float: left;
	height: inherit;
	width: 25%;
	padding-left: 15px;
	padding-right: 25px;
	margin-left: 3%;
	background-color: #f4f4f4;
/* ici */
height:100%;
/**/
}
 
#left p
{
	font-family: "Arial";
	color: #959595;
	font-size: 13px;
	line-height: 130%;
}
/* ici */
#right img{height:300px;margin-left:10px;}
/**/
</style>

NON !!!

[zouuc]

Merci winow Je n'avais pas set de taille fixe au préalable à l'image et sur les deux blocs. C’était le problème.

Maintenant il me reste le titre dans le bloc texte de gauche "FURNITURE" à mettre dans un drôle de format.

[JérémieL]

Pour le titre, il s'agit d'un ruban 3D (ribbon). Tu peux soit utiliser une image, soit le faire en CSS (mais dans ce cas ce ne sera pas supporté par les navigateurs plus anciens).

http://css3-tutorial.com/creating-ribbons-in-css3

[zouuc]

Merci JérémieL je vais essayer avec le CSS