positionnement pied de pageRésolu/Fermé

Question

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

pashmina · Answer

ta essayé avec position: relative?

madmaskx · Answer

Peux-tu envoyer tout ton code? Ce serait plus facile de t'aider. Sinon mets ton contenu dans une

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

tonio1 · Answer

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;
}

pashmina · Answer

position: absolute;
	top: 10px;
	left: 0px;

ca n'est pas dans l'accolade c'est normal?

tonio1 · Answer

oui désolé je fais des tests et je l'ai gardé en reserve

madmaskx · Answer

j'allais le dire...

madmaskx · Answer

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

tonio1 · Answer

ok merci ! je vais regarder ca

Gihef · Answer

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.

--

tonio1 · Answer

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

Positionnement pied de page

10 réponses

Discussions similaires

Newsletters