Marge bas dans gabarit css n°3

Bonjour,

Au sujet du gabarit css n°3 : quand je met du contenu dans le bloc avec l'id #centre, si il y a beaucoup de texte, le "pied" se colle au bas du navigateur. Comment avoir une marge entre le "pied" et le bas du navigateur ? La seule solution que j'ai trouvé pour l'instant, c'est de rajouter un bloc vide en dessous. J'ai esseyé toutes les fonctions de marge en CSS... rien à faire. Cela marche pour la marge du haut mais pas pour celle du bas.

Merci !

Pour la marge du haut il faut :

padding-top:5px;

dans le body.

Et si tu utilise en plus un conteneur général de ton site comme moi, dedans tu met.

padding-bottom:5px;

pour celle du bas.

Ca marche que dans cette configuration là, allez savoir pourquoi, sur les 3 navigateurs que j'utilise. IE, Mozilla, Opera
Modifié par Damonya (30 Oct 2005 - 02:05)

Bonjour,

oui pour la marge d'en haut, j'y étais arrivé. Je t'ai mis un essai basé sur le modele 3 des gabarits CSS d'Alsacréations, auquel j'ai rajouté du texte pour agrandir la page en hauteur et j'ai seulement rajouté comme tu dis dans la feuille de style :

- dans le "body" -> padding-top:5px;
- dans le conteneur "#centre" -> padding-bottom:5px;

