20 Novembre 2017 à 01:23:18

Auteur Sujet: creation site web  (Lu 4643 fois)

versuz

  • Nouveau membre
  • *
  • Messages: 4
  • Points gagnés: 0
    • Voir le profil
creation site web
« le: 28 Septembre 2006 à 17:42:33 »
Bonjour, je suis nouveau et je viens de réaliser le tuto "Dreamweaver 8 : mise en forme CSS d'un site"
J’ai un petit problème, je m'explique...
J’aimerais qu'il y ai 2 calque de navigation, un a gauche et un a droite et le contenu serais donc au centre avec une bannière au dessus , la rien de bien compliquer.
Le problème est que je voudrais que tout cela soie centrer automatiquement pour que le site soie mieux adapter au différente résolution d'écran...
Je ne voie pas trop comment faire. :?
Si qq voudrais bien me venir en aide ça serais sympa  8)
Merci d'avance pour vos réponses !
Et merci pour tout les tuto de ce site qui m'aide beaucoup ;)

salut ++

Thierry

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 1846
  • Points gagnés: 10
    • Voir le profil
Re : creation site web
« Réponse #1 le: 28 Septembre 2006 à 20:41:32 »
Bonjour,

Je créerais un calque qui engloberait l'ensembles des autres calques et servirait ainsi de container.

Ensuite appliquer à ce calque un margin-left et un margin-right auto.

Ci dessous un extrait de code :

#Layer1 {
   background-color: #00CCFF;
   margin-right: auto;
   margin-left: auto;
   left:127px;
   top:32px;
   width:580px;
   height:354px;
   z-index:1;
}

On suppose que le calque container s'appelle Layer1. Les dimensions du calque sont à adapter au besoin bien sûr, ici j'ai mis au hasard.


versuz

  • Nouveau membre
  • *
  • Messages: 4
  • Points gagnés: 0
    • Voir le profil
Re : creation site web
« Réponse #2 le: 28 Septembre 2006 à 21:21:19 »
re ,

le problème que j'ai est que il n'y a que le calque layer1 qui ce centre , les autre pas... :'(

merci pour votre aide

Damien

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 2988
  • Points gagnés: 7
    • Voir le profil
    • aide informatique
Re : creation site web
« Réponse #3 le: 28 Septembre 2006 à 21:43:04 »
Bonsoir,

Si tu veux centrer les autres aussi, essaie de leur mettre :

margin-left:auto;
margin-right:auto;
width: .... (largeur que tu veux)
Cordialement,
Damien

Tutoriels informatique

versuz

  • Nouveau membre
  • *
  • Messages: 4
  • Points gagnés: 0
    • Voir le profil
Re : creation site web
« Réponse #4 le: 28 Septembre 2006 à 22:08:38 »
re bonssoir,
voila j'ai appliquer un margin auto au body
body
{
   width: 760px;
   margin: auto;
}

et la ca marche sauf que le calque contenu et le calque de droite ( j ai deux calque de navigation un a gauche et un a droit et au centre le calque pour le contenu ) ne ce mette pas  bien tu tout , le calque de contenu de droite vien ce mettre sur le calque de contenu de gauche...

comprend pas  :shock:
« Modifié: 29 Septembre 2006 à 01:10:30 par versuz »

versuz

  • Nouveau membre
  • *
  • Messages: 4
  • Points gagnés: 0
    • Voir le profil
Re : creation site web
« Réponse #5 le: 28 Septembre 2006 à 23:21:10 »
re re re re
en faite je n'arive meme pas a centrer le site fais avec le tuto...

Thierry

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 1846
  • Points gagnés: 10
    • Voir le profil
Re : creation site web
« Réponse #6 le: 29 Septembre 2006 à 21:04:29 »
Voici la technique pour centrer la page entière :

- un calque container avec :
                position=relative
                margin-left et margin-right = auto

- les calques à l'intérieur du container avec :
                position = absolute


Je colle ci-dessous un code complet qui fonctionne chez moi. Je pense qu'il assez clair, les noms des calques renseignant sur leur rôle, mais je reste à disposition pour explications si nécessaire :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--

body {
   background-color: #000000;
}

#Container {
   position:relative;
   left:0px;
   top:0px;
   width:800px;
   height:500px;
   z-index:1;
   margin-right: auto;
   margin-left: auto;
   background-color: #99CCFF;
}

#NavigationGauche {
   left:0px;
   top:0px;
   width:140px;
   height:500px;
   z-index:2;
   background-color: #0066FF;
   position: absolute;
}

#NavigationDroit {
   top:0px;
   right: 0px;
   width:140px;
   height:500px;
   z-index:3;
   background-color: #0066FF;
   position: absolute;
   
}

#Central {
   position:absolute;
   left:140px;
   top:0px;
   width:520px;
   height:500px;
   z-index:4;
   background-color: #99CC99;
}
-->
</style>
</head>

<body>
<div id="Container">
   <div id="NavigationGauche"></div>
   <div id="NavigationDroit"></div>
    <div id="Central"></div>
</div>
</body>

</html>


Voilà, bon courage pour la suite :)

Thierry

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 1846
  • Points gagnés: 10
    • Voir le profil
Re : creation site web
« Réponse #7 le: 30 Septembre 2006 à 15:15:51 »
J'ai préparé un tuto pour ceux que ç a intéresse.

Le temps qu'il soit mis en ligne et je mettrai le lien

Mehdi

  • Intarissable
  • *****
  • Messages: 2504
  • Points gagnés: 0
    • Voir le profil
    • Tutoriel informatique
Re : Re : creation site web
« Réponse #8 le: 30 Septembre 2006 à 15:29:06 »
J'ai préparé un tuto pour ceux que ç a intéresse.

Le temps qu'il soit mis en ligne et je mettrai le lien

excellent, comme ça tout le monde en profiteras :) :D :D :D
Aide informatique
Nous n'avons trouvé aucun problème, mais nous allons continuez à vous aider !

Thierry

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 1846
  • Points gagnés: 10
    • Voir le profil
Re : Re : Re : creation site web
« Réponse #9 le: 30 Septembre 2006 à 15:33:05 »
J'ai préparé un tuto pour ceux que ç a intéresse.

Le temps qu'il soit mis en ligne et je mettrai le lien

excellent, comme ça tout le monde en profiteras :) :D :D :D

en profitera Mehdi. Lol je fais mon Damien ;)

Damien

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 2988
  • Points gagnés: 7
    • Voir le profil
    • aide informatique
Re : creation site web
« Réponse #10 le: 30 Septembre 2006 à 16:26:52 »
Voilà il est en ligne son tutoriel pour ceux que le sujet intéresse :
Centrer un calque CSS avec dreamweaver 8
Cordialement,
Damien

Tutoriels informatique

Thierry

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 1846
  • Points gagnés: 10
    • Voir le profil
Re : creation site web
« Réponse #11 le: 30 Septembre 2006 à 17:20:56 »
OK merci Damien