Calques qui ce font pas la males :)

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Calques qui ce font pas la males :)

dead_j

Comment ce site fait t'il pour bien gérer les calques comme ca ? http://www.adrenalyn.net/

(Je parle de la zone au centre et de celle en haut a gauche)

Moi quand je place un calque sur une page et que je redimentionne la page, les calques ce deplacent et ca fait n'importe quoi....

Quelqu'un pourrait me mettre sur une piste ?

---------------
Le Rock c'est la colle qui tient l'univers en place, si cette jointure n'existait pas, la vie n'aurais pas de sens :D

Publicité

gm_superstar

Appelez-moi Super

il suffit de regarder le code... Le site utilise des <iframe> placés dans des <div> en positionnement absolu.

dead_j

pourtant j'ai testé, j'ai pris leur code et je l'ai mis sur une nouvelle page et ca fonctionne pas

---------------
Le Rock c'est la colle qui tient l'univers en place, si cette jointure n'existait pas, la vie n'aurais pas de sens :D

gm_superstar

Appelez-moi Super

Fais voir le code/site.

dead_j

ben je fait juste des tests en local, je prend une partie de leur code et je le test sur une autre page

---------------
Le Rock c'est la colle qui tient l'univers en place, si cette jointure n'existait pas, la vie n'aurais pas de sens :D

dead_j

y'a toujours des sites que je visite et je me demande : mais comment le mec a fait pour faire ca ?

c'est comme ce site http://www.jaco-online.net/newsite [...] ontact.php

Comment le mec a fait ? on dirai qu'il y a un cadre en haut et en bas je sait pas trop mais ca fait vraiment bien

---------------
Le Rock c'est la colle qui tient l'univers en place, si cette jointure n'existait pas, la vie n'aurais pas de sens :D

gm_superstar

Appelez-moi Super

Dans ce dernier cas c'est des frames.

Si tu ne montres pas ton code je ne vois pas trop comment t'aider...

dead_j

je viens de trouver pour les calques, en faite des que je centre les tableaux y'a pu rien qui va,

dans cette exemple ca fonctionne :

Code :

<table width="745" border="1">
<tr>
<td> </td>
</tr>
<tr>
<td>
<div id="Layer1" style="position:absolute; width:734px; height:170px; z-index:1; left: 15px; top: 46px; overflow: scroll">
<p>kuykuykuykuykuy r gre gert r et r ety re</p>
<p> </p>
<p>trtet ert ret r t ert re t</p>
<p>t</p>
<p>r</p>
<p> </p>
<p> </p>
<p> </p>
<p>t r et er t r terte</p>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</td>
</tr>
<tr>
<td height="22"> </td>
</tr>
</table>

---------------
Le Rock c'est la colle qui tient l'univers en place, si cette jointure n'existait pas, la vie n'aurais pas de sens :D

gm_superstar

Appelez-moi Super

OK, dans ce cas, pas besoin de positionnement absolu.

Le code nettoyé :

<table>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div id="Layer1">
<p>kuykuykuykuykuy r gre gert r et r ety re</p>
<p> </p>
<p>trtet ert ret r t ert re t</p>
<p>t</p>
<p>r</p>
<p> </p>
<p> </p>
<p> </p>
<p>t r et er t r terte</p>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</td>
</tr>
<tr>
<td class="bas"> </td>
</tr>
</table>

Et les styles qui vont bien :

table {
margin-left: auto;
margin-right: auto;
border: 1px solid #000000;
}
td {
border: 1px solid #000000;
}
td.bas {
height: 22px;
}
div#Layer1 {
width: 734px;
height: 170px;
overflow: scroll;
z-index: 1;
}

dead_j

mais comme tu peut le voir le tableau n'est pas centré... Si je le centre, et que je centre le calque aussi, la ca fonctionne plus....

et tu aurait une idée de comment faut faire pour virer le scroll horizontale ?

---------------
Le Rock c'est la colle qui tient l'univers en place, si cette jointure n'existait pas, la vie n'aurais pas de sens :D

Publicité

gm_superstar

Appelez-moi Super

Dans le code que j'ai mis, le tableau est centré grâce à ces 2 propriétés CSS :

table {
margin-left: auto;
margin-right: auto;
}

Testé rapidement avec IE6 et Mozilla.

gm_superstar

Appelez-moi Super

Bon, je mets le code HTML complet que j'ai utilisé. Le DOCTYPE au début est important, sinon IE6 ne centre pas le tableau (c'est peut-être le problème que tu as eu) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test layers/tableaux</title>
<style type="text/css">
table {
margin-left: auto;
margin-right: auto;
border: 1px solid #000000;
}
td {
border: 1px solid #000000;
}
td.bas {
height: 22px;
}
div#Layer1 {
width: 734px;
height: 170px;
overflow: scroll;
z-index: 1;
}
</style>
</head>

<body>
<table>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div id="Layer1">
<p>kuykuykuykuykuy r gre gert r et r ety re</p>
<p> </p>
<p>trtet ert ret r t ert re t</p>
<p>t</p>
<p>r</p>
<p> </p>
<p> </p>
<p> </p>
<p>t r et er t r terte</p>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</td>
</tr>
<tr>
<td class="bas"> </td>
</tr>
</table>
</body>

</html>

C'est du XHTML mais ça peut s'adapter facilement en HTML 4.01

Message édité par gm_superstar le 09-07-2002 à 15:10:58

dead_j

Deja je te remercie beaucoup de m'avoir aidé !

Ensuite je vais encore t'embeter Tu serait comment virer le scroll horizontal ?

---------------
Le Rock c'est la colle qui tient l'univers en place, si cette jointure n'existait pas, la vie n'aurais pas de sens :D

dead_j

ok j'ai trouvé tous seul, fallait mettre auto au lieu de scroll.... J'te reremercie @+

---------------
Le Rock c'est la colle qui tient l'univers en place, si cette jointure n'existait pas, la vie n'aurais pas de sens :D

gm_superstar

Appelez-moi Super

Essaye overflow: auto; Si le contenu de ton <div> ne dépasse pas la largeur de celui-ci les barres ne devraient pas apparaître.

Sinon, pour que la barre horizontale n'apparaisse jamais tu peux utiliser overflow-x: hidden; mais ça ne marche qu'avec IE 5 et +

gm_superstar

Appelez-moi Super

DeaD_J a écrit a écrit :

ok j'ai trouvé tous seul, fallait mettre auto au lieu de scroll.... J'te reremercie @+

FORUM HardWare.fr

Programmation

HTML/CSS

Calques qui ce font pas la males :)

Sujets relatifs
html4 balise font?	visualisateur de font AFP
[C#]Y'en a qu'en font ici????	[CSS] font-size : relatif ou absolu ?
[HTML] Position des calques...	[MFC] Pourquoi les .exe MFC font au minimum 700 Ko (environ) ?
[java]comment font t il pour mettre des smileys dans des TextArea?	[CNAM / informatique / EAD] questions à qui le font / l'ont fait
Comment font-ils ?	Comportements des calques, Dreamweaver et Netscape
Plus de sujets relatifs à : Calques qui ce font pas la males :)

Page générée en 0.056 secondes