Eléments html flottant avec CSS

**matthew974** · 12/10/2012, 14h05

Bonjour,
Je me suis remis y a pas longtemps au design avec CSS cependant j'ai certaines "bizarreries" lorsque je dézoome, mes éléments ont tendance à flotter vers leurs nouvelles positions voici la 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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
@CHARSET "ISO-8859-1";
div#right
{
	float : right;
	width : 300px;
	height : 400px;
 	Background-color: #FF00FF; 
    box-shadow: 5px 5px 5px #888; 
    border-radius: 1em 4em 1em 4em; 
    border: 3px solid blue; 
    -moz-border-bottom-colors: #0682bd #198dc9 #2d99d7 #3da3e1 #51afee #62baf9; 
    -moz-border-top-colors: #0682bd #198dc9 #2d99d7 #3da3e1 #51afee #62baf9; 
    -moz-border-left-colors: #0682bd #198dc9 #2d99d7 #3da3e1 #51afee #62baf9; 
    -moz-border-right-colors: #0682bd #198dc9 #2d99d7 #3da3e1 #51afee #62baf9;
}
 
div#left{
	float : left;
	margin-left : 100px;
	margin-top : 50px;
	left : 400px;
	top : 470px; 
}
div#grayscale {
 
	-webkit-filter: none; /*Returns to default state*/
	}
div#grayscale img:hover {
	-webkit-filter: grayscale(100%);
 
}
img{
	-webkit-transition: all 0.5s;
}
body{
 
	background-image:url("Images/fond_degrade.png");
	background-repeat:no-repeat;
	background-position:center; 
	background-attachment:scroll;
	margin: auto;
	width: 1000px;	
	clear: both;
}
header#banner{
	background-image:url("Images/Header.png");
	width:100%;
	height:320px;
	margin:10px 20px;
	padding:5px;
}
 
header#banner p{
	width:1000px;	
	margin: auto;
	font-size:.65em;
	margin:-15px 0 0 4px
}

J'utilise la propriété float afin de placer mes éléments.

**Muchos** · 12/10/2012, 14h36

mes éléments ont tendance à flotter vers leurs nouvelles positions […] J'utilise la propriété float afin de placer mes éléments.

C'est le principe du positionnement flottant ^^
Mets-nous aussi ton code html, et dis-nous quel comportement tu attends lorsque tu dézoomes.

**matthew974** · 12/10/2012, 14h45

Voila pour le code

Code java :

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
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel= "stylesheet" type="text/css" href="index.css" />
 
<title></title>
</head>
<body>
<header id ="banner">
 
</header>
<section>  
	<article>
		<div id ="left">
			<a href="http://fr.calameo.com/read/0001321979f9bee51c23b">
				<div id="grayscale">
     				<img src="Images/women cover1.jpg" width="400" height="350" />
     			</div>
     		</a>
       </div>
    </article> 
	<article>
		<div id ="right">
			<c:if test ="${empty sessionScope.utilisateur}">
			<!-- <input type="button" name="lien" value="connexion"
			onClick="window.location.href='inscription'" /> -->
			<%@ include file="connexion.jsp" %>
			<%@ include file="inscription.jsp" %>
			</c:if>
 
			<c:if test ="${!empty sessionScope.utilisateur}">
 
				<a href = "ajouterVoiture">ajouter une voiture</a>
				<a href = "deconnexion"> deconnexion</a>
			</c:if>
		</div>
</section>
 
<footer>
<%@ include file="footer.jsp" %>
</footer>
</body>
</html>

Pour le comportement je dirais du style facebook (pour ne citer que lui).
Pour le code c'est de la jsp mais ça reste compréhensible au niveau des balises ^^.

Eléments html flottant avec CSS

CSS

Vue hybride

Discussions similaires

Partager

Partager