28221 sujets

CSS et mise en forme, CSS3

Div en bas

Bonjour,

j'ai un problème au niveau d'un div qui doit rester toujours en bas de la page
 .bas {
border: 1px solid #000000;
padding-bottom : 10px;
width : 783px;
color : #ccc;
bottom : 0;
position : absolute;
background-color : #333;
height : 20px;
}


voici mon site
http://cinema-martinique.independza.com/

ce problème survient avec des versions inférieur a FireFox 1

merci de l'aide
Oui en effet, ça pose un problème... Mais c'est pareil sous IE ;)

Par contre, je ne vais pas pouvoir t'aider personnelement sur ce coup là parceque j'ai jamais tenté cette manip...
Oupss mea culpa, j'ai mal lu, pour les version inférieures à la 1... pas moyen de tester, désolé.

Mais avec FF1 et IE6, quand tu diminues la taille de la fenetre, le pied de page se calle bien en bas de la fenetre, mais quand tu scrolles, il reste où il est et donc, cache un morceau de texte...
Tout à l'air ok pour moi avec IE6 et Firefox 0.8...

Non pardon effectivement ca reste en haut après un scrolling avec firefox
Modifié le 20 Oct 2004 - 14:41
Oui, c'est un comportement "normal" la valeur bottom est toujours calculer par rapport a la hauteur visible de la page... et ce sur tout les navigateur si mes souvenir sont bon

Pour les pied de page, je conseill plutot un mix de positionnement relatif et de min-height

Sinon :
> http://www.pompage.net/pompe/pieds/
d'apres ce que j'ai compris je suis obligé d'utilisé un hack

Mais je ne comprends pas ce que c'est exactement
j'ai essayé de faire comme dans l'exemple 3
voici ma feuille de style
html, body {
height: 100%;
}
body{
font-size : 10px;
background-image : url(../images/back.gif);
margin : 0;
padding: 0;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
#container {
position: relative;
min-height: 100%;
height: 100%;
height: auto;
}
html>body #container {
height: auto;
}
.top {
border : 1px solid #000000;
margin-top : 2px;
float : right;
width : 783px;
position : absolute;
top : 0;
background-color : #ffffff;
}
.fond {
border : 1px solid #000000;
margin-top : 10px;
overflow : auto;
width : 783px;
position : absolute;
top : 195px;
height : 440px;
background-color : #717171;
}
.bas {
border : 1px solid #000000;
padding-bottom : 10px;
position : absolute;
bottom:0px;
width : 783px;
color : #ccc;
background-color : #333;
height : 20px;
}


http://cinema-martinique.independza.com/

mais c'est pas vraiment ca Smiley bawling
Administrateur
En fait, comme l'explique l'article, il faut passer par javascript pour que ça fonctionne partout.
Ah bon

dans la dernier partie il parle d'un model hack
Grâce au box model hack, vous pouvez appliquer des règles de style à Internet Explorer 5.x/Windows uniquement. Vous devez définir la hauteur du conteneur de la façon suivante :

mais pas de javascript ,
un model hack c'est du javascript ? Smiley rolleyes

j'aimerais bien savoir pouquoi ma page un décalage pourtant
j'ai mis 

margin : 0;
padding: 0;

Modifié le 21 Oct 2004 - 14:16
mais d'apres le lien que tu m'as fournis sur les model hack
ca permet de fonctionner sur ie 5.X non
Tantek Çelik a mis au point une méthode de contournement devenue fameuse, le box model hack . Il exploite une erreur de parsing d'IE 5.x Windows, c'est à dire un défaut dans sa manière de lire la syntaxe CSS2. Ceci permet de :

g modifier ma feuille de style car g compris un peu mieux
html, body {
height: 100%;
}
body{
margin: 0;
padding: 0;
font-size : 10px;
background-image : url(../images/back.gif);
font-family : Verdana, Arial, Helvetica, sans-serif;
}
#container {
position: relative;
min-height: 100%;
height: 100%;
voice-family: "\"}\"";
voice-family: inherit;
height: auto;
}
html>body #container {
height: auto;
}
.bas {
border : 1px solid #000000;
padding-bottom : 10px;
position : absolute;
bottom:0px;
width : 783px;
color : #ccc;
background-color : #333;
height : 20px;
}
.top {
border : 1px solid #000000;
margin-top : 2px;
float : right;
width : 783px;
position : absolute;
top : 0;
background-color : #ffffff;
}
.fond {
border : 1px solid #000000;
margin-top : 10px;
overflow : auto;
width : 783px;
position : absolute;
top : 195px;
height : 440px;
background-color : #717171;
}


g une question Smiley sweatdrop il y a une différence entre
.bas{
(....)
}
et
#bas{
...
}
alors depuis que g déplacé ce code
<script type="text/javascript">
<!--
function mesure(_MesurePro, _page)
{
scr_w = screen.width;
scr_h = screen.height;
color = screen.colorDepth;
ref = escape(window.document.referrer);

document.write("<IMG src='http://www.direct-stats.com/cgi-bin/pro/stats/bolo/marqueur.pl/"+ "?page="+ _page+ "&n="+ Math.round (Math.random () * 1000000000000000)+ "&reso_w="+ scr_w+ "&reso_h="+ scr_h+ "&color="+ color+ "&referer="+ ref+"' style='border:0px'>");
}
mesure("Mesure Pro", "03");
//-->
</script>


ca fonctionne sur ie 6 et sur FireFox 1
ca serait cool que d'autre personne teste sur d'autre navigateur
merci pour le lien g fais les modifs au niveau de ma page 
html, body {
height: 100%;
}
body{
margin: 0;
padding: 0;
font-size : 10px;
background-image : url(../images/back.gif);
font-family : Verdana, Arial, Helvetica, sans-serif;
}
#container {
position: relative;
min-height: 100%;
height: 100%;
voice-family: "\"}\"";
voice-family: inherit;
height: auto;
}
html>body #container {
height: auto;;
}
#bas {
position : absolute;
border : 1px solid #000000;
padding-bottom : 10px;
bottom:0px;
color : #ccc;
background-color : #333;
height : 20px;
width: 783px;
}
#top {
width: 783px;
border : 1px solid #000000;
margin-top : 2px;
float : right;
position : absolute;
top : 0;
background-color : #ffffff;
}
#fond {
border : 1px solid #000000;
margin-top : 10px;
overflow : auto;
position : absolute;
top : 195px;
height : 440px;
width: 783px;
background-color : #717171;
}


ca a l'air de fonctionner sur ie 6 mais sur FireFox 1
Lorsque que je scrolle avec la bar la div ne bouge mais si je scrolle la fenetre directement là la div bouge :(
Sujet clos
Aller à