Search code examples
htmlcssmarkup

How do I move my website logo further up the page

I am very new to HTML and CSS and want to move my logo further up the page instead of it being further down towards the centre.

   <body>
     <img id="derrick-ogole-logo" src="images/derrick-ogole-logo.png" alt="Derrick Ogole Official Logo">
   </body>
</html>


   #derrick-ogole-logo{
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:60%;
    height:60%;
}

How can I move my logo further up so I can add a navigation bar etc.

enter image description here

Solution

  • One of the ways is simply using margin-top: and desired percentage. You can use here pixels if you want. You already positioned it vertically by margin-left and right, you can do the same with top and bottom for horizontal position.

    I recommend you reading this, everything you need is here, start with basic positioning. w3schools.com/w3css Also: Examples and How To. I learned a lot there at start.

       #derrick-ogole-logo{
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-top:20%;
    width:60%;
    height:60%;
}
       <body>
     <img id="derrick-ogole-logo" src="images/derrick-ogole-logo.png" alt="Derrick Ogole Official Logo">
   </body>
</html>