Zen-Spirit
vendredi 27 avril 2007 à 23:35
Salut tout le monde !
1- J'ai un petit soucis à comprendre un code Css par rapport à son fichier HTML :
Voici le site dont le modèle se trouve :
Ici, la barre de menu simple du siteEn fait sur ce site, entre les rubriques du Menu, il y a des petites barres qui les sépares, mais en regardant le code HTML et le code CSS, je ne vois pas comment le webmaster définie ces petites barres afin qu'elles apparaissent.
Pouvez vous m'aidez à comprendre et à trouver dans ce code ce qui fait que ces petites barres apparaissent :
Code HTML :CITATION
<ul id="navigation">
<li id="navhome"><a href="/">Accueil</a></li>
<li id="nav1"><a href="/articles">Tous les articles</a></li>
<li id="nav2"><a href="/ressources">Ressources</a></li>
<li id="nav3"><a href="/colophon">À propos du site</a></li>
<li id="nav4"><a href="/contact">Contact</a></li>
</ul>
Code CSS :CITATION
/* ------------------------------------------
/* Navigation
/* ------------------------------------------
*/
#navigation {
width: 700px;
height: 25px;
margin: 0;
padding: 0;
padding-bottom: 15px;
list-style: none;
background: #FFF url(/pompage_v3/nav.gif) no-repeat;
}
#navigation li {
height: 25px;
margin: 0;
padding: 0;
float: left;
text-indent: -9000px;
}
#navigation a {
display: block;
height: 100%;
}
#navigation li a:link, #navigation li a:visited {
color: #FFF;
text-decoration: none;
font-variant: small-caps;
font-weight: bold;
}
#navhome {
width: 80px;
background: url(/pompage_v3/nav_home.gif) no-repeat;
}
#nav1 {
width: 142px;
background: url(/pompage_v3/nav_articles.gif) no-repeat;
}
#nav2 {
width: 101px;
background: url(/pompage_v3/nav_ressources.gif) no-repeat;
}
#nav3 {
width: 85px;
background: url(/pompage_v3/nav_aprop.gif) no-repeat;
}
#nav4 {
width: 78px;
background: url(/pompage_v3/nav_contact.gif) no-repeat;
}
2- D'autres par rapport à ce même site, le webmaster a mis dans son code HTML, au début ceci :
CITATION
<div id="header">
<h1>Pompage</h1>
</div> <!-- fin #header -->
Mais à aucun moment je ne vois le titre Pompage en texte !!!
Le gros titre pompage qu'il y a sur le site en haut à droite est une image !
Merci de m'aider à comprendre, car çà me bloque dans ma progression.
Aussi, sur ce site là :
ICIDans la partie du cours sur Display : je n'arrive pas à avoir le mêe résulatat que le webmaster à mis comme résultat final :
Donc voici ce que je mets dans mon code HTML :
CITATION
<!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">
<head>
<title>essai3</title>
<meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1"/>
<meta name="Description" content="blabla">
<link rel="stylesheet" media="screen" type="text/css" title="essai3.css" href="essai3.css" />
<link rel="shortcut icon" href="favicon.ico" >
</head> <!–– Fin de la balise Head ––>
<body> <!–– Début de la balise Body ––>
<div id="display">
<p>
<a href="http://www.w3.org/">Le site du W3C</a>
<a href="http://www.w3.org/TR/CSS21/">Recommandations CSS2</a>
<a href="http://www.w3.org/Style/CSS/current-work#CSS3">Recommandations CSS3</a>
</p>
<hr />
<ul>
<li><a href="http://www.w3.org/">Le site du W3C</a></li>
<li><a href="http://www.w3.org/TR/CSS21/">Recommandations CSS2</a></li>
<li><a href="http://www.w3.org/Style/CSS/current-work#CSS3">Recommandations CSS3</a></li>
</ul>
</div>
</body>
</html>
Et dans mon code CSS :
CITATION
#display p.block a {
display:block;
width:180px;
border:1px solid #E8E8E8;
padding:3px 10px;
background-color: #DCDCDC;
}
#display li {
display:inline;
background:url(nav.png) no-repeat 0 50%;
padding-left:10px;
}
Merci !