Mettre un menu a coter d'un logo dans le header

Helenedu39 Messages postés 121 Date d'inscription Statut Membre Dernière intervention -
Helenedu39 Messages postés 121 Date d'inscription Statut Membre Dernière intervention - 8 avril 2014 à 21:56

bonjour voila je souhaiterai que mon menu soit a coter de mon logo et je ne trouve pas la ligne à modifier :
voila mon code html :
<header>
<img src="images/logo1.gif"/>

<ul class="cbdb-menu">
<li><a href="index.html" class="red">Accueil</a> </li>
<li><a href="quisuisje.html" class="green">Qui suis je ?</a></li>
<li><a href="competences.html" class="yellow">Mes compétences</a></li>
<li><a href="cv.html" class="cyan">télécharger mon CV</a> </li>
<li><a href="contact.html" class="blue">Me contacter</a></li>
</ul>
</header>

et le code Css du menu que j'ai trouver sur un site :

/*********** BUTTON *************/
.cbdb-menu li {
display: block;
float: left;
line-height: 35px;
list-style:none;
margin: 0 15px;

}
.cbdb-menu li a {
/* This generators the gradient on top of the solid color */
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255,255,255,.5)),
color-stop(1, rgba(0,0,0,.1))
);
background-image: -moz-linear-gradient(
center top,
rgba(255,255,255,.5) 0%,
rgba(0,0,0,.1) 100%
);
color: #f4f4f4; /* IE */
color: rgba(255, 255, 255, 0.8);
display: block;
font: bold 18px "Myriad Pro","Lucida Grande",Helvetica,Arial,sans-serif;
outline:none;
padding: 5px 15px;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
}
.cbdb-menu li a:active {
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0,rgba(255,255,255,.5)),
color-stop(.1,rgba(255,255,255,.2)),
color-stop(.85, rgba(0,0,0,.2)),
color-stop(100, rgba(0,0,0,.4))
);
background-image: -moz-linear-gradient(
center bottom,
rgba(255,255,255,.5) 0%,
rgba(255,255,255,.2) 10%,
rgba(0,0,0,.2) 85%,
rgba(0,0,0,.4) 100%
);
}
/* Dark Text */
.cbdb-menu li a.dark {
color: #333; /* IE */
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
}
/*********** COLORS *************/
/* Create your own class for your own colors */
.red {
background: #B80202;
border: #B80202 1px solid
}
.red:hover, .red:focus{
background-color:#e30606
}
.green {
background: #46c431;
border: #46c431 1px solid
}
.green:hover,.green:focus {
background-color:#44e329
}
.yellow {
background: #D9CE1C;
border: #D9CE1C 1px solid
}
.yellow:hover,.yellow:focus {
background-color:#eee117
}
.cyan {
background: #23c6de;
border: #23c6de 1px solid
}
.cyan:hover,.cyan:focus {
background-color:#18d8f4
}
.blue {
background: #3271d9;
border: #3271d9 1px solid
}
.blue:hover,.blue:focus {
background-color:#377ef2
}

dans l'espoir d'avoir de l'aide
Helenedu39

Afficher la suite

A voir également:

Insérer logo dans header html
Insérer vidéo dans powerpoint - Guide
Insérer signature word - Guide
Logo .net - Télécharger - Études & Formations
Insérer liste déroulante excel - Guide
Insérer sommaire word - Guide

2 réponses

Réponse 1 / 2

Einnty Messages postés 5 Date d'inscription Statut Membre Dernière intervention 1

Essaye de mettre ton image en background d'une div header :

<div class="header"> 
<img src="images/logo1.gif"/> 

<ul class="cbdb-menu"> 
<li><a href="index.html" class="red">Accueil</a> </li> 
<li><a href="quisuisje.html" class="green">Qui suis je ?</a></li> 
<li><a href="competences.html" class="yellow">Mes compétences</a></li> 
<li><a href="cv.html" class="cyan">télécharger mon CV</a> </li> 
<li><a href="contact.html" class="blue">Me contacter</a></li> 
</ul> 
</div>

Et dans ton css:

.header {
background: url('tondossier/tonfichier.extension');
}

.red { 
background: #B80202; 
border: #B80202 1px solid 
} 

.red:hover, .red:focus{ 
background-color:#e30606 
} 

.green { 
background: #46c431; 
border: #46c431 1px solid 
} 

.green:hover,.green:focus { 
background-color:#44e329 
} 

.yellow { 
background: #D9CE1C; 
border: #D9CE1C 1px solid 
} 

.yellow:hover,.yellow:focus { 
background-color:#eee117 
} 

.cyan { 
background: #23c6de; 
border: #23c6de 1px solid 
} 

.cyan:hover,.cyan:focus { 
background-color:#18d8f4 
} 

.blue { 
background: #3271d9; 
border: #3271d9 1px solid 
} 

.blue:hover,.blue:focus { 
background-color:#377ef2 
}

Réponse 2 / 2

Helenedu39 Messages postés 121 Date d'inscription Statut Membre Dernière intervention 111

je vais essayer je vous tiens au courant

Discussions similaires

debloquer le code 400 bad request qui s'affiche à google

Votre réponse

Discussions similaires