Home/ Questions/Q 9186735
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T19:36:15+00:00

I’m making a single page website. For the lower pages, I have images as

  • 0

I’m making a single page website. For the “lower” pages, I have images as my headers. I’m able to centre the image using

img
{
display:block
margin-left:auto
margin-right:auto
width:400px
}

However, I require it to be a little bit lower. I tried adding a margin-top, but it seems to add a margin to the entire page (the page becomes longer?). The position of the image on my page, however, does not change. Any idea what’s wrong?

This is some of the HTML:

<body>
    <div id="nav">
         <ul>
             <li><a class="scroll" href="#about">ABOUT</a></li>
             <li><a class="scroll" href="#portfolio">WORK</a></li>
             <li><a class="scroll" href="#contact">CONTACT</a></li>
         </ul>
    </div>

    <!-- Landing Page-->
    <div id="landing">
        <img src="front.png" alt="Cover Page">
    </div>
    <!-- About -->
    <div id="page1">
      <a id="about"></a>
        <img src="Who.png" alt="About Me">
        <p>
            That sweet tailpipe of yours did have me charmed. It put a spell on me, but all the ass magic in Mexico can’t change Kenny Powers from his core beliefs. I’m not an ass man... I’m a tit man. I like big ass boobs — now, and forever... I’m not like a black guy, Vida...
        </p>
    </div>

    <!-- Work -->
    <div id="page2">
      <a id="portfolio"></a>
        <div id="container">
            <a class="fancybox" href="portfolio1.jpg" title="'Consumed' </br>Digital/Print Work"><img src="portfolio1s.png"/></a>
        </div>

    </div>

    <!-- Contact -->
    <div id="page3">
      <a id="contact"></a>
        <img src="Contact.png" alt="Contact Information">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
</body>

The header i’m talking about is the header for the lower pages, not the first element. So I’m not sure why the whole page is moving down.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    See if relative positioning works for you:

    position: relative;
top: 10px;
    • 0