Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Copilot Lvl 2
Message 1 of 3

How To Layer Menu and Images

I actually have a quick question.

My teacher told us that we could do what we want with the tutorials he gave us for creating a website.

This is just a minor thing but an idea to how my menu can go in front of the gif so that it would show it's box shadow?Untitled.png

 HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Speedwagon</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="main-header">
            <ul class="menu">
                <a href=""><li>Home</li></a>
                <a href=""><li>About</li></a>
                <a href=""><li>Photos</li></a>
                <a href=""><li>Downloads</li></a>
            </ul>
        </div>

        <div class="showcase">
        </div>
        
        <div class="main-article">
            <h1>Main Article</h1>
        </div>
        <div class="footer">
            
            <h1>Footer</h1>
        </div>
    </body>
</html>

CSS

/*Default Settings*/
* {
    margin: 0;
    padding: 0;
}
body {
    text-align: center;
    color: white;
    background: black;
    font-family: Brush Script MT;
}
/*Main Header*/
.main-header{
    height: 7vh;
    margin-bottom: 0;
}
/*Menu*/
ul {
  list-style: none;
  margin: 0;
  padding: 0px;
  overflow: hidden;
  background-color: #0d0915;
  box-shadow: 0px 1px 10px 2px black;
}
li {
  float: left;
  margin: 0;
}
a{
  text-decoration: none;
  font-size: 14px;
}
li {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  border-right: 1px solid #bbb;
}
li:hover {
  background-color: #1b286d;
  color: white;
}
/*Showcase*/
.showcase{
    height: 90vh;
    background-image: url(../images/fatestay.gif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
/*Main Article*/
.main-article{
    padding: 400px;
    background: #363636;
    margin-bottom: 10px;
    border: black solid 2px;
}
.main-article:hover{
    background: white;
    color: black;
}
/*Footer*/
.footer{
    padding: 5px;
    background: #464646;
    margin-bottom: 10px;
    border: black solid 2px;
}
.footer:hover{
    background: white;
    color: black;
}

 

 

 

 

2 Replies
Community Manager
Message 2 of 3

Re: How To Layer Menu and Images

Hi @ProjectKaizen,

 

This post was moved to a different board that fits your topic of discussion a bit better. This means you’ll get better engagement on your post, and it keeps our community organized so users can more easily find information.

 

As you’ll notice, your topic is now here in the Programming Help and Discussion. No action is needed on your part; you can continue the conversation as normal here.

 

Cheers!

Mark helpful posts with Accept as Solution to help other users locate important info. Don't forget to give Kudos for great content!

Pilot Lvl 2
Message 3 of 3

Re: How To Layer Menu and Images

How about removing the 'showcase' div and move the background-image attribute to main-header?