[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: как поставить картинку по центру блока
Форум PHP программистов > Дизайн и верстка
bodja
13.05.2012 - 13:58
Вот такая задачка.
Нужно расположить гиф картинку loader всегда по центру блока и поверх текста,
так как для текста будет применятся прозрачность,поэтому внутри блока текста
img не должно быть.
Блок естественно может менятся как по ширине так и по высоте,применятся к нему отступы.
Картинка должна быть в центре content.

Вот чо накидал.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title></title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<style>
	#content {
		background:#ff8;
		padding:30px;
		display:block
		height:auto;
		width:200px;
	}
	#txt {
		height:auto;
		width:auto;
		opacity:0.2;
	}
		#content img {
		position:absolute;
	}
	</style>
</head>

<body>
<div id="content" >
<div id="txt">
<br>text
<br>text
<br>text
<br>text
</div>
<img src="./loading1.gif">
</div>
</body>
</html>

раньше имел дело с абсолютным позиционированием ,но тут резина должна мешатся с абсолютным и короче я застрял,можно решать с помощью JS.
СПАСИТЕ-ПОМОГИТЕ!!! :D :D :D



Спустя 47 минут, 50 секунд (13.05.2012 - 14:46) redreem написал(а):
букваль пару дней назад был топик о том же самом. посмотир в моих месагах например - я там отписывал вариант.

Спустя 1 час, 47 минут, 6 секунд (13.05.2012 - 16:33) bodja написал(а):
redreem
Вся хитрость в том ,что нужно картинку loader поставить поверх див блока,что бы для нее не применялась полупрозрачность.
Здесь понятнее задача.

Спустя 6 минут, 21 секунда (13.05.2012 - 16:40) redreem написал(а):
почему не можешь сделать рассчет позиции на JS абсолютного дива? резина-не резина - суть не меняется же. всегда можно взять offsetWidth и offsetHeight и они будут в пикселах.

Спустя 18 минут, 57 секунд (13.05.2012 - 16:59) bodja написал(а):
картинку сносит в полностью абсолютное позиционирование.
Воть.

function imageLoad(id) {
	var e = document.getElementById(id);
	var html = document.createElement('div');
	var img = document.createElement('img');
	img.src = './loading1.gif';
	img.style.position = 'absolute';
	html.style.opacity = 0.2;
	html.innerHTML = e.innerHTML;
	e.innerHTML = '';
	e.appendChild(img);
	e.appendChild(html);
	var h = (e.clientHeight || e.scrollHeight || e.offsetHeight);
	var w = (e.clientWidth || e.scrollWidth || e.offsetWidth);
	img.style.top = (h / 2 - 10) + 'px';
	img.style.left = (w / 2 - 10) + 'px';
}
imageLoad('content');


Результ здесь
Чую ,гдето близко,но не могу за хвост поймать. :D

Спустя 6 минут, 58 секунд (13.05.2012 - 17:06) redreem написал(а):
значит для внешнего блока надо указать какой-то position.
при position:absolute для картинки ее расчет производится от родителя, у которого выставлен position. если не выставлен - то блок выпадает из потока и ищется следующий родитель.

Спустя 15 минут, 49 секунд (13.05.2012 - 17:21) bodja написал(а):
Спасибо redreem ,помогло.
Вставил еще один див и выставил ему позитион.
все поехало biggrin.gif
В блок #content не указвал позитион,так как заранее неизвестно какой он будет и будет ли вообще.
Респект.

Спустя 11 минут, 28 секунд (13.05.2012 - 17:33) killer8080 написал(а):
bodja
а такой вариант не подходит?
<div style="position: absolute; top: 400px; width: 100%; text-align: center;">
<img src="http://ca.php.net/images/php.gif"/>
</div>

Спустя 12 минут, 52 секунды (13.05.2012 - 17:46) killer8080 написал(а):
Хотя правильней здесь будет relative, а не absolute

Спустя 41 секунда (13.05.2012 - 17:46) bodja написал(а):
killer8080
Не подойдет ,по высоте картинка тоже должна ставать по центру к любому блоку на сверстаном шаблоне,здесь уйдет просто вниз на 400px.
Если relative то top не сработает.

Спустя 4 минуты, 46 секунд (13.05.2012 - 17:51) killer8080 написал(а):
Цитата (bodja @ 13.05.2012 - 16:46)
здесь уйдет просто вниз на 400px.

это я условно поставил
Цитата (bodja @ 13.05.2012 - 16:46)
Если relative то top не сработает.

как раз top будет работать как надо, относительно контентного блока, а не окна, как в абсолюте.

