Nouveau problème d'imbrication divs

Ariranha · 07/06/2011, 15h48

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 · 07/06/2011, 16h05

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 · 07/06/2011, 16h40

Citation:

Envoyé par 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.

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 · 07/06/2011, 20h05

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 · 07/06/2011, 22h43

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 · 08/06/2011, 13h31

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

07/06/2011, 22h43	#5
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	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/ __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	00

07/06/2011, 16h05	#2
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	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.
	00

08/06/2011, 13h31	#6
Ariranha Invité de passage Inscription : novembre 2007 Messages : 13 Détails du profil Informations forums : Inscription : novembre 2007 Messages : 13 Points : 2 Points : 2	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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email