28173 sujets

CSS et mise en forme, CSS3

Une mosaïque de divs qui occupent tout l'écran [résolu]

bonjour tlm Smiley smile

je cherche à faire un "économiseur de page", le code js qui déclenche l'économiseur fonctionne mais j'ai des soucis sur le code CSS surtout sous FF.

je cherche à recouvrir la page d'un gris transparent sauf à un endroit qui est censé représenter la source de lumière, mais ma solution engendre une zone plus grande que la page et des ascenseurs : ce qui fait que lorsque l'économiseur se déclenche la page se décalle (mais pas sur IE).



#saver {
float:left;
position:relative;
z-index: 100;
width:100%;
height:100%;
top:0;
right:50%;
margin:0 0 0 -598px;
padding:0;
background:transparent url(../images/grey.png);
}
#saver2 {
position:absolute;
z-index: 100;
width:404px;
height:100%;
left:50%;
top:0;
margin:0 0 0 -597px;
padding:0;
background:transparent url(../images/halo.png);
}
#saver3 {
float:right;
position:absolute;
z-index: 100;
width:100%;
height:100%;
top:0;
left:50%;
margin:0 0 0 -193px;
padding:0;
background:transparent url(../images/grey.png);
}


http://goirand.christophe.free.fr/

je suis ouvert à toute proposition
Modifié par ChrisG (23 Jun 2007 - 11:41)
bonjour,

j'ai simplifié mon problème et j'ai vu que la barre de scroll du bas de la page est présente à cause de celle de droite (!) donc pour régler ça il faudrait le css permettre à la zone transparente de prendre toujours la partie droite de l'écran (sans sortir de l'écran et c'est bien mon soucis) , toujours à tant de pixels du milieu de l'écran.

Cela fonctionne pour la partie gauche comme sur le lien ci-dessus de mon site (ne pas bouger la souris 4 secondes pour voir). J'ai isolé la partie qui pose problème :

#saver {
position:absolute;
z-index: 100;
width:100%;
height:100%;
top:0;
left:50%;
margin:0 0 0 -193px;
padding:0;
background:transparent url(./images/grey.png);
}


<div id="saver"></div>


le lien au poil pour voir la chose :
http://goirand.christophe.free.fr/essai.html
Modifié par ChrisG (19 Jun 2007 - 10:52)
quelqu'un a une idée pour éviter ces barres de scroll ? pourquoi elles y sont quand on fait float:right mais pas float:left avec pour les 2 height:100% ???

Smiley biggol
Bonjour,

Bon float left ou right et position absolute, il y en a un de trop ... Smiley cligne
Faudrait choisir...
Modérateur
bonjour/bonsoir

je n'ai regardé que la page essai , a vrai dire je ne vois pas ou est le rapport avec ta page d'acceuil , ni même ce que tu souhaite comme resultat final.

Voici une approche sans float ni positionnement absolu , qui conserve ta marge gauche de 193 px , comme suggerer par ton css :
<!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" xml:lang="fr" lang="fr">
<head>
<title>Firestorm's design</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rev="made" href="mailto:goirand.christophe@free.fr" />
<link rev="start" href="./" title="Firestorm's design" />
<style type="text/css" title="currentStyle" media="screen">

html , body , #saver {height:100%;width:100%;padding:0;margin:0;}
#saver {
/* position:absolute; top:0;left:0; *//*optionnel */
padding:0;

}
#saverholded {
height:100%;
margin-left:193px;
background:transparent url(./images/grey.png);
</style>
<link rel="icon" type="image/gif" href="/favicon.gif" />
</head>
<body>
<div id="saver">
<div id="saverholded">
</div>
</div>
</body>
</html>

cette base est compatible IE/ff mais j'ai du mal a comprendre ce que tu veut en faire , enfin quelle application/comportement en final ? .... pas certain que tu puisse en faire réellement usage .
gc
Modifié par gcyrillus (18 Jun 2007 - 19:47)
je souhaite que la zone soit "à tant de pixels du milieu de l'écran" or sur l'exemple que tu m'as fourni la zone reste à tant de pixels du côté gauche de la fenêtre ! c'est pas ce que je cherche !

C'est pourtant simple : sur mon site free (premier lien) il faut attendre 4 secondes et on verra un economiseur de page se mettre en route, avec des barres de scroll que j'aimerais supprimer.
merci pour les réponses !

j'ai ajouté simplement

overflow: hidden;


sur <html> pour que le contenu qui dépasse l'écran ne soit pas affiché. Donc plus de barre de scroll Smiley smile .

Autre problème : sur IE 6 l'économiseur ne s'étendait pas en hauteur donc j'ai mis :

height:100%;


sur <body> comme expliqué dans la FAQ

nouveau petit soucis qui ressemble à un bug sur FF 2.0.0.4:

lorsque je met la fenêtre en "plein écran" l'économiseur s'affiche bien mais lorsque la fenêtre est réduite les divs saver et saver2 se chevauchent d'un pixel !!!!!!!!!!!

http://goirand.christophe.free.fr/
Modifié par ChrisG (20 Jun 2007 - 00:17)
Sujet clos
Aller à