Помощник
|
Выравнивание по центру |
Markelok
|
Сообщение
#1
|
||
|
|
||
|
|||
A1ex_hb |
24.8.2014, 10:24;
Ответить: A1ex_hb
Сообщение
#2
|
|
[CSS].eff {
float:center; }[/CSS] или [CSS].eff { float:center; margin:8px auto; }[/CSS] |
|
|
Markelok
|
Сообщение
#3
|
|
Получилось так:
[IMG]http://s7.hostingkartinok.com/uploads/images/2014/08/7c3fa3fbf0952f5d43e4662fa7a500e9.png[/IMG] |
|
|
Ruslaner___ |
24.8.2014, 11:16;
Ответить: Ruslaner___
Сообщение
#4
|
|
Заверните все эти блоки в один див и сделайте ему [CSS]width: xxx px;
margin: 0 auto;[/CSS] |
|
|
Markelok
|
Сообщение
#5
|
|
Не могли бы написать готовый код? Просто я в HTML новичок.
|
|
|
Dima3456 |
24.8.2014, 15:28;
Ответить: Dima3456
Сообщение
#6
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Красивые шторки</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.eff').hover( function () { value = $(this).find('img').outerHeight() * -1; $(this).find('img').stop().animate({bottom: value} ,{duration:500, easing: 'easeOutBounce'}); }, function () { $(this).find('img').stop().animate({bottom:0} ,{duration:500, easing: 'easeOutBounce'}); }); $('.eff').click(function () { window.location = $(this).find('a:first').attr('href'); }); }); </script> <style> body {font-family:arial;} a {color:yellow;} .eff { width:136px; height:136px; position:relative; overflow:hidden; float:left; display:inline; margin:8px; font-size:12px; } .eff img { display:block; width:126px; height:126px; text-decoration:none; border:4px solid #ccc; background:#ddd; position:absolute; z-index:500; cursor:pointer; cursor:hand; } .eff .caption { width:126px; height:126px; background:#333; border:4px solid #ccc; color:#eee; position:absolute; top:0; left:0; z-index:0; } .eff .caption a.header { margin:10px 5px 5px 5px; display:block; font-size:14px; font-weight:700; color:#4ed7f4; } .eff .caption p { margin:5px; } #images { display: table; margin: 0 auto; } .clear {clear:both} </style> </head> <body> <div id="images"> <div class="eff"> <img src="1.gif" alt="Тест 1" title="" width="126" height="126" /> <div class="caption"> <a href="#" class="header">Заголовок 1</a> <p>Тут может быть помещен любой поясняющий текст. <a href="#">Cсылка</a></p> </div> </div> <div class="eff"> <img src="2.gif" alt="Тест 1" title="" width="126" height="126" /> <div class="caption"><a href="#" class="header">Заголовок 2</a> <p>Тут может быть помещен любой поясняющий текст.</p> </div> </div> <div class="eff"> <img src="3.gif" alt="Тест 1" title="" width="126" height="126" /> <div class="caption"> <a href="#" class="header">Заголовок 3</a> <p>Тут может быть помещен любой поясняющий текст.</p> </div> </div> </div> <div class="clear"></div> </body> </html> |
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Выравнивание картинки по центру между текстом | 10 | NikN | 2637 | 6.1.2021, 23:24 автор: buypushplatform |
|
Выравнивание содержимого footer'a | 0 | press74 | 4997 | 2.7.2019, 18:58 автор: -iiwanc- |
|
Выровнить абсолютный блок по центру НЕИЗВЕСТНОГО размера без js | 2 | lensoy | 5591 | 27.9.2015, 19:08 автор: -lensoy- |
|
Как вырaвнять таблицу и текст по центру экрана? | 3 | nhelp | 4005 | 4.6.2014, 15:42 автор: -shmatkobrest- |
|
Выравнивание кода с помощью tabifier | 0 | Siege | 3515 | 13.12.2013, 22:42 автор: Siege |
Текстовая версия | Сейчас: 19.4.2024, 23:52 |