Спустя 15 минут, 18 секунд (13.05.2012 - 18:06) killer8080 написал(а):
вот накидал вариант
Свернутый текст
<div style="border:1px solid red; padding: 10px; position: relative;">
<div style="position: absolute; width: 100%; top: 25px; text-align: center; z-index: 100;
border:1px solid green">
<img src="http://ca.php.net/images/php.gif"/>
</div>
<div style="border:1px solid blue;">
Третий пост про Debian. Наверное, самый важный и объемный. Здесь постараюсь повторить последовательность действий по обустройству интернет-шлюза под управлением Debian 5.0.2 Lenny для нужд небольшой офисной сети. 
 Уже можно прочитать:
 1. Зачем оно нам нужно?
 2. Как установить?
 В третьей части пропустим лирику и перейдем к делу =)

Примечание 1. Все нижеследующее явилось результатом нескольких дней поиска в Сети, поэтому на авторство отдельных инструкций не претендую.

 После установки заходим в систему под root. Сразу же установим sudo и pppoeconf:
Третий пост про Debian. Наверное, самый важный и объемный. Здесь постараюсь повторить последовательность действий по обустройству интернет-шлюза под управлением Debian 5.0.2 Lenny для нужд небольшой офисной сети. 
 Уже можно прочитать:
 1. Зачем оно нам нужно?
 2. Как установить?
 В третьей части пропустим лирику и перейдем к делу =)

Примечание 1. Все нижеследующее явилось результатом нескольких дней поиска в Сети, поэтому на авторство отдельных инструкций не претендую.

 После установки заходим в систему под root. Сразу же установим sudo и pppoeconf:
Третий пост про Debian. Наверное, самый важный и объемный. Здесь постараюсь повторить последовательность действий по обустройству интернет-шлюза под управлением Debian 5.0.2 Lenny для нужд небольшой офисной сети. 
 Уже можно прочитать:
 1. Зачем оно нам нужно?
 2. Как установить?
 В третьей части пропустим лирику и перейдем к делу =)

Примечание 1. Все нижеследующее явилось результатом нескольких дней поиска в Сети, поэтому на авторство отдельных инструкций не претендую.

 После установки заходим в систему под root. Сразу же установим sudo и pppoeconf:
</div>

</div>

Спустя 10 минут, 48 секунд (13.05.2012 - 18:17) bodja написал(а):
Ну почти по центру.
Здесь

У меня тоже вариант вышел не идеал.Тоесть картинка становится точно по центру самого контента,а не по центру самого родительского блока если применить для него неравномерный паддинг.
Пока курю как вычислить паддинг для блока.

Спустя 11 минут, 6 секунд (13.05.2012 - 18:28) killer8080 написал(а):
Цитата (bodja @ 13.05.2012 - 17:17)
Пока курю как вычислить паддинг для блока.

Так паддинг же статичный, можно просто скомпенсировать отрицательным margin-left для картинки, не?

Спустя 20 минут, 17 секунд (13.05.2012 - 18:49) bodja написал(а):
killer8080
Это будет функция которая будет вставлять картинку в любой блок,
мне неизвестно какой будет паддинг,высота ,размеры и т.д. родительского блока.
Я не могу даже присвоить position:relative ему ,так как это может поламать верстку,
нужно вставлять еще блок и от туда плясать.
Я пока думаю ,что стоит вычислять координаты родительского блока и блока с текстом,
потом их размеры и на основе этого вычислять сдвиг относительно друг друга,ну и компенсировать.

Спустя 8 минут, 3 секунды (13.05.2012 - 18:57) killer8080 написал(а):
bodja
ну тогда придется только средствами JS вычислять координаты и размеры блока, изадавать относительно них top left картинки.
function getElementPosition(elemId){
    var elem = document.getElementById(elemId);
	
    var w = elem.offsetWidth;
    var h = elem.offsetHeight;
	
    var l = 0;
    var t = 0;
	
    while (elem){
        l += elem.offsetLeft;
        t += elem.offsetTop;
        elem = elem.offsetParent;
    }

    return {"left":l, "top":t, "width": w, "height":h};
}

Спустя 8 часов, 4 минуты, 26 секунд (14.05.2012 - 03:01) sebastjan написал(а):
Оптимальное решение.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
 * {margin: 0;padding: 0; font: 12px Tahoma, Arial, sans-serif;}
html, body {height: 100%;}
.parent {
          width:  70%;
          height: 70%;
          margin: 0 auto;
          text-align: center;
          border: red 1px dotted;
                }
.child,.helper { 
            display: -moz-inline-block;
            display: inline-block;
            vertical-align: middle;
                }
                
