Positionnement pied de page

Résolu
tonio1 Messages postés 35 Date d'inscription   Statut Membre Dernière intervention   -  
tonio1 Messages postés 35 Date d'inscription   Statut Membre Dernière intervention   -
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
A voir également:

10 réponses

Réponse 1 / 10
pashmina Messages postés 688 Date d'inscription   Statut Membre Dernière intervention   71
 
ta essayé avec position: relative?
0
Réponse 2 / 10
madmaskx Messages postés 129 Date d'inscription   Statut Membre Dernière intervention   14
 
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
0
Réponse 3 / 10
tonio1 Messages postés 35 Date d'inscription   Statut Membre Dernière intervention  
 
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;
}
0
Réponse 4 / 10
pashmina Messages postés 688 Date d'inscription   Statut Membre Dernière intervention   71
  
position: absolute;
	top: 10px;
	left: 0px;


ca n'est pas dans l'accolade c'est normal?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 10
tonio1 Messages postés 35 Date d'inscription   Statut Membre Dernière intervention  
 
oui désolé je fais des tests et je l'ai gardé en reserve
0
Réponse 6 / 10
madmaskx Messages postés 129 Date d'inscription   Statut Membre Dernière intervention   14
 
j'allais le dire...
0
Réponse 7 / 10
madmaskx Messages postés 129 Date d'inscription   Statut Membre Dernière intervention   14
 
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
0
Réponse 8 / 10
tonio1 Messages postés 35 Date d'inscription   Statut Membre Dernière intervention  
 
ok merci ! je vais regarder ca
0
Réponse 9 / 10
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779
 
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.

--
0
Réponse 10 / 10
tonio1 Messages postés 35 Date d'inscription   Statut Membre Dernière intervention  
 
salut a tous, je me suis fait un bon petit design grace a vous =)
merci beaucoup !
++
0

Discussions similaires

[référencement] Ne pas être référencé
kij_82 -
Searaphina -

10 réponses