1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Comment centrer un ensemble de calques ?

Signaler
Messages postés
159
Date d'inscription
dimanche 17 juillet 2011
Statut
Membre
Dernière intervention
28 janvier 2020
 -
Messages postés
159
Date d'inscription
dimanche 17 juillet 2011
Statut
Membre
Dernière intervention
28 janvier 2020
 -
Bonjour,

J'ai crée une interface regroupant un ensemble de div au milei duquel se trouve une iframe et j'aimerai centrer le tout horizontalement et pourquoi pas verticalement.
Ca fait un tas d'essais que je fais et je n'arrive à rien, avez vous une solution à m'apporter ?

Voici mon code :

<!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">
<head>
<title>Menu déroulant horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
 for (var i = 1; i<=10; i++) {
  if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
 }
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
/* CSS issu des tutoriels
http://css.alsacreations.com */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
 position: absolute;
 top: 113px;
 left: 58px;
 z-index:105;
 width: 849px;
 height: 186px;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 0px solid gray;
}
#menu dd {
border: 0px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}




#site {
 position: absolute;
 z-index: 1;
 top : 129px;
 left : 151px;
 color: #000;
 padding: 0px;
 border: 0px solid gray;
 width: 660px;
 height: 368px;
}






a {text-decoration: none;
color: black;
color: #222;
}
-->
</style>
<script language ="JavaScript" type= "text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>








      * : http://ebouks.free.fr/contenu.htm

<gras>" frameborder ="0" style= "top:0px;left:0px;width:660px;height:368px;" id="la_frame" name="la_frame" scrolling="yes">

http://ebouks.free.fr/fond-index2.jpg




" width ="660" height="368" border="0" usemap="#Map">
 

</html>




Merci d'avance pour votre aide.

6 réponses

Réponse 1 / 6
Messages postés
159
Date d'inscription
dimanche 17 juillet 2011
Statut
Membre
Dernière intervention
28 janvier 2020
Personne n'a de solution à m'apporter ?
Réponse 2 / 6
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
 17
Bonjour,
Voir sur alsacreations
Un petit exemple issu du lien ci
dessus

<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01//EN">
<head>
<style
type="text/css">
body {
  margin : 0;
  padding : 0;

  background : white;
  font : 13px Verdana;
}
#menu {

  position : absolute;
  top : 110px;
  left : 50%;

  margin-left : -400px;
  width : 800px;
  height : 20px;

  border : 1px solid blue;
}
#site {
  position : absolute;

  top : 132px;
  left : 50%;
  margin-left : -330px;
  width :
660px;
  height : 400px;
  border : 1px solid gray;
}

</style>
</head>


Bandeau Titre ou Menu


Bandeau
avec IFRAME


</html>
A toi de
jouer...
;O)
Réponse 3 / 6
Messages postés
159
Date d'inscription
dimanche 17 juillet 2011
Statut
Membre
Dernière intervention
28 janvier 2020
Ce que j'ai fait, c'est de créer un tableau que j'ai centré mais je me heurte à un autre problème, pour le menu, il faut impérativement qu'il soit dans un calque, mais je n'arrive pas à le centrer, j'ai essayé de faire ceci :

#menu {
    position: absolute;
    top: 119px;
    left: 412px;
    z-index:105;
    width: 849px;
    height: 186px;
    margin-left :auto;
    margin-right:auto;
}

Mais, d'un browser à l'autre, ça agit de manière plus que chaotique.
Le must du luxe serait un alignement général vertical, ça c'est la classe mais peut-être est-ce un doux rêve.
Encore une fois, heureusement que tu étais dans les parages.
Réponse 4 / 6
Messages postés
159
Date d'inscription
dimanche 17 juillet 2011
Statut
Membre
Dernière intervention
28 janvier 2020
J'ai réussi non sans mal à centrer mes calques mais par contre, j'ai un autre soucis, le menu, lorsqu'il se déplie, fait descendre l'image centrale, je sais pas pourquoi, de plus, mon autre calques dans laquelle, j'ai placé une bannière se duplique inutilement, or, c'est pas du tout ce que je voudrai.
Je chercge donc à comprendre le pourquoi du comment et trouver une solution car franchement, j'aimerai ien passer à autre chose, à savoir au design proprement dit un jour quand même.

Pour voir où j'en suis, c'est là : http://ebouks.free.fr

Il vous suffira d'éditer le code.

Merci d'avance.
Réponse 5 / 6
Messages postés
159
Date d'inscription
dimanche 17 juillet 2011
Statut
Membre
Dernière intervention
28 janvier 2020
J'ai essayé durant de week-end tout ce que je pouvais mais sans résultat, je crois que j'ai besoin d'aide.

Merci.
Réponse 6 / 6
Messages postés
159
Date d'inscription
dimanche 17 juillet 2011
Statut
Membre
Dernière intervention
28 janvier 2020
Bon, finalement, j'arrive à rien, j'ai décidé de télécharger un template tout fait et d'essayer de l'arranger à ma sauce.
Donc, c'est toujours à la même adresse : http://visioconseils.free.fr pur voir où j'en suis.
J'ai 3 problèmes avec ce site :

1- J'aimerai que le div central s'affiche de manière propre quel que soit le navigateur ar là, c'est le GRAND n'importe quoi à ce niveau-là.
2- J'aimerai pouvoir mettre une image sous mon texte au même endroit.
3- J'aimerai aussi que les ascensseurs ne s'affichent pas et que l'on puisse faire défiler à l'aide de la molette de la souris. PetolTeam m'a donné une astuce que j'utilise sur 2 de mes sites et ça marche bien mais là, curieusement, pour une raison qui m'échappe, ça ne veux rien savoir.

Je veux bien donner mon login et mpt de passe à toute âme charitable qui voudra bien m'aider.

Merci d'avance.
Répondre Posez votre question