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

Logo and social media icons stuck behind header – Photoshop

I have completed three pages to my website with clean code(checked) however, the most important page, page one is putting through the ringer because I can’t seem to get my logo to stay in the left-hand corner(fixed) and appear in front of my header and my social media icons to appear in front of my header and appear in right-hand corner. My first is the only page where the code is kind of wacky. This is my first site. I have tried using z-index as well as float and display: hidden. Now I am just stuck.HELP! PLEASE! I am just about researched out on this one. z-index sends my header to the back logo to the front. I am so close to finishing. I have been stuck on this for 4 weeks. 

html,
body{
    margin:0px;
    padding: 0px;
    padding-bottom:25px;
    background:url(https://images.unsplash.com/41/NmnKzKIyQsyGIkFjiNsb_20140717_212636-3.jpg?q=80&fm=jpg&s=ce9ba69c9caf7d6483d874466478bc9b) no-repeat
center center fixed;

   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
      color:#ffffff;

    }
  
  
#wrapper {
background: #107CBD;
min-height:%;
position:relative;
width:960px;
margin:0 auto;
margin-bottom:-60px; /* Negitive Height of Footer */
}


#header {
  width: 100%;
background:#107CBD;
padding:19px;
position:absolute;
left:0;
top:0;
background-color: #107CBD;

}

  #header h1{
  font-family:Noto sans, sans serif;
  font-weight: 200;
  color: white;
  font-size: 2em;
  margin-right: %;

  }

#header h2{
  font-family:Courgette,cursive;
  font-weight: 100;
  color: white;
  font-size: 2em;
  margin-right:%;
}

h1+h2{margin-top:-20px;
}
  #body {
padding: 10px;
padding-bottom:60px; /* Height of Footer and some change */
background:#FFF; /* Wrapper BG COLOR */
}
#logo{
  text-indent: -999999{
   z-index:1; 
   
   }

  #social-media-icons{float:right;}
  #social-media-icons ul li{display:inline;}
  #social-media-icon ul li{padding-top: 10px;}
}
#social{
    float: right;
    }
#socail ul{
    margin-top-right: 10px;
    #socail li{
     dispaly.inline;
   }

    .social-sidebar-buttons{
      width:  15px;
      margin-left: 15px;
    }


.wrapper{
  width:960px;
  }
  .icon{
    float:left;
  }

  .text{
    float:left;
    padding-left:25px;
    padding-top:40px;
    font-family: Noto sans,sans serif;
        }
    
    
   .software ul {
     position: relative;
     width:80%;
     padding:1em 1.5em;
     margin: 2em auto;
     color:#fff;
     background:#107CBD;
   overflow: hidden;
   font-family:'Noto Sans', sans-serif;
   }

   .software ul:before{
     content: "";
     position: absolute;
     top:0;
     right: 0;
     border-width: 0 16px 16px 0;
     border-style: solid;
     border-color:  #fff #fff #107CBD #107CBD;
     background: #107CBD;
      -web-kit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0.2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0.0.2);
    /* Firefox 3.0 damage limitation*/
    display: block; width: 0;
    box-shadow: 0 1px 1px rgba(0,0,0,0.3),1px 1px 1px rgba(0,0,0,0.2);
    display: block width 0px;
  }

  .software ul.rounded{
   -moz-border-radius: 5px 0 5px 5px;
    border-radius: 5px 0 5px 5px;
  }

  .software ul.rounded:before{
    border-width:8px;
    border-color: #fff #fff transparent transparent;
    -moz-border-radius: 0 0 0 5px;
    border-radius: 0 0 0 5px;
  }

   .social{
     float:right;
     margin-right:200px;
     margin-top:20px;
  
   }




font-family:'Noto Sans';
}




.content{
    width: 1000%;
  margin: 0 auto;
}

@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  font-family: Raleway, sans-serif;
  line-height: 1;
}
#cssmenu > ul {
  background: #505050;
}
#cssmenu > ul > li {
float:left;
-webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
  left: 36%
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 16px 20px;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  background: #505050;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#cssmenu > ul > li.active > a {
  color: #107CBD;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  color: #107cbd;
  -webkit-transform: rotateX(90deg) translateY(-23px);
  -moz-transform: rotateX(90deg) translateY(-23px);
  transform: rotateX(90deg) translateY(-23px);
  -ms-transform: none;
}
#cssmenu > ul > li > a::before {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: -1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 16px 20px;
  color: #107cbd;
  background: #1d1d1d;
  content: attr(data-title);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -ms-transform: translateY(- -18px);
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before {
  background: #505050;
}
#cssmenu.small-screen {
  width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
  width: 100%;
  text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
  float: none;
  display: block;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
  color: #107cbd;
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
  -ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #505050;
}
#cssmenu.small-screen #menu-button:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 17px;
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  width: 22px;
  height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid #107cbd;
  border-bottom: 2px solid #107cbd;
}
#cssmenu.small-screen #menu-button:before {
  content: "";
  position: absolute;
  right: 20px;
  top: 27px;
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  background: #107cbd;
}


  div nav ul li{
    text-align: left;
    display: inline;
    width: %;
    float:left;
    margin-right: .8em;
    font-family: 'Noto Sans';
  
}

