Position Image in line with text? - html

Question

I am trying to get an image to sit directly next, to the left of a navigation bar item on bootstrap, I have almost got it, infact it works perfectly with small images, but as soon as I create a bigger image it messes up.
I have tried making the right of the image really small like 20px, but it makes no difference.
I haven't tried changing the width because I need the width to stay the same. I am not changing the height with size but with clipping, see the css below for more information on how I am doing it.
Unfortinately I can't place the image because stackoverflow says the format is not allowed, but here is the preview of how it looks:
http://image.prntscr.com/image/2445963b2dda43399a32c152675ceaa3.png
CSS:
#clip {
position: absolute;
clip: rect(0, 100px, 70px, 0);
/* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
}
HTML:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle profile-image" data-toggle="dropdown">
<img id="clip" src="https://www.habbo.com.br/habbo-imaging/avatarimage?hb=img&figure=hr-828-52.hd-180-1.lg-280-1422.ch-3032-66-1408&action=wav&direction=2&head_direction=3&gesture=sml&size=m" />
Adam Sandler <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><i class="fa fa-cog"></i> Account</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out"></i> Sign-out</li>
</ul>
</li>
</ul>
I also use bootstraps css, but I wont paste all that here.
I have put all the code together on jsfiddle:
http://jsfiddle.net/ovjfeukc

Answer 1

I am not sure if the below is what you desire, but you can change the position: absolute; to display: inline-block;
#clip {
display: inline-block;
clip: rect(0, 100px, 70px, 0);
/* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle profile-image" data-toggle="dropdown">
<img id="clip" src="https://www.habbo.com.br/habbo-imaging/avatarimage?hb=img&figure=hr-828-52.hd-180-1.lg-280-1422.ch-3032-66-1408&action=wav&direction=2&head_direction=3&gesture=sml&size=m" /> Adam Sandler <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><i class="fa fa-cog"></i> Account</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out"></i> Sign-out</li>
</ul>
</li>
</ul>
Hope it helps

Answer 2

You also have padding from the .profile-image link tag that's causing the placement issue. You don't need absolute positioning on the image either. I just shrunk it with the height attribute, but you can fiddle around with that. Try these classes:
.profile-image {padding-top:0 !important; padding-bottom:0 !important;}
#clip {height:50px;}
http://jsfiddle.net/7845apm9/