[HTML/CSS]z-index
Fermé
Leahkim
Messages postés
3079
Date d'inscription
jeudi 15 novembre 2007
Statut
Membre
Dernière intervention
2 mars 2014
-
30 sept. 2008 à 08:57
Leahkim Messages postés 3079 Date d'inscription jeudi 15 novembre 2007 Statut Membre Dernière intervention 2 mars 2014 - 17 oct. 2008 à 08:54
Leahkim Messages postés 3079 Date d'inscription jeudi 15 novembre 2007 Statut Membre Dernière intervention 2 mars 2014 - 17 oct. 2008 à 08:54
A voir également:
- [HTML/CSS]z-index
- Code ascii de a à z - Guide
- Editeur html - Télécharger - HTML
- Cpu z pc - Télécharger - Informations & Diagnostic
- Index téléphonique - Guide
- Free z - Guide
4 réponses
Leahkim
Messages postés
3079
Date d'inscription
jeudi 15 novembre 2007
Statut
Membre
Dernière intervention
2 mars 2014
278
17 oct. 2008 à 08:54
17 oct. 2008 à 08:54
Bon, je vais expliquer la solution ici, mais je l'avait posée dans un autre topic, excusez moi.
Mon souci pour creer cet intranet est que nous avons des machines en 800x600 sur du 15", et des dévolppeurs graphiques en 2400x1600 sur du 24" ou du 30".
Il me fallait donc un moyen d'adapter le background a tous les écrans.
Que se soit dans le css ou le html, si on utilise la propriété background, l'image reste elle meme, on peut l'empecher de se répéter, on peut enlever la barre de défilement si l'imag eest trop grande, etc. mais on ne peut pas l'adapter a l'écran.
J'ai donc eu une autre idée. Barbare, mais soit.
j'ai posé mon image dans une balise img (propriété width=100% pour qu'elle d'adapte), avec un id, et le reste de ma page dans une div avec un id également. L'exemple de la page d'acceuil n'a pas eu besoin de la div, j'ai mis un id aux autre éléments pour les placer séparemment.
J'ai ensuite positionné avec des padding et margin négatives la div sur l'image. Au moment ou j'ai posté ça, je ne savais pas que les z-index quand ils ne sont pas précisés sont automatiquement supérieur a l'élément du code précédent. J'ai donc utilisé cette propriété automatique.
La réponse a la question telle que je l'avais posée était qu'il fallait précisé la position, absolute ou relative pour que la propriété z-index soit lue.
je poste ci dessous le code de ma page d'acceuil:
le HTML
le CSS:
Je suis a votre disposition si vous avez des remaques^^
Mon souci pour creer cet intranet est que nous avons des machines en 800x600 sur du 15", et des dévolppeurs graphiques en 2400x1600 sur du 24" ou du 30".
Il me fallait donc un moyen d'adapter le background a tous les écrans.
Que se soit dans le css ou le html, si on utilise la propriété background, l'image reste elle meme, on peut l'empecher de se répéter, on peut enlever la barre de défilement si l'imag eest trop grande, etc. mais on ne peut pas l'adapter a l'écran.
J'ai donc eu une autre idée. Barbare, mais soit.
j'ai posé mon image dans une balise img (propriété width=100% pour qu'elle d'adapte), avec un id, et le reste de ma page dans une div avec un id également. L'exemple de la page d'acceuil n'a pas eu besoin de la div, j'ai mis un id aux autre éléments pour les placer séparemment.
J'ai ensuite positionné avec des padding et margin négatives la div sur l'image. Au moment ou j'ai posté ça, je ne savais pas que les z-index quand ils ne sont pas précisés sont automatiquement supérieur a l'élément du code précédent. J'ai donc utilisé cette propriété automatique.
La réponse a la question telle que je l'avais posée était qu'il fallait précisé la position, absolute ou relative pour que la propriété z-index soit lue.
je poste ci dessous le code de ma page d'acceuil:
le HTML
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Language" content="fr"> <title>Accueil</title> <link rel="stylesheet" href="CSS fond1et2.css" type="text/css" /> </head> <body> <img id="fond" src="fond1.jpg" width="100%"> <a href="index.php"><p id="lien">ACCES INTRANET</p></a> </body> </html>
le CSS:
body {
height: 100%;
width: 100%;
margin:0;
padding:0;
text-align:center;
font-weight: bold;
}
#fond {
height: 100%;
width: 100%;
}
#lien {
margin-top:-18%;
margin-left:45%;
font-size:200%;
color:white;
}
a {
text-decoration: none;
}
Je suis a votre disposition si vous avez des remaques^^
As-tu essayé de mettre <div class="general">.
Je crois que lorsque dans ton CSS tu fait "." c'est pour class et "#" c'est pour id.
Je crois que lorsque dans ton CSS tu fait "." c'est pour class et "#" c'est pour id.
I'm_Here
Messages postés
154
Date d'inscription
mardi 15 juillet 2008
Statut
Membre
Dernière intervention
30 novembre 2008
26
17 oct. 2008 à 07:02
17 oct. 2008 à 07:02
salut,
j'ai fait une faute de frappe : BACKGROUND-COLOR devient BACKGROUND-IMAGE:
je m'excuse :)
j'ai fait une faute de frappe : BACKGROUND-COLOR devient BACKGROUND-IMAGE:
je m'excuse :)
I'm_Here
Messages postés
154
Date d'inscription
mardi 15 juillet 2008
Statut
Membre
Dernière intervention
30 novembre 2008
26
16 oct. 2008 à 21:29
16 oct. 2008 à 21:29
Bonsoir,
ça n'est pas une bonne idée de mettre une image de fond dans le tag <img> met le dans la propriété BACKGROUND-COLOR avec le SELECTEUR BODY.
Ton texte reste en dessous de l'image puisque l'image est interprété comme un flux de données une suite de codes qui ressemble à une châine de caractère, c'est pour cette raison que la balise IMG est une balise dite en-ligne (inline) et non pas (block), de ce fait elle (l'image) suit le flux naturellemnt elle est considéré comme du texte....
dans ton cas change le caractère spécial que t'as montré Matproux, mets l'image dans le body pourqu'elle prenne remplisse tout le contenu de la fenêtre puis tu as le choix entre mettre ton contenu textuel dans un bloc puis le positionner avec Position:absolute, ou bien utiliser les marges...
bonne chance et bon codage
ça n'est pas une bonne idée de mettre une image de fond dans le tag <img> met le dans la propriété BACKGROUND-COLOR avec le SELECTEUR BODY.
Ton texte reste en dessous de l'image puisque l'image est interprété comme un flux de données une suite de codes qui ressemble à une châine de caractère, c'est pour cette raison que la balise IMG est une balise dite en-ligne (inline) et non pas (block), de ce fait elle (l'image) suit le flux naturellemnt elle est considéré comme du texte....
dans ton cas change le caractère spécial que t'as montré Matproux, mets l'image dans le body pourqu'elle prenne remplisse tout le contenu de la fenêtre puis tu as le choix entre mettre ton contenu textuel dans un bloc puis le positionner avec Position:absolute, ou bien utiliser les marges...
bonne chance et bon codage
