Propriété float css

Version imprimable

Propriété float css

bonjour
je fais ça :

code html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <div id="Header">
   <div id="Logo">
   	  <h1><span class="Grand">Progress</span> <br />business company</h1>
   </div>
 
   <div id="Menu">
    <ul>
    	<li>Home<div class="home"></div></li>
    	<li>News<div class="news"></div></li>
    	<li>Services<div class="service"></div></li>
    	<li>Produts<div class="prdouct"></div></li>
    	<li>Contacts<div class="contact"></div></li>
    </ul>
 
   </div>
 
 </div>

et CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
#Logo h1 
{
	font-size: 35px;
	text-transform: uppercase;
	color: #666666;
	float: left;
}
#Menu 
{
   width: 536px;
}

pourquoi le menu ne se deplace pas a coté de h1 ?? mais si je ne donne pas la largeur au menu
il se deplace

25/01/2016, 16h01
laurentSc

Il y a une erreur dans ton CSS : h1 #Logo au lieu de #Logo h1
25/01/2016, 16h43
thelvin

Difficile d'aider pour cette question, puisque personne ne nous dit quel est l'effet obtenu, quel est l'effet voulu, quel doctype est employé, et sur quels navigateurs ça va et ça va pas, ou pourquoi il y a des <div> vides.

Dans l'expectative, nous pouvons seulement constater que ce code a l'air de marcher et qu'il n'y a pas de problème.

Citation:

Envoyé par laurentSc

Il y a une erreur dans ton CSS : h1 #Logo au lieu de #Logo h1

Je vois pas de quoi tu parles, son code utilise bien #Logo h1, c'est bon.
25/01/2016, 18h23
exe2bin
Salut thelvin ; j'ai étudier ton problème et c'est vrai que c'est étrange !?
J'ai une solution pour toi : tu n'a qu'a rajouterune règle dans ta feuille de style
Code:

1 2 3 4 ul { float:right; }
Cela te convient-il ?
25/01/2016, 23h05
laurentSc

Citation:

Envoyé par thelvin

Je vois pas de quoi tu parles, son code utilise bien #Logo h1, c'est bon.

C'est vrai qu'au du code, c'est plus logique, mais ma solution avait un comportement qui me paraissait plus satisfaisant ; cela dit, au vu du code, c'est sûr que ça n'a aucun sens...

Citation:

Envoyé par exe2bin

j'ai étudier ton problème et c'est vrai que c'est étrange !?

Par curiosité, c'est quoi le problème ?
26/01/2016, 05h52
exe2bin

Citation:

Envoyé par laurentSc

Par curiosité, c'est quoi le problème ?

c'est ça : "pourquoi le menu ne se deplace pas a coté de h1 ?? mais si je ne donne pas la largeur au menu
il se deplace"
26/01/2016, 10h57
Inikaam

Bonjour king_simo,

La raison de ton problème est le suivant : un élément en float se placera en flottant mais par rapport à l'élément qui le précède, et non celui qui le suit.

Dans ton cas, il faut effectivement soit appliquer un float: right sur ton menu, soit réorganiser ta structure pour que ton menu précède ton titre dans le html (cette dernière solution étant sale, je la déconseille).

edit : qui plus est ton float est sur la h1 contenu dans ta div de logo, les éléments qui doivent être côte à côte ne sont pas au même niveau, ça peut te posera sûrement des problèmes