bobchinskiy

Спасибо, откопал на хабре ответ

помогло

margin: auto;   top: 50%; left: 50%;    -webkit-transform: translate(-50%,-50%);    -ms-transform: translate(-50%,-50%);        transform: translate(-50%,-50%);

Для этого используйте свойство position со значениями absolute и relative

<li>   <img src="путь к картинками" height="100%" width="100% alt="" />   <div>Ваш текст</div></li><li>   <img src="путь к картинками" height="100%" width="100% alt="image02" />   <div>Ваш текст</div></li><li>   <img src="путь к картинками"  height="100%" width="100%" />   <div>Ваш текст</div></li>

И стили (примерно)

li{    position:relative;}li div{    position:absolute;    top:0; /* отступ сверху */    left:0; /* отступ слева */}

И не надо выдумывать про кучу картинок (или у вас на хостинге место резиновое))))

Еще вопрос, есть отсуп , а мне нужно что-бы текст центрировался, обычным align-cetner не отделаться, если отступ в процентах указывать, то на разных разрещениях по разному, зависит от длины текса

Для этого используйте свойство position со значениями absolute и relative

<li>   <img src="путь к картинками" height="100%" width="100% alt="" />   <div>Ваш текст</div></li><li>   <img src="путь к картинками" height="100%" width="100% alt="image02" />   <div>Ваш текст</div></li><li>   <img src="путь к картинками"  height="100%" width="100%" />   <div>Ваш текст</div></li>

И стили (примерно)

li{    position:relative;}li div{    position:absolute;    top:0; /* отступ сверху */    left:0; /* отступ слева */}

И не надо выдумывать про кучу картинок (или у вас на хостинге место резиновое))))

Спасибо приспасибо) работает

Спасибо большое. Прийду домой попробую

Здравствуйте, у меня стоит такой слайдер на сайте Слайдер.

Подскажите как-то реально сделать текст поверх каждой картинки:?

Вот слайдер таким образом в HTML выводиться

<div class="sp-slideshow">							<input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />				<label for="button-1" class="button-label-1"></label>								<input id="button-2" type="radio" name="radio-set" class="sp-selector-2" />				<label for="button-2" class="button-label-2"></label>								<input id="button-3" type="radio" name="radio-set" class="sp-selector-3" />				<label for="button-3" class="button-label-3"></label>								<input id="button-4" type="radio" name="radio-set" class="sp-selector-4" />				<label for="button-4" class="button-label-4"></label>								<input id="button-5" type="radio" name="radio-set" class="sp-selector-5" />				<label for="button-5" class="button-label-5"></label>								<label for="button-1" class="sp-arrow sp-a1"></label>				<label for="button-2" class="sp-arrow sp-a2"></label>				<label for="button-3" class="sp-arrow sp-a3"></label>				<label for="button-4" class="sp-arrow sp-a4"></label>				<label for="button-5" class="sp-arrow sp-a5"></label>								<div class="sp-content">					<div class="sp-parallax-bg"></div>					<ul class="sp-slider clearfix">     <li><img src="путь к картинками" height="100%" width="100% alt="" /></li>     <li><img src="путь к картинками" height="100%" width="100% alt="image02" /></li><li><img src="путь к картинками"  height="100%" width="100%" /></li>								</ul>		</div>

Или подскажите такой вариант, сделать картинку под каждое к примеру от 800х600 до 1600х1200 разрешение и написать на ней текст, только подскажите как реализовать , что-бы под каждое разрешение открывалось те картинки что нужны?

думаю разница будет не большой, если конечно у вас не будут таблицы вложены в одну, и страница не будет объемной - в таком случае пока все таблицы не прогрузятся у вас будет белая страничка - это может занять от нескольких секунд до нескольких десятков секунд, в зависимости от скорости интернет соединения посетителя. Если на сайте не будет появляться ни какой информации в течении нескольких секунд, пользователю может расхотеться ходить по такому сайту. Из-за этого большинство переходит на блочную верстку.

спасибо большое, я то думал почему у меня пару секунд контент не появляеться 

но с другой стороны, не каждый сайт выполнить блоками? иногда таблица необходима, верно?

разница:

