Photoshop Question posted in
The official user guide can be found here.

How to have header on top of the slider – Photoshop

This is the current state:

'asd'

and I want it like this:

'asd'
I have done editing through photoshop to show my desired output. I have tried many things but i’m not successful.

This is the HTML: 

<body>
<header>
  <h1>Maxtergo - Guaranteed Perfect Product</h1>
  <nav class='main-menu'>
    <ul>
      <li>
        <a class='active' href='#'>Home</a>
      </li>
      <li>
        <a href='#'>Portfolio</a>
      </li>
      <li>
        <a href='#'>Services</a>
      </li>
      <li>
        <a href='#'>Feature</a>
      </li>
      <li>
        <a href='#'>Contact</a>
      </li>
      <li>
        <a href='#'>Help</a>
      </li>
    </ul>
  </nav>
</header>
<div id='slider'>
  <div id='bannerscollection_zoominout_opportune'>
    <div class='myloader'></div>
    <!-- CONTENT -->
      <ul class="bannerscollection_zoominout_list">

          <li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText2" ><img src="images/02_opportune.jpg" alt="" width="2500" height="1172" /></li>


          <li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText3" ><img src="images/03_opportune.jpg" alt="" width="2500" height="1172" /></li>


          <li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText4" ><img src="images/04_opportune.jpg" alt="" width="2500" height="1172" /></li>

          <li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText5" ><img src="images/05_opportune.jpg" alt="" width="2500" height="1172" /></li>

And no css is on the slider.
and this is header CSS: 

header {
  overflow: hidden;
  padding: 25px 0px;
  width: 960px;
  margin: 0 auto; }
Tags:

2

Answers


  1. 0

    To make sure your header is shown above add z-index

    header {
    z-index: 99999;
    overflow: hidden;
    padding: 25px 0px;
    width: 960px;
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
}
    Login or Signup to reply.
  2. 0

    Firstly wrap up your both of your <header> and “slider” inside a
    wrapper. Make sure that you have to provide it position “relative”.
    After that you have to go for making <header> as position absolute and
    provide height and width as per your requirements. Then you must have to
    add z-index to <header>. your <header> styles we will code here’ll
    look like this:

    header {
   position:absolute;
   top:0;
   bottom:auto;
   left:0;
   right:0;
   margin:auto;
   width:100%;
   height:auto;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search