CSS / Markup help.

[numnutz]

Hello,

I'm trying a button style div that has text and an icon, I've tried illustrating it here:

I've currently done this version by setting the icon to be the background image:

However, I'd like to use a gradiented background, so I can't really use an Icon as a background image.

So can you help? Markup examples would be good

 

[Mickey]

You should keep what you've done but just use an image with a transparent background.

 

[Tripnologist]

If it's a button, just add a span.

<a href="#" class="button"><span>Link</span></a>

Apply your gradient background to the a and the icon to your span. Obviously you'll need to add the necessary css to position it though.

 

[numnutz]

If it's a button, just add a span.

<a href="#" class="button"><span>Link</span></a>

Apply your gradient background to the a and the icon to your span. Obviously you'll need to add the necessary css to position it though.

Any pointers here? I've tried using.

position:relative; top:50%; margin-top - 16px;

 

[numnutz]

When I stopped being an idiot....

<div style="position:relative;">
<img src="double_carat_east.png" style="height:auto;top:50%;margin-top:-16px;position:absolute;"/>
<a href="#" style="font-size:32px;">Testing 12345676</a>
</div>

 

[Tripnologist]

You already have it working, but what I would have done is...

<a href="#" class="button"><span>Link</span></a>

a.button { background: url('gradient.png') repeat-x; padding-left: 5px; /* padding left is distance between side and icon */ height: *; width:*; /* height and width should be obvious, set as needed */} 
a.button span { display: block; background: url('icon.png') no-repeat center left; padding-left: 10px; /* padding left is distance between icon and text */}

The reason I would do it this way is that you can now have mouseovers on both the gradient and the icon by using:
a.button:hover and a.button:hover span

 

[numnutz]

You already have it working, but what I would have done is...

<a href="#" class="button"><span>Link</span></a>

a.button { background: url('gradient.png') repeat-x; padding-left: 5px; /* padding left is distance between side and icon */ height: *; width:*; /* height and width should be obvious, set as needed */} 
a.button span { display: block; background: url('icon.png') no-repeat center left; padding-left: 10px; /* padding left is distance between icon and text */}

The reason I would do it this way is that you can now have mouseovers on both the gradient and the icon by using:
a.button:hover and a.button:hover span

Thanks, that solution works too. However, if the button becomes multiline, i.e the window becomes to small, the icon still stays top left. Anyway to fix this? My Buttons use whatever width's available to them, this isn't fixed.