Tutoriaux informatique

[Thierry]

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>)

[Damien]

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 {}

[Flore]

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 !

[Damien]

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

[Flore]

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;
}

[Damien]

Cela appliqué à #general devrait aligner au centre tout ce que se trouve dedans :

text-align:center;

non ?

[Thierry]

peux-tu mettre le code html aussi ? et un petit croquis de ce que tu veux (sans oublier le nom des calques)

[Thierry]

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.

[Flore]

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

[lilou]

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]

,mais ou trouver des tutoriel pour apprendre a faire un site avec le dreamweaver ,

Bonjour,

je serais tenté de dire : ici

[Flore]

Plus une !!! 

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

[P4T]

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 :

Code:

<!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

Code:

/* 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;
}

[galouchette]

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