footer avec deux textes floats : clearfloat

**ml1234** · 08/05/2010, 09h59

bonjour,
q1. dans une page html 100% de l'écran avec un motif dans body et des textes 90% de l'écran, je ne parvenais pas à avoir le footer avec son cadre autour de ses deux textes float (j'ai pris des couleurs kitch pour mieux voir). j'ai trouvé un code clearfloat dans les templates dreamweaver de pages en deux colonnes, header et footer et je voulais savoir s'il fallait utiliser tout cela, je veux dire que le clear sûrement mais br,...?

q2. avec des <p> sans float c'était possible ? je ne suis jamais arrivé à mettre un p align left sur la même ligne qu'un p align right.

q3.faut-il vraiment que le footer qui est 100% ait ses marges left et right auto ? il s'étend forcément sur toute la longueur. par contre footer content à 90% cela semble nécessaire

maintenant, j'attaque le header avec le logo à gauche et le menu à droite...

merci pour les conseils
marc

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
<style type="text/css">
<!--
 
* {padding:0; margin:0}
 
body  {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	background: #1B1E25;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #FFFFFF;
}
 
 
#footer {
	clear:both;
	margin-top:50px;
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color: #ff0000;
	/*text-transform:uppercase;
	letter-spacing:1px;*/
	width: 100%;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border: 1px solid #ff0000;
}
 
#footer a {text-decoration:none; color:#4a87e2;}
#footer a:hover {text-decoration:underline; color:#95b8d4;}
 
#footer_content {
	width: 90%;
	text-transform: none;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
 
#footer-right {text-align:right; float:right;color: #00ff00;padding-top: 10px;padding-bottom: 10px;}
#footer-left {float:left;color: #0000ff;padding-top: 10px;padding-bottom: 10px;}
 
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
 
 
-->
</style>
 
</head>
 
<body>
 
<h1> Main Content </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing.</p>
 
 
<div id="footer">
 
<div id="footer_content">
 
<div id="footer-right">&copy; 2010 Labro Photography | <a HREF="http://www.marclabro.com">Log In</a> </div>
 
		<div id="footer-left"><a HREF="http://www.marclabro.com" target="_blank">Buy Prints</a> / <a HREF="http://www.marclabro.com" target="_blank">Download Pics</a></div>
 
 		<br class="clearfloat" />
 
 
 
</div> <!-- end footer content -->
</div> <!-- ENDS FOOTER -->
 
</body>
</html>

**Damouille** · 08/05/2010, 15h02

q1: oui tu a besoin de la class clear apres ca na pas d'importance qu'elle soit sur un br ou une div.

q2: normal, il te faut utiliser les float pour mettre 2 elements block sur une meme ligne

q3: en 100%, ca ne sert en effet a rien. En 90% il te faut les margin auto pour centrer ton block

**ml1234** · 08/05/2010, 16h30

merci Damouille,
Entretemps j'ai trouvé un code plus court :
<div style=" clear:both;"></div>
que je place à la fin du header après le logo float left et le menu float right
ou bien dans le footer.

c'est aussi bon que l'autre clearfloat avec br... ?

je vois souvent ce clear float dans des définitions css. je suppose qu'il effectue un clear des float utilisés juste avant lui?

marc

**12monkeys** · 13/05/2010, 18h47

Bonjour

Envoyé par ml1234

q1. dans une page html 100% de l'écran avec un motif dans body et des textes 90% de l'écran, je ne parvenais pas à avoir le footer avec son cadre autour de ses deux textes float (j'ai pris des couleurs kitch pour mieux voir). j'ai trouvé un code clearfloat dans les templates dreamweaver de pages en deux colonnes, header et footer et je voulais savoir s'il fallait utiliser tout cela, je veux dire que le clear sûrement mais br,...?

En effet le clear est nécessaire mais pas le <br />

Voici les explications : l'ancienne méthode à base de <br /> et autres : http://css.developpez.com/tutoriels/...issement-flux/ et la nouvelle méthode ne nécessitant plus de balise supplémentaire : http://css4design.developpez.com/tut...flux-partie-2/

footer avec deux textes floats : clearfloat

CSS

Discussions similaires

Partager

Partager