Discussion :

[Meloooo]

Bonjour,
Je souhaite créer un header et un footer prenant toute la largeur de la page quelque soit la résolution de l'écran.
Pour l'instant voici mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
	<div class="deg">
	<table cellspacing="0" cellpadding="0" class="header" >
		<tr>
			<td class="logo"><img src="images/logo-2.png" alt="logo" /></td>
			<td class="ico"><img src="images/phone.png" alt="icone phone" /></td>
			<td class="tel">num tel</td>
			<td class="ico"><img src="images/mail.png" alt="icone mail" /></td>
			<td class="contact">Contact</td>	
			<td class="interro">?</td>
			<td class="apropos">A propos de <span class="font">l'entreprise</span></td>	
		</tr>
	</table>
	</div>

et le css associé :

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
 
.deg
{
	background: #494848; /* Old browsers */
	background: -moz-linear-gradient(left, #494848 0%, #1d1d1d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#494848), color-stop(100%,#1d1d1d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #494848 0%,#1d1d1d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #494848 0%,#1d1d1d 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #494848 0%,#1d1d1d 100%); /* IE10+ */
	background: linear-gradient(left, #494848 0%,#1d1d1d 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494848', endColorstr='#1d1d1d',GradientType=1 ); /* IE6-9 */
	height:110px;	
}
 
.header
{
	height:110px;
	margin:0 auto;
}

Je suis en résolution 1600x900, et sur mon écran mon header prend bien toute la largeur de la page, mais dès que je réduis ma fenêtre (et que j'apercois l'ascendeur en bas) et que je navigue, mon header ce coupe et le reste est blanc, alors que je voudrais que mon dégradé continu.

Merci de vos réponses.

[elfamine]

Bonjour,

Je viens de tester ton code sur firefox j'ai du ajouté un

Code :

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

1
2
body{
margin :0; padding :0;}

au CSS, et en réduisant la fenetre je n'ai rien constaté d’étrange.

une petite capture d'ecran pour illustrer le problème ?

Ps : Il me semble que c'est déconseillé d'utiliser <table> pour la mise en page...

[Meloooo]

Voilà la capture d'écran (j'ai volontairement mis un rectangle blanc dans un bouton, pour pas voir le nom de l'entreprise)
http://imageshack.us/photo/my-images/515/bugpt.png/
C'est la fin de mon header, et quand je redimensionne et que je bouge avec l'ascenseur voici le résultat... Il y a du blanc.
Le body possède bien le margin et le padding à 0.
Merci de votre réponse

[elfamine]

Je ne sais pas si va répondre à ta question mais moi ce que je te conseil de faire c'est de mettre une div qui va encapsuler ton header

Code :

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

1
2
3
<div id="header_wrapper">
<- ton header ici
<div>

Code :

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

1
2
3
4
5
6
7
8
9
10
#header_wrapper{
	background: #494848; /* Old browsers */
	background: -moz-linear-gradient(left, #494848 0%, #1d1d1d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#494848), color-stop(100%,#1d1d1d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #494848 0%,#1d1d1d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #494848 0%,#1d1d1d 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #494848 0%,#1d1d1d 100%); /* IE10+ */
	background: linear-gradient(left, #494848 0%,#1d1d1d 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494848', endColorstr='#1d1d1d',GradientType=1 ); /* IE6-9 */
	height:110px;}

[Meloooo]

Cela fait exactement la même chose, dès que je réduis ma fenêtre, mon header est de la bonne couleur et dès que je vais vers la droite, il se coupe et devient blanc.

[elfamine]

et si tu enlève height:110px; ?

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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="960_12_col.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header-wrapper">
	<div id="header" class="container_12">
	<div id="block-header" class="grid_12">
	<div id="menu" >
		<ul>
		<li>Logo IcI</li>
		<li><img src="phone.png" alt="icone phone" /> Telephone</li>
		<li><img src="email.png" alt="icone phone" /> Contact</li>
		<li>?<span class="about"> A propos de </span><span class="font">l'entreprise</span></li>
		</ul>
	</div>
	</div>
	</div>
</div>
 
</body>
</html>

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
body{
margin :0; padding :0;}
 
#header-wrapper{
	background: #494848; /* Old browsers */
	background: -moz-linear-gradient(left, #494848 0%, #1d1d1d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#494848), color-stop(100%,#1d1d1d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #494848 0%,#1d1d1d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #494848 0%,#1d1d1d 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #494848 0%,#1d1d1d 100%); /* IE10+ */
	background: linear-gradient(left, #494848 0%,#1d1d1d 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494848', endColorstr='#1d1d1d',GradientType=1 ); /* IE6-9 */}
#menu{
 
	width:540px;
	margin:0 auto;}
#menu ul{ 
	list-style: none;}
#menu ul li{
float: left;
display:   inline;}

voila ce que ca donne chez moi : http://i.imgur.com/Mqv5o.png