Вёрсточный кретинизм: Как растянуть на весь родительский ? | PHPClub
xintrea
Новичок
- #1
Есть примитивный код:
Код:
...
<td>
<a href="<? echo $backUrl ?>">
<div>Взад</div>
</a>
</td>
...Вопрос. Как вот этот вложенный <DIV> с надписью «Взад» растянуть на весь размер ячейки <TD>?
Redjik
Джедай-мастер
- #2
width:100%
xintrea
Новичок
- #3
Redjik написал(а):
width:100%
Нажмите для раскрытия.
..
По ширине он и так растягивается. по высоте не хочет.
Redjik
Джедай-мастер
- #4
td a{
display:block;
width:100%;
height:100%
}
ты пытаешься всунуть блочный элемент внтурь инлайнового
флоппик
promotor fidei
- #5
Redjik, точка не нужна.
Redjik
Джедай-мастер
- #6
флоппик написал(а):
Redjik, точка не нужна.
Нажмите для раскрытия…
ага — поправил
xintrea
Новичок
- #7
Redjik написал(а):
td a{
display:block;
width:100%;
height:100%
}ты пытаешься всунуть блочный элемент внтурь инлайнового
Нажмите для раскрытия.
..
Добавил эти стили для моего <a>. Ситуация та же самая.
hell0w0rd
Продвинутый новичок
- #8
xintrea написал(а):
Добавил эти стили для моего <a>. Ситуация та же самая.
Нажмите для раскрытия…
Высота в процентах всегда должна от чего-то отталкиваться.
Ты для чего-то должен задать статическую высоту
И писать стили инлайн — ЗЛО!
Redjik
Джедай-мастер
- #9
найми верстака
Redjik
Джедай-мастер
- #10
GusakovNick написал(а):
Высота в процентах всегда должна от чего-то отталкиваться.
![]()
Ты для чего-то должен задать статическую высотуНажмите для раскрытия…
нет
hell0w0rd
Продвинутый новичок
- #11
Redjik написал(а):
нет
Нажмите для раскрытия…
Что нет? Проценты отталкиваются от процентов?
Redjik
Джедай-мастер
- #12
покажи минимальный код, где подтверждаются твои слова — без резета и position:absolute
hell0w0rd
Продвинутый новичок
- #13
Redjik написал(а):
покажи минимальный код, где подтверждаются твои слова — без резета и position:absolute
Нажмите для раскрытия.
..
PHP:
<html>
<head>
<style type="text/css">
*{
outline: 1px solid red;
padding: 5px;
}
td{
/*height: 100px;*/
background: darkseagreen;
}
.test{
height: 150%;
background: orange;
}
</style>
</head>
<body>
<table>
<tr>
<td><div>Привет мир!</div></td>
</tr>
</table>
</body>Раскоменть размер и увидишь о чем я говорю.
Redjik
Джедай-мастер
- #14
Ты для чего-то должен задать статическую высоту
Нажмите для раскрытия.
..
нет
PHP:
<html>
<head>
<style type="text/css">
table{
height:100%;
width:100%;
}
td{
background: darkseagreen;
}
.test{
height: 50%;
background: orange;
}
</style>
</head>
<body>
<table>
<tr>
<td><div></div></td>
</tr>
</table>
</body>
</html>Проценты отталкиваются от процентов?
Нажмите для раскрытия…
именно — твой пример только паддингами с толку сбивает, ты проценты от 0 считаешь… и этот 0 задан по дефолту браузером…
Я понимаю о чем ты — но формулировки твои не верны.
hell0w0rd
Продвинутый новичок
- #15
Redjik
Да, но ты тут таблице установил размеры.
не важно что значит относительно остального контента эти размеры, но теперь внутренности будут отталкиваться от размера таблицы, который уже расчитан.
Я больше доверяю вот http://events.yandex.ru/events/shri/msk-2012/talks/561/ этому докладу В начале ясно рассказывается о том, что нужно родителю задать размер, и только потом проценты начнут работать)
ТС советую посмотреть весь курс. Думаю любой найдет для себя что-то интересное)
Фон — Backgorund для сайтов — Online сервисы
Backgorund — один из первых элементов дизайна сайта. Создание фона для сайта должно происходить в совокупной прорисовке всего дизайна в графическом редакторе.
Но иногда бывают случаи, когда срочно нужна фоновая подложка. Для таких случаев и для новичков в веб дизайне предлагаю подборку online сервисов по фонам (Backgorund).
Генераторы фонов:
http://www.stripegenerator.com/ — Один из самых известных «генераторов полос».
http://www.stripemania.com/ — Для поклонников полосок.
http://www.tartanmaker.com/ — Генерирует достаточно необычные узоры.
http://www.ogim.4u2ges.com/gradient-image-maker.asp — Хороший редактор фона.
http://secretgeek.net/GradientMaker.asp — Простой редактор фоновых подложек.
http://lab.rails2u.com/bgmaker/ — фон из вашей картинки
http://www.tilemachine.com/ — Редактор + База фонов.
http://bgmaker.ventdaval.com/ — Пиксельный редактор в реальном времени. (удобно)
http://bgpatterns.com/ — Фоны из иконок.
http://www.colourlovers.com/patterns/add — Редактор красивых фонов
http://stripedbgs.com/ — Очень простой редактор фонов
http://www.pixelknete.de/dotter/ — Редактор с просмотром фона
http://mudcu.be/bg/ — цветной генератор
http://repperpatterns.com/tool/ — мультяшные bg
Базы готовых фонов:
http://www.patterncooler.com/ — Отличный выбор фонов.
http://www.dinpattern.com/ — База фонов.
http://patterns.ava7.com/ — Удобная база с фильтром цветам и узорам.
http://thedesigninspiration.com/category/patterns/ — Большая база фонов
http://browse.deviantart.com/resources/applications/patterns/ — Есть интересные фоны.
http://www.colourlovers.com/patterns — База «бесконечных» фонов.
http://everydayicons.jp/patterns.html — Небольшая подборка хороших фонов.
http://www.squidfingers.com/patterns/ — Бесконечные узорные фоны.
http://alice-grafixx.de/patterns — База разнообразных фонов.
http://www.kollermedia.at/pattern4u/ — Фоны по жанрам узоров.
http://donbarnett.com/tiles/tile.htm — Оригинальный сайт с оригинальными фонами.
http://www.pixeldecor.com/patterns.shtml — Небольшая подборка фонов.
http://patterrific.com/category/patterns/ — База Бэкграундов
http://www.noqta.it/dromoscopio/ — База фонов для сайта
http://www.portfelia.com/ — база фонов
http://www.brusheezy.com/patterns — Backgorund для сайты
http://www.
stm.dp.ua/web-design/color-site.html — Однотонный цветовой фон
http://subtlepatterns.com/ — хороший набор паттернов
http://hotbliggityblog.com/ — фоны для блогов
http://patternhead.com/ — небольшая база фонов
http://lostandtaken.com/gallery — Платные и Бесплатные фоны
Базы видео фонов:
www.videvo.net
www.lifeofvids.com
www.videezy.com/browse
www.stockfootageforfree.com
www.xstockvideo.com
www.vidsplay.com
www.clipcanvas.com/free-footage
www.motionelements.com/free/stock-footage
www.wedistill.io
www.mazwai.com
www.minimoovie.ru
Background в CSS
Свойство background позволяет установить одновременно до пяти характеристик фона: background: [background-attachment || background-color || background-image || background-position || background-repeat] | inherit
background-attachment — привязка. По умолчанию задано scroll — фон перемещается при прокрутке вместе со страничкой.
Можно зафиксировать его, задав fixed.
background-color — цвет фона. Выбирается из обычной палитры цветов;
background-image — картинка для фона. Указывается адрес файла изображения;
background-position — расположение фонового рисунка: в центре, слева, справа, снизу или сверху.
background-repeat — повторение выбранной картинки.
background-size, появившееся в css3. позволяет растянуть фоновое изображение до нужного размера (можно задавать значения в пикселях, в процентах от контейнера, чьим фоном оно является, «уместить» его в данный контейнер (cover), а также растянуть по высоте или ширине контейнера(contain).
«Если с фоновыми изображениями требуется задать цвет фона , он указывается в последнюю очередь.»
И на по следок рекомендации по background
0) Используйте оригинальные (не cкаченные) фоны для сайта
1) Фон должен сочетаться со всеми элементами сайта (ваш кэп)
2) Не используйте яркие, ядовитые цвета фона.
3) Не используйте сложный рисунок.
4) Шрифт на фоне должен быть читабельным и не напрягать зрение пользователя.
5) Совсем не знаете какой фон выбрать? — оставьте белый — это классика (или светлые тона).
6) Цвет фона должен успокаивать зрения, (или хотя бы не напрягать его).
7) Фон не должен отвлекать на себя много внимания от содержания (сверх красивый или необычный рисунок — не вариант для фона).
8) Не используйте анимированный фон! — нет, нет это не красиво. Да я знаю о чем говорю =)
9) Используйте простой, но оригинальный фон, который позволит легко воспринимать контент сайта.
P.S: От фона зависит половина восприятия юзерами всего сайта, отнеситесь к выбору фона должным образом, удачи.
как растянуть фоновое изображение в css
Если вы хотите поместить любое изображение на задний план, это довольно просто. Если вы хотите сфокусироваться на какой-то точке изображения, которая немного усложняет код CSS. Если вы хотите манипулировать размером, это более сложно.
Учитывая, что ни одно изображение не может соответствовать всем размерам экрана.
Рассмотрим случай изменения размера фонового изображения в теле (во весь экран) и внутри контейнера.
Чтобы понять размеры, мы всегда будем брать положение изображения в качестве центра. Это можно изменить в зависимости от изображения.
Установка размера фона в полноэкранном окне.
Мы сделаем тело 100%, чтобы можно было использовать изображение. Вот как выглядит базовый HTML:
<голова>голова> <тело>тело>
Часть стиля будет иметь только сброс HTML и основного текста, а также фоновое изображение с центральным положением и без повторений:
HTML, тело {
высота: 100%;
маржа: 0;
заполнение: 0;
}
тело{
фон: url(earhy-lady.jpg) центр без повторов;
} Это просто выведет изображение в теле. Не очень убедительно, верно?
Пример редактирования
Это связано с тем, что фоновое изображение имеет масштаб по умолчанию.
Мы можем захотеть изменить его размер, чтобы он выглядел хорошо, по крайней мере, на рабочем столе. Вот как это выглядит после использования размера фона.
/* Изображение будет увеличено до полной ширины */
тело{
размер фона: обложка;
}
Редактировать пример
Мы можем подогнать его под высоту, изменив код следующим образом:
/* Это изменит размер изображения до полной высоты */
тело{
размер фона: содержит;
} Пример редактирования
Использование полноразмерных или полноразмерных изображений не является идеальным. Это идеально подходит для фоновых изображений, где можно обрезать изображение в некоторых точках.
Мы можем установить свойство background-position в то место, где мы хотим установить фокус при изменении размера области просмотра.
Фиксированный и процентный размер фонового изображения:
Фоновый размер может иметь фиксированный или процентный размер. Это позволит растянуть изображение.
Любите это, ненавидьте это, есть метод, чтобы нарушить соотношение сторон, если вы хотите его использовать. Это не всегда хорошо выглядит.
Мы просто попробуем управлять шириной фона, чтобы продемонстрировать, как это работает. Это нарушит соотношение сторон.
/* Это изменит размер изображения на 400 пикселей по оси x и на 200 пикселей по оси y */
тело{
размер фона: 400 пикселей 200 пикселей;
} Пример редактирования
Это можно сделать как по оси X, так и по оси Y.
/* Это изменит размер изображения на 400 пикселей по оси Y и на 200 пикселей по оси X */
тело{
размер фона: 200 пикселей 400 пикселей;
} Пример редактирования
Что делать, если мы хотим изменить размер фонового изображения внутри контейнера?
Все методы, которые применимы к телу, глобально применимы для любого элемента, например набора логотипов. Возможно, нам придется использовать размер в процентах, чтобы изображения, такие как логотипы, не обрезались из-за размера фона.
Основное правило изменения размера изображения выглядит так:
/* Настройка базовой сетки */
.logo-контейнер{
дисплей: сетка;
сетка-столбец-шаблон: 1fr 1fr;
зазор сетки: 10px;
}
.лого{
размер фона: авто 70%;
} Этот размер подойдет, учитывая, что большинство логотипов имеют прямоугольное соотношение. Лужи с портретным размером будут обрезаны из-за размера в направлении x.
Пример редактирования
Для большего количества портретных изображений нам просто нужно использовать лучший размер фона. Высота будет больше 70%, чтобы в поле было полное изображение.
.лого{
размер фона: 70% авто;
} Это приведет к следующему выводу.
Пример редактирования
Фото Саджада Нори, Омида Армина на Unsplash
https://unsplash.com/photos/ceoOtd3U5zs
https://unsplash.com/photos/_8rh7LPA4mE
Подойдут ли эти размеры для адаптивных макетов?
ответ зависит. Если оно содержится в каком-то контейнере, сохраняющем соотношение сторон, изображение будет хорошо выглядеть на всех устройствах.
Однако, если изображение используется в качестве украшения фона, оно может быть обрезано в зависимости от размера области просмотра.
Растянутый фон и множественный фон — HTML и CSS — Форумы SitePoint
бхакундай 1
Здравствуйте,
Как разместить несколько фонов? Я попробовал способ w3school, но не получилось. Также я хотел бы знать, как можно растянуть фоновое изображение, чтобы оно соответствовало любому разрешению, например, на twitter.com.
Заранее спасибо.
ПолОБ 2
Вам придется быть более конкретным, так как вопрос довольно неоднозначный.
Если вы говорите об изображении облака в твиттере, то это просто большое изображение, которое можно повторять по мере необходимости.
Растяжки как таковой нет.
Вы можете растягивать фоновые изображения с помощью background-size в браузерах с поддержкой css3, а также использовать [URL=»http://www.css3.info/preview/multiple-backgrounds/»]несколько фоновых изображений для одного и того же элемента, но вы необходимо [URL=»http://caniuse.com/»]проверить поддержку.
Нам нужно знать больше о том, что вы хотите помочь
bhakunday 3
Не облако twitter.com. Я говорил о bg-изображении на главной странице twitter.com. У меня код
#bgwrap{
фон: url(../img/bg1.jpg) без повтора 0px 0px;
размер фона: обложка;
минимальная ширина: 960 пикселей;
максимальная высота: 700 пикселей;
}
Размер фона: обложка; было достаточно хорошо, но когда я уменьшаю масштаб, изображение остается таким же. Не лучше бы бг-изображение тоже уменьшилось в размерах(но да пропорционально с другими элементами )
PS: Размер изображения 1600х1020
PaulOB 4
Привет,
«Обложка» гарантирует, что изображение всегда покрывает доступное пространство, но даже если вы уменьшите масштаб, фон по-прежнему будет шириной 100%, поэтому он не может ничего сделать больше, чем он уже делает без части изображения. пропадает. Вам нужно будет установить ширину или максимальную ширину, чтобы масштабирование работало правильно.
#bgwrap{
фон: url(../img/bg1.jpg) без повтора 0px 0px;
размер фона: обложка;
минимальная ширина: 960 пикселей;
максимальная высота: 700 пикселей;
[B]максимальная ширина:1260 пикселей;[/B]
}
бхакундай 5
У меня возникла проблема с установкой max-width:1260px; потому что при разрешении 1366 фоновое изображение помещается с одной стороны (слева) при уменьшении масштаба.
Я обнаружил, что при использовании нескольких фонов с сокращением «фон» я не мог установить цвет для каждого фона. Есть ли какая-то причина или я ошибаюсь в этом?
ронпат 6
Разве стенография не прекрасна? Сокращение фона применяет значения по умолчанию для тех, которые не указаны. Фоновый цвет является одним из них. Предполагая, что вы хотите, чтобы за всеми фоновыми изображениями был один и тот же цвет, вы можете либо применить фоновые изображения, используя метод «от руки» (поэтому цвет фона по умолчанию не применяется), ИЛИ применить от руки «цвет фона: # hex» как последний элемент в каскаде «background:», ИЛИ просто примените цвет фона в каждом из сокращений.
бхакундай

..
..
..
..