Tutos layer et div

page 1 page 2
Répondre
moogli
moogli
Déconnecté
Il en faut peu pour être heureux !!!!!
Salut,

Je cherche désepérement des tutos sur les layer et div en html.

Donc l'un d'entre vous avez une bonne adresse ou quelques tuyaux (différences etc .....)

Merci
@+
XTremTourist
XTremTourist
Déconnecté
ta jeter un coue d oeil sur ALLHTML ?
www.allhtml.com
moogli
moogli
Déconnecté
Il en faut peu pour être heureux !!!!!
Oui,
mais a part l'index des balises j'ai rien trouve de spécifique a layer ou div.

Ce que je veut superposer des images (méthode psp, photoshop ....) donc j'ai essayé div, j'y arrive presque (j'ai des problème de coordonnées) avec layer c'est impossible les truc se mette toujous cote a cote ...
zebden
zebden
Déconnecté
zebdinou pour les intimes / Blog : http://www.zebden.fr
Il faut regler les positions , bon ca tu devais savoir , et pour regler la superposition il faut utiliser la propriété " z-index " qui peut etre negative.

Toutjavascript.com fait un petit tuto dessus (DHTML) , nickel pour les bases.

[Message modifié le 13/07/2004 à 09:38 par zebden]
i M@N
i M@N
Déconnecté
One Love, One Heart, One Unity.
Hello !

Layer avait donné cette url : http://www.alsacreations.com/articles

Ce site est une mine pour ce qui est des css.

@+...
moogli
moogli
Déconnecté
Il en faut peu pour être heureux !!!!!
Salut,

Pour les coordonnée je sais, idem pour le z-index et c'est pour sa que comprend pouroi je n'arrive pas superposer le basard smiley

Je mate vo liens et je revient a la charge si je suis toujours aux fraises
merci
@+
Sedilbur
Sedilbur
Déconnecté
n'utilise pas les position:absolute, relative
moogli
moogli
Déconnecté
Il en faut peu pour être heureux !!!!!
T gentil je fais comment moi pour poser mes images au bon endroit ? smiley

Si non merci pour liens les gars mais j'ai toujours le meme souci .....

@+
Sedilbur
Sedilbur
Déconnecté
Je voulais dire n'oublie pas d'utiliser *je devais vraiment être dans la lune là*

Sinon puisque ton problème persiste, pourquoi tu ne nous montrerais pas la page en question au moins on pourra avoir une vue d'ensemble de ton problème et voir ce que tu a déjà fait :p
moogli
moogli
Déconnecté
Il en faut peu pour être heureux !!!!!
Je suis le 1er a demander sur le forum et je fait pas ......
donc voila mais essais html

<html>
<body>
<center>
<table><td><tr>
<div name="1" style="position:relative; font-family:comic sans MS; color: red; font-size:30px; z-index:0; left:50; top:50;">
<img src="images/fond.png" border="0" /></div>
<div name="2" style="position: relative; font-family:font_axe; :font-size:30px; color:pink; font-weight: bold; z-index:2; left:35; top:-540; ">
<img src="./images/menu_allies.png" border="0" /></div>
</td></tr></table>
</body></html>


Le truc que ne comprend pas c'est que doit ma permetre de placer ce que je veut a l'endroit ou je veut et audessus ou dessous de n'importe quoi d'autre (sous reserve qu'on puisse le voir).
donc le code au dessus me permet de mettre une images sur une autre ok, mais ce que je ne comprend pas c'est :
1/ pourquoi il me une ordonnée négative pour pouvoir le faire (-540 smiley)

2/pourquoi si j'enléve le tableau je me retrouve avec la 2nd images au milieu de la 1er smiley

J'ai lu (ce c pu où) que le positionnement relatif est relatif par rapport : parfois au contener (j'ai cru comprendre que cela pouvais <body><td>....) ou par rapport a la page mais je ne sais plus trop comment faire.

Donc voila si après lecture de mon roman quelqu'un peut m'indiquer comment je peu placer mes images avec div (ou autre m'enfou smiley) le lui en serait reconnaissant smiley

merci @+
Sedilbur
Sedilbur
Déconnecté
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 :(
i M@N
i M@N
Déconnecté
One Love, One Heart, One Unity.
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. #1 {
  2. position: absolute;
  3. font-family: tahoma;
  4. font-color: #000000;
  5. font-size: 30px;
  6. z-index: 0;
  7. left: 50;
  8. top: 50;
  9. }
  10.  
  11. #2 {
  12. position: absolute;
  13. font-family: tahoma;
  14. font-size: 30px;
  15. font-color: red;
  16. font-weight: bold;
  17. z-index: 2;
  18. left: 50;
  19. top: 50;
  20. } 


et ton fichier.html avec ça :

  1. <html>
  2. <head>
  3. <link href="./style.css" rel="stylesheet" type="text/css">
  4. </head>
  5. <body>
  6.  
  7. <center>
  8.  
  9. <div id="1">
  10. <img src="./images/fond.png" border="0">
  11. </div>
  12.  
  13. <div id="2">
  14. <img src="./images/menu_allies.png" border="0">
  15. </div>
  16.  
  17. </body>
  18.  
  19. </html> 


@+...
moogli
moogli
Déconnecté
Il en faut peu pour être heureux !!!!!
Vl'a 1 exemple qui me plait smiley

Je c que c bourrin ce que j'ai fait mais sans le tableau j'arrive po centré le truc smiley (je vais rejoindre Le club des boulet smiley

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 @+
i M@N
i M@N
Déconnecté
One Love, One Heart, One Unity.
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;
}

@+...
i M@N
i M@N
Déconnecté
One Love, One Heart, One Unity.
Reuh ...

Pour le centrage faut créer un div qui servira de cadre et c'est expliqué ici encore une fois.

@+...
page 1 page 2
Répondre
Accès rapide :

Remonter Remonter
L'éditeur javascript - CSS - Gentoo - Tutoriaux PHP - Tutoriels PHP - Breizh Blog