28220 sujets

CSS et mise en forme, CSS3

Footer qui se ballade dans un bloc

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

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

pour ça, j'ai ce code :
.credits_rn {
position: absolute;
bottom: 0;
width: 180px;
background-color: #FCD769;
text-align: center;
padding: 10px 0 10px 0;
margin: 0;

#td_rn {
position: relative;
width: 180px;
text-align: center;
vertical-align: top;
padding: 10px 0 0 0;	
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #444444;
text-align: center;
}



<td id="td_rn" class="yellow_rn">

<div class="links_rn">
<h4>Chiclayo : liens en relation</h4>
</div>

<div class="credits_rn">
Crédits photo cathédrale :<br> Prom Perù
</div>
</TD>


je sais, il y a une balise TD, je ne epux faire autrement pour l'instant et je suis en phase de tests. Smiley confus

merci de votre aide
Modifié par miltonis (16 Nov 2005 - 16:25)
euh, ça ne marche pas en fait il se place juste en dessous des photos en non en bas de la colonne comme je le voudrais.
j'avais déjà essayé, mais ça uarait été top facile.... Smiley confus
voici le code :

<!--  PHOTOS debut  -->
<table cellpadding="0" cellspacing="0" class="content_table">
<tr>
<td colspan="2" id="title_content" class="yellow"><h1>TOURISME dans le NORD du XXXXX- Xxxxx</h1></td>
</tr>
<tr>
<td class="text_backgnd">					
blablablabla</td>
<td id="td_rn" class="yellow_rn">
<ul class="ul_photos">
<li class="li_photos"><img src="../Pics/carte-Xxxxx.gif" width="180" alt="Xxxxx- Carte du XXXXX"></li>
<li class="li_photos"><img src="../Photos/Xxxxx_01.jpg" width="180" alt="Xxxxx, - cathédrale"><br>Cathédrale de Xxxxx</li>
<li class="li_photos"><img src="../Photos/chanchan_01.jpg" width="180" alt="Xxxxx, Perou - Chan chan"><br>Ruines de Chan Chan</li>
</ul>
<!--  PHOTOS fin  -->

<!--  RELATED LINKS begin  -->
<div class="links_rn">
<h4>Xxxxx: liens en relation</h4>
<a href="" class="">Ruines de Chan Chan</a><br>
<a href="" class="">Culture Mochica</a><br>
<a href="" class="">Culture Chimu</a><br>
<a href="" class="">Culture Moche</a><br>
<a href="" class="">Señor de Sipan</a><br>
<a href="" class="">Trujillo</a>
</div>
<!--  RELATED LINKS end  -->

<!--  CREDITS begin  -->
<div class="credits_rn">
Crédits photo cathédrale :<br> Prom Perù
</div>
<!--  CREDITS end  --></TD>
			</tr>
			</table>


et le css correspondant

/*---------  TEXT  ---------*/
.content_table {
width: 590px;
}
.text_backgnd {
background-image: url("Pics/fond_content.gif");
width: 70%;
padding: 12px 10px 5px 12px;
top: 0;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #CC3300;
font-weight: bold;
text-align: center;
}	
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #CC3300;
font-weight: bold;
margin-bottom: 3px;
}
.text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #444444;
text-align: justify;
}

/*---------  RIGHT_NAV  ---------*/ 
#td_rn {
position: relative;
width: 180px;
text-align: center;
vertical-align: top;
padding: 10px 0 0 0;	
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 {
bottom: 0;
left: 0;
width: 180px;
background-color: #FCD769;
text-align: center;
padding: 10px 0 10px 0;
margin: 0;
}


merci d'y jeter un oeil Smiley biggol
Modifié par miltonis (16 Nov 2005 - 17:50)
Voici un exemple simplifié :
#colonne{
width:200px;
height:400px;
background-color:#CCCCCC;
position:relative;
}
#credits{
background-color:#FFFFCC;
position:absolute;
bottom:0;
}
<div id="colonne">
contenu de la colonne<br />...<br/>...
<p id="credits">credits</p>
</div>


Le principe : un élément positionné en absolu dans un élément lui même positionné en relatif.
bonjour,

merci Youp de te donner cette peine, le fait est que j'avais déjà essayé un système semblable et que ça fonctionnait bien sous IE (pour une fois) mais pas sur Frfx.
euh...et c'est toujours le cas Smiley bawling
sous le Fox, il me place le div dans la colonne mais pas à la hueteur qu'il faudrait (là il est au milieu de la colonne à peu près).

j'ai essayé de jouer avec les vertical-align, le top, etc.mais sans résultat.
tu as encore deux minutes...? Smiley cligne
moi ca marche, juste à part le fait que <p> par défaut sépare le contenu du reste. Avec un div, pas de problème...

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
#colonne{
width:200px;
height:400px;
background-color:#CCCCCC;
position:relative;
}
#credits{
background-color:#FFFFCC;
position:absolute;
bottom:0;

}
</style>
</head>
<body>
<div id="colonne">
contenu de la colonne<br />...<br/>...
<div id="credits">credits</div>
</div>
</body>
</html>
Bonjour, Smiley biggrin

Je relance le sujet car je l'avais laissé en suspens. je pensais que ça marchait en fait dans mon contexte : non.

ce serait sympa de m'aider à en terminer avec ça parce que ça commence à me rendre chèvre Smiley biggol

j'ai apporté quelques modifs dont voici le contenu principal:
<td id="td_rn" class="yellow_rn">
<ul class="ul_photos">
<li class="li_photos"><img src="../Pics/carte-chiclayo.gif" width="180"></li>
<li class="li_photos"><img src="../Photos/chiclayo_01.jpg" width="180"><br>Cathédrale de Chiclayo</li>
<li class="li_photos"><img src="../Photos/chanchan_01.jpg" width="180"><br>Ruines de Chan Chan</li>
</ul>
<!--  PHOTOS fin  -->
					
<!--  RELATED LINKS begin  -->
<div class="links_rn">
<h4>Chiclayo : liens en relation</h4>
      <a href="" class="">Ruines de Chan Chan</a><br>
      <a href="" class="">Culture Mochica</a><br>
      <a href="" class="">Trujillo</a>
</div>
<!--  RELATED LINKS end  -->
					
<!--  CREDITS begin  -->
<div class="credits_rn">
Crédits photo cathédrale :<br> xxxxxxx</div>
</TD>


et le CSS
#td_rn {
position: relative;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #444444;
text-align: center;
vertical-align: top;
width: 180px;
height: 100%;
}
.credits_rn {
position: absolute;
bottom: 0;
width: 180px;
background-color: #FCD769;
/*text-align: center;*/
padding: 10px 0 10px 0;
/*margin: 0;*/
}



Un TD (oui, je sais!) contient une LISTE, un DIV avec des liens et un autre DIV avec les crédits. C'est ce dernier qui me pose problème. je voudrais qu'il se situe en BAS de colonne comme dans la 1ere photo jointe.
Mais avec IE ça donne comme dans la 2e photo
Avec FF ça donne comme dans la 3e photo

que faire? svp un coup de main ce serait sympa et un joli cadeau de noel. Smiley ravi

merci upload/720-001.gif upload/720-002.gif upload/720-003.gif
Modifié par miltonis (29 Dec 2005 - 11:25)
Sujet clos
Aller à