Discussion :

[Ariranha]

Re bonjour,

A peine un problème résolu un autre ressurgit.
Toujours en image :

Je voudrais :


mais j'obtiens :


le 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
<div class="content-realisation">
 
            <div class="realisation">
                <div class="left">
                    <h2>Paperplanes</h2>
                    <img src="images/clients-home/modele-image-home.gif" alt="" width="204" height="103" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non elit eu tortor pretium tristique sed sed augue. Nulla eu tortor tellus. Phasellus bibendum mattis metus a placerat. Aliquam erat volutpat. Mauris tincidunt sodales vulputate.</p>
                    <a href="#" target="_blank"><b>voir le site</b></a>
                </div>
                <div class="separation">
                    <img src="images/clients-home/separation.gif" alt="" width="1" height="284" />
                </div>
                <div class="right">
                    <p>Client :<br>Les &Eacute;ditions Didier</p>
                    <p>R&eacute;alis&eacute; en :<br>2010</p>
                    <p>Technologies :<br>Flash as 3, Papervision 3D, Xml</p>
                    <p>R&ocirc;le :<br>Création graphique,<br>Développement &<br>Animation flash</p>
                </div>
            </div>
 
 
            <div class="realisation">
                <div class="left">
                    <h2>Paperplanes</h2>
                    <img src="images/clients-home/modele-image-home.gif" alt="" width="204" height="103" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non elit eu tortor pretium tristique sed sed augue. Nulla eu tortor tellus. Phasellus bibendum mattis metus a placerat. Aliquam erat volutpat. Mauris tincidunt sodales vulputate.</p>
                    <a href="#" target="_blank"><b>voir le site</b></a>
                </div>
                <div class="separation">
                    <img src="images/clients-home/separation.gif" alt="" width="1" height="284" />
                </div>
                <div class="right">
                    <p>Client :<br>Les &Eacute;ditions Didier</p>
                    <p>R&eacute;alis&eacute; en :<br>2010</p>
                    <p>Technologies :<br>Flash as 3, Papervision 3D, Xml</p>
                    <p>R&ocirc;le :<br>Création graphique,<br>Développement &<br>Animation flash</p>
                </div>
            </div>
 
            <div class="realisation">
                <div class="left">
                    <h2>Paperplanes</h2>
                    <img src="images/clients-home/modele-image-home.gif" alt="" width="204" height="103" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non elit eu tortor pretium tristique sed sed augue. Nulla eu tortor tellus. Phasellus bibendum mattis metus a placerat. Aliquam erat volutpat. Mauris tincidunt sodales vulputate.</p>
                    <a href="#" target="_blank"><b>voir le site</b></a>
                </div>
                <div class="separation">
                    <img src="images/clients-home/separation.gif" alt="" width="1" height="284" />
                </div>
                <div class="right">
                    <p>Client :<br>Les &Eacute;ditions Didier</p>
                    <p>R&eacute;alis&eacute; en :<br>2010</p>
                    <p>Technologies :<br>Flash as 3, Papervision 3D, Xml</p>
                    <p>R&ocirc;le :<br>Création graphique,<br>Développement &<br>Animation flash</p>
                </div>
            </div>
 
            <div class="realisation">
                <div class="left">
                    <h2>Paperplanes</h2>
                    <img src="images/clients-home/modele-image-home.gif" alt="" width="204" height="103" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non elit eu tortor pretium tristique sed sed augue. Nulla eu tortor tellus. Phasellus bibendum mattis metus a placerat. Aliquam erat volutpat. Mauris tincidunt sodales vulputate.</p>
                    <a href="#" target="_blank"><b>voir le site</b></a>
                </div>
                <div class="separation">
                    <img src="images/clients-home/separation.gif" alt="" width="1" height="284" />
                </div>
                <div class="right">
                    <p>Client :<br>Les &Eacute;ditions Didier</p>
                    <p>R&eacute;alis&eacute; en :<br>2010</p>
                    <p>Technologies :<br>Flash as 3, Papervision 3D, Xml</p>
                    <p>R&ocirc;le :<br>Création graphique,<br>Développement &<br>Animation flash</p>
                </div>
            </div>
 
            <div class="realisation">
                <div class="left">
                    <h2>Paperplanes</h2>
                    <img src="images/clients-home/modele-image-home.gif" alt="" width="204" height="103" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non elit eu tortor pretium tristique sed sed augue. Nulla eu tortor tellus. Phasellus bibendum mattis metus a placerat. Aliquam erat volutpat. Mauris tincidunt sodales vulputate.</p>
                    <a href="#" target="_blank"><b>voir le site</b></a>
                </div>
                <div class="separation">
                    <img src="images/clients-home/separation.gif" alt="" width="1" height="284" />
                </div>
                <div class="right">
                    <p>Client :<br>Les &Eacute;ditions Didier</p>
                    <p>R&eacute;alis&eacute; en :<br>2010</p>
                    <p>Technologies :<br>Flash as 3, Papervision 3D, Xml</p>
                    <p>R&ocirc;le :<br>Création graphique,<br>Développement &<br>Animation flash</p>
                </div>
            </div>
 
        </div>

et 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
.content-realisation {
	width: 700px;
}
 
.realisation {
	width: 350px;
	float: left;
}
 
