CODEWITHSUNDEEP
htmlcssblogger
Iram
Iram

Reputation: 27

How To Move A DIV Element A Little Towards The Top

I have an issue with the home-link image that I've coded for my hovering navigation bar. The URL to my blog is as follows : http://www.blankesque.com. I would ideally like the image to appear in-line with the tabs text that is beside it however no matter what I do I cant seem to move the "home" icon slightly up. I have tried to play about with padding and margin values but to no avail. I only need to move the image approximately 15px towards the top but I cant figure out how to go about it. I have included the html and css coding below :

#wctopdropcont { 
width:100%;
height:45px;
display:block;
padding: 5.5px 0 0 0;
z-index:100;
top:-2px;
left: 0px;
position:fixed;

background:#f8f8f8;
opacity: 0.9;
filter: alpha(opacity=90);
 }
</style>

<div id='wctopdropcont'>

<ul>
<li><a href='http://www.blankesque.com'><img alt='Home' height='30px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/520FDB25-EAD9-4BB0-B621-B1BFE3B558A9_zpsua6eoor2.gif' width='30px'/></a></li> 
</ul></div>

Upvotes: 1

Views: 4464

Answers (4)

Sando K
Sando K

Reputation: 139

Don't use any margins and stuff.

The problem is you have padding on your img.

set padding: 0; only to on the first li and it will be fine..

enter image description here

#wctopdropnav li:first-child { padding: 0; }

Upvotes: 1

Mi-Creativity
Mi-Creativity

Reputation: 9654

Most of the problem is because of #wctopdropnav li has this:

padding:10px 6.5px 6.5px 6.5px

padding adds width and height to the original element width and height, that didn't cause a problem in text links because it doesn't have that much, but with the image it became a problem

remove padding li items, and give #wctopdropnav li a

line-height:35px;

problem fixed!

enter image description here

Upvotes: 0

Faraz Sh.
Faraz Sh.

Reputation: 377

That happens because of the native ul and li margin/padding. You can use negative top margin specifically for the img.

#wctopdropnav ul li a img {margin-top:-13px;}

If you are going to have more imgs in the top nav, you can add a class/id to the home-icon image and add the CSS specifically to that class.

Upvotes: 1

Stijn Hooft
Stijn Hooft

Reputation: 300

A quick hack could be this:

add to your home-icon the following property:

margin: -10px;

However, to keep your css more maintainable, I would recommend finding the reason why the image is not aligned properly. To do this, you could use browser tools like the Chrome Developer Tools or Firebug.

When you inspect your home button, you'll see that

  • a padding of 5 px is added because you define it in #wctopdropnav li a, #wctopdropnav li a:link
  • a padding you've defined in #wctopdropnav li

To properly fix this issue, rethink about the way you'll style the menu, so that your text links have some padding, but the image doesn't.

Upvotes: 0

Related Questions