0

^title practically

i wanted to put my marquee to go behind my logo on my header. how do i do this?

I have tried lots of stuff, asked my classmates but no one came up with an idea.

so here's my html code

<img class="logo" src="logo.jpeg">
    <marquee>hello world</marquee>

     <ul class="navbar">
        <li><a class="active" href="homepage.html">Home</a></li>
        <li><a href="products.html">Products</a></li>
        <li><a href="history.html">History</a></li> 
        <li><a href="aboutus.html">About Us</a></li>
        <li><a href="contactus.html">Contact Us</a></li>
        <div class="filler">.</div>
    </ul>`

here's my css (used a lot of classes)

.slideshow {
            height: 400px;
            width: 600px; 
            display: block;
            margin: 0 auto;
        }

        .slideshow2 {
            text-align: center;
            background-color: burlywood;
            font-family: sans-serif;
            font-size: 20px;
            color: chocolate;
            margin: 0;
            padding: 0;
        }

        .sd3 {
            text-decoration: underline;
            color: darkgoldenrod;
        }

        .filler {
            color: bisque;
            background-color: bisque;
            font-size: 34px;
            padding-right: 16px;
        }

        .title {
            background-color: burlywood;
            color:#382E1C;
            font-size: 30px;
            font-family: sans-serif;      
        }

        .img1 {
            width: 500px;
            height: 300px;
            margin: 0;
            padding: 0;
        }

        .bg {
            background-color: #BAA378;
            text-align: center;
        }

        .par{
            background-color: #BAA378;
            font-family: sans-serif;
            font-size: 30px;
            color: #453823;
            margin: 0;
            padding: 0;
        }

        .pricedesc {
            background-color: chocolate;
            color:#382E1C;
            font-size: 30px;
            font-family: sans-serif;
            margin: 0;
            padding: 0;
        }

        .logo {
            position: absolute;
            z-index: 10;
            opacity: 0.75;
            width: 225px;
            height: 125px;
            display: block;
            margin: 0 auto; 
        }

         .filler {
            color: bisque;
            background-color: bisque;
            font-size: 34px;
            padding-right: 16px;
        }

        body {
            background-color: cornsilk;
            width:100%;
        }

        .navbar{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        li {
            float: left;
        }

        li a {
            font-size: 20px;
            font-family: sans-serif;
            display: block;
            padding: 8px;
            background-color: bisque;
            color: chocolate;
            text-decoration: none;
            text-align: center;
        }

        li a:hover {
            background-color: burlywood;
        }

        .active {
            background-color:chocolate;
            color: beige;
        }

        h1 {
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
            background-color: coral;
            color:blanchedalmond;
            text-align: center
        }
teendoinghisprojects
  • 1
  • 2
  • 2
    Please add your `code` to your question – Oke Tega Feb 27 '17 at 13:26
  • 2
    `I have tried lots of stuff` - Please post the HTML, Script, CSS, etc.. anything you have tried so we can have a look to see why it doesn't work. See [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) for more info. – Nope Feb 27 '17 at 13:27
  • Can you please put some example code on what you have tried so far? – Serge Inácio Feb 27 '17 at 13:27
  • The `` tag is deprecated and I would consider removing it if possible (https://developer.mozilla.org/en/docs/Web/HTML/Element/marquee) – zik Feb 27 '17 at 13:58
  • @zik what do i use? – teendoinghisprojects Feb 27 '17 at 13:59
  • You'd need to use JavaScript to create something similar. There are a few things that you could do in CSS to accomplish something similar. This has been asked before here; http://stackoverflow.com/questions/31951282/why-is-marquee-deprecated-and-what-is-the-best-alternative – zik Feb 27 '17 at 14:00
  • @zik we aren't allowed to use js because we haven't been taught of it yet – teendoinghisprojects Feb 27 '17 at 14:23
  • @teendoinghisprojects ah ok, my bad. Just something that I thought you should note though seeing as that tag is deprecated. You can achieve what you are asking using just CSS (see my previous comment). – zik Feb 28 '17 at 09:27

1 Answers1

1

You can absolutely position the image, and give it some higher z-index

img {
  position: absolute;
  z-index: 10;
  opacity: 0.75;
}
<img src="https://unsplash.it/200/200">
<marquee>marquee text goes here</marquee>

I've made the image transparent, so you can see the text going under it.

pol
  • 2,641
  • 10
  • 16