bonjour, voici mon problème, je suis donc un tutoriel de conception design, et je rencontre un problème de compréhension.
http://css.alsacreations.com/xmedia/exemples/design_css/etape2.html
je suis à l'étape 2 comme sur le lien ci dessus.
je ne comprend pas la fin du paragraphe, comme suivant :
Ci-après le code css correspondant à cette page, celui-ci est inséré en utilisant la balise <style type="text/css"> (</style>) à insérer entre les balises <head> et </head>
voici mon code ( page index.html )
ce que je ne comprend pas c'est comment faire le lien entre mon index, et mon css. au départ, j'avais fait un fichier css à pars, mais je n'obtenais pas ce que je dois normalement obtenir en suivant le tuto. c'est à dire les couleurs de fonds, les images de fond etc....
voir mon site pour constater qu'effectivement ça ne fonctionne pas : http://loupdesbois2.free.fr/
j'espère avoir été clair. si vous avez besoin de précisions n'hésiter pas.
espérant que vous allez pouvoir m'aider.
Modifié par teddy_duddy (05 Jan 2007 - 22:14)
http://css.alsacreations.com/xmedia/exemples/design_css/etape2.html
je suis à l'étape 2 comme sur le lien ci dessus.
je ne comprend pas la fin du paragraphe, comme suivant :
Ci-après le code css correspondant à cette page, celui-ci est inséré en utilisant la balise <style type="text/css"> (</style>) à insérer entre les balises <head> et </head>
voici mon code ( page index.html )
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr" />
<title>création d'un design étape par étape - étape n°1 : le code xhtml</title>
<style type="
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: #dea ;
/* On définit les marges haute et basse à 10px et les marges droite et gauche à 0 */
/* On met le padding à 0 pour le navigateur Opera qui définit des padding par défaut pour le body */
/* On utilise text-align: center ; pour Internet Explorer, c'est la seule façon de centrer les éléments de type block avec ce navigateur */
/* On a ajouté de quoi mettre une police de caractère et une couleur de fond */
}
div#conteneur
{
width: 770px ;
margin: 0 auto ;
text-align: left ;
border: 2px solid #ab4 ;
background: #fff ;
}
/* On définit la largeur de la division qui contient l'ensemble de la page à 770 pixels */
/* margin: 0 auto ; est la méthode correcte pour centrer les éléments de type block (comme les divisions), nous centrons donc cette division */
/* Il faut rétablir l'alignement à gauche que nous avons changé plus haut */
/* Une bordure autour de l'ensemble de la page, et couleur blanche pour le fond de celle-ci */
h1#header
{
height: 258px ;
background: url(image/beddy_bear.jpg) no-repeat left top;
}
/* Une image de fond correspondant aux 258 pixels de tout à l'heure, attention à bien compresser vos images */
/* On définit la hauteur de la partie header, contenant le titre du site */
div#contenu
{
padding: 0 30px 0 100px ;
background: url(image/bg_page.png) no-repeat 15px 15px ;
}
/* On ajoute un petit élément décoratif sur le côté de la page et on crée un espace à gauche et à droite du contenu */
div#contenu h2
{
padding-left: 25px ;
line-height: 25px ;
font-size: 1.4em ;
background: url(little_apple.gif) no-repeat left bottom ;
color: #9b2 ;
border-bottom: 1px solid #9b2 ;
}
/* Mise en forme du titre de page, une petite image, on décale le texte en fonction de l'image, on donne un couleur au texte et on met une bordure basse */
div#contenu h3
{
margin-left: 15px ;
padding-left: 5px ;
border-bottom: 1px solid #9b2 ;
border-left: 3px solid #9b2 ;
color: #9b2 ;
}
/* De même que pour le titre h2, à ceci près qu'on ne donne pas d'image décorative cette fois ci */
div#contenu p
{
text-align: justify ;
text-indent: 2em ;
line-height: 1.7em ;
}
/* On rend les paragraphes plus propre, alignement justifié, alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */
div#contenu a
{
color: #8a0 ;
}
div#contenu a:hover
{
color: #9b2;
}
/* On met en forme les liens contenu dans la page */
p#footer
{
margin: 0 ;
padding-right: 10px ;
line-height: 30px ;
text-align: right ;
color: #8a0 ;
}
/* Mise en forme de la partie pied de page, rien d'extra-ordinaire */
pre
{
overflow: auto ;
border: 2px solid #9b2 ;
padding: 5px 0 0 5px ;
font-size: 1.2em ;
}
/*une couleur de fond, une bordure, la taille de police et un léger espace entre le texte et les bords du pre */
/* En passant on définit l'overflow de la balise pre à auto pour permettre d'afficher des barres de défilement si le texte contenu dans cette balise est trop grand */
* html pre
{
width: 636px ;
pre span
}
/* Couleur différente pour les span.comment, les span utilisés pour les commentaires */
/* On dois donner une largeur au pre à cause d'Internet Explorer, on ne va donc l'appliquer qu'à Internet Explorer en utilisant un "hack", la combinaison " * html " permet de n'appliquer ce qui suis qu'à Internet Explorer */
pre span
{
color: #560 ;
}
/* Couleur de texte des éléments compris dans des span eux mêmes compris dans un pre */
pre span.comment
{
color: #b30000 ;
}
/css"> </style>
</head>
<body>
<div id="conteneur">
<h1 id="header"><a href="etape1.html" title="colored design - accueil"><span>colored design</span></a></h1>
<ul id="menu">
<li><a href="etape1.html">Etape n°1</a></li>
<li><a href="etape2.html">Etape n°2</a></li>
<li><a href="etape3.html">Etape n°3</a></li>
<li><a href="etape4.html">Etape n°4</a></li>
<li><a href="etape5.html">Etape n°5</a></li>
</ul>
<div id="contenu">
<h2>bienvenu sur mon site </h2>
<p>Un paragraphe</p>
</div>
<p id="footer">Réalisation des codes xhtml & css, du tutoriel et du design en cours par teddy_duddy </p>
</div>
</body>
</html>
ce que je ne comprend pas c'est comment faire le lien entre mon index, et mon css. au départ, j'avais fait un fichier css à pars, mais je n'obtenais pas ce que je dois normalement obtenir en suivant le tuto. c'est à dire les couleurs de fonds, les images de fond etc....
voir mon site pour constater qu'effectivement ça ne fonctionne pas : http://loupdesbois2.free.fr/
j'espère avoir été clair. si vous avez besoin de précisions n'hésiter pas.
espérant que vous allez pouvoir m'aider.
Modifié par teddy_duddy (05 Jan 2007 - 22:14)
