Image ou CSS ?

Version imprimable

Image ou CSS ?

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:

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:

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.

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:

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 !!!

01/09/2013, 21h58
zouuc

Merci winow :ccool: 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.
02/09/2013, 10h24
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
02/09/2013, 11h28
zouuc

Merci JérémieL :ccool: je vais essayer avec le CSS ;)