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! Link to comment https://forums.phpfreaks.com/topic/177791-css-sprite-image-help/ 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??? Link to comment https://forums.phpfreaks.com/topic/177791-css-sprite-image-help/#findComment-937472 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.