Positionnement de calque !!!

<div>

28 décembre 2005 à 12:57:36

bonjour,

j'aimerais que mon calque de class: .valid_page, soit toujours en bas a droite de la page et sous tous les autres calques !!!

Comment faire ???

.valid_page {
height: auto;
width: auto;
}

Hells_Dark

28 décembre 2005 à 13:13:30

calques...burp, j'aime pas ce nom.

.valid_page {
position : absolute;
bottom : 0;
right : 0;
z-index : 99;
}

Je sais ps si j'ai bien compris ce que tu désirerais...

Raphael

28 décembre 2005 à 13:15:18

Citation : Hells_Dark

calques...burp, j'aime pas ce nom.

[code]position : absolute;
bottom : 0;
right : 0;
z-index : 99;
[/code]

?
Je sais ps si j'ai bien compris ce que tu désirerais...

Hello,

Cette solution fonctionne bien.. tant que le contenu ne dépasse pas la hauteur initiale de la fenêtre.

Pour un résultat parfait, il faut jouer avec javascript car le concept de "hauteur" de page n'existe pas dans le Web : le média web (screen) n'est pas paginé.

--> http://forum.alsacreations.com/faq/#item25

QuentinGo

28 décembre 2005 à 13:18:04

Ca c'est surement un utilisateur de toshop.
Ben deja dans ton xhtml c'est a peu près comme photoshop en tout cas c'est ce qu'il me semble, tu doit mettre ta div tout en bas de ta page de manière a ce qu'il l'affiche en dernier.

Hells_Dark

28 décembre 2005 à 13:20:45

HA ? J'ai du mal à visualiser le problème...si quelqu'un a un lien ou l'on voit le probleme avec le code que j'ai cité..

"sous tous les autres calques !!! "
Sous ? Oups, j'avais compris "au dessus"...d'ailleurs là je comprend plus ce qu'il désire :/
Je suis bete

"Sous", pas "en dessous"...evidemment ma solution n'est plus terrible !

Ben là, j'aurais juste mis la div du footer en dernier sur la page...avec un clear both si le menu était positionné en float par exemple...

playest

28 décembre 2005 à 13:25:37

Au pire tu met un clear:je-sais-plus-quoi;
non ?

Hells_Dark

28 décembre 2005 à 13:27:45

Je pense que là, on aurait besoin du contexte..de savoir comment sont positionnée les autres éléments.

Si tu met ton conteneur en dernier, il sera automatiquement sous les autres conteneurs. Suaf si ceux ci sortent du flux.

Christopher

28 décembre 2005 à 13:39:13

lorsque ma page est trop longue ca ne fonctionne plus !

.valid_page {
position : absolute;
bottom : 0;
right : 0;
z-index : 99;
}

Hells_Dark

28 décembre 2005 à 13:46:05

Oui, c'est normal.
Là, le conteneur se positionne par rapport à la fenêtre.
(j'ai dis plus haut que mon code ne convenait pas, j'avais mal compris ce que tu voulais)

Donne nous le reste du code et nous pourrons sans doute mieux t'aider.

Raphael

28 décembre 2005 à 14:10:52

Citation : Christopher

lorsque ma page est trop longue ca ne fonctionne plus !

Oui c'est exactement ce que j'expliquais.
Voir en détail le lien que j'ai donné précédemment.

Gamer_man

28 décembre 2005 à 14:46:51

Procède comme ceci :

div#valid_page{
border: 1px solid red;

position: absolute;

width: 200px;

right: expression( ( ignoreMe = document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft ) + 'px' );

bottom: expression( ( ignoreMe = document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop ) + 'px' );

z-index : 0; /* Mettre un z-index inférieur au z-index de tes autres calques */
}

html>body div#valid_page{
position: fixed;
right: 0px;
bottom: 0px;
}

Edit :
http://gamer.forum.free.fr/sdz/div_positionne_toujours_bas.htm (Exemple)

Bisous

Christopher

28 décembre 2005 à 17:27:21

ca fonctionne toujours pas !!!

/* Style requete MySQL */

.global {
color: #993366;
background-color: #FFFFFF;
}
.mot_clef {
color: #993366;
}
.signe {
color: #FF99FF;
}
.guillemet {
color: #009900;
}
.surligne {
color: #000000;
background-image: url(icones/tbl_blue.png);
}

/* Style des tableaux, et images */

body {
font-family: Arial, "Arial Black", Georgia, "Times New Roman", Times, serif;
font-size: 12px;
}

img {
vertical-align: middle;
border-width: 0px;
}

a:active /* Quand le visiteur clique sur le lien */
{
text-decoration: none;
color: #FFFFFF;
background-image: url(icones/tbl_blue.png);
}

a:hover /* Quand le visiteur pointe sur le lien */
{
text-decoration: none;
color: #CC9900;
}

a /* Lien normal */
{
text-decoration: underline;
color: #006699;
}

td {
width: auto;
}

.tbl_align_center_width_all {
text-align: center;
border: none;
border-color: #666666;
width: 100%;
}

.tbl_align_center_width_adaptive {
text-align: center;
border: none;
border-color: #666666;
width: auto;
}

.tbl_align_gauche_width_all {
text-align: left;
border: none;
border-color: #666666;
width: 100%;
}

.tbl_align_gauche_width_adaptive {
text-align: left;
border: none;
border-color: #666666;
width: auto;
}

.header_tbl {
background-image: url(icones/tbl_orange.png);
}

.line_tbl_1 {
background-color: #437378;
}

.line_tbl_2 {
background-color: #CCCCCC;
}

.italic {
font-style: italic;
}

.gras {
font-weight: bold;
}

.gras_italic {
font-style: italic;
font-weight: bold;
}

/* Les calques DIV */

div#valid_page{
border: 1px solid red;

position: absolute;

width: 200px;

right: expression( ( ignoreMe = document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft ) + 'px' );

bottom: expression( ( ignoreMe = document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop ) + 'px' );

z-index : 0; /* Mettre un z-index inférieur au z-index de tes autres calques */
}

html>body div#valid_page{
position: fixed;
right: 0px;
bottom: 0px;
}

/* Style des formulaires */

input:focus, textarea:focus /* Quand le curseur est sur un champ (ne marche pas sur IE) */
{
background-color: #CC9900;
}

legend /* On met un peu plus en valeur les titres des fieldset */
{
font-family: Arial, "Arial Black", Georgia, "Times New Roman", Times, serif;
color: #FF9933;
font-weight: bold;
}

fieldset
{
margin-bottom: 15px; /* Une marge pour séparer les fieldset */
background-color: #FFFFCC;
}

Gamer_man

8 janvier 2006 à 23:46:55

J'espere que tu as remarque que j'ai utilisé un ID et non une classe... et que tu as modifié ta page HTML en y pensant ?

Bisous