.child {width: 50%;}
                
.helper {width: 0;height: 100%;}
</style>
<!--[if lte IE 7]>
    <style type="text/css">
    .child,
    .helper {
              zoom: 1;
              display: inline;
            }
    </style>
<![endif]-->
</head>
<body>
      <div class="parent">
                <div class="child">
<img src="kar.jpg">
                </div>
                <div class="helper"></div>
        </div>
        
</body>
</html>

Спустя 8 часов, 15 минут, 1 секунда (14.05.2012 - 11:16) bodja написал(а):
sebastjan
немного не идет. biggrin.gif


Свернутый текст
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {margin: 0;padding: 0; font: 12px Tahoma, Arial, sans-serif;}
html, body {height: 100%;}
.parent {
width: 70px;
height: 70px;
margin: 0 auto;
text-align: center;
border: red 1px dotted;
margin:100px 50px;
padding:20px 5px 70px 30px;
}
.child,.helper {
display: -moz-inline-block;
display: inline-block;
vertical-align: middle;
}

.child {width: 50%;}

.helper {width: 0;height: 100%;}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.child,
.helper {
zoom: 1;
display: inline;
}
</style>
<![endif]-->
</head>
<body>
<div class="parent">
<div class="child">
<img src="loading1.gif">
</div>
<div class="helper"> texrtr<br>
texrtr<br>
texrtr<br></div>
</div>

</body>
</html>


В целом я уже сделал ,вместе с костылями для ИЕ.
Спасибо.

Спустя 3 часа, 9 минут, 35 секунд (14.05.2012 - 14:26) sebastjan написал(а):
Цитата (bodja @ 14.05.2012 - 07:16)
sebastjan
немного не идет. biggrin.gif

В целом я уже сделал ,вместе с костылями для ИЕ.
Спасибо.

А что не идёт?

Вставляю картинку, она всегда по центру.Проверил в ИЕ пашет ,лисе и опере с сафари тоже.
Костыли для ИЕ в виде отдельного стиля это уже как закон. smile.gif
А, кажется понял тебе надо под всё это текст подложить.
Тогда наверное надо текст в отдельный слой заворачивать и под слой с картинкой.


Спустя 1 час, 21 минута, 39 секунд (14.05.2012 - 15:47) bodja написал(а):
sebastjan
Вот здесь что у меня вышло.Кликаем по блоку.

Стает по центру контента в блоке.
Удалось сделать ,что бы ставал по центру самого блока ,но при испытаниях,мне отрицательные маргины соседних блоков весь кайф испортили biggrin.gif


Спустя 5 часов, 33 минуты, 33 секунды (14.05.2012 - 21:21) sebastjan написал(а):
На явскрипт красиво затухание.
Надо подумать будет про позиционирование минимальными хтмл , приболел, башка не варит.
Условия я так понимаю такие.
1- блок -произвольная величина+ширина с контентом,кликабельный
2- поверх гиб анимашка картика по центу всегда.

Спустя 40 минут, 13 секунд (14.05.2012 - 22:01) sebastjan написал(а):
Вот накидал простенький способ.
Смысл был таков.
Блок произвольный в процентах.
Внутри блок с текстом спан, в релативе.
Внутри самого спана с тектом картинка в обсалюте с смещением по высоте и горизонтали на 50% и задано свойство отрицательный маргин к ней же на половину ширины и высоты самой картинки чтоб компенсировать 50% на половину картинки.
В общем покопай, думаю нормально.
Там много лишнего, порядок надо навести.
НО сама идея со смещением на 50% и компенсации на половину размера самой картинки достаточно функциональна.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title>
<style>
html,body{
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
}
.col{
	height: 100%;
	width: 200px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 100px;
	background-color: #0099FF;
}
.blok{
	width: 70%;
	background-color: #CC66FF;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	position: relative;
	display: block;
}
.kar{
	position: absolute;
	height: 44px;
	width: 57px;
	z-index: 10;
	top: 50%;
	margin-top: -22px;
	left: 50%;
	margin-left: -25px;
}
.txt{
	height: 100%;
	width: 100%;
	position: relative;
	z-index: 5;
	float: left;
	display: block;
}
</style>
</head>
<body>
<div class="col">
  <div class="blok">
  
    <span class="txt"><img src="kar.jpg" class="kar">
	xxxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxxx xxxx xxx xxxx xxxx xxxxxxx xxxxx xxxxxxx xxxxxxx xxxxx xxxxxxx xxxx xxxxxxxxxx	</span>	</div>
</div>
</body>
</html>

Спустя 8 минут, 37 секунд (14.05.2012 - 22:10) redreem написал(а):
скучно вам всем чтоли? из простой задачи раздули простыню smile.gif давайте лучше поговорим о смысле жизни! smile.gif

Спустя 15 минут, 54 секунды (14.05.2012 - 22:26) bodja написал(а):
sebastjan
поставь opacity:0.2 biggrin.gif
картинка не должна исчезать.
Блок не обязательно кликабельный - это просто анимашка загрузки нового контента аяксом будет.

redreem
Вот и покажите мастер-класс. biggrin.gif

Спустя 30 секунд (14.05.2012 - 22:26) sebastjan написал(а):
Пояснение

Спустя 1 минута, 6 секунд (14.05.2012 - 22:27) sebastjan написал(а):
о прозрачности не думал, задача была в позиционировании.
А что прозрачность ПНГ с фильтром для ИЕ не подходит?

Спустя 8 минут, 21 секунда (14.05.2012 - 22:36) bodja написал(а):
картинка находится внутри блока и спана ,если применить для них прозрачность ,она за ними тоже пойдет.
Такую тему замутить даже на яваскрите нелегко,так что на верстку можно забить.

Спустя 9 минут, 33 секунды (14.05.2012 - 22:45) sebastjan написал(а):
bodja
Честно говоря не понимаю.
Зачем гиф анимашке ещё и прозрачность?
Эффектами увлёкся.
сделай тогда проще всё на флешь, яваскрипт не перепрыгнет флешь эфекты, хоть и очень хочется.

Спустя 7 минут, 57 секунд (14.05.2012 - 22:53) bodja написал(а):
прозрачность нужна не гиф а контенту

Спустя 6 минут, 48 секунд (14.05.2012 - 23:00) redreem написал(а):
bodja

нафига вобще по вертикали позиционировать по центру блока? а если блок на 2 экрана? лоадер будет невиден! я как-то баловался ентим, а потом пришел к выводу что нафик лоадер на блок не нужен. его надо выводить гденибудь сбоку, какбы "довесок" к блоку. может около заголовка блока. ну так или иначе в каждом случае индивидуально надо решать где лоадер будет уместнее. и уж точно не по центру блока.

Спустя 1 минута, 15 секунд (14.05.2012 - 23:01) sebastjan написал(а):
А я и говорю ,увлёкся эффектами, почему тогда не можешь сделать на яваскрипт изменение цвета тексту к бг фону, будет имитация прозрачного исчезновения.
Хотя, всё это эффекты и не более, просто скрыл слой с текстом и всё.
Работа не пропорциональна выхлопу.

Спустя 1 минута, 19 секунд (14.05.2012 - 23:02) sebastjan написал(а):
redreem
biggrin.gif
А нафига- а нафига.
Так надо, батька сказал.

Спустя 41 минута, 43 секунды (14.05.2012 - 23:44) sebastjan написал(а):
Вообще то логичней гиф лоадер показывать вместо - к примеру кнопки загрузить.
Ну или какой то ссылки.
Просто по середине блока с текстом как то не впечатляет.

Тут в некотором смысле redreem прав. smile.gif
А исчезновение текста , думаю экономней сделать изменением бг самого текста к самому бг фону.
Хотя эффект не существенный, мало где применим.
пользователя не задевает.
Сижу и думаю, как такой эффект с плавным исчезновением эфективно можно было использовать в какой то концепции сайта
Пока не придумал.

Спустя 10 часов, 20 минут, 54 секунды (15.05.2012 - 10:05) bodja написал(а):
redreem&sebastjan

Если текст на 2 экрана,лоадера видно не будет,но будет видно ,что текст "тает",поэтому и сделал таяние.
Какой то концепции дизайна нет,нужна просто "реакция" на новую загрузку,
тоесть пока мы подгружаем данные ,видим "таяние" старого контента,типа развлекаем юзера biggrin.gif ,а так неизвестно нажали мы на кнопку или промахнулись или брузер затупил.
Изменение текста к фону не пойдет ,так как в контенте могут быть картинки ,плюс
расчитывать фон гораздо сложнее.
Гифку можно покрасивее поискать.

Ну а в целом ,то что есть меня пока устраивает.Я счас уже другое делаю.

Спустя 22 минуты, 34 секунды (15.05.2012 - 10:28) redreem написал(а):
так не тай его, а делай блоку slideUp до 20-30px, и суй в него лоадер.
контент может загрузиться гораздо быстрее чем таяние. у меня порой даже лоадер выскакивает на 0.1 сек, что его заметить не успеваешь просто. а это ожидание таяния после 2-й загрузки начнет раздражать юзера.

