Working on the same site as before, I'm having some issues moving a couple of header images into place using position: relative. I'm trying to move the logo down a bit, and to the right slightly, but it's not moving at all. I'd also like to move the text image to the right of the logo, but since the logo itself isn't moving at all, I'm not sure how to proceed. Code:


<div id="header-top">
    <div id="logo">
        <img src="Header-Logo.png" alt="">

    <div id="handi-gamer">
        <img src="Handigamer-Text.png" alt="Handi-Gamer">


#header-top { width: 60em; height: 5.313em; background: url('Header-Top.jpg'); position: relative; }
#logo img { width: 7.813em; height: 8.688em; top: 3em; left: 3em; }

EDIT: Narrowed it down to the relevant code

  • Isolating relevant code is often helpful for us in trying to help you. Just a tip for the future. Also, live code is easier to work with than a screenshot, if you are able to provide it, since we can play around a little. Ktash about 8 years ago
  • The relevant code is the #header-top div, and the associated elements inside (#logo, #logo img) KevinM1 about 8 years ago

1 answer

This was chosen as the best answer

You'll need to add the css of top and left to the same element that has position:relative on it. So either add position:relative; to your #logo img, or add the directions to #header-top.

Answered about 8 years ago by Artistic Abode