28220 sujets

CSS et mise en forme, CSS3

[Résolu] Adaptation du modèle 12

Bonjour,

Je cherchais une mise en page générale qui simule le comportement des frames en prenant toute la hauteur de la zone d'affichage avec un entete, un pied et au milieu un menu et une zone de contenu.
J'ai trouvé le modèle de mise en page 12 sur alsacreation (Excellent boulot ces modèles soit dit en passant ! Bravo !) mais un petit détail me chiffonne.

Tel que c'est fait c'est la hauteur du menu et du contenu scrollable qui sont fixés (à 300px) et le pied de page qui prend le reste de la hauteur. Et moi j'aimerais bien pouvoir fixer la hauteur du pied de page et que la zone menu+contenu prenne le reste de la hauteur. Alors déjà est-ce que c'est faisable directement ça. Parce que j'ai essayé plein de trucs et j'ai rien trouvé qui fonctionne.

Sinon, pour contourner le problème, est-ce qu'il existe un moyen d'injecter une valeur qui tienne compte de la hauteur de la zone d'affichage dans la feuille de style à la place du 300px de la hauteur du menu et de la zone de contenu ? Genre hauteur totale - hauteur fixe de l'entête - hauteur fixe du pied de page...
Est-ce que je peux récupérer cette donnée quelque part, avec javascript par exemple et l'injecter dans ma mise en page ?

Merci d'avance

rozwel
Modifié par rozwel (03 Apr 2005 - 02:53)
bonsoir,


.footer {
height: 30px;
background-color: #FFFFFF;
}


tu ajoute ceci a ton css.
Attention, la couleur du footer(#FFFFFF) c'est du blanc pour bien le voir par rapport a la couleur du conteneur(#99CC99).
C'est pour cela qu'en dessous du footer tu vera encore une couleur (verte ou presque)
C'est maintenant a toi a definir les couleur que tu veux.

amicalement,
Salut,

avec js tu dois pouvoir faire des choses...

Regarde l'article de bobby van der sluis, Exploring Footer sur ALA.

Si tu ne lis pas l'anglais, il y a une traduction sur Pompage, même date de parution que l'article original, et qui s'appelle je crois: les pieds (de page) dans le plat
Modifié par alex_br (02 Apr 2005 - 22:28)
ganou66 a écrit :
bonsoir,

tu ajoute ceci a ton css.
Attention, la couleur du footer(#FFFFFF) c'est du blanc pour bien le voir par rapport a la couleur du conteneur(#99CC99).
C'est pour cela qu'en dessous du footer tu vera encore une couleur (verte ou presque)
C'est maintenant a toi a definir les couleur que tu veux.

amicalement,


Oui mais non parce que moi je veux que le footer il soit collé en bas de l'écran et que la zone du mileu prenne toute la place restante...
Smiley murf Donc je vais fouiller dans cet article et voir si je trouve mon bonheur...

Merci
Administrateur
Salut,

Très rapidement (désolé), as-tu pensé à faire un tour dans la FAQ? Il y'a un item sur les pieds de page Smiley cligne
Modifié par Raphael (02 Apr 2005 - 22:35)
Ok merci beaucoup l'article m'a beaucoup aidé. Faire mumuse avec les positionnement je trouvais ça un peu biaisé et j'ai préféré utiliser la technique avec Javascript mais pour le coup ça m'a réservé une petite surprise : ça marche mieux sur Internet Explorer que sur Firefox Smiley eek Smiley biggol

En fait j'ai modifié la fonction setFooter pour faire en sorte qu'elle modifie la hauteur du menu et du contenu en fonction de la hauteur de la zone d'affichage et des autres éléments (header et footer) :

function setFooter() {
	var headerHeight = document.getElementById('header').offsetHeight;
	var footerHeight = document.getElementById('footer').offsetHeight;
	var windowHeight = getWindowHeight();
	var middleHeight = windowHeight - footerHeight - headerHeight;
	document.getElementById('menu').style.height = middleHeight;
	document.getElementById('content').style.height = middleHeight;
}


La fonction getWindowHeight est la même que dans l'article et j'ai vérifié : elle est fiable et retourne bien la hauteur de la zone d'affichage.
Le problème qui semble se produire c'est que sous firefox les deux dernières lignes de la fonction setFooter n'ont aucun effet, alors que sous IE ça marche nickel. j'ai essayé en remplaçant height par offsetHeight mais là ça ne marchait nulle part.
Je vous laisse comparer le résultat à cette adresse : http://www.epseelon.org/test

Des idées ? la propriété height est-elle en lecture seule sur firefox ou quoi ?

Merci d'avance
Ayé j'ai trouvé en fait comme souvent ct tout con : il suffisait que je précise l'unité en concaténant la notation "px" derrière la taille. Apparemment sans unité IE suppose que c'est des pixels alors que pour firefox ce n'est tout simplement pas acceptable. Mmmmmh peut être un petit effort de tolérance à faire du côté de chez firefox la...

document.getElementById('menu').style.height = middleHeight+"px";
document.getElementById('content').style.height = middleHeight+"px";


En tout cas merci à vous...
Sujet clos
Aller à