li.changeBackground {
        background-color: #505050;
    }

li.changeBackground:hover {
        background-color: #777777;
      }

li.changeBackground:active {
        background-color: #107CBD;
    }



   .homepage-hero-module {
    border-right: none;
    border-left: none;
    position: relative;
}

p{
   position:relative;
   width: 30%;
   padding:1em 1.5em;
   margin:2em auto;
   color: #fff;
   background:#107CBD;
   overflow: hidden;
   font-family:'Noto Sans';
     }


  p:before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 16px 16px 0;
    border-style: solid;
    border-color: #fff #fff #505050 #505050;
    background: #505050;
    -web-kit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px; rgba(0,0,0.2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px;rgba(0,0,0.2);
      box-shadow:0 1px 1px rgba(0,0,0,0,0.3), -1px 1px 1px  rgba(0,0,0 0.2);
    /* Firefox 3.0 damage limitation*/
    display: block; width: 0;
  }

  p.rounded{
    -moz-border-radius: 5px 0 5px 5px;
    border-radius: 5px 0 5px 5px;
  }

  .p.rounded:before{
    border-width: 9px;
    border-color: #fff #fff transparent transparent;
    -moz-border-radius: 0 0 0 5px;
    border-radius: 0 0 0 5px;
  }
     h3{

     font-family:'Noto-Sans', sans-serif;
}


#footer{
  position: fixed;
  bottom:0px;

}




#footer{

      margin: 1px;
      height:100px;
      width: 100%;
      border-top: 3px solid #107CBD;
      clear: both;
      color: #fff;
      line-height:20px;
      background-color: #505050;
      text-align:center;
      position:fixed;
      font-size:12px;
      bottom:0px;
    
      }




  #footer ul li a{
      text-decoration: none;
    font-family: Noto-sans,sans serif;
     padding:2em 1em;
     color: #fff;
   
  }


   #footer ul li a: hover{
     color: #000;
     background-color:#777777;
   }
!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="path to icon/favicon.ico"/>
<link href='https://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
<title>Dawn's website</title>
</head><
<div id="wrapper">
<header id="logo">
<ahref="index.html"<img src="images/onebugforwebdt.jpg"
alt= "One Bug Design" width="60" height="64">
</header>
</div>
<div class="social">
<ul>
<li><ahref="https://twitter.com/fraggleart/target="_blank"><img src="images/Twitter-2-icon.png"></a></li>
<li><ahref="https://linkedin.com/in/dawncthomas/target="_blank"><img src="images/Linkedin-icon.png"></a></li>
<li><ahref="https://pinterest.com/rasberry14/target="_blank"><img src="images/pinterest-icon.png"></a></li>
</ul>
</div>
<body id="home"
<div id="wrapper">
<header id="logo">
<h1 class="logo">one bug logo</h1>
<div id="header">
<h1 align="center">One Bug Design</h1><h2 align="center">Designed To Create</h2>
<h1 class="closer"></h1>
<h2 class="closer"></h2>

</div>
</div>
<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'>Home</a></li>
   <li><a href='#'>Portfolio</a></li>
   <li><a href='#'>Finds</a></li>
   <li><a href='Contact.html'>Contact</a></li>
</ul>
</div>

    <div id="content"
      </div>
       </nav>
       <main class="content">


           <div class="wrap">
           </div>
           </div>

<p>


  Dawn here, your friendly graphic designer. Do you need someone to make your brand sparkle with desire? Someone to show your logo some love. Do you need someone who truly enjoys the overall creative process and has an eye for great design? Someone who is fluent in the ways of the Adobe CC Master. Someone who will listen and fulfill your visual communication needs. Someone who is determined and who has Ideation? Well click no further! You have arrived at your destination. ........<strong>Welcome!</strong></p>


