robert.access Posted October 15, 2009 Share Posted October 15, 2009 Hi! I realy have a problem including a sprite image in my website to minimize the http request. Please help me with the following code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>CSS rounded-corner</title> <style type="text/css"> body { font:normal 76% georgia,helvetica,verdana,tahoma,arial,"sans serif"; } #container { background: url(table.png) no-repeat top left; } .dialog { width:980px; margin:0px auto; min-width:20em; color:#fff; } .dialog .hd .c, .dialog .ft .c { font-size:1px; /* ensure minimum height */ height:13px; } .dialog .ft .c { height:14px; } .dialog .hd { background:transparent no-repeat 0px 0px; } .dialog .hd .c { background:transparent url(tr.gif) no-repeat right 0px; } .dialog .bd { background:transparent url(ml.gif) repeat-y 0px 0px; } .dialog .bd .c { background:transparent url(mr.gif) repeat-y right 0px; } .dialog .bd .c .s { margin:0px 8px 0px 4px; background:#B8E1FF url(ms.jpg) repeat-x 0px 0px; padding:1em; } .dialog .ft { background:transparent url(bl.gif) no-repeat 0px 0px; } .dialog .ft .c { background:transparent url(br.gif) no-repeat right 0px; } /* content-specific */ .dialog h1 { /* header */ font-size:2em; margin:0px; padding:0px; margin-top:-0.6em; } .dialog p { margin:0.5em 0px 0px 0px; padding:0px; font:0.95em/1.5em arial,tahoma,"sans serif"; } </style> </head> <body> <div class="dialog"> <div class="hd" id="container" style="background-position: 0 -163px;"><div id="container" class="c" style="background-position: 0 -177px;"></div></div> <div class="bd" style="background-position: 0 -30px;"> <div class="c"> <div class="s"> <!-- content area --> <h1>xxxxxxx</h1> <!-- content area --> <hr color="#000000" /><br /> yyyyyyyyyyyyyyyy<br /> </div> </div> </div> <div class="ft" id="container" style="background-position: 0 0;"><div class="c"></div></div> </div> <p> </p> </body> </html> the image its I cannot align the corner to right. Please someone help me at least with one cornet (top) to figure out how it's work. and one middle margin to repeat Thank you very much! Quote Link to comment Share on other sites More sharing options...
robert.access Posted October 15, 2009 Author Share Posted October 15, 2009 by the way css rules are: .sprite-bl { background-position: 0 0; } .sprite-br { background-position: 0 -15px; } .sprite-ml { background-position: 0 -30px; } .sprite-mr { background-position: 0 -32px; } .sprite-ms { background-position: 0 -34px; } .sprite-tl { background-position: 0 -163px; } .sprite-tr { background-position: 0 -177px; } So it's possible to align sprite images??? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.