Largeur de pied de page

**coucou1** · 18/05/2016, 12h04

Bonjour,

J'ai un pied de page :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
#foot1 {
    	position : absolute;
   	float:left;
	bottom: 10px;
	padding : 10px 15px;
        background : #BE7C42;
        border: solid 2px #511404;
        -webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	}

Mais j'aimerais qu'il fasse toute la largeur de la fenêtre du navigateur. Actuellement, il s'adapte au texte.

J'ai tenté un width: 100%, mais du coup le pied de page dépasse de la largeur de la fenêtre du navigateur.

Invité · 18/05/2016, 14h27

Bonjour,

Sans le code HTML associé, on ne peut rien dire.

Code css :

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

left:0; right:0;

?

**coucou1** · 18/05/2016, 14h45

Voilà, il s'agit de ceci:

http://alphane.esy.es/

Ici, la page d'accueil :

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
<link rel="stylesheet" type="text/css" href="style.css"/> <! lien vers le css>
 
<html>
    <head>
        <title>Index.php</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <h2>Nom de page</h2>
		<p>
			<h3>Blablabla titre truc</h3>
			<?php include("menu.php");?> 
			   <div id="description-menu">
			   <br></br>
			   <?php echo "Test ECHO php"; ?>
			   <br></br>
			    drfgdfrg iudcshzuic, oiuhsqIUFD, OIFjzeoid
			    </br>
			     <br>
			      dfgdfqg iudcshzuic, oiuhsqIUFD, OIFjzeoid
				</br>
				dvfvdfv
				</br>dfgvdfbvfddbdfgbdfgbdfbdf
			</div>
 
		      <?php include("foot.php"); ?>
 
	</body>

ça c'est le php du pied de page:

Code :

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

1
2
3
4
5
<link rel="stylesheet" type="text/css" href="style.css"/>
 
	<div id="foot1">  <!lié à #foot1{} de style.css>
		<i>Pied de page:</i> blablablablabla
  	</div>

là 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
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
/*reset des margin (mettre à zéro)*/
*
{
 margin:0px;
 padding:0px;
}
 
 
body  {background-color: #E1A561;}
 
h2 { color: #511404; font-family: Times, sans-serif; font-size: 60px; text-align: center;} 
h3 { color: #E32D00; font-family: Ubuntu, sans-serif; font-size: 30px; text-align: left;} 
 
 
#description-menu {
margin-left:250px;
}
 
 
 
#menu2 {
 	margin : 10px;
	width:150px;
	float:left;
    padding : 20px;
    background : #BE7C42;
    border: solid 10px #511404;
 
    -webkit-border-radius: 20px;
	-webkit-border-bottom-right-radius: 150px;
	-moz-border-radius: 20px;
	-moz-border-radius-bottomright: 150px;
	border-radius: 20px;
	border-bottom-right-radius: 150px;
}
 
 
 
#foot1 {
background : #BE7C42;
position:absolute;
bottom:0;
margin-right:10px;
margin-left:10px;
width:100%;
padding-top:20px;
padding-left: 20px;
padding-bottom: 20px;
border: solid 2px #511404;
    -webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
 
 
}
 
 
/*width:100%;
	padding : 10px 15px;
	bottom: 10x;
	background : #BE7C42;
    border: solid 2px #511404;
    -webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;*/
 
 
 
a:link {color: #0038F0;}
a:visited {color: #999999;}
a:hover {color: #4364E9;}
a:focus {color: #4364E9;}
a:active {color: #4364E9;}

Invité · 18/05/2016, 15h27

Bon.
Là, ça manque clairement de structure HTML...

Il faut imaginer les <div> comme des "boites", qui s'empilent ou s'emboitent les unes dans les autres.
Les balises HTML5 permettent d'ajouter de la sémantique (du sens aux balises)

Largeur de pied de page

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager