Image next to Block text - html

Have a look at the menu link "Produkter" on http://marckmann.se/
I would like to add an arrow image in the right side of the drop down menu on some of the items. But since the text is styled into Blocks, it wont allow me.
Is there some way i could fix this?
Thanks :)!

In your CSS, for the #dropdown div a rule, add the flowing:
background: url('http://www.phillipsdepury.com/imgs/nav/arrow_small_left.gif') no-repeat right center;}
padding-right: 20px;
Replace your own arrow image. Also replace the 20px with the (width of your image + 5)px ...

Related

How to make a image inside of a button clickable [duplicate]

I am trying to include an image and some text inside a button element. My code is as follows:
<button class="testButton1"><img src="Car Blue.png" alt="">Car</button>
The CSS is:
.testButton1
{
font-size:100%;
height:10%;
width: 25%
}
.testButton1 img
{
height:80%;
vertical-align:middle;
}
What I would like to do is to position the image to the left edge of the button, and position the text either in the center or to the right. Using &nbsp works, but is perhaps a bit crude. I have tried to surround the image and text with spans or divs and then positioning those, but that seems to mess things up.
What appears to be happening is that anything inside the button tag (unless formatted) is positioned as one unit in the center of a wider button (not noticeable if button width is left to auto adjust as both items are side-by-side.
Any help, as always, is appreciated. Thank you.
Background Image Approach
You can use a background image and have full control over the image positioning.
Working example: http://jsfiddle.net/EFsU8/
BUTTON {
padding: 8px 8px 8px 32px;
font-family: Arial, Verdana;
background: #f0f0f0 url([url or base 64 data]);
background-position: 8px 8px;
background-repeat: no-repeat;
}​
A slightly "prettier" example: http://jsfiddle.net/kLXaj/1/
And another example showing adjustments to the button based on the :hover and :active states.
Child Element Approach
The previous example would work with an INPUT[type="button"] as well as BUTTON. The BUTTON tag is allowed to contain markup and is intended for situations which require greater flexibility. After re-reading the original question, here are several more examples: http://jsfiddle.net/kLXaj/5/
This approach automatically repositions image/text based on the size of the button and provides more control over the internal layout of the button.
Change button display style to inline-block, img float to left. Add margin to img as necessary.
<button style="display:inline-block">
<img src="url" style="float:left;margin-right:0.5em">Caption
</button>
If you want to use image inside the button not in the CSS I think this help you:
http://jsfiddle.net/FaNpG/1/
Adding float left to the image works to an extent. A judicious use of padding and image sizing fixes the issue with having the text stuck to the top of the button. See this jsFiddle.

hover and float element

last week I coding a menu bar for my blog at http://iHMahmoodi.blog.ir
but for social buttons it's going to wrong and I think it's about float element!
I try to fix it with adding some width or more property but it's not work!
you can do it yourself with inspect element on my blog.
look to below image of my blog to know about my problem
http://i.stack.imgur.com/ntjIH.png
another question is near the rss image it's broad a lot of space on the right hand and if move you mouse between phone number and social button, all about rss!!
thanks a lot!
This will make them equal size and it list-image fits right to text
Edit with paddings you get your icons like picture below.
li.fb,
li.fb li {
box-sizing: border-box;
width: 150px;
padding-left: 0px !important;
padding-right: 0px !important;
}

Why anchor tag applies on some area of image?

I am working on a project http://www.node.au.com/ The problem that i am facing is that i have a logo image around which there is an anchor tag, but when i hover over logo it applies only on the area on left side but not on whole image i searched a lot for the solution but no luck can any one send me the solution.
kindly hover mouse on left side of image and see the issue many thanks in advance.
here is the code:
<img style="margin-left:-17px;margin-top:20px;"src="http://www.node.au.com/wp-content/themes/folio-two/images/main-logo.png" alt="NODE – 3D Visualisation">
2 things:
1. add "display:block;" to the tag, this will allow it to be as large as the image within.
2. The (menu) is covering it, making it unclickable. Remove the margin-top: -130px, and you'll be able to click it fine.
I have no idea why there's all that space at the top of that UL, though. It looks like you don't need a UL, in any case, and can just use a div, since there's only one li element within it.
-Julian
use this class on logo image
.logo {
cursor: pointer;
display: block;
margin-left: -17px;
margin-top: 20px;
}

How to move div lowered from edge of page

Here is a jsfiddle http://jsfiddle.net/Jw6kU/2/ of what i have right now. The thing i need to do is drop the white box and the text in that div tag ("left") down so it is center in the green bar at the top (67px tall). How can i easily do this? Sorry this is sloppy, the work was done fast.
This is a second post. The first one i messed up by pasting the wrong link. Sorry.
Using the margin-top css property would give the div space from the top of the page. You'd have to find the right amount of pixels and test it out fully but I think that will help.
I added this to the css of your fiddle and got the white div at the top in the center of the green div under it.
#left {
margin-top: 9px;
padding-top: 12px;
}

padding not shifting my logo

I have a logo link that's using a background-image (css sprite). All works fine, but when I try to add a 20px padding to the top of the link (to give it more space for user to click the link), the background image is not moving down. Here is my css:
a {
background-image:url("sprite.png");
background-repeat:no-repeat;
display:block;
height:70px;
width:70px;
padding-top:20px; /* give top of the link more click space */
}
And my html:
What am I doing wrong?
Edit: I think you guys are missing the original goal. My goal is to give the logo link more clicking space. If I use margin then the element link is pushed down, which does not give more clicking space like I originally wanted.
Padding won't affect the background-image. To affect the hit-area of the link, add padding and then change the background y-offset by the same amount, i.e.:
a
{
padding-top: 10px;
background-position: 0px 10px;
}
Here's a fiddle demonstrating the behavior
Try using the margin property as so
margin-top:20px