Спустя 47 минут, 12 секунд (15.05.2012 - 11:15) bodja написал(а):
redreem
Для эффекта slideUp нужно применять стиль clip ,а для clip нужно абсолютное позиционирование ,а при абсолютном позиционировании блок резиновым не будет,
опять нужно считать и извращатся. biggrin.gif
У меня будет таять до момента загрузки,все норм,ждать не будет ,если будет быстро грузится.

Спустя 1 час, 10 минут, 55 секунд (15.05.2012 - 12:26) redreem написал(а):
Цитата
Для эффекта slideUp нужно применять стиль clip


первый раз слышу. всегда работало для любого блока smile.gif

Спустя 16 минут, 58 секунд (15.05.2012 - 12:43) bodja написал(а):
redreem
Давай еще погрыземся за квери. biggrin.gif

Спустя 29 минут, 3 секунды (15.05.2012 - 13:12) redreem написал(а):
да мне то пофиг, беспокоился просто о заблуждении насчет clip smile.gif может это сильно облегчило бы жизнь smile.gif

Спустя 44 минуты, 38 секунд (15.05.2012 - 13:56) bodja написал(а):
redreem
Хотите сказать что на relative тоже пашет?
Где то у меня был затык с этим,толи на ИЕ,толи еще какая хрень,я уже не помню.

Спустя 4 минуты, 4 секунды (15.05.2012 - 14:00) redreem написал(а):
да с чего не пахать-то? это элементарная анимация высоты.

Спустя 35 минут, 58 секунд (15.05.2012 - 14:36) bodja написал(а):
ок,попробуем.

пока зацениваем формочку с ее появлением.(за диз не бить:))
Жмем кнопку "добавить комент"

Спустя 1 час, 1 минута, 27 секунд (15.05.2012 - 15:38) redreem написал(а):
вот если честно "исчезновение текста" давит на глаза. дискомфорт появляется.

Спустя 33 минуты, 30 секунд (15.05.2012 - 16:11) Игорь_Vasinsky написал(а):
вы чё это 3 страницы - картинку отцентровать не могёте?

Спустя 9 минут, 32 секунды (15.05.2012 - 16:21) sebastjan написал(а):
Игорь_Vasinsky
Вопоос из вёрстки перекочевал в плоскость эфекты biggrin.gif
Я самый лучший вариант центровки показал rolleyes.gif
Без всяких яваскрипт.
Я главный.

Спустя 6 минут, 41 секунда (15.05.2012 - 16:28) Игорь_Vasinsky написал(а):
респект. самое главное в вопросе центровке чего либо - это ни чего не центровать, чтоб не заморачиваться (С). ИМХО.

Спустя 8 минут, 57 секунд (15.05.2012 - 16:37) redreem написал(а):
sebastjan

я понимаю, что чистым CSS имеет смысл решать вопрос, если предполагается что JS вдруг будет отключен, но тут лоадер без JS вообще не появится smile.gif

Спустя 2 минуты, 12 секунд (15.05.2012 - 16:39) redreem написал(а):
Игорь_Vasinsky

24 секунды фтыкал что ты имелл ввиду, ибо у меня выставлено по "50 месаг на страницу"

Спустя 23 минуты, 27 секунд (15.05.2012 - 17:02) sebastjan написал(а):
redreem
Что то не понял?
Да какой там смысл ЦСС, просто до не могу, показал и картинку с пояснением.
минимум цсс, работает везде, никаких хаков, ни каких стилей под ИЕ.
Что мешает скрывать или показывать картинку прелоуда по ховеру в ЦСС.
Может я что то пропустил и не понял?
Эффекты с яваскрипт не рассматриваю, только позиционирование, 50% туда и минус половины размера обратно и всё.
расхождение может быть в 1рх при нечётном размере картинки.






Спустя 6 минут (15.05.2012 - 17:08) redreem написал(а):
а зачем прелоад по ховеру????
прелоад по клику вообще-то должен появляться.

Спустя 14 минут, 22 секунды (15.05.2012 - 17:23) sebastjan написал(а):
Зараза такая третий раз кнопаю, форум глюкнул и сообщение досведание.
Чем там показывать ховером или встроенным яваскрипт событием и изменением стиля - по любому писать отдельный скрипт не надо.
redreem
Давай про жизнь лучше расскажи smile.gif , тема уже исчерпала себя.
Будем сейчас из пустого в порожнее толкать.


Спустя 10 минут, 53 секунды (15.05.2012 - 17:33) redreem написал(а):
да прожизнь лень smile.gif
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2025 Invision Power Services, Inc.