fixer un div

7 décembre 2005 à 10:52:53

Bonjour a tous.

Je suis un nouveau et un debutant sur ce site.
Je suis entrain de reliser un site, et j'aimerais qu'un de mes div reste toujours fixe en bas de la page sans scroll???

Pour le moment, j'arrive a la placer toujours en bas, mais des que je change la resolution ou redimensionne la page du navigateur, mon div reste en bas de la page, mais j'obtiens une barre de scroll vertical. Comment faire pour eviter ceci?

Merci pour votre aide.
Franck

JulFisher

7 décembre 2005 à 11:01:42

Tu peux utiliser le positionnement absolu, je pense que ça devrait fonctionner.

Essaie comme ceci pour ton bloc :

#bloc
{
position: absolute;
bottom: 0px;
}

http://siteduzero.com/tuto-3-44-1-mise-en-boite-partie-2-2.html#ss_part_3

francky

7 décembre 2005 à 11:13:05

Merci, mais mon element DIV reste toujours en-bas de la page, par contre j'obtiens toujours une barre de scroll vertical. Comment faire pour supprimer ceci?

Dans le body de mon css, j'ai mis background-attachment:fixed;, mais ce ne change rien.

JulFisher

7 décembre 2005 à 11:18:47

Citation : francky

Dans le body de mon css, j'ai mis background-attachment:fixed;, mais ce ne change rien.

C'est normal, c'est juste pour l'image de fond.

Ensuite, est-ce que tu as toujours le scroll ? Même sans le bloc que tu veux placer en bas ? Tu peux montrer la page ?

Raphael

7 décembre 2005 à 11:21:52

Pour fixer un élément en bas de page, il faut utiliser la déclaration "position : fixed".

Le problème est que cette position simple n'est pas encore reconnue par IE, donc il faut bidouiller :
http://forum.alsacreations.com/faq/#item67

JulFisher

7 décembre 2005 à 11:34:59

Regardez, j'ai repris l'exemple de Màteo21 (m'en veux pas

) et cela fonctionne très bien sur IE, FF et Opéra quel que soit la taille de la fenêtre :

http://julfisher.free.fr/tutos/position.html

Sinon, le scroll est peut-être du à autre chose ? Montre-nous ton code pour qu'on jette un coup d'oeil.

francky

9 décembre 2005 à 9:02:18

Bonjour,

Desoler pour le retard, mais j'ai eu droit a un jour de deplacement.

Voici le code html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Else Automation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="forme_css.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

</script>

</head>

<body>

<div id="menu">
<dl>
<dt onmouseover="javascript:montre('smenu0');"><a href="else-home.html" target="mainFrame">Home</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');"><a href="#">About Us</a></dt>
<dd id="smenu1">
<ul>
<li><a href="#">Compagny Profile</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Key Values</a></li>
<li><a href="#">Why choose Else?</a></li>
</ul>
</dd>
</dl>

</div>

<div id="home">
</div>

<div id="foot">
<div id="bottomLinks">
<div id="else-foot">
<a href="else_All.htm">Headquarter :</a>
</div>
<div id="else-foot2">
<a href="else_Neue.htm">Branch Office :</a>
</div>
</div>
</div>

</body>
</html>

Et le code CSS

/* CSS Document */

body{
font-family: Verdana,sans serif;
color: #333333;
background-color: transparent;
background-image: url('picture/else-automation-back.jpg');
background-attachment:fixed;
}

/*Le menu de la page*/

#menu {
position: absolute;
left:4px;
width: 150px;
height: 500px;
top: 250px;
z-index:100;
width: 160px;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
font-size:12px;
}

#menu dl {
float: left;
width: 150px;
}

#menu dt {
color: #FFFFFF;
text-decoration: none;
text-align: center;
font-weight: bold;
display: block;
height: 20px;
border: 0 none;
background:#5cb0bf;
border-top:2px solid white;
}

#menu dd {
display: none;
}

#menu li {
text-align: center;
background: #fff;
}

#menu li a{
color: #5cb0bf;
text-decoration: none;
text-align: center;
display: block;
height: 20px;
border: 0 none;
background:#FFFFFF;
border-top: 0px solid white;
}

#menu dt a {
color: #FFFFFF;
text-decoration: none;
text-align: center;
display: block;
height: 20px;
border: 0 none;
background:#5cb0bf;
border-top:0px solid white;
}

#menu dt a:hover {
color:#FFFFFF;
background:#0e2b88;
}

#menu li a:hover{
color: #0e2b88;
background:#FFFFFF;
}

/*Le corps de la page*/

#home{
margin-left:158px;
margin-right:4px;
margin-top:4px;
margin-bottom:50px;
padding:5px;
background-color:#FFFFFF;
border:2px solid black;
}

/*Le pieds de la page*/

#foot{
position:absolute;
left:50%;
margin-left:-350px;
font-size: 8pt;
position: absolute;
bottom:2%;
width: 700px;
height: 42px;
}

#else-foot{
position: absolute;
top:0%;
left:0px;
color:#FFFFFF;
font-size: 100%;
text-align: center;
width:700px;
height: 20px;
background:#5cb0bf;
border-bottom: 2px solid #000000;
padding:1px;
}

#else-foot2{
position: absolute;
bottom:0%;
left:0%;
color:#FFFFFF;
font-size: 100%;
text-align: center;
width: 700px;
height: 20px;
background:#0e2b88;
padding:1px;
}

#bottomLinks a:link,#bottomLinks a:visited{
font-weight:bold;
color:#FFFFFF;
text-decoration: none;
}

#bottomLinks a:hover{
font-weight:bold;
color:#585858;
text-decoration: none;
}

Merci pour l'aide
Franck

fixer un div

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

fixer un div

fixer un div

Supprimer

Modérer

Signaler le message aux modérateurs