блок как правило грузится быстрее

<div></div>

таблица отображает содержимое немного иначе чем блок, и отображается только после полной ее загрузки, но имеет ряд преимуществ перед блоком

<table><tr><td></td></tr></table>

или можно превратить блок в таблицу, что может немного сократить код, и сделает ее семантической

каждый выбирает для себя реализацию ту, которая ему удобна

 

то-есть, если у меня будет сайт состоящий, к примеру из 10 таблиц и сайт сост из 10блоков, то сайт с таблицами будет намного дольше грузиться? или там не слишком большая разница?

В чем отличие в верстке блоками и таблицами? Почему сейчас почти никто не использует таблицы в шаблонах? Влияет ли это на скорость загрузки страницы? и Вообще?

ясно, спасибо

вы походу реально фигней занимаетесь.

если действительно новичек, то посмотрите эти курсы http://nnm-club.me/forum/viewtopic.php?t=598811

там ХОТЯ БЫ базовые вещи все поймете. если времени у вас много и девать его некуда изучайте верстку по книжкам или по статьям из интернета.

спасибо, за совет, но моя просьба остается в силе

Помогите пожалуйста, напишите в коде как должно выглядеть,  в css и если конечно найдется спаситель желательно и сразу html( я просто не до конца понимаю всех ньюансов, так мне будет понятнее).

Сайт трехколоночный резиновый, левавя колонка и правая - это фон( то есть сайт по сути сайт в одну колонку), и эту центральную основную колонку разделить на три блока - шапка, инфа и футер к примеру. в шапку мне нужно впихнуть к примеру такой градиент  и написать любой текст с левой части шапки, а по центру на этом градиенте у меня картинка должна быть. Как это должно выглядеть в css? 

//gradientbackground: #ff6e02; /* Old browsers */background: -moz-linear-gradient(left,  #ff6e02 0%, #ff9933 50%, #ff6e02 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff6e02), color-stop(50%,#ff9933), color-stop(100%,#ff6e02)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(left,  #ff6e02 0%,#ff9933 50%,#ff6e02 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left,  #ff6e02 0%,#ff9933 50%,#ff6e02 100%); /* Opera 11.10+ */background: -ms-linear-gradient(left,  #ff6e02 0%,#ff9933 50%,#ff6e02 100%); /* IE10+ */background: linear-gradient(to right,  #ff6e02 0%,#ff9933 50%,#ff6e02 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6e02', endColorstr='#ff6e02',GradientType=1 ); /* IE6-9 */

кому не сложно помогите разобраться, если кто на примере мне покажет, то до меня может быть дойдет)  спасибо

если высота блока с фоновой картинкой фиксированая, то можно использовать центрирование по горизонтали background-position:center; , по вертикали по усмотрению;

если высота уменьшается при сужении экрана то использовать можно background-size:cover; а можно и первый вариант.  все зависит от конкретной ситуации.

сайт нужно видеть чтобы сказать точно, и я мог еще не до конца понять вас.

вот примерно такое

Пример сайта

Макет простой и здоровский, а фикс ширина какая?

Здравствуйте. Начал писать шаблон для сайта с нуля (до этого только переделывал под себя).

Ну и естественно столкнулся с проблемой разрешений. Я понимаю что куча инфы в нете, но не могли бы вы мне индивидуально помочь, я плохо разбираюсь в ксс еще и поэтому если бы мне кто-то показал именно с моим примером было бы здорово.

Собственно, Сайт состоит из Одной колонки, то-есть как лендинг пейдж и по бокам фон.

Как сделать в принципе это понятно. Но у меня возник вопрос, что делать с картинками, в частонсти с шапкой?

Как поступить? Размеры картинок указывать в проценте? Я вот тут уже не совсем разбираюсь. Как сделать к примеру самое большое разрешение и что бы эти картинки подстравиволись под друг разрешения?

Если в ширину еще более не менее понятно, то что делать с высотой картинок, их тоже в процентах указывать?

Еще у меня идет блок далее с превью картинками, к примеру 100px на 100px, на маленьком разрешении эти картинки будут относительно дизайна слишком большими и наоборот? Разжуйте пожалуйста, как это всё в коде изобразить?