![](https://htmlforum.dev/uploads/set_resources_18/84c1e40ea0e759e3f1505eb1788ddf3c_pattern.png)
bobchinskiy
-
Posts
14 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by bobchinskiy
-
-
Для этого используйте свойство 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, на маленьком разрешении эти картинки будут относительно дизайна слишком большими и наоборот? Разжуйте пожалуйста, как это всё в коде изобразить?
Текст поверх слайдер
in HTML Coding
Posted
Спасибо, откопал на хабре ответ
помогло