CODEWITHSUNDEEP
htmlcss
gwerd
gwerd

Reputation: 155

Move logo to the left a few px

I recently had a problem where my logo would be would be cut off when I tried minimising my browser. That was easily solved by taking away margin-left{negative-value;} Now, my logo is positioned where I would like to move it to the left a few px but obviously don't want to use the above property and value. I tried margin-right which didn't seem to work. I also want to stay way from positioning and just focus on using normal flow. In the picture below you can see the background image of the home navigation link is overlapping with the logo. I just want to move it over to the left a bit Any help appreciated!

https://jsfiddle.net/w95n3x0L/2/

<div id="header">
<p id="logo"><img src="images/logo.png" alt="Bethan Rainforth a comedic dancer">
</p>
</div>

#logo img {
width: 320px;
margin-top: -60px;
}

enter image description here

Upvotes: 3

Views: 38758

Answers (3)

Keammoort
Keammoort

Reputation: 3075

You could always crop source image if that's not a problem. But if you do not want to do this you can set image as background and move it a little bit like this:

<p id="logo"></p>

And apply this CSS:

p#logo {
    height: 154px;
    width: 320px;
    background-image: url('http://i.imgur.com/UwpTOvm.png');
    background-repeat: no-repeat;
    background-position-x: -25px; /*move it to the left*/
    background-size: 100%;
}

Upvotes: 0

5ervant - techintel.github.io
5ervant - techintel.github.io

Reputation: 4469

I just want to move it over to the left a bit but without using a negative value or positioning.

You can't move it to the left without using a negative value as the image has no computed left margin. Just use such margin-left: -50px; if you want to move it over to the left:

#logo > img {
  margin-left: -50px;
}

All i want is to move the logo to the left a few px. so the background image of my home navigation isn't overlapping.

If you want to get rid of a link-overlapping image, then you can set the z-index of your #nav-bar higher than the z-index of your header such like this:

#nav-bar {
  z-index: 1;
}

This way, the #logo will overlap the #nav-bar no more.

Also please change <p id="logo">...</p> to <div id="logo">...</div> as its content doesn't have a paragraph.

Upvotes: 5

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17944

To move the logo some pixels to the left, you should add position: relative to the #header and position the logo absolute like this:

(Please remove the p tag from your logo section like this):

HTML

<div id="header">
    <img id="logo" src="images/logo.png" alt="Bethan Rainforth a comedic dancer">
</div>

CSS

#header{
    position: relative;
}
#logo{
    position: absolute;
    width: 320px;
    height: 100px;
    top: 60px;
    left: -10px;
}

Upvotes: 0

Related Questions