CODEWITHSUNDEEP
htmlcss
Antoine Spiteri
Antoine Spiteri

Reputation: 13

how to add picture on above text

how I put a picture on top the hyperlinks like in the middle and I want to put two text between the picture above the hyperlinks but I try it, but its always going on top the orange bar how I do code this so it goes in front the orange bar? Thanks.

   
        
        #nav {
        width: 110%;
            height: 150px;
          float: left;
        padding: 0px;
        list-style: none;
        background-color: darkorange;
         }
        #nav li {
        float: left; }
           
        #nav li a {
        display: block;
        padding: 55px 55px;
        text-decoration: none; 
        font-weight: bold;
        color: #069;
            margin-right: 284px;
           padding-top: 105px;
            font-size: 25px
         }
        #nav li a: {
        color: blue;
        background-color: darkorange; }
           
    <html>
    <head>
    <title> Malta Youth Group</title>
        </head>

    
    <div>
       <img id = "Logo"src="campfire1.png" alt="campfire logo" height="42" width="42">
        <div>   
            <ul id="nav">
                <li><a href="#">About Us</a></li>
                <li><a href="#">Lastest activties</a></li>
                <li><a href="#">How to join</a></li>
                <li><a href="#">Contact us</a></li>
               
            </ul>
        </div>
    </div>

Upvotes: 0

Views: 272

Answers (1)

undg
undg

Reputation: 825

I'm not sure is this what you want to do, but let's try this:

   #nav {
    width: 110%;
        height: 150px;
      float: left;
    padding: 0px;
    list-style: none;
    background-color: darkorange;
     }
    #nav li {
    float: left; }

    #nav li a {
    display: block;
    padding: 55px 55px;
    text-decoration: none; 
    font-weight: bold;
    color: #069;
        margin-right: 284px;
       padding-top: 105px;
        font-size: 25px
     }
    #nav li a: {
    color: blue;
    background-color: darkorange; 
    }
    img {
      position: absolute;
      top: 75px;
      }
    }
<div>
   <img id ="logo" src="http://via.placeholder.com/150x150" alt="campfire logo" height="42" width="42">
    <div>   
        <ul id="nav">
            <li><a href="#">About Us</a></li>
            <li><a href="#">Lastest activties</a></li>
            <li><a href="#">How to join</a></li>
            <li><a href="#">Contact us</a></li>

        </ul>
    </div>
</div>

Upvotes: 1

Related Questions