18 Novembre 2017 à 07:07:26

Auteur Sujet: Dreamweaver 8 : centrer un calque en CSS  (Lu 15313 fois)

Thierry

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 1846
  • Points gagnés: 10
    • Voir le profil
Re : Dreamweaver 8 : centrer un calque en CSS
« Réponse #15 le: 15 Octobre 2006 à 18:15:45 »
Bonjour,

On distingue 3 sortes de styles :
     a - pour les balises html : ils portent le nom de la balise (ex : p { })
     b - les classes : ils comments par un point (ex : .Gras { }). On peut les appliquer autant de fois que nécessaire.
     c - les id : ils commencent par un # (ex : #Container { } ). Contrairement aux classes on ne peut les appliquer qu'une seule fois, à un calque par exemple (<div id="Container"> </div>)



« Modifié: 15 Octobre 2006 à 18:37:26 par damien »

Damien

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 2988
  • Points gagnés: 7
    • Voir le profil
    • aide informatique
Re : Dreamweaver 8 : centrer un calque en CSS
« Réponse #16 le: 15 Octobre 2006 à 18:45:21 »
Un petit exemple avec du css appliqué à la balise <p> :

p {
    // ce style sera appliqué à tous les éléments <p> par défaut
}

p#paragraphe1 {
    // ce style sera appliqué à tous les éléments <p id ="paragraphe1">
    // un seul <p> devra utiliser cet id par page, sinon utiliser class
}

p.contact {
    // ce style sera appliqué à tous éléments <p class="contact">
}

A noter aussi que l'application des styles css commence par le début du fichier et va jusqu'à la fin. Autrement dit, si je fait un fichier qui contient mon exemple précédent, un élément <p class="contact"> se verra d'abord appliquer le style général des p {} puis celui de sa classe p.contact {}
Cordialement,
Damien

Tutoriels informatique

Flore

  • Espoir
  • ***
  • Messages: 101
  • Points gagnés: 1
    • Voir le profil
Re : Dreamweaver 8 : centrer un calque en CSS
« Réponse #17 le: 19 Octobre 2006 à 13:37:24 »
Merci pour vos réponses.

Si il vous viens l'idée de faire des tutox dans ce sens … je suis cliente !  :)

Merci encore, je vais faire quelques tests de tout ça !
--

Flore

Damien

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 2988
  • Points gagnés: 7
    • Voir le profil
    • aide informatique
Re : Dreamweaver 8 : centrer un calque en CSS
« Réponse #18 le: 19 Octobre 2006 à 13:58:02 »
Oui il n'y a pas de doutes que d'autres tutos concernant dreamweaver, le css et le php vont voir le jour bientôt car ce sont des sujets que l'on nous demande souvent.

Donc ça va venir bientôt :)
Cordialement,
Damien

Tutoriels informatique

Flore

  • Espoir
  • ***
  • Messages: 101
  • Points gagnés: 1
    • Voir le profil
Re : Dreamweaver 8 : centrer un calque en CSS
« Réponse #19 le: 07 Novembre 2006 à 12:16:07 »
Bonjour et désolée,

Car je recommence mes expérience Webiennes !!
Et malheurs je ne comprends pas grand chose !!

Je me suis mise a faire une page dans laquelle j'ai placé un
calque "general" et a l'intérieur de celui-ci, plusieurs autre.
Maintenant je me trouve dans le cas ou justement je souhaites
tout centrer.Et je perds pied !!!
Je pensais pourvoir tout centré en agissant sur le "general" mais
rien a faire !!!

Je vous donne le code, j'espère qu'il vous suffira pour comprendre, merci, #general étant celui qui contient tout :

#general {
   position:relative;
   left:0px;
   top:0px;
   width:945;
   height:800;
   z-index:1;
   background-color: #FFFFFF;
   visibility: visible;
   margin: auto;
}
body {
   background-color: #FFFFFF;
}
#logo_entete {
   position:absolute;
   left:0px;
   top:0px;
   width:945px;
   height:120px;
   z-index:1;
   visibility: visible;
}
#btn_accueil {
   position:absolute;
   left:0px;
   top:120px;
   width:135px;
   height:45px;
   z-index:2;
}
#Layer3 {
   position:absolute;
   left:133px;
   top:132px;
   width:113px;
   height:46px;
   z-index:3;
}
#btn_portfolio {
   position:absolute;
   left:135px;
   top:120px;
   width:135px;
   height:45px;
   z-index:3;
}
#btn_book {
   position:absolute;
   left:270px;
   top:120px;
   width:135px;
   height:45px;
   z-index:4;
}
#btn_soirees {
   position:absolute;
   left:540px;
   top:120px;
   width:135px;
   height:45px;
   z-index:5;
}
#btn_concerts {
   position:absolute;
   left:405px;
   top:120px;
   width:135px;
   height:45px;
   z-index:6;
}
#btn_liens {
   position:absolute;
   left:675px;
   top:120px;
   width:135px;
   height:45px;
   z-index:7;
}
#btn_contact {
   position:absolute;
   left:810px;
   top:120px;
   width:135px;
   height:45px;
   z-index:8;
}
#bas_de_page {
   position:absolute;
   left:0px;
   top:778px;
   width:945px;
   height:22px;
   z-index:9;
}
.Style1 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 10px;
   font-weight: bold;
}
#contenu {
   position:absolute;
   left:0px;
   top:166px;
   width:945px;
   height:610px;
   z-index:10;
}
--

Flore

Damien

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 2988
  • Points gagnés: 7
    • Voir le profil
    • aide informatique
Re : Dreamweaver 8 : centrer un calque en CSS
« Réponse #20 le: 07 Novembre 2006 à 13:54:49 »
Cela appliqué à #general devrait aligner au centre tout ce que se trouve dedans :

