Propriété float casse le design

**lucci57** · 17/07/2014, 12h00

Bonjour

J'ai créé un formulaire dans un div, avec un style css,mais le problème c que quand j'applique la propriété css float,le style change et devient désagréable.

voici mon code html:

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
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
<!doctype html>
<html>
	<head>
		<title>propriété float</title>
		<link rel="stylesheet" href="style.css" />
	</head>
 
	<body>
		<div id="offre">
			<div id="titreOffre">
				<h1>Offres demploi</h1>
			</div>
 
			<form method="post" action="">
			<p>Région :</p>
			<select id="region" name="region">
				<option value="region" selected>Sélectionnez une région</option>
				<option value="Alsace">1-Alsace</option>	
				<option value="Ile-de-france">13-Ile-de-france</option>
				<option value="Languedoc-Roussillion">14-Languedoc-Roussillion</option>
				<option value="Limousin">15-Limousin</option>
				<option value="Lorraine">16-Lorraine</option>
				<option value="Midi-Pyrennees">17-Midi-Pyrénnées</option>
				<option value="Nord-Pas-de-calais">18-Nord-Pas-de-calais</option>
				<option value="Pays de la loire">19-Pays de la loire</option>
				<option value="Picardie">20-Picardie</option>
				<option value="Poitou-Charentes">21-Poitou-Charentes</option>	
			<select><br /><br />
 
			<p>Secteur :</p>
			<select id="secteur" name="secteur">
				<option value="secteur">Secteur</option>
				<option value="Informatique">Informatique</option>
				<option value="Hôtellerie,restauration et tourisme">Hôtellerie,restauration et tourisme</option>
				<option value="Transports et logistiques">Transports et logistiques</option>
				<option value="Gestion et finance">Gestion et finance</option>
				<option value="commerce">Commerce</option>
			<select><br /><br />
 
			<p class="pSubmit"><input type="submit" value="recherche" /></p>
			</form>
		</div>
	</body>
</html>

et le css bien sur:

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
#offre{
	float:left;
	background:silver;
	width:30%;
	margin-left:2%;
	box-shadow: 1px 1px 1px 1px #aaa; 
	border-radius:10px;
	border-left:5px solid orange;
	border-right:5px solid orange;
	border-bottom:10px solid orange;
}
 
#titreOffre{
	background-color:orange;
	text-align:center;
	border-radius:10px 10px 0 0;	
	border-bottom:1px solid #aaa; 
}
 
form{
	margin-left:5%;
}

j'arrive pas à savoir la cause du problème mais je pense que c'est le div de mon titre h1.
est-ce que quelqu'un à une idée.
merci d'avance.

**Muchos** · 17/07/2014, 15h27

le style change et devient désagréable.

Ça nous éclaire beaucoup sur le problème

En outre, quand je teste votre page, il n'y a pas de différence notable avec ou sans FLOAT (d'ailleurs totalement inutile ici, puisqu'il n'y a pas d'autres éléments autour desquels #OFFRE pourrait flotter).

**s0h3ck** · 17/07/2014, 18h21

@Muchos, tu as testés avec trois erreurs ? ... ça commence mal

1. Avant de commencer à faire du css, il faut vérifier si le code html est valide, car il est fort probable de voir des erreurs css apparaitre si les balises html ne sont pas correctement fermées.

Premièrement, l'attribut action ne peut pas être vide : <form method="post" action=""> [Erreur]
Deuxièmement, la deuxième balise select doit être fermé : <select><br /><br /> [Erreur]
Troisièmement, la quatrième balise select doit être fermé : <select><br /><br /> [Erreur]

Les corrections :

<form method="post" action="#"> [Ok]
</select><br><br> [Beaucoup mieux]
</select><br><br> [Page valide maintenant...]

2. Vérifier le code css s'il est valide. Dans votre position... aucune erreur bravo.

3. Commencer à voir le problème. En effet, lorsqu'on ajoute la propriété css : float:left; par exemple, cette propriété ajoute une barre grise dont le rendu est assez gênant. Pour remédier à cette solution, je regarderais la théorie sur les positionnements CSS.

Voici le lien pour faire des tests : http://cssdesk.com/rbrP5

**NoSmoking** · 17/07/2014, 20h03

Bonjour,
tu as visiblement un problème de fusion de marge.

Pour régler ton problème tu as plusieurs solution dont celle de mettre ce CSS à ton H1.

Code :

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

1
2
3
4
h1{
  margin:0;
  padding:0.25em;
}

Néanmoins, la structure en mettant une DIV englobant ton H1 est inutile, la mise en flottant de la DIV "offre" n'a aucun intérêt comme signalé par Muchos.

Une structure comme celle qui suit devrait suffire

Code html :

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

1
2
3
4
5
<div id="offre">
    <h1>Offres demploi</h1>
    <form method="post" action="">
    </form>
</div>

PS: ne pas oublier ce qu'a signalé onequestionthank.

Propriété float casse le design

CSS

Vue hybride

Discussions similaires

Partager

Partager