homepage Welcome to WebmasterWorld Guest from 54.167.138.53
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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



 
Msg#: 4320650 posted 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

 

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4320650 posted 12:11 pm on Jun 3, 2011 (gmt 0)

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?

rocknbil

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



 
Msg#: 4320650 posted 4:53 pm on Jun 3, 2011 (gmt 0)

<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.

Ameena



 
Msg#: 4320650 posted 7:22 pm on Jun 22, 2011 (gmt 0)

Thank u all..i got it resolved..

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved