X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Добавить ответ в эту тему
> Выравнивание по центру
Markelok
Markelok
Topic Starter сообщение 24.8.2014, 8:05; Ответить: Markelok
Сообщение #1


Здравствуйте. Помогите выравнить блоки/шторки по центру.

Скриншот:
[IMG]http://s7.hostingkartinok.com/uploads/images/2014/08/300f1703d1c662ed3c0c40c2587d6098.png[/IMG]

Нужно что бы эти блоки были по центру

Вот код:
<!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;
}
.clear {clear:both}
</style>

</head>

<body>


<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 class="clear"></div>



</body>
</html>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
A1ex_hb
A1ex_hb
сообщение 24.8.2014, 10:24; Ответить: A1ex_hb
Сообщение #2


[CSS].eff {
float:center;
}[/CSS]

или
[CSS].eff {
float:center;
margin:8px auto;
}[/CSS]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Markelok
Markelok
Topic Starter сообщение 24.8.2014, 10:31; Ответить: Markelok
Сообщение #3


Получилось так:
[IMG]http://s7.hostingkartinok.com/uploads/images/2014/08/7c3fa3fbf0952f5d43e4662fa7a500e9.png[/IMG]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Ruslaner___
Ruslaner___
сообщение 24.8.2014, 11:16; Ответить: Ruslaner___
Сообщение #4


Заверните все эти блоки в один див и сделайте ему [CSS]width: xxx px;
margin: 0 auto;[/CSS]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Markelok
Markelok
Topic Starter сообщение 24.8.2014, 11:55; Ответить: Markelok
Сообщение #5


Не могли бы написать готовый код? Просто я в HTML новичок.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Dima3456
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>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Добавить ответ в эту тему
Быстрый ответ
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыВыравнивание картинки по центру между текстом
10 NikN 2633 6.1.2021, 23:24
автор: buypushplatform
Открытая тема (нет новых ответов) Выравнивание содержимого footer'a
0 press74 4990 2.7.2019, 18:58
автор: -iiwanc-
Открытая тема (нет новых ответов) Выровнить абсолютный блок по центру НЕИЗВЕСТНОГО размера без js
2 lensoy 5587 27.9.2015, 19:08
автор: -lensoy-
Открытая тема (нет новых ответов) Как вырaвнять таблицу и текст по центру экрана?
3 nhelp 4003 4.6.2014, 15:42
автор: -shmatkobrest-
Открытая тема (нет новых ответов) Выравнивание кода с помощью tabifier
0 Siege 3513 13.12.2013, 22:42
автор: Siege


 



RSS Текстовая версия Сейчас: 29.3.2024, 16:32
Дизайн