Image Div Over Button

[darklighte]

I am working on a site for a friend and I and I am wondering how I can place an image like in the image shown below over a button without having to create my own buttons.

Photoshop Example (Everything is already made in html except the silk icons on the buttons)
[img]http://i33.tinypic.com/bi2qgh.jpg[/img]

[andersonmat]

Well, if you do create a div over a button, you'd have to use javascript to make the page go to the location. So, in my opinion, I'd just make a div with the image and the link. :P

[darklighte]

Not sure if this matters or not, but I forgot to mention that there are 16x16 divs on each side that contain the images not one big one across the button.

[andersonmat]

[QUOTE=darklighte;18119792]Not sure if this matters or not, but I forgot to mention that there are 16x16 divs on each side that contain the images not one big one across the button.[/QUOTE]

So then what would you be trying to do? You already have the images there and the link to the pages.

[darklighte]

The image was made in photoshop to show what I was trying to do, I am asking how I can take 16x16 div boxes and make them show ontop of the button without removing button functionality or if it would be easier to make my own buttons with the images on them.

[andersonmat]

[QUOTE=darklighte;18120051]The image was made in photoshop to show what I was trying to do, I am asking how I can take 16x16 div boxes and make them show ontop of the button without removing button functionality or if it would be easier to make my own buttons with the images on them.[/QUOTE]

Yeah, you'd have an easier time just using a custom button.

<button><img src="img/server.png" />Server</button>

Something like that?

[Blynx6]

[QUOTE=andersonmat;18120228]Yeah, you'd have an easier time just using a custom button.

<buttom><img src="img/server.png" />Server</buttom>

Something like that?[/QUOTE]

Buttom? Nice typo.

[darklighte]

Kinda having a few problems with making my own buttons, the spacing gets kinda messed up, the text looks a little fuzzy, and I am not sure I will be able to disable a button like the server button shown.

[img]http://i33.tinypic.com/26458gz.png[/img]

[OutOfPop]

Position the divs with CSS, position: absolute; left: 12; top: 12

[editline]08:05PM[/editline]

Or use a table and set the button as the cell background, then place the images in the cell.

[darklighte]

Thanks for the idea OutOfPop, watching a movie I will try it in a few.

[andersonmat]

[QUOTE=Blynx6;18120290]Buttom? Nice typo.[/QUOTE]

Nice try changing that one there. It's button. Like in my post?

[editline]08:14PM[/editline]

[QUOTE=darklighte;18120925]Thanks for the idea OutOfPop, watching a movie I will try it in a few.[/QUOTE]

That would work assuming they don't click on the image. :v:

[darklighte]

Yea I was thinking about what happens if they click the image.

[Ortzinator]

Are you talking about form buttons?

[darklighte]

Basically it is just a menu to change pages, I am using buttons for simplicity and I like the click effect :P

I got the images to show using OutOfPops method, I am hoping people are smart enough to click the text and not the icons tho

[andersonmat]

[QUOTE=darklighte;18122631]Basically it is just a menu to change pages, I am using buttons for simplicity and I like the click effect :P

I got the images to show using OutOfPops method, I am hoping people are smart enough to click the text and not the icons tho[/QUOTE]

That'd be the only reason to use a <button> and then style it. But, I guess it's up to you.

[Deco Da Man]

Divide each button (with text and icons) into it's own image. [b]Include the background[/b].
Then use set them to margin: 0; and they will fit perfectly into each other.
General HTML code:

<style type="text/css">
	#navigation_panel img {
		margin: 0;
	}
</style>
<div id="navigation_panel">
	<a href="/news.php"><img src="img/news_button.png" /></a>
	<a href="/images.php"><img src="img/images_button.png" /></a>
	... etc ...
</div>

[andersonmat]

[QUOTE=Deco Da Man;18123176]Divide each button (with text and icons) into it's own image. [b]Include the background[/b].
Then use set them to margin: 0; and they will fit perfectly into each other.
General HTML code:

<style type="text/css">
	#navigation_panel img {
		margin: 0;
	}
</style>
<div id="navigation_panel">
	<a href="/news.php"><img src="img/news_button.png" /></a>
	<a href="/images.php"><img src="img/images_button.png" /></a>
	... etc ...
</div>

[/QUOTE]
But that takes the fun out of it. :v:

[M-D]

Why not make the links a block element and set the image as a background image?

[html]<style type="text/css">
#navigation_panel {
width:200px;
}

a.button {
display:block;
padding:4px 4px 4px 24px;
background:transparent none no-repeat scroll 5px center;
}

a.button.news {
background-image:url('img/news_button.png');
}

a.button.news {
background-image:url('img/images_button.png');
}
</style>

<div id="navigation_panel">
<a href="/news.php" class="button news">News</a>
<a href="/images.php" class="button images">Images</a>
</div>[/html]