k1fazoid
-
Posts
1 -
Joined
-
Last visited
k1fazoid's Achievements
Explorer (1/14)
0
Reputation
-
Прошу помощь, надо, чтобы в тексте были размещены небольшие картинки, которые обтекает текст. При наведении на картинку, она увеличивается до реальных размеров. Собственно сделал всё, чтобы так и было, но между блоком с маленькой картинкой и обтекаемым текстом нет отступов. Текст полностью прилипает к маленькой картинке. Как сделать, чтобы отступы появились. Снизу мой код и стили. <body> <div class="post"> <div class="tema"> <p>Длинный текст</p> <a class="thumbnail" href="#"><img src="1.jpg" width="20%" border="0" align="left"/><span><img src="1.jpg"/></span></a> <p>Длинный текст</p> </div> </div> </body> Стили следующие: .post { position: relative; max-width:804px; margin:20px auto; z-index: 0; } .tema img { max-width: 100%; } .tema>a{ font-size: 1.5em; font-weight: 400; } .tema>p{ font-size: 1em; font-weight: 300; text-align: justify; margin-top: 0.5em; margin-bottom: 1em; } .sidebar { float:left; width:20%; background-color: #D7F404; min-height: 100px; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: #3d3d3d; left: 0px; border: 1px solid white; visibility: hidden; border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: center; left: center; z-index: 200; /*position where enlarged image should offset horizontally */ }