Citer
text-align:center;

non ?
Cordialement,
Damien

Tutoriels informatique

Thierry

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 1846
  • Points gagnés: 10
    • Voir le profil
Re : Dreamweaver 8 : centrer un calque en CSS
« Réponse #21 le: 07 Novembre 2006 à 20:16:41 »
peux-tu mettre le code html aussi ? et un petit croquis de ce que tu veux (sans oublier le nom des calques)

Thierry

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 1846
  • Points gagnés: 10
    • Voir le profil
Re : Dreamweaver 8 : centrer un calque en CSS
« Réponse #22 le: 07 Novembre 2006 à 20:56:26 »
hum a priori une petite erreur ici :

#general {
   position:relative;
   left:0px;
   top:0px;
   width:945;
   height:800;
   z-index:1;
   background-color: #FFFFFF;
   visibility: visible;
   margin: auto;
}


corriger comme ça :

#general {
   position:relative;
   left:0px;
   top:0px;
   width:945px;
   height:800px;
   z-index:1;
   background-color: #FFFFFF;
   visibility: visible;
   margin: auto;
}


j'ai fait un essai avec seulement le general et le logo et ça se centre sans problème.
« Modifié: 07 Novembre 2006 à 21:00:06 par Thierry »

Flore

  • Espoir
  • ***
  • Messages: 101
  • Points gagnés: 1
    • Voir le profil
Re : Dreamweaver 8 : centrer un calque en CSS
« Réponse #23 le: 08 Novembre 2006 à 03:34:49 »
Thierry merci, je vais regarder ta correction demain, et je post le résultat, merci du soutien.

Finalement, j'ai regardée de suite, et en effet aprés avoir corrigée les px, ca marche :-)

Merci
« Modifié: 08 Novembre 2006 à 03:40:44 par Flore »
--

Flore

lilou

  • Nouveau membre
  • *
  • Messages: 1
  • Points gagnés: 0
    • Voir le profil
Re : Dreamweaver 8 : le cherche a apprendre lilou
« Réponse #24 le: 26 Novembre 2006 à 22:36:38 »
bonjour je n'ai pas l'habitude d'un forum je debut ,j'ai 56 ans ,je voudrait me faire un site avec le dreamweaver 8 que  j'essaye 't'etudier se logiciel ,mais ou trouver des tutoriel pour apprendre a faire un site avec le dreamweaver ,merci de me guider ,bonne soiré a tous ;
lilou

Thierry

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 1846
  • Points gagnés: 10
    • Voir le profil
Re : Re : Dreamweaver 8 : le cherche a apprendre lilou
« Réponse #25 le: 26 Novembre 2006 à 22:58:08 »
,mais ou trouver des tutoriel pour apprendre a faire un site avec le dreamweaver ,

Bonjour,

je serais tenté de dire : ici


Flore

  • Espoir
  • ***
  • Messages: 101
  • Points gagnés: 1
    • Voir le profil
Re : Dreamweaver 8 : centrer un calque en CSS
« Réponse #26 le: 26 Novembre 2006 à 23:31:27 »
Plus une !!!  :)

C'est en effet un tutoriel très très clair ? ton site apparaitra !!  :D
--

Flore

P4T

  • Nouveau membre
  • *
  • Messages: 1
  • Points gagnés: 0
    • Voir le profil
Re : Dreamweaver 8 : centrer un calque en CSS
« Réponse #27 le: 13 Septembre 2007 à 18:54:47 »
Bonjour, je remonte peut etre ce topic, mais j'ai le meme probleme...

J'ai un calque avec une dizaine de calques à l'intérieur et un autre calque avec seulement 1 calque à l'intérieur, impossible de centrer soit l'un soit l'autre et ce malgré le tuto n°3.

J'ai suivi aussi les n°1 et n°2 pour refaire mon site entierement et coller parfaitement au tuto n°3

Voici l'exemple de ma page avec 1 calque à l'interieur d'un autre :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Quake 3 Arena, le site non-officiel enti&egrave;rement fran&ccedil;ais</title>
<style type="text/css">
<!--
body {
background-color: #000000;
background-image: url();
}
.CorpsG {
height: 893px;
width: 945px;
margin-right: auto;
margin-left: auto;
position: relative;
z-index: 1;
left: 0px;
top: 0px;
}
.Corps {
position: absolute;
z-index: 2;
height: 891px;
width: 943px;
left: 0px;
top: 0px;
}
-->
</style>
<link href="file:///C|/Documents and Settings/P4T/Bureau/quake3arena/quake3arena.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="CorpsG" style="position:absolute; left:20px; top:0px; width:945px; height:893px; z-index:1"><img src="images/corps.gif" width="945" height="893"></div>
<div id="Corps" style="position:absolute; left:21px; top:1px; width:943px; height:891px; z-index:2">
  <p>Ceci est la page <span class="Gras">g&eacute;n&eacute;rale</span> de mon site.</p>
</div>
</body>
</html>

CorpsG etant le calque recevant l'autre calque (nommer Corps)
Corps étant le calque dans le calque

Edit : Le Css si besoin mais je ne crois pas
/* CSS Document */

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}.Gras {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #66FFFF;
}
« Modifié: 13 Septembre 2007 à 18:59:57 par P4T »

galouchette

  • Nouveau membre
  • *
  • Messages: 1
  • Points gagnés: 0
    • Voir le profil
Re : Dreamweaver 8 : centrer un calque en CSS
« Réponse #28 le: 31 Janvier 2008 à 12:23:35 »
bonjour
merci pour ce tuto... mais j'ai un petit souci : aucun problème dans Firefox mais ça ne marche pas dans explorer...y a t-il une solution????
Merci