28172 sujets

CSS et mise en forme, CSS3

Z_index et tranparence

Bonjour,
Je mets peut a peut mes pages en conformitées avec XHTML 1 et pour mes mise en place j'ais besoins de div dans un cas, le premier assez grand, fait 100% de la page, et est en haut de page. z-index:2;

le second fait 250px de large il devrait (il était) bloqué en haut a droite
avec z-index:1 il contient une image,

Ma question, comment rédiger mon CSS pour obtenir cela, (positionement)
et le div qui va couvrir l'image serat'il transparent comme avant ?

Merci d'avance
Salut,

Je ne suis pas sûr de bien comprendre ce que tu veux mais tout dépend de l'ordre dans lequel tu vas mettre tes divs dans le html déjà.
Sinon ta div principale va rester "transparente" tant que tu ne lui mettras pas de fond.

Pour le positionnement, je ne sais pas trop puisque tu ne connais pas à l'avance la taille de la fenêtre du navigateur de tes visiteurs, alors pour fixer une image en haut à droite je ne vois pas comment faire en CSS pur.
Pour ce genre de mise en page, la plupart du temps je fixe une largeur a la div principale, la fait se positionner au milieu puis je met la div de l'image dedans et la met en position:relative. Finalement je la positionne en px dans ce cadre fixé.
Avec ça tu sais dans quel espace tu travailles.

J'espère avoir compris ta question et y répondu Smiley cligne
N-J a écrit :
Pour le positionnement, je ne sais pas trop puisque tu ne connais pas à l'avance la taille de la fenêtre du navigateur de tes visiteurs,


Mais si justement il me semblais qu'on avait accés a du right ? mais je ne sais si je dois l'associer au width de l'image Smiley eek

Merci en tout cas de ta réponse Smiley biggrin
Sinon, le plus simple serait de mettre un background-image à ta div principale et de mettre ça:

tadiv{
background-image:url('chemin_vers_limage.xxx')
background-position:top right(ou right top je sais plus ^^);
}

Comme ca ton image sera toujours en haut à droit de ta div Smiley cligne
Salut,

FoxLeRenard a écrit :
Je mets peut a peut mes pages en conformitées avec XHTML 1
Cette phrase n'est pas très claire : je suppose que tu veux dire que tu as rajouté un doctype XHTML1.0 transitional ou Strict ?

FoxLeRenard a écrit :
le second fait 250px de large il devrait (il était) bloqué en haut a droite
Cette phrase n'est pas très claire : "il était" avant quoi ? Avant le drame... avant que tu ne remplaces une mise en page avec tableaux par une mise en page sans tableaux ?

FoxLeRenard a écrit :
le div qui va couvrir l'image serat'il transparent comme avant ?
Même question.

En résumé ce serait bien d'être plus explicite (et/ou de ne pas rendre cela plus confus en nous parlant de comment c'était avant). Peut-être avec une image de ce que tu cherches à obtenir ?
1er exemple:

<style type="text/css">
html, body { margin: 0;
             padding: 0;
             height: 100%;
             width: 100%;
            }

div.principal { width: 100%;
                height: 100%;
              }

div.image { position: absolute;
            top: 0;
            left: 0;
            background-image: url('chemindetonimage');
            background-repeat: no-repeat;
          }
</style>

le html associé

<html>
<head>
</head>
<body>
<div class="principal">
  <div class="image"></div>
</div>
</body>
</html>



2ieme exemple

<style type="text/css">
html, body { margin: 0;
             padding: 0;
             height: 100%;
             width: 100%;
            }

div.principal { width: 100%;
                height: 100%;
                background-image: url('chemindetonimage');
                background-repeat: no-repeat;
                background-position: 0% 0%;
              }
</style>

le html associé

<html>
<head>
</head>
<body>
<div class="principal"></div>
</body>
</html>

Modifié par flattazor (22 Feb 2009 - 14:39)
flattazor a écrit :
deux exemples simples et clair


C' est trop sympa ça , comment te remercier, et en plus c' est simple a appliquer. Smiley biggrin

Alors ça existe encore des gens tolérents, dont le seul but est d'aider !!
plus tôt que de moraliser
Smiley cligne
FoxLeRenard a écrit :
Alors ça existe encore des gens tolérents, dont le seul but est d'aider !!
plus tôt que de moraliser
Hem... je suppose que ça m'est destiné.

Loin de moi l'idée de moraliser : une simple invitation à plus de clarté. Mais peut-être qu'il manquait 1 ou 2 smileys... voilà pour me rattraper Smiley langue Smiley biggrin Smiley hippy
Quelques remarques en repassant par là (au risque d'être encore plus désagréable Smiley biggol ) :

* (re)voir l'astuce décrivant la propriété z-index.

* si l'image contient une information (qu'elle n'est pas purement décorative) elle ne doit pas être en background mais dans le code html en utilisant l'élément IMG.

* lorsqu'un élément est unique dans une page privilégier l'emploi d'un id plutôt qu'une class.

* plus globalement ne pas hésiter à lire la section Apprendre : notamment Initiation au positionnement en CSS (partie 1), Initiation au positionnement CSS (partie 2) et le Guide de survie du positionnement CSS. Smiley smile
Heyoan a écrit :
Quelques remarques en repassant par là (au risque d'être encore plus désagréable Smiley biggol ) :

* (re)voir l'astuce décrivant la propriété z-index.

* si l'image contient une information (qu'elle n'est pas purement décorative) elle ne doit pas être en background mais dans le code html en utilisant l'élément IMG.

* lorsqu'un élément est unique dans une page privilégier l'emploi d'un id plutôt qu'une class.

* plus globalement ne pas hésiter à lire la section Apprendre : notamment Initiation au positionnement en CSS (partie 1), Initiation au positionnement CSS (partie 2) et le Guide de survie du positionnement CSS. Smiley smile



T'inquiétes pas , moi aussi j'ais mes humeurs Smiley cligne
En tout cas je partages ton avis sur les images et n'utilises pratiquement que
img ...
Merci pour tes liens sur z-index et le positionnement super précieux, et je ne connais pas encore bien les recoins du forum Smiley eek
Sujet clos
Aller à