Le pied est effectivement remonté de 5 px, mais le conteneur est toujours collé au bas du navigateur. Je precise que je cherche à décoller le conteneur (avec l'id : #conteneur) du bas du navigateur.

-> mon essai ici
-> Le gabarit modele

J'ai le même résultat dans IE et Firefox (à jour).
Modifié par Newzic (30 Oct 2005 - 13:04)

C'est bien ce que j'ai fait. Voici la fin du code de ma page :

<div id="pied">pied de page de largeur fixe : 750px </div>
</div> (et cette derniere balise ferme le bloc conteneur avec l'id #conteneur)

Mais as tu visualisé mon essai et as tu le même rendu que moi ? C'est à dire le conteneur bleu clair collé au bas du navigateur et le pied en vert qui est remonté de 5 px ?

Ah ok, peut-être que j'ai pas abordé le problème dans le bon sens. En fait, je veux ce fond bleu dans le conteneur du menu (le div avec l'id #gauche).
Le problème, c'est que je n'arrive pas à faire en sorte que ce conteneur du menu fasse toute la hauteur du conteneur principal (id #conteneur). Je te met un exemple ici de ce que ça rend.

C'est pour cela que j'avais mis le fond bleu dans le conteneur principal. Alors comment faire pour que ce div avec l'id #gauche fasse la hauteur du conteneur principal ayant l'id#conteneur ? (en attendant d'acheter le livre !)

Merci pour la patience !

le mieux à mon avis c'est que tu fasse un conteneur général pour mon effet et un conteneur englobant les éléments que tu veux seulement pour ton effet.

Faut aussi réfélchir comme ça, sans aller à l'excès avec des blocs qui s'empilent à outrance entre eux, mais parfois ca devient intéressant de gérer deux blocs l'un dans l'autre plutôt qu'un seul bloc où l'on veut 2 effets différents dessus. Je sais pas si t'as compris ce que je voulais dire, mais pour mon template http://forum.alsacreations.com/topic-23-8405-1-Template-Alsacreations--Question-sur-un-CSS.html#copy
réalisé j'utilise body et conteneur générale conteneur entête et conteneur pied, mais pour le mileu j'utilise deux blocs l'un au-dessus de l'autre réparti chacun dans un bloc gauche et un bloc droit. En tout ca fait 9 blocs + body pour 6 cadres . J'aurais aussi put rajouter un bloc centrale englobant le bloc gauche et le droit, mais c'etait inutile.

bonjour,
je ne sais pas ou tu en est, mais avec quelque modification du css a partir du gabarits que tu as mis en ligne, la marge basse apparait chez moi dans IE, FF et Opera, (les autres si quelqu'un peut tester :

il s'agit de passer le padding-bottom a html , puis de mettre le conteneur en position:relative; au lieu de le garder en position:absolute;

html {padding-bottom:5px;}
}
#conteneur {
	 position: relative; /*on replace en relative */
	width: 750px;
	left: 50%;
	margin-left: -375px;
	background-color:#CCCCFF;
}

Dans opera , cette marge basse interieur semble etre augmenté d'un demi interligne ? .

++

<edit> simplifie en passant toutes les marges dans html

html{padding:5px 0;}

</edit>
Modifié par gcyrillus (30 Apr 2006 - 01:23)

Je savais pas qu'on pouvait mettre des parametres pour html (bien que je l'ai déjà vu... mais je croyais que certains mettaient ça au pif !). A body, je comprendrais, mais à html, cela agit sur quoi ?
Modifié par Newzic (02 May 2006 - 21:44)

html est la premier balise , parente de toute les autres .
C'est le fond, la base ou se pose tout le document, c'est aussi la que l'on peut donner quelques informations, la langue, le sens d'affichage du document, etc ... .
C'est aussi par defaut dans une page vide 'l'espace" de ta fenetre de navigateur ....

Par defaut une marge est souvent appliqué a <html>.

Code a tester:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>essai visualisation marge defaut  html</title>
<style type='text/css'>
html {
background-color:red;
/*margin:0;  */
}
body {
background-color:blue;
border:3px solid yellow;
color:#fff;
}
</style>
</head>
<body>
<div>Test a effectuer dans differents navigateur, 
En mode "quirk dans IE la page est entierement bleu 
et la marge reportée a l'interieur de body.</div>
</body>
</html>

++
Modifié par gcyrillus (03 May 2006 - 14:59)

je connais l'existence de la balise html, mais je n'étais jamais remonté si haut pour assigner des attributs ! Bon, c'est bien, ça libere le body pour d'autres choses.

C'est quoi le mode Quirk ?

bonjour,

Le mode "quirk" s'oppose au mode "standard" ... .
En raccourcie:
Le mode standard correspond a une interpretation de la page par le navigateur selon les "standard" proposé par le w3c. Ce qui implique d'abord de donné un doctype (complet) a la page. Cette etape passée , le navigateur va "affiché" la page en fonction du doctype rencontré et prendre en consideration les regles css.

En principe la page devrait etre affiché de façon quasi identique (ou avoir un comportement similaire)d'un navigateur a l'autre, mais voila, Ils ne reconnaissent pas tous les mêmes regles ou en partie seulement (position:fixed n'est pas comprise par IE6, display:table; non plus , les pseudo elements sont aussi mal implementé, etc...).
Chaque navigateur aura donc sa version "personnalisé" , au fil du temps et des mise a jours des navigateurs , les differences devrait etre moins "marqué".
Autre aspect, chaque navigateur vas tenter de corriger des erreurs de codages , comme une balise pas refermé, ou scotchés dessus . chacun a leur maniere. .

En mode quirk, le navigateur interpreteras la page "a sa façon" et le resultat d'un navigateur a l'autre risque d'etre tres differents.
Et c'est dans internet explorer que l'on remarque les plus grandes differences (ou bugs).

Pour reprendre le code de test plus haut , en remplaçant:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

par

<html>

IE va passer en mode "quirk" et l'affichage deviendras "different" , Il y auras alors 3 affichage different, selon IE, Firefoxe et opera.

Dans le mode standard on s'aperçoit que IE et firefoxe ont le même affichage , mais que la marge par defaut est appliqué a l'interieur de body dans opera.
Alors en redeclarant et/ou annulant les regles par defaut des uns et des autres:

<style type='text/css'>
html {
background-color:red;
margin:1em; 
}
body {
background-color:blue;
border:3px solid yellow;
color:#fff;
padding:0;
}
</style>

On arrive a un resultat assez similaire dans IE et les autres, mais pas en mode quirk.
Ce qu'il faut retenir, c'est qu'il est preferable de coder une page avec un doctype complet et valide, en suivant les normes ou standard imposé par celui-ci (pas plus compliqué en fait et surtout plus facile a gerer par la suite ) , et que les risques de difference d'affichage / d'interpretation par les differents navigateurs sont nettement amoindris .

sinon, pour en savoir plus , une petite recherche sur le site d'alsacreations , probablement dans la faq.
++