logo header et menu

logo header et menu - HTML/CSS - Programmation

Marsh Posté le 27-04-2011 à 13:51:06    

Bonjour j'ai un petit problème.
Je suis débutante en programation et j'aimerais intégrer le logo de mon header à mon menu horizontal.
Voila mon code HTML:
<body>
 <div id="page">
  <div id="header">
   <h1><a href="selaccueil.html"><img src="images/menu/monlogo.png" alt="accueil"/></a></h1>  
   <div id="menuh">
    <ul>
     <li><a href="news.html">News</a></li>
     <li><a href="photos.html">Photos</a></li>
     <li><a href="videos.html" >Vidéos</a></li>
     <li><a href="contact.html">Contacts</a></li>
    </ul>
   </div><!-- menu -->
  </div><!-- header -->
   
  <div id="contenu">
  </div><!-- contenu -->
   
  <div id="footer">
  </div><!-- footer -->
 </div><!-- page -->
</body>
 

et voilà mon code CSS :
body {
 font-family: 'Arial', Verdana, Lucida Grande, Sans-Serif;
 color: #333;
 background-color :#19B1C4;
 text-align: left;
 font-size: 13px;}
 
 /*Menu horizontal*/
#menuh{
border: none;
background-color:white;
width:100%;
height:56px;}
 
#menuh ul {
margin:0px;
padding: 0 ;
list-style-type:none; }
 
#menuh li {
float:left; }
 
#menuh ul li a {  
 display:block;  
 color:#19B1C4;
text-transform: uppercase;  
 font-size:13px;  
 text-decoration:none;  
 font-family:arial, verdana, sans-serif;  
 text-align:center;  
 padding:6px 10px 6px 10px;
 cursor:pointer; }
 
#menuh ul li a:hover {
 color:black; }  
 
h1{
margin-top: 0px;
margin-bottom:0px;}
 
#header img{
margin-top: 0px;
border: 0;}
 
et voilà ce que j'obtiens : http://www.hostingpics.net/viewer. [...] remenu.png
comment dois je faire pour que l'image de mon header (le logo twitter) soit dans mon menu

Reply

Marsh Posté le 27-04-2011 à 13:51:06   

Reply

Marsh Posté le 27-04-2011 à 14:16:52    

Salut, en l'incluant dans le menu tout simplement non ?
 

Code :
  1. <body>
  2.  <div id="page">
  3.     <ul id="header">
  4.   <li><a href="selaccueil.html"><img src="images/menu/monlogo.png" alt="accueil" /></a></li>
  5.   <li><a href="news.html">News</a></li>
  6.   <li><a href="photos.html">Photos</a></li>
  7.   <li><a href="videos.html" >Vidéos</a></li>
  8.   <li><a href="contact.html">Contacts</a></li>
  9.      </ul>
  10.  
  11.     <div id="contenu"></div>
  12.  
  13.     <div id="footer"></div>
  14.  </div>
  15. </body>


 

Code :
  1. body {
  2.   font-family: 'Arial', Verdana, Lucida Grande, Sans-Serif;
  3.   color: #333;
  4.   background :#19B1C4;
  5.   font-size: 13px;
  6. }
  8. #header{
  9.  background: #FFF;
  10.  height:56px;
  11.  margin: 0;
  12.  padding: 0;
  13.  list-style-type:none;
  14. }
  16. #header li {
  17.  float:left;
  18. }
  20. #header li a { 
  21.   display:block; 
  22.   color:#19B1C4;
  23.  text-transform: uppercase; 
  24.   font-size:13px; 
  25.   text-decoration:none; 
  26.   font-family:arial, verdana, sans-serif; 
  27.   text-align:center; 
  28.   padding:6px 10px;
  29. }
  31. #header li a:hover
  32. {
  33.   color: #000;
  34. } 
  36.  #header li a img
  37. {
  38.  border: none;
  39. }

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed