Welcome to WebmasterWorld Guest from 54.144.243.34

Forum Moderators: not2easy

How to place an image in a button created by 3 images

   
5:47 pm on Jun 1, 2011 (gmt 0)



Hi I would like to get a button with 4 images.
Here is my html code

<div id="Dashboard">

<div id="widget">
<c>Application Connections</c>
<em></em><span>300</span><b></b>
</div >
<div id="widget">
<c>Active Voice Calls</c>
<em></em><span>400</span><b></b>
</div>

<div id="widget">
<c>Application Message Conversations</c>
<em></em><span>500</span><b></b>
</div>

</div>


My CSS is

#Dashboard {
background-color: #FFFFFF;
margin-top: 0px;
width: 700px;
margin-left: 0px;
margin-right: 0px;
border:1px solid;

}



#Dashboard #widget{
margin-top: 30px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;

}
#Dashboard #widget c{
float: left;
background:url(images/dashboard/widget-titlebar.png) repeat-x top;
width:200px;
height:22px;
}

#Dashboard #widget em{
float: left;
margin-top:22px;
background:url(images/dashboard/widget-left.png) no-repeat;
width:8px;
height:93px;
}

#Dashboard #widget span{
float: left;
margin-top:22px;
background:url(images/dashboard/widget-content.png) repeat-x;
height:93px;
width: 200px;
}
#Dashboard #widget b{

float: left;
margin-top:22px;
background:url(images/dashboard/widget-right.png) no-repeat;
width:8px;
height:93px;
}


Also i would like to get a space between each widget. Please help me to resolve this. Thanks in advance.

Ameena
12:11 pm on Jun 3, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi Ameena, and welcome to WebmasterWorld :)

What you want can be done, but remember css styles html - so the html has to be correct or the css can't be applied. HTML doesn't have an element called <c>, so that needs to be changed. However, even after doing that I still could not quite understand the desired layout. Can you provide a bit more information?
4:53 pm on Jun 3, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



<aside>Well, technically you could use a custom DTD with XHTML and define "c" but it's not likely that's happening . . . </aside>

Also note you have three elements with the id "widget." ID's need to be unique within the context of each document. Either change those to classes or assign them each a unique id.
7:22 pm on Jun 22, 2011 (gmt 0)



Thank u all..i got it resolved..
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month