Bonjour,
Je suis étudiant en Art, et cette semaine, j'ai décidé de m'attaquer au html et css.
Je suis assez content du résultat, j'ai quasiment fini un premier site, cependant, j'aimerais savoir s'il est possible de faire quelque chose pour le menu :
Mon menu est créé à partir d'une liste ul, il fonctionne certes, mais j'aimerais qu'il épouse deux positions : l'une avec un fond noir (ceci est un exemple, le noir...) lorsque mon bouton n'est pas actif (entendez par la qu'on ne se trouve pas sur la page s'y rapportant) et une avec un fond blanc lorsque le bouton est activé (c'est à dire pour moi lorsque le lecteur se trouve sur la page auquel le lien se rapporte).
De donne le code, s'il y a des choses à modifier au passage, dites le moi :
HTML :
Css :
Merci de votre aide !
Modifié par jeromeartemis (20 Sep 2008 - 16:43)
Je suis étudiant en Art, et cette semaine, j'ai décidé de m'attaquer au html et css.
Je suis assez content du résultat, j'ai quasiment fini un premier site, cependant, j'aimerais savoir s'il est possible de faire quelque chose pour le menu :
Mon menu est créé à partir d'une liste ul, il fonctionne certes, mais j'aimerais qu'il épouse deux positions : l'une avec un fond noir (ceci est un exemple, le noir...) lorsque mon bouton n'est pas actif (entendez par la qu'on ne se trouve pas sur la page s'y rapportant) et une avec un fond blanc lorsque le bouton est activé (c'est à dire pour moi lorsque le lecteur se trouve sur la page auquel le lien se rapporte).
De donne le code, s'il y a des choses à modifier au passage, dites le moi :
HTML :
</head>
<body onload="MM_preloadImages('images/bouton rappel2.jpg')">
<div id="outerwrapper">
<div id="header">
<div id="menu">
<ul>
<li><a href="index.html">E.U .R.L CTK</a></li>
<li><a href="#">PRESTATIONS</a></li>
<li><a href="#">DEMANDE DE RENDEZ-VOUS</a></li>
<li><a href="#"> LE CONTRÔLE TECHNIQUE</a></li>
</ul>
</div>
<div id="rappel">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="rappel.html" target="_top" onclick="MM_nbGroup('down','group1','rappel','images/bouton rappel2.jpg',1)" onmouseover="MM_nbGroup('over','rappel','images/bouton rappel2.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="images/bouton rappel.jpg" alt="rappel de votre date de contrôle technique" name="rappel" width="188" height="58" border="0" id="rappel2" onload="" /></a></td>
</tr>
</table>
</div>
</div>
<div id="content">
<div id="contentcontent">
<h1>Présentation de la Société E.U.R.L CTK</h1>
<p>Donec sed urna eu ligula blandit malesuada. Donec ut orci ac eros dignissim vulputate. Pellentesque quis nulla non risus tempor scelerisque. Duis euismod eros ut lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam tristique nisl. Sed magna. Mauris tincidunt, massa ut porttitor bibendum, velit nulla pharetra felis, eget interdum arcu justo quis purus. Cras tortor erat, iaculis quis, condimentum id, ultrices quis, lacus. Duis tristique molestie nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed tincidunt pede sit amet tellus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p> </p>
<p><img src="images/IMG_2041.jpg" alt="PHOTO" width="400" height="243" /></p>
<p>Photos du lieu d'entretien</p>
<p> </p>
<p>Nullam lorem lectus, accumsan a, vulputate eget, ultrices vel, mi. Aenean odio nulla, pharetra vel, volutpat nec, malesuada eu, purus. Etiam pharetra. Mauris suscipit nunc eu felis. Mauris congue euismod orci. Cras quis elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dui lectus, mattis in, rutrum non, auctor nec, libero. Vivamus consectetuer. Curabitur ullamcorper turpis. Quisque aliquet, nulla id bibendum laoreet, nisl erat elementum mi, vel euismod enim purus eget dui. Sed quis nibh id arcu ultrices dignissim. Mauris accumsan neque a massa.</p>
<p> </p>
<p> </p>
<p> </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in risus. Mauris ultrices suscipit turpis. In orci. Fusce vel nulla. Quisque rutrum orci eu neque. Morbi in ipsum sit amet enim convallis varius. Duis tempus lacus ut nulla. Sed a est in nisl tincidunt luctus. Phasellus quis eros. Nam ultricies pulvinar nisi. In risus sapien, suscipit vel, scelerisque at, sagittis in, lorem. Suspendisse auctor libero at lorem. Vivamus mauris purus, pellentesque eget, lacinia in, feugiat vitae, urna. Aliquam convallis tortor a lectus. Donec molestie. Suspendisse at tellus. Integer faucibus cursus metus.</p>
<p>Donec sed urna eu ligula blandit malesuada. Donec ut orci ac eros dignissim vulputate. Pellentesque quis nulla non risus tempor scelerisque. Duis euismod eros ut lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam tristique nisl. Sed magna. Mauris tincidunt, massa ut porttitor bibendum, velit nulla pharetra felis, eget interdum arcu justo quis purus. Cras tortor erat, iaculis quis, condimentum id, ultrices quis, lacus. Duis tristique molestie nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed tincidunt pede sit amet tellus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Nullam lorem lectus, accumsan a, vulputate eget, ultrices vel, mi. Aenean odio nulla, pharetra vel, volutpat nec, malesuada eu, purus. Etiam pharetra. Mauris suscipit nunc eu felis. Mauris congue euismod orci. Cras quis elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dui lectus, mattis in, rutrum non, auctor nec, libero. Vivamus consectetuer. Curabitur ullamcorper turpis. Quisque aliquet, nulla id bibendum laoreet, nisl erat elementum mi, vel euismod enim purus eget dui. Sed quis nibh id arcu ultrices dignissim. Mauris accumsan neque a massa.</p>
<p> </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in risus. Mauris ultrices suscipit turpis. In orci. Fusce vel nulla. Quisque rutrum orci eu neque. Morbi in ipsum sit amet enim convallis varius. Duis tempus lacus ut nulla. Sed a est in nisl tincidunt luctus. Phasellus quis eros. Nam ultricies pulvinar nisi. In risus sapien, suscipit vel, scelerisque at, sagittis in, lorem. Suspendisse auctor libero at lorem. Vivamus mauris purus, pellentesque eget, lacinia in, feugiat vitae, urna. Aliquam convallis tortor a lectus. Donec molestie. Suspendisse at tellus. Integer faucibus cursus metus.</p>
<p>Donec sed urna eu ligula blandit malesuada. Donec ut orci ac eros dignissim vulputate. Pellentesque quis nulla non risus tempor scelerisque. Duis euismod eros ut lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam tristique nisl. Sed magna. Mauris tincidunt, massa ut porttitor bibendum, velit nulla pharetra felis, eget interdum arcu justo quis purus. Cras tortor erat, iaculis quis, condimentum id, ultrices quis, lacus. Duis tristique molestie nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed tincidunt pede sit amet tellus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Nullam lorem lectus, accumsan a, vulputate eget, ultrices vel, mi. Aenean odio nulla, pharetra vel, volutpat nec, malesuada eu, purus. Etiam pharetra. Mauris suscipit nunc eu felis. Mauris congue euismod orci. Cras quis elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dui lectus, mattis in, rutrum non, auctor nec, libero. Vivamus consectetuer. Curabitur ullamcorper turpis. Quisque aliquet, nulla id bibendum laoreet, nisl erat elementum mi, vel euismod enim purus eget dui. Sed quis nibh id arcu ultrices dignissim. Mauris accumsan neque a massa.</p>
<p> </p>
<p> </p>
</div>
</div>
</div>
<div id="footer">
<ul>
<li><a href="http://www.infhobby.com">Conception www.infhobby.com</a></li>
</ul>
</div>
</body>
</html>Css :
@charset "utf-8";
body, h1, h2, p, ul, li {
margin: 0px;
padding: 0px;
}
#outerwrapper {
margin: 0px auto;
width: 812px;
}
#header {
height: 366px;
background: url(images/head.png) no-repeat;
}
#content {
width: 812px;
background: url(images/fondcontent.jpg) repeat-y;
}
#contentcontent {
height: auto;
width: 710px;
margin: 0px auto;
letter-spacing: normal;
text-align: justify;
text-indent: 60px;
word-spacing: normal;
white-space: normal;
}
#footer {
height: 82px;
width: 812px;
background: url(images/fondfooter.jpg) no-repeat;
margin: 0px auto;
font: bold normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
text-align: center;
}
#menu {
height: 53px;
width: 770px;
padding-top: 47px;
padding-left: 33px;
}
#menu ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#menu ul li {
display: inline;
margin: 0px;
padding: 0px;
}
#menu ul li a {
text-decoration: none;
display: block;
clear: none;
float: left;
height: 18px;
margin: 0px 0px 0px 30px;
padding: 8px 5px 5px;
width: auto;
font: bold 14px Arial, Helvetica, sans-serif;
}
#menu li a:hover, #menu li a:focus, #menu li a:active {
color: #FFFFFF;
background: url(images/fondmenuhover.jpg) repeat-x;
text-decoration: underline ;
}
#rappel {
height: 58px;
width: 188px;
background: no-repeat;
padding-top: 2px;
padding-bottom: 0px;
padding-left: 0px;
margin-left: 302px;
}
#footer ul {
list-style: none;
}
#footer li {
display: block;
}
#footer a {
font: bolder normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: underline;
}
body {
background: url(images/fondlong.jpg) repeat-x;
}
h1 {
font: normal 24px/82px Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
text-transform: capitalize;Merci de votre aide !
Modifié par jeromeartemis (20 Sep 2008 - 16:43)