<section>
<h3>Software skills</h3>
<div class="wrapper">
            <div class="icon"><img alt="Illustrator icon" src=
            "images/Adobe-Ai-icon.png" width="50px">
            <img alt="Indesign icon" src="images/Adobe-Id-icon.png" width="50px">
             <img alt="Photoshop icon" src="images/Adobe-PS-icon.png" width="50px">
            <img alt="Bridge icon" src="images/bridge-icon.png" width="50px">
            <img alt="Camera icon" src="images/Camera-Nikon-Coolpix-L820-02-icon.png" width="50px">
            <img alt="HTML icon" src="images/HTML-5-icon.png" width="50px">
            <img alt="CSS icon" src="images/css-icon.png" width="50px">
            <img alt="Microsoft Office" src="images/Office-icon.png" width="50px"></div>
<div class="text">
        Illustrator |
        Indesign |
        Photoshop |
        Bridge |
        DSLR|
        HTML5 |
        CSS |
        Microsoft Office |
    </div>
    </div>
</section>

<div id="social">
<ul>
<li><ahref="https://twitter.com/fraggleart/target="_blank"><img src="images/Twitter-2-icon.png"></a></li>
<li><ahref="https://linkedin.com/in/dawncthomas/target="_blank"><img src="images/Linkedin-icon.png"></a></li>
<li><ahref="https://pinterest.com/rasberry14/target="_blank"><img src="images/pinterest-icon.png"></a></li>
</ul>
</div>
<div id="footer">
    <div id="nav">
  <nav class="sitemenu">
   <div class="navwrapper">
        <ul>
       <li class="changeBackground"><ahref="index.html">Home</a></li>
       <li class="changeBackground"><ahref="Portfolio.html">Portfolio</a></li>
       <li class="changeBackground"><ahref="Finds.html">Finds</a></li>
       <li class="changeBackground"><ahref="Contact.html">Contact</a></li>
       <li>&copy;2015-2016 One Bug Design All Rights Reserved</li>
      </ul>
  </div>
</nav>
</ul>
<br>
<p class="footer-text">
<div class="social">
   <h3 align="right">Stay connected</h3>
   <a class= "social twitter" ahref="https://twitter.com/fraggleart">img src="images/Twitter-2-icon.png"</a>
   <a class="social pinterest" ahref="https://pinterest.com/rasberry14">img src="images/Pinterest-icon.png"</a>
   <a class="social linkedin"ahref="https://linkedin.com/in/dawncthomas">img src="images/Linkedin-icon.png"</a>
  </div>                                                                           </div>
  </footer>
</body>
</html>
Tags:

2

Answers


  1. 0

    Add these properties to social class like this.

    .social {
    float: right;
    position: relative;
    z-index: 9999;
}
    Login or Signup to reply.
  2. 0

    a very HORRIBLE ERROR that you are committing is declaring .wrapper div

    </head><
<div id="wrapper">

    outside the body tag right after where the <head> tag ends. which shows a very poorly formatted HTML5 markup. I have written a sematically correct html5 markup for you to act as guide along with some css style that shows logo to the left and social links (in my case its just list items, you should change them with image links properly) to the right and also in front of header (the problem you are facing).

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
<!--        <link rel="stylesheet" href="stackof.css">-->
    </head>
    <body>
       <style>
           html, body {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    background:url(https://images.unsplash.com/41/NmnKzKIyQsyGIkFjiNsb_20140717_212636-3.jpg?q=80&fm=jpg&s=ce9ba69c9caf7d6483d874466478bc9b) no-repeat
        center center fixed;
}

.wrapper {
    max-height: 100%;
}

header {
    max-width: 100%;
}
header .left-col {
    max-width: 35%;
    float: left;
    margin-left: 5%;
    margin-top: 5%;
}

.right-col {
    width: 70%;
    float: right;
}

.right-col ul {
    width: 100%;
}

.right-col ul li {
    list-style: none;
    float: left;
    display: block;
    padding-top: 5%;
    margin-left: 5%;
}

.right-col li a {
    text-decoration: none;
    color: aliceblue;
}
        </style>
        <div id="wrapper">
            <header id="logo">
                <div class="left-col">
                    <a href="#">
                        <img src="pro/images/logo.png" alt="">
                    </a>

                </div>
                <div class="right-col social-links">
                    <ul>
                        <li><a href="#">Lorem.</a></li>
                        <li><a href="#">Minus.</a></li>
                        <li><a href="#">Nulla.</a></li>
                        <li><a href="#">Cum.</a></li>
                        <li><a href="#">Ratione!</a></li>
                    </ul>
                </div>
            </header>
            <main>
                <!--write your sections here-->
                <section class="setion-1"></section>
                <section class="section-2"></section>
                <aside></aside>
            </main>
            <footer>
                <!--your footer goes here-->
            </footer>
        </div>
    </body>
</html>

    you should cut/paste the style data into any file you name with .css format i.e. stackof.css in my case to make it look more nice and un-comment the link tag.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search