Anonymiter
12-21-2009, 01:20 PM
This might not be the "best" way to design these but I've made some buttons and used some CSS I found a while back to make them work. I used tables before but I'm trying to redesign it without tables. The problem is when I place the button between two images it always forces a line break.
<style type="text/css">
#logo a {
display:block;
width:180px;
height:120px;
color:#999999;
background: url("Logo.jpg") 0 0 no-repeat;
}
#logo a:hover {
background-position: -180px 0;
}
#logo a:active {
background-position: -360px 0;
}
</style>
<body>
<div>
<img src="1.jpg">
<span id="logo">
<a href="logo.html"></a>
</span>
<img src="2.jpg">
</div>
</body>
I've used <span> instead of <div> but it still forces a line break. I think its because of the "display:block;" but if I change it to inline like I've read I should it doesn't display the image. What's causing the line break and what can I change to make it work?
<style type="text/css">
#logo a {
display:block;
width:180px;
height:120px;
color:#999999;
background: url("Logo.jpg") 0 0 no-repeat;
}
#logo a:hover {
background-position: -180px 0;
}
#logo a:active {
background-position: -360px 0;
}
</style>
<body>
<div>
<img src="1.jpg">
<span id="logo">
<a href="logo.html"></a>
</span>
<img src="2.jpg">
</div>
</body>
I've used <span> instead of <div> but it still forces a line break. I think its because of the "display:block;" but if I change it to inline like I've read I should it doesn't display the image. What's causing the line break and what can I change to make it work?