CODEWITHSUNDEEP
htmlcss
Jacob Kellum
Jacob Kellum

Reputation: 3

I can't move image to top-left of screen with css

I'm trying to use an image of my logo on the webpage and put it into the top-left of my webpage but it seems to have a space on the top and left side of the image and I want it flush just like dropbox.com does it Here's the html: `

<body>
    <nav>
      <div class="logo">
        <a href="index.html"><img src="img/pd3-1.jpg"></a>
      </div>
    </nav> 
</body>

`

I've tried many things such as remove padding/margin, change position, float, I'm new to coding so I can't seem to fix it or find an answer

enter image description here

Upvotes: 0

Views: 375

Answers (3)

DigitalDesigner
DigitalDesigner

Reputation: 284

using position relative and position absolute may be your answer. we position the container relative, allowing our absolute positioning to be relative to this container. I added a background so you can see the position of the logo better.

nav{width:100%;position:relative;}
.logo{position:absolute;top:0;left:0;width:150px;height:150px;background:#ededed;}
<body>
    <nav>
      <div class="logo">
        <a href="index.html"><img src="img/pd3-1.jpg"></a>
      </div>
    </nav> 
</body>

Also make sure your css is being linked in the head of your index file as without this no styles will pass through to the page.

Final Result After reviewing the issue with Jacob on jsfiddle we established that he was not including the css in the head. Adding the css to the head of the site fixed the issue and the custom styles are now styling the image correctly.

Upvotes: 0

JShobbyist
JShobbyist

Reputation: 600

You should remove the space of the parent elements. Did you remove all of them?

for example:

body, body * {
  margin: 0;
  padding: 0;
}

Upvotes: 0

j08691
j08691

Reputation: 208040

Remove the default margin of the body element:

body {margin:0;}

Upvotes: 1

Related Questions