.realisation a, a:visited {
	text-align: right;
	color: #F4F4F4;
}
.realisation a:hover, a:active, a:focus {
	text-decoration: none;
}
 
.realisation .left {
	width: 204px;	
	float: left;
}
 
.realisation .separation {
	width: 1px;
	margin: 46px 0 0 2px;
	float: left;
}
 
.realisation .right {
	width: 134px;
	margin: 35px 0 0 5px;
	float: left;	
}
 
.realisation .right p {
	font-size: 10px;
	width: 115px;
}

Pourquoi est-ce que la 1e rangé ne prend qu'un seul bloc ".realisation" alors que sur la 2e j'obtiens le résultat voulu.

Merci.

[Bisûnûrs]

Là apparemment il faut voir avec ce qu'il y a avant le premier bloc. Sans doute un autre bloc en float:left et dont la largeur doit faire approximativement 330px.

[Ariranha]

Là apparemment il faut voir avec ce qu'il y a avant le premier bloc. Sans doute un autre bloc en float:left et dont la largeur doit faire approximativement 330px.

Bien vu quand je retire un

Code :

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

float:left

plus haut dans mon css les blocs mettent bien en place.

Merci beaucoup je vais chercher comment agencer différent le bloc supérieur.


C'est un vrai casse tête :
Ce qui serait bien :


ce que j'obtiens :


le 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
<div class="header">
	<div class="flash_content">
    </div>
    <div class="logo">
        <a href="index.php"><img src="images/header/logo.png" alt="Logo webdesigner directeur artistique freelance" name="Insert_logo" width="182" height="312" id="Insert_logo" style="display:block;" /></a>
     </div>
     <div class="clients">
        <ul>
        	<h1>:: Clients ::</h1>
        	<li><a href="#" target="_blank">Voyages SNCF</a></li>
            <li><a href="#" target="_blank">Editions Didier</a></li>
            <li><a href="#" target="_blank">WWF France</a></li>
            <li><a href="#" target="_blank">Micromania</a></li>
            <li><a href="#" target="_blank">LBI</a></li>
            <li><a href="#" target="_blank">Plus belle la vie</a></li>
            <li><a href="#" target="_blank">BPCE</a></li>
            <li><a href="#" target="_blank">H&ocirc;tels Mercure</a></li>
            <li><a href="#" target="_blank">G&eacute;rard Darel</a></li>
            <li><a href="#" target="_blank">Saint Michel</a></li>
            <li><a href="#" target="_blank">Nocibé</a></li>
       </ul>
     </div>
     <div class="accroche">
      	<img src="images/header/webdesign-freelance-accroche.png" alt="freelance webdeisgn graphiste" width="357" height="260" />
     </div>
</div>

et 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
.content {
	width:700px;
	margin: 0 auto;
	border: 2px #9F0 solid;
}
 
.content .header .flash_content {
	height: 60px;
}
 
.content .header .logo {
	width: 182px;
 
	border: 1px #FFF solid;
}
 
.content .header .clients {
	width: 140px;
	float: left;
	text-align: right;
	margin: 5px 0 0 0;
	border: 1px #00FFFF solid;
}
 
.clients ul {
}
.clients ul li {
	font-size: 10px;
	list-style-type: none;
}
.clients ul a, nav ul a:visited {
	text-decoration: none;
	color: #F4F4F4;
}
.clients ul a:hover, nav ul a:active, nav ul a:focus {
	background-color: #F4F4F4;
	color: #d74947;
}
 
.content .header .accroche {
	width: 357px;
	float: left;
	border: 1px #FFFF00 solid;
}

Comment est-il possible de faire remonter les 2 deux blocs aux niveau du logo sans pour autant utiliser un

Code :

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

float : left

?

[NoSmoking]

Bonjour,
plusieurs points me surprennent dans ton CSS
- la redondance de propriété/valeur qui n'ont pas la même valeur, comment t'y retrouves tu?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
.content .header .logo {
	width: 182px;
	border: 1px #FFF solid;
}
.content .header .clients {
	width: 140px;              /* redefinition ICI */
	float: left;
	text-align: right;
	margin: 5px 0 0 0;
	border: 1px #00FFFF solid; /* redefinition ICI */
}

- plusieurs classes pour les mêmes propriétés/valeurs, inutile autant reprendre la même

Code :

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

1
2
3
4
5
.content .header .accroche {
	width: 357px;
	float: left;
	border: 1px #FFFF00 solid;
}

on a tout à fait le droit d'écrire

Code html :

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

1
2
3
<div class="nom_classe_1 nom_classe_2">
il faut mettre un espace entre les noms des classes
</div>

conclusion : commences par épurer ton code...

[12monkeys]

Bonsoir

Il serait bon d'avoir une page en ligne pour pouvoir tester, parce que là avoir des bribes de code sans savoir comment ils s'enchainent...

Peut être une solution ici : http://css4design.developpez.com/tut...flux-partie-2/ et http://css.developpez.com/tutoriels/...issement-flux/

[Ariranha]

Merci pour vos réponses et votre réactivité

Mise à part un css loin d'être propre , j'avais des problèmes dans les

Code :

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

width

une fois résolu tout c'est bien calé...

Pour un exemple c'est ici (loin d'être fini mais c'est un bon début) :

http://freelance-webdesign.com/v2