begin process at 2012 05 29 04:05:45
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Comment centrer un ensemble de calques ?

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Comment centrer un ensemble de calques ?

lundi 24 mars 2008 à 10:48:03 | Comment centrer un ensemble de calques ?

chabgyver

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>

<body>
<div id="menu">
  <dl>
    <dt onmouseover="javascript:montre();"><a href=" http://free.fr " target="la_frame" title="Retour à l'accueil">Accueil</a></dt>
  </dl>
  <dl>
    <dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
    <dd id="smenu1">
      <ul>
        <li><a href="#">Sous-Menu 1.1</a></li>
        <li><a href="#">Sous-Menu 1.2</a></li>
        <li><a href="#">Sous-Menu 1.3</a></li>
        <li><a href="#">Sous-Menu 1.4</a></li>
        <li><a href="#">Sous-Menu 1.5</a></li>
        <li><a href="#">Sous-Menu 1.6</a></li>
      </ul>
    </dd>
  </dl>
  <dl>
    <dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
    <dd id="smenu2">
      <ul>
        <li><a href="#">Sous-Menu 2.1</a></li>
        <li><a href="#">Sous-Menu 2.2</a></li>
        <li><a href="#">Sous-Menu 2.3</a></li>
        <li><a href="#">Sous-Menu 2.4</a></li>
      </ul>
    </dd>
  </dl>
  <dl>
    <dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
    <dd id="smenu3">
      <ul>
        <li><a href="#">Sous-Menu 3.1</a></li>
        <li><a href="#">Sous-Menu 3.2</a></li>
        <li><a href="#">Sous-Menu 3.3</a></li>
        <li><a href="#">Sous-Menu 3.4</a></li>
        <li><a href="#">Sous-Menu 3.5</a></li>
      </ul>
    </dd>
  </dl>
  <dl>
    <dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
    <dd id="smenu4">
      <ul>
        <li><a href="#">Sous-Menu 4.1</a></li>
        <li><a href="#">Sous-Menu 4.2</a></li>
        <li><a href="#">Sous-Menu 4.3</a></li>
      </ul>
    </dd>
  </dl>
</div>
<div id="site">
  <iframe src=" http://ebouks.free.fr/contenu.htm " frameborder="0" style="top:0px;left:0px;width:660px;height:368px;" id="la_frame" name="la_frame" scrolling="yes"><img src=" http://ebouks.free.fr/fond-index2.jpg " width="660" height="368" border="0" usemap="#Map">
  </iframe>
</div>
<div id="textes" style="position:absolute; width:150px;   height:368px; z-index:101; left: 812px; top: 126px; background-color: #CC0033; layer-background-color: #CC0033; border: 0px none #000000;"></div>
<div id="pubs"   style="position:absolute; width:150px;   height:368px; z-index:102; left: 0px;   top: 126px; background-color: #003399; layer-background-color: #003399; border: 0px none #000000;"></div>
<div id="haut"   style="position:absolute; width:960px;   height:125px; z-index:103; left: 0px;   top: 0px;   background-image: url(banniere-haut.jpg); layer-background-image: url(banniere-haut.jpg); border: 0px none #000000;"></div>
<div id="bas"    style="position:absolute; width:960px;   height:75px;  z-index:104; left: 0px;   top: 495px; background-image: url(banniere-bas.jpg);  layer-background-image: url(banniere-bas.jpg);  border: 0px none #000000;"></div>
</body>
</html>

 Merci d'avance pour votre aide.

mercredi 26 mars 2008 à 13:08:54 | Re : Comment centrer un ensemble de calques ?

chabgyver
Personne n'a de solution à m'apporter ?
mercredi 26 mars 2008 à 18:29:56 | Re : Comment centrer un ensemble de calques ?

PetoleTeam

Membre Club
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>
<body>
<div id="menu">Bandeau Titre ou Menu</div>
<div id="site">Bandeau avec IFRAME</div>
</body>
</html>
A toi de jouer...
;O)
mercredi 26 mars 2008 à 22:15:26 | Re : Comment centrer un ensemble de calques ?

chabgyver
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.
samedi 29 mars 2008 à 11:23:07 | Re : Comment centrer un ensemble de calques ?

chabgyver
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.
lundi 31 mars 2008 à 13:00:07 | Re : Comment centrer un ensemble de calques ?

chabgyver
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.
lundi 31 mars 2008 à 17:50:24 | Re : Comment centrer un ensemble de calques ?

chabgyver
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.


Cette discussion est classée dans : menu, http, document, mm, if

Répondre à ce message

Sujets en rapport avec ce message

menu dynamique suite [ par drsnugle ] voici le code source en question :testColor0M  = '# Help me please [ par balbeur ] [:)] Bonjour à tous J'ai trouvé un formulaire sur le net apparamment en Javascript.Quasi pile poil ce que je cherchais.Je les donc modifié un peu a Problème avec le Script: IMAGE QUI CHANGE AU SURVOL DE LA SOURIS image ... [ par xp3d ] Bon soir à tous,Il y a un Scipt en bas de cette page http://www.smkdgg.com/Filme.html "le code des deux boutons qui se mette en rouge disque on les su différences entre fonctions javascript : preloadimages et prechargimg [ par remlev ] Bonjour à tous et merci à Codes-SourceS qui aide bien les débutants comme moi.J'ai qqes petites questions:J'ai fait un site avec un menu qui contient Probleme message d'erreur activeX [ par pampapic ] Bonjour à tous,Je suis loin d'être un pro de la programmation, en fait je suis infographiste 3d, néanmoins je me plonge dans le html pour confectionne meilleur moyen d'afficher l'heure [ par Bastian60 ] Bonjour,Voici un script que j'ai récupéré :var dayarray=new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");var montharray=ne Menu déroulant [ par dave1030 ] HelloVoila je voudrait faire un menu déroulant exactement comme celui-ci www.apple.ch   Voila ce que j'ai déjà trouvé mais 2 points ne me conviennent ouvrir/fermer une div et fusionner deux fonctions...help [ par ornorme ] bonjour à celui qui essaira de résoudre mon pti problème!(c'est ma deuxième question sur ce forum..en éspérant que la solution fonction cacher/montrer des div avec différentes id : coment introduire uen variable? [ par ornorme ] rebonjour!tout fonctionne pour un menu mais je cherche à introduire une variable la dedans car j'ai plusieur id="menu(+numéro)"pour que ce seul pavé d


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

Photo Frau auf Feld mit KopfsalatPhoto Water in the Beginning of the Grand Canyon
Photo Marine life 

Visiter la photothèque

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 2,309 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)