hoper
-
Posts
3 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by hoper
-
срезаемый бордюр-картинка вокруг резинового блока без html5
hoper replied to Rossi25's question in HTML Coding
ничего не мешает сменить бордер на картинку <style type="text/css"> body { margin:0; min-width:950px; background:#ccc; } .container { position:relative; width:100%; overflow:hidden; } .holder { position:relative; left:50%; min-width:1030px; } .frame { position:relative; left:-50%; margin:0 20px; padding-left:20px; background:#0f0 url(http://img546.imageshack.us/img546/5531/stripe.gif) repeat-y; } .content { padding:10px 30px 10px 10px; background: url(http://img546.imageshack.us/img546/5531/stripe.gif) repeat-y 100% 0; } </style> -
срезаемый бордюр-картинка вокруг резинового блока без html5
hoper replied to Rossi25's question in HTML Coding
Привет. Если я правильно понял, должно быть как то так: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <style type="text/css"> body { margin:0; min-width:950px; background:#ccc; } .container { position:relative; width:100%; overflow:hidden; } .holder { position:relative; left:50%; min-width:1030px; } .frame { position:relative; left:-50%; margin:0 20px; border-left:20px solid #000; background:#0f0; } .content { padding:10px; border-right:20px solid #00f; } </style> </head> <body> <div class="container"> <div class="holder"> <div class="frame"> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas, est at malesuada semper, erat ipsum iaculis ante, sed sollicitudin arcu tellus non magna. Fusce lectus nisl, rhoncus sit amet mollis sed, lobortis id sem. Morbi quis elit nec purus suscipit mollis in quis arcu. Aenean hendrerit, urna ut adipiscing dapibus, purus dui suscipit ipsum, quis sollicitudin lorem enim nec elit. Vestibulum nec ante at metus egestas tristique et ut metus. Nulla laoreet orci posuere tortor semper condimentum. Aliquam non felis at eros feugiat porta. Nullam rutrum malesuada euismod. Mauris ultrices sodales odio eget ornare. Nunc et sagittis elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec fringilla luctus purus, ut molestie neque cursus vel. Phasellus justo velit, hendrerit vitae molestie vel, feugiat eu purus. Suspendisse elementum vestibulum ullamcorper.</p> </div> </div> </div> </div> </body> </html> -
Привет Это должно помочь, картинку брал с примера http://www.707157.ru/44.jpg. <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <style type="text/css"> body { margin:0; background:#FFC000; min-width:970px; } #wrapper { position:relative; width:100%; overflow:hidden; } #header { width:970px; margin:0 auto; padding:10px 0; background:#FFE680; } .visual { position:relative; width:1222px; left:50%; margin-left:-611px; } #content { width:970px; margin:0 auto; } #footer { width:970px; margin:0 auto; background:#BFF08E; } </style> </head> <body> <div id="wrapper"> <div id="header"> <strong>Header:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor. </div> <div class="visual"><img src="http://www.707157.ru/44.jpg" alt="" /></div> <div id="content"> <strong>Content</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor. </div> <div id="footer"> <strong>Footer:</strong> Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at cursus dolor vestibulum neque enim. Tellus interdum at laoreet laoreet lacinia lacinia sed Quisque justo quis. Hendrerit scelerisque lorem elit orci tempor tincidunt enim Phasellus dignissim tincidunt. Nunc vel et Sed nisl Vestibulum odio montes Aliquam volutpat pellentesque. Ut pede sagittis et quis nunc gravida porttitor ligula. </div> </div> </body> </html>