Positionnement pied de page [Résolu/Fermé]

Signaler
Messages postés
35
Date d'inscription
mardi 1 janvier 2008
Statut
Membre
Dernière intervention
6 janvier 2008
-
Messages postés
35
Date d'inscription
mardi 1 janvier 2008
Statut
Membre
Dernière intervention
6 janvier 2008
-
Bonjour,

j'ai choisi de positionner tous les blocs de mon site en absolu.
Il y a tout de meme un leger probleme pr le pied de page : j'aimerais que ca position depende de la fin du bloc 'page' : juste a la suite, mais aussi qu'il soit au moins a une distance de 800 pixels du haut de la page.

Comment puis-je faire : peut-on faire une commande du genre,

position: absolute;
top: max ( 800 pixels , hauteur (page)) ???

merci d'avance

10 réponses

Messages postés
688
Date d'inscription
mercredi 16 mai 2007
Statut
Membre
Dernière intervention
5 mai 2010
69
ta essayé avec position: relative?
Messages postés
129
Date d'inscription
jeudi 27 décembre 2007
Statut
Membre
Dernière intervention
15 mai 2014
11
Peux-tu envoyer tout ton code? Ce serait plus facile de t'aider.
Sinon mets ton contenu dans une <div>entre ton entete et ton pied de page, comme ça tu peux lui donner une hauteur mais c'est un peu brouillon. Je ne sait pas si on peut donner une hauteur MINIMALE qui peut s'adapter si besoin est, car avec une hauteur fixe tu risque de deformer le contenu.
max
Messages postés
35
Date d'inscription
mardi 1 janvier 2008
Statut
Membre
Dernière intervention
6 janvier 2008

merci pour vos reponses, en fait, je me suis inspiré du tuto du site du zero, mais le pb persiste, lui n'a pas de pb car sa page dépasse son menu, donc il peut laisser aller le pied a la suite directe de la page.

Voici mon css :

body
{
	width: 760px;
	margin: auto; 
	margin-left: 20px;
	margin-top: 20px;
	margin-bottom: 20px;  
	background-image: url("../images/fond2.jpg"); 
}

	position: absolute;
	top: 10px;
	left: 0px;

#login
{
	width: 760px;
	height: 100px;
	background-repeat: no-repeat;
	margin-bottom: 10px;
}

#entete
{
	margin-top: -20px;
	font-family : Arial, Helvetica, sans-serif;
	font-style : normal;
	font-weight : normal;
	text-decoration : none;
	text-align : left;
	border: none;
	border-style : none;	
	background-repeat: no-repeat;
}

#titre_page
{	
	height: 20px;
	margin-left: 250px;
	margin-top: 20px;
	margin-bottom: 20px;
	padding-left: 0px;
}

#page
{
	margin-left: 250px;
	margin-top: 20px;
	margin-bottom: 20px; 
	padding: 5px;
}

#pied
{
	margin-top: 200px;
}

#menu
{
	float: left; 
	width: 180px; 
}


#menu_compte
{
	width: 150px;
}
Messages postés
688
Date d'inscription
mercredi 16 mai 2007
Statut
Membre
Dernière intervention
5 mai 2010
69
position: absolute;
	top: 10px;
	left: 0px;


ca n'est pas dans l'accolade c'est normal?
Messages postés
35
Date d'inscription
mardi 1 janvier 2008
Statut
Membre
Dernière intervention
6 janvier 2008

oui désolé je fais des tests et je l'ai gardé en reserve
Messages postés
129
Date d'inscription
jeudi 27 décembre 2007
Statut
Membre
Dernière intervention
15 mai 2014
11
j'allais le dire...
Messages postés
129
Date d'inscription
jeudi 27 décembre 2007
Statut
Membre
Dernière intervention
15 mai 2014
11
Voici un simulateur bien sympa en anglais https://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed et le tuto css complet qui vas avec https://www.w3schools.com/css/
Tu pourrais le faire avec position:fixed; mais tu risque d'avoir des problemes si tu as trop de contenu... à tester.
max
Messages postés
35
Date d'inscription
mardi 1 janvier 2008
Statut
Membre
Dernière intervention
6 janvier 2008

ok merci ! je vais regarder ca
Messages postés
5122
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
22 novembre 2020
2 724
Bonjour,

Tu indiques “j'ai choisi de positionner tous les blocs de mon site en absolu”. Qu'est-ce qui a déterminé ton choix ?

Lorsque tu veux laisser traîner du code sans l'utiliser ni l'effacer, tu peux le mettre en commentaire en le plaçant entre
/*   et   */
Le code aurait été complet avec le HTML.



Si j'ai bien suivi ta demande, tu veux placer un pied de page partiel qui sera limité à et dépendra de la partie droite de ta page.
Il serait peut-être plus simple pour toi de partir de là, de créer une partie “droite” (et donc, une partie “gauche") et d'y placer les éléments qui doivent y rester.
Dans ton exemple, le “page”** et le “pied” (que j'appellerai “pdp”).
Tu peux, mais n'es pas obligé d'en passer par du “absolute”.


Je te propose de tester les propositions suivantes.
Ta demande “au moins a une distance de 800 pixels du haut de la page” m'a semblé provenir de “car sa page dépasse son menu”. Je n'en ai pas tenu compte, car on peut faire autrement.

Exemple1
Les blocs “gauche” et “droite” sont en “absolute”.
Le pdp est dans le “droite” sous le “page” sans positionnement particulier.
Sa largeur est limitée (automatiquement) à celle du “droite” sinon…
On ne voit pas le “conteneur”.

Exemple2
Les blocs “gauche” et “droite” sont en “float”.
Le pdp est dans le “droite” sous le “page” sans positionnement particulier.
Sa largeur est limitée (automatiquement) à celle du “droite” sinon…
J'ai ajouté un bloc en “clear” en bas de page pour reprendre le flux normal et contraindre le “conteneur” à englober l'ensemble.

Comme on vient d'utiliser du “float” avec un bloc en “clear”, faisons plus simple.
Exemple3
Les blocs “gauche” et “droite” sont en “float”.
Le pdp est sorti du “droite” et placé après.
C'est à lui, le pdp, qu'on a appliqué le “clear”.
Et alors, il reste en dessous quelle que soit la taille des blocs qui sont au dessus.

Les différents navigateurs que j'utilise rendent ça très bien.
À tester.


**
“page” est ambigu.
Ce mot est utilisé pour beaucoup de chose, une page web…
C'est même un mot-clé en CSS, page.

++
Un aperçu du positionnement : Alsacréations.

--
Messages postés
35
Date d'inscription
mardi 1 janvier 2008
Statut
Membre
Dernière intervention
6 janvier 2008

salut a tous, je me suis fait un bon petit design grace a vous =)
merci beaucoup !
++