Reputation: 3
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
Upvotes: 0
Views: 375
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
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