Discussion :

[miltonis]

Bonjour,
oui je sais il ya eu des sujets semblables dans les parrages mais je n'ai pas trouvé qui rentrent dans mon cas.

ça marche super sur IE mais pas sous Firefox (pour une fois.... )
en fait je veux placer une Div en tant que footer. Attention, pas d'une page mais d'une "colonne" comme en bas de cette page (crédits photos en dessous des photos)

pour ça, j'ai ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<TD id="td_rn" class="yellow_rn">
<ul class="ul_photos">
<li class="li_photos"><img src="../Pics/carte-chiclayo.gif" width="180" alt="Chiclayo - Carte du Pérou"></li>
<li class="li_photos"><img src="../Photos/chiclayo_01.jpg" width="180" alt="Chiclayo, Perou - cathédrale"><br>Cathédrale de Chiclayo</li>
<li class="li_photos"><img src="../Photos/chanchan_01.jpg" width="180" alt="Chiclayo, Perou - Chan chan"><br>Ruines de Chan Chan</li>
</ul>
 
<div class="links_rn">
 <h4>Chiclayo : liens en relation</h4>
      <a href="" class="">Ruines de Chan Chan</a><br>
      <a href="" class="">Señor de Sipan</a><br>
      <a href="" class="">Trujillo</a>
</div>
 
<div id="td_rn" class="credits_rn">
Crédits photo cathédrale :<br> Prom Perù
</div>
</TD>

et le CSS correspondant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/*---------  RIGHT_NAV  ---------*/ 
#td_rn {
position: relative;
width: 180px;
vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #444444;
text-align: center;
}
h4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #444444;
font-weight: normal;	
text-decoration: underline;
padding-bottom: 5px;
margin: 0;	
}
.links_rn {
background-color: #FCD769;
text-align: center;
padding: 8px 0 8px 0;
margin: 30px 0 0 0;	
}
.credits_rn {
position: absolute;
bottom: 0;
width: 180px;
background-color: #FCD769;
/*text-align: center;*/
padding: 10px 0 10px 0;
}
 
.ul_photos {
list-style-type: none;
padding: 10px 0 0 0;	
margin: 0;
}
.li_photos {
padding-bottom: 10px;
}
 
.yellow_rn {
position: absolute;
background-color: #F8E38E;
bottom: 0;
}

voilà, je pense avoir fait tout mon possbile mais le footer persiste à rester juste en dessous du DIV links_rn. Que ce soit sous IE ou FF.
Que faire?

Pour info, je vais passer un site aux normes W3C et je fais tout ceci sur une page de tests. Jusqu'ici tout allait bien mais là, je sature.
merci de votre aide

[siddh]

euh ben deja met toi d accord avec toi meme, tu met un id et une classe a ton div avec un coup position relative apres absolute ....

[miltonis]

oui tu as raison.
j'ai enlevé le ID mais maintenant le DIV n'est plus dans la colonne. Il dépasse par la droite de beaucoup.

[siddh]

dans la mesure ou il est dans ta cellule, pourquoi tu lui met une position absolute ?

[miltonis]

si j'enlève le "position : absolute" le div se place bien dans la colonne en effet. Mais, il est toujours collé par en dessous au div "links_rn". Alors que je voudrais savoir comment faire pour qu'il reste en bas de page comme dans l'exemple de page que voici : page

[siddh]

euh ben met lui un margin-top ?

[miltonis]

euh oui,
mais un margin-top serait bien pour cette page mais pour les autres qui risquent d'etre plus longues le probleme resterait le même.
Mais je ne suis pas expert, peut etre que quelque chose m'échappe.

Ce que je voudrais éviter c'est de créer un css pour chaque page, c'est le but initial. Est-ce que tu as une idée là dessus?
merci

[siddh]

ben la a part le placer dynamiquement en javascript en bas de la page je vois pas ...

[siddh]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type='text/javascript'>
        window.onload = function(){
                cred = document.getElementById('credits');
                limit = 0;
                if(self.innerHeight){
                        limit =self.innerHeight;
                }
                else if (document.documentElement && document.documentElement.clientHeight){
                        limit = document.documentElement.clientHeight;
                }
                else if (document.body){
                        limit = document.documentElement.scrollHeight;
                }
                cred.style.top = parseInt(limit-25,10)+"px";
        }
</script>

avec un truc comme ca dans le head, et en mettant un id="credits" a ton div avec une position absolute, je te laisse regarder pour le left, en fonction de ta page