0

I have a psd file and I want to make psd to CSS. I tried to write header of psd which have opacity as in picture.enter image description here This is from my index.html enter image description here

menu which contains container div. Second container which contains brand and menus

<nav class="menu">
    <div class="container">
        <div id="brand">
            <h1>Brandi</h1>
            <p>|    I’am your tag line</p>
        </div>
        <ul class="menu">
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </div>
</nav>

my css as written:

.menu{
    width:100%;
    height:70px;
    background-color:#000;
    -moz-opacity:.60; 
    filter:alpha(opacity=60);
    opacity:.60; 
}

.container{
    width:80%;
    height:70px;
    margin:0 auto;
}

#brand{
    width:25%;
    height:auto;
    position:relative;
    top:10px;
}

#brand>h1{
    color: #fff;
    float:left;
    font-family: 'Pacifico', cursive;
    font-size : 28px;
}

#brand>p{
    color:#73797a;
    float:left;
    font-family: 'Open Sans', sans-serif;
    font-size : 13pt;
    margin-left:20px;
    line-height:50px;
}

As shown in figure h1 element and p element also have opacity which I don't want. How can I overcome this problem?

Rohit Kumar
  • 2,048
  • 1
  • 14
  • 28
Tarık Akyüz
  • 97
  • 2
  • 10

1 Answers1

1

try this css for .menu

.menu{
    width:100%;
    height:70px;
    background-color: rgba(0,0,0, 0.6); /* provide opacity here */
    /* remove the opacity properties below
    -moz-opacity:.60; 
    filter:alpha(opacity=60);
    opacity:.60; 
    */
}

Full Code -

.menu {
  width: 100%;
  height: 70px;
}
/* applied opacity to nav.menu */
nav.menu {
  background-color: rgba(0, 0, 0, 0.6);
}
ul.menu {
  background-color: rgba(0,0,0,0);
}
.container {
  width: 80%;
  height: 70px;
  margin: 0 auto;
  background-color: rgba(0,0,0,0);
}
#brand {
  width: 25%;
  height: auto;
  position: relative;
  top: 10px;
}
#brand>h1 {
  color: #fff;
  float: left;
  font-family: 'Pacifico', cursive;
  font-size: 28px;
}
#brand>p {
  color: #73797a;
  float: left;
  font-family: 'Open Sans', sans-serif;
  font-size: 13pt;
  margin-left: 20px;
  line-height: 50px;
}
<nav class="menu">
  <div class="container">
    <div id="brand">
      <h1>Brandi</h1>
      <p>| I’am your tag line</p>
    </div>
    <ul class="menu">
      <li>
        <a href="#"></a>
      </li>
      <li>
        <a href="#"></a>
      </li>
      <li>
        <a href="#"></a>
      </li>
      <li>
        <a href="#"></a>
      </li>
      <li>
        <a href="#"></a>
      </li>
    </ul>
  </div>
</nav>
Rohit Kumar
  • 2,048
  • 1
  • 14
  • 28
  • my problem solved but now container have opacity. %80 of menu have double opacity – Tarık Akyüz Sep 03 '15 at 10:32
  • 1
    what do you mean?? I can't understand? your container has 80% opacity?? then what you want?? please describe.. – Rohit Kumar Sep 03 '15 at 10:34
  • perhaps container div also have opacity.I want to give opacity only nav element. – Tarık Akyüz Sep 03 '15 at 10:37
  • you don't want the black background of `container` `div`?? which seems to double opacity of `.menu`??? – Rohit Kumar Sep 03 '15 at 10:38
  • I want to make same color menu and container div.Now container div look like more black than menu – Tarık Akyüz Sep 03 '15 at 10:40
  • @TarıkAkyüz if you want to make some colored menu then add background-color to your `ul.menu` it will work and will not appear black. actually there was a little problem with my code which I have corrected, the problem occured because your nav and ul both have class menu. check my updated code – Rohit Kumar Sep 03 '15 at 10:43
  • what did you mean some colored menu.I want to make same color them(ty for help) – Tarık Akyüz Sep 03 '15 at 10:45
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/88684/discussion-between-rohit-kumar-and-tarik-akyuz). – Rohit Kumar Sep 03 '15 at 10:46