Tutos layer et div
Wi mais moi je pensais à une page où on pourait voir le résultat parce qu'avec une page vide je peux pas faire grand chose...
Sinon à première vue, c'est bourain (center=>table=>tr>td>div) je pense qu'il serait judicieux de garder uniquement le div et de mettre à la poubelle ce qui est avant :(
le 16/07/2004 à 02:08
i M@N
Hello !
Je pense que tu devrais rejeter un oeil sur le site
http://www.alsacreations.com/articles : il y a là tout ce qu'il te faut ...
Sinon le truc c'est de coder propre et sans erreur grossière comme : "... style="position: relative; font-family:font_axe; :font-size:30px; color:pink; font-weight: bold; z-index:2; left:35; top:-540; ..."
Berf ...
Essaye avec un fichier style.css contenant ça :
#1 {
position: absolute;
font-family: tahoma;
font-color: #000000;
font-size: 30px;
z-index: 0;
left: 50;
top: 50;
}
#2 {
position: absolute;
font-family: tahoma;
font-size: 30px;
font-color: red;
font-weight: bold;
z-index: 2;
left: 50;
top: 50;
}
et ton fichier.html avec ça :
<html>
<head>
<link href="./style.css" rel="stylesheet" type="text/css">
</head>
<body>
<center>
<div id="1">
<img src="./images/fond.png" border="0">
</div>
<div id="2">
<img src="./images/menu_allies.png" border="0">
</div>
</body>
</html>
@+...
One Love, One Heart, One Unity.
Vl'a 1 exemple qui me plait
Je c que c bourrin ce que j'ai fait mais sans le tableau j'arrive po centré le truc
(je vais rejoindre Le club des boulet
La position absolute c'est bien par rapport au bord de la fenetre ?
parce que dans ce cas je crois avroi que pour centré faut bidouillé?
Merci @+
Il en faut peu pour être heureux !!!!!
le 16/07/2004 à 02:14
i M@N
Reuh ...
Oups !
en ajoutant de la transparence à tes div
filter:alpha(opacity=50);
visibility:visible;
tu verras les deux ...
#1 {
position: absolute;
filter:alpha(opacity=50);
visibility:visible;
font-family: tahoma;
font-color: #000000;
font-size: 30px;
z-index: 0;
left: 50;
top: 50;
}
#2 {
position: absolute;
filter:alpha(opacity=50);
visibility:visible;
font-family: tahoma;
font-size: 30px;
font-color: red;
font-weight: bold;
z-index: 2;
left: 50;
top: 50;
}
@+...
One Love, One Heart, One Unity.
le 16/07/2004 à 02:16
i M@N
Reuh ...
Pour le centrage faut créer un div qui servira de cadre et c'est expliqué
ici encore une fois.
@+...
One Love, One Heart, One Unity.
Ben enfait g une image de fond et je placer d'autre img par dessus (celle ci on un fond transparent) la transparence joue un role imporatant dans ce cas ?
Il en faut peu pour être heureux !!!!!
Salut,
J'ai lu ce que tu ma montré j'ai fait quelque essai.
Alors mise a part le fait que IE, opéra et mozilla affiche tous différament je comprend pas pour quoi je n'arrive pas a placer mais images.
Je m'explique :
j'ai juste utilisé la trame que tu ma filé et jarrive a superposer des images. Le problème vient du fait que je comprend pas la position absolue ou relative.
Si je met absolue je ne sais pas par rapport a koi c'est absolue (en théorie au coin supérieur gauche de la fenetre d'affichage nan?).
Donc si je remplace absolue par relative je me retrouve avec des images l'une en dessous de l'autre ki veulent pu bouger.
Si je veut utiliser relatif c'est parce que tout le monde n'a pas la résolution que moi et donc sa va pas s'afficher pareil.
Et aussi parce que j'ai vu sur le site que tu as mis en lien que pour centrer il fallait pas utiliser de position absolue.
J'en suis donc a demander si c'est vraiment possible de faire comme je souhaite (c'esat a dire recréer mon fichier image d'origine comme sous psp ...) avec css ??
Il en faut peu pour être heureux !!!!!
Vous pouvez voir ce que sa donne
La
Le fichier CSS qui va avec
body {
margin: 0; /* pour éviter les marges */
text-align: center;
}
.conteneur {
margin-left: auto;
margin-right: auto;
width: 903; /* largeur obligatoire pour être centré */
text-align: left; /* on rétablit l'alignement normal du texte */
top:101;
}
#1 {
position: absolute;
filter:alpha(opacity=100);
visibility:visible;
font-family: tahoma;
font-color: #000000;
font-size: 30px;
z-index: 0;
left: 0;
top: 300;
}
#2 {
position: absolute;
filter:alpha(opacity=100);
visibility:visible;
font-family: tahoma;
font-size: 30px;
font-color: red;
font-weight: bold;
z-index: 2;
left: 190;
top: 200;
}
#header {
position: absolute;
filter:alpha(opacity=100);
visibility:visible;
font-family: tahoma;
font-size: 30px;
font-color: red;
font-weight: bold;
z-index: 2;
left: 100;
top: 0;
}
Le fichier html
<html>
<head>
<link href="./re.css" rel="stylesheet" type="text/css">
</head>
<body>
<div name="centrage" class="conteneur">
<div id="#header" weight="903">
<img src="./images/header.png" border="0">
</div>
<div id="#1" weight="903">
<img src="./images/fond.png" border="0">
</div>
<div id="2" weight="200">
<img src="./images/menu_allies.png" border="0">
</div>
</div>
</body>
</html>
Donc le fond gris ne descend que si je met un saut de ligne saut le div du header.png
j'ai essayer de mettre top:300; mais y bouge po
Si z'avez une idée pour m'aider a mettre sa en place Merci
@+
Il en faut peu pour être heureux !!!!!
Bon voilà j'ai un peu dépoussiéré; j'ai testé l'affichage sous IE et Firefox... Tu devras bien évidemment modifier les liens des différents fichiers contenu dans la page html et la CSS s'insiste...
la page html:
<?xml version="1.0" encoding="iso-8859-15"?>
<!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" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css">
<link href="./style.css" rel="stylesheet" type="text/css">
<title>Index</title>
</head>
<body>
<div id="page" class="page">
<div id="#header" class="#header"><img src="essai.php_files/header.png" /></div>
<div id="#conteneur" class="#conteneur">
<div id="#menu" class="#menu"><img src="./essai.php_files/menu_allies.png" /></div>
</div>
</div>
</body>
</html>
la css:
/* CSS Document */
body {
margin:0;
padding:0;
width:100%;
}
/* specification d'une marge pour IE étant donnée le boulet :( */
.page {
margin:auto;
width: 90.5%;
background-image:url('essai.php_files/fond.png');
margin-left:3em;
}
/* Retour au marge normal pour les navigateurs dignent de ce nom, grâce aux speudo-sélecteurs que IE ne comprend pas (Y'a t-il quelques choses qu'il comprend(a par de travers), là est la question ^^ */
body > .page {
margin-left:auto;
margin-right:auto;
background-image:url('essai.php_files/fond.png');
}
#header {
display:block;
visibility:visible;
font-family: tahoma;
font-size: 30px;
font-color: red;
font-weight: bold;
}
#conteneur {
display:block;
visible:visible;
width:100%;
height:auto;
}
#menu {
float:left;
display:block;
width:200px;
background-image:url('./essai.php_files/menu_allies.png');
}
Tu peux remarquer que le code n'est pas encore parfait, notamment le menu puisque celui-ci est encore sous la forme d'une image entiere(il n'est pas obliger d'avoir une image de 100x100 pour remplir un contenu, une image de 100x1 peut très bien faire l'affaire....tu peux remarquer également que je ne sort aucun bloc du flux normal car bien que la position absolute peut être pratique, celà ce complique quand il y a une mltiplication des bloc...(c'est du vécu :()
Voilà j'espère d'avoir été utile...
Merci ben maitre Sedilbur
, je crois en etre là
.
J'ai donc essayé tes quelques lignes (
),
et je me retrouve avec 1 p'tit souci, le fond gris se met sur le coté du header et moi je le voudrait en dessous (j'en demande des choses :) )
exemple =>
http://www.mooglicator.freesurf.fr/716ID/
Pour le positionnement (absolue ou relatif) c'est parce que le truc est assez con a mettre en page (je crois que y a trop d'image
).
Je vois le principe de ce que tu m'a montré, je garde sa au chaud, mais je crois que vais garder mes tableaux et div dans tout les sens pour le moment (le temps de finir la partie codage du site et d'avoir un truc exploitable).
Merci bien pour vos lumière
@+
Il en faut peu pour être heureux !!!!!
