Mon footer explose en réduisant la fenêtre [Résolu]

[bond70]

Salut,

Voilà après quelques jours passé sur le footer de mon site, je viens de me rendre compte que quand je réduis la fenêtre du navigateur celui-ci explose litérallement.

Non-réduit :



Réduit :




Savez-vous comment régler cela ?

Merci !

[NoSmoking]

Bonjour,
c'est souvent le cas avec des éléments flottants, mets une min-width sur le conteneur.

[bond70]

J'ai ajouté min-width:920px; sur #supplementary mais c'est pareil :

[bond70]

Avec un max-width vous pensez que ça change quelque chose ?

[franck31]

c'est ton id colophon qu'il te faut définir avec une largeur minimale

[bond70]

Bonjour,

Malheureusement c'est le même problème :

http://dev.leadcreation.com.au



MERCI !

[Hijack]

Bonjour bond70.

Il me semble que la balise <footer> agit dans certains cas comme une balise <span> particulière.

Ajoute dans ton CSS un attribut :

Code :

1
2
 
     display : block;

Cela devrait forcer l'élément 'colophon' à rester en un seul morceau.

[NoSmoking]

J'ai ajouté min-width:920px; sur #supplementary mais c'est pareil :

le 920px sort d'où ?

si je fait l'addition j'obtiens
300 + 600 + 200 = 1100, il faut ajouter les margins soit 10 + 45 = 55, le total donnant 1155,on est loin des 920 .

[bond70]

Salut,

J'ai suivi vos récommandations. Et c'est déjà mieux.

Ma page : http://dev.leadcreation.com.au

Voici mon code actuel :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* =Footer
----------------------------------------------- */
 
#colophon {
	clear: both;
	background:#3BA6EA;
	position:relative;
	/*top:-260px;*/
	margin-top:-280px;
	z-index:1;
	display:block;
	min-width:1900px;
}
#supplementary {
	/*border-top: 1px solid #ddd;*/
	padding: 1.625em 7.6%;
	overflow: hidden;
	width:61%;
	margin:auto;
 
}

Néanmoins deux problèmes persistes :

1) Quand je réduis la fenêtre un petit peu, tout reste en ordre mais il y a un grand espace vide qui reste à gauche du footer :




2) Quand je réduis beaucoup, tout explose comme avant. Avec en plus l'espace qui persite !



Merci de votre aide !

[franck31]

Ton #colophon est à min-width:1900px ça fait très large!!

Si tu fais ça:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
#colophon {
    background: none repeat scroll 0 0 #3BA6EA;
    clear: both;
    display: block;
    margin-top: -280px;
    min-width: 1200px;
    position: relative;
    z-index: 1;
}
 
 
#supplementary {
    margin: auto;
    padding: 1.625em 1.6%;
    width: 95%;
}

ça devrais déjà aller mieu

[NoSmoking]

des padding, des margin des min-width qui ne veulent pas dire grand chose et autres encore, tu as un problème de "conception" de départ, je pense qu'il est préférable que tu arrêtes de replâtrer et que tu reprennes, éventuellement sur papier, ce que tu souhaites réaliser de façon rationnelle pour pouvoir appliquer le style en conséquence.

une mise en page rapide et facile et les